Day Time Picker

import {useState} from 'react';
import {DAYS_OF_WEEK, DaypartPicker, ScheduleGrid, SchedulePresets, type HourRange, type ScheduleValue} from '@stroeer-labs/design-library/react';

function week(time: ReadonlyArray<HourRange>): ScheduleValue {
    return DAYS_OF_WEEK.map((day) => ({day, time}));
}

function describe(value: ScheduleValue): string {
    if (value.length === 0) {
        return 'nothing selected';
    }
    return value.map((entry) => `${entry.day.slice(0, 3)} ${entry.time.map((range) => `${range.from}–${range.to}`).join(', ')}`).join(' · ');
}

export function DayTimePickerDemo() {
    const [uniform, setUniform] = useState<ScheduleValue>(() =>
        week([
            {from: 6, to: 10},
            {from: 18, to: 22},
        ]),
    );
    const [shared, setShared] = useState<ScheduleValue>(() => DAYS_OF_WEEK.slice(0, 5).map((day) => ({day, time: [{from: 8, to: 18}]})));

    return (
        <div className="space-y-8">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Daypart picker</p>
                <DaypartPicker value={uniform} onValueChange={setUniform} />
                <p className="text-xs tabular-nums text-muted-foreground">{describe(uniform)}</p>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Schedule grid — presets above, drag to paint</p>
                <SchedulePresets value={shared} onValueChange={setShared} />
                <ScheduleGrid value={shared} onValueChange={setShared} />
                <p className="text-xs tabular-nums text-muted-foreground">{describe(shared)}</p>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Disabled</p>
                <DaypartPicker value={week([{from: 6, to: 10}])} onValueChange={() => undefined} disabled />
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component, signal} from '@angular/core';
import {DAYS_OF_WEEK, DayTimePickerImports, type HourRange, type ScheduleValue} from '@stroeer-labs/design-library/angular';

function week(time: ReadonlyArray<HourRange>): ScheduleValue {
    return DAYS_OF_WEEK.map((day) => ({day, time}));
}

@Component({
    selector: 'dl-day-time-picker-demo',
    standalone: true,
    imports: [DayTimePickerImports],
    template: `
    <div class="space-y-8">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Daypart picker</p>
        <dl-daypart-picker [(value)]="uniform" />
        <p class="text-xs tabular-nums text-muted-foreground">{{ describe(uniform()) }}</p>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Schedule grid — presets above, drag to paint</p>
        <dl-schedule-presets [(value)]="shared" />
        <dl-schedule-grid [(value)]="shared" />
        <p class="text-xs tabular-nums text-muted-foreground">{{ describe(shared()) }}</p>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Disabled</p>
        <dl-daypart-picker [value]="disabledValue" [disabled]="true" />
      </div>
    </div>
  `,
})
export class DayTimePickerDemoComponent {
    protected readonly uniform = signal<ScheduleValue>(
        week([
            {from: 6, to: 10},
            {from: 18, to: 22},
        ]),
    );
    protected readonly shared = signal<ScheduleValue>(DAYS_OF_WEEK.slice(0, 5).map((day) => ({day, time: [{from: 8, to: 18}]})));
    protected readonly disabledValue = week([{from: 6, to: 10}]);

    protected describe(value: ScheduleValue): string {
        if (value.length === 0) {
            return 'nothing selected';
        }
        return value.map((entry) => `${entry.day.slice(0, 3)} ${entry.time.map((range) => `${range.from}–${range.to}`).join(', ')}`).join(' · ');
    }
}