@semantic-components/ui 0.65.0 → 0.66.0

package/esm2022/lib/components/button-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,mBAAmB,GAEpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,sBAAsB,GAEvB,MAAM,0BAA0B,CAAC","sourcesContent":["export {\n  ScButtonGroup,\n  buttonGroupVariants,\n  type ScButtonGroupVariants,\n} from './button-group';\nexport { ScButtonGroupText } from './button-group-text';\nexport {\n  ScButtonGroupSeparator,\n  type ButtonGroupSeparatorOrientation,\n} from './button-group-separator';\n"]}

package/esm2022/lib/components/calendar/calendar-day-view.js

@@ -0,0 +1,323 @@
+import { ChangeDetectionStrategy, Component, computed, input, output, viewChildren, signal, ViewEncapsulation, } from '@angular/core';
+import { Grid, GridRow, GridCell, GridCellWidget } from '@angular/aria/grid';
+import { cn } from '../../utils';
+import { Temporal } from '@js-temporal/polyfill';
+import * as i0 from "@angular/core";
+export class ScCalendarDayView {
+    _dayButtons = viewChildren(GridCellWidget, ...(ngDevMode ? [{ debugName: "_dayButtons" }] : []));
+    viewDate = input.required(...(ngDevMode ? [{ debugName: "viewDate" }] : []));
+    mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : []));
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = input([], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    dateSelected = output();
+    monthScrollUp = output();
+    monthScrollDown = output();
+    weekDays = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], ...(ngDevMode ? [{ debugName: "weekDays" }] : []));
+    weeks = computed(() => {
+        const date = this.viewDate();
+        const year = date.year;
+        const month = date.month;
+        const firstDay = new Temporal.PlainDate(year, month, 1);
+        const daysInMonth = firstDay.daysInMonth;
+        // dayOfWeek: 1=Mon..7=Sun; %7 gives 0=Sun like JS Date.getDay()
+        const firstDayOfWeek = firstDay.dayOfWeek % 7;
+        const days = [];
+        let currentWeek = [];
+        // Add days from previous month to fill the first week
+        for (let i = 0; i < firstDayOfWeek; i++) {
+            const prevDate = firstDay.subtract({ days: firstDayOfWeek - i });
+            currentWeek.push(this.createDayInfo(prevDate, true));
+        }
+        // Add days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const currentDate = new Temporal.PlainDate(year, month, day);
+            currentWeek.push(this.createDayInfo(currentDate, false));
+            if (currentWeek.length === 7) {
+                days.push(currentWeek);
+                currentWeek = [];
+            }
+        }
+        // Add days from next month to fill the last week
+        if (currentWeek.length > 0) {
+            const nextMonthFirst = firstDay.add({ months: 1 });
+            let nextDay = 0;
+            while (currentWeek.length < 7) {
+                const nextDate = nextMonthFirst.add({ days: nextDay++ });
+                currentWeek.push(this.createDayInfo(nextDate, true));
+            }
+            days.push(currentWeek);
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "weeks" }] : []));
+    createDayInfo(date, isOutsideMonth) {
+        const today = Temporal.Now.plainDateISO();
+        const isToday = date.equals(today);
+        const disabled = this.isDateDisabled(date);
+        return {
+            date,
+            isToday,
+            isOutsideMonth,
+            disabled,
+            selected: signal(this.isSelected(date)),
+        };
+    }
+    isDateDisabled(date) {
+        const disabledDates = this.disabled();
+        const min = this.minDate();
+        const max = this.maxDate();
+        if (min && Temporal.PlainDate.compare(date, min) < 0)
+            return true;
+        if (max && Temporal.PlainDate.compare(date, max) > 0)
+            return true;
+        return disabledDates.some((d) => d.equals(date));
+    }
+    getRange() {
+        return (this.value() ?? {
+            from: undefined,
+            to: undefined,
+        });
+    }
+    isSelected(date) {
+        const mode = this.mode();
+        if (mode === 'single') {
+            const selected = this.value();
+            return selected ? date.equals(selected) : false;
+        }
+        if (mode === 'multiple') {
+            const dates = this.value() ?? [];
+            return dates.some((d) => date.equals(d));
+        }
+        if (mode === 'range') {
+            const range = this.getRange();
+            if (range.from && date.equals(range.from))
+                return true;
+            if (range.to && date.equals(range.to))
+                return true;
+            if (range.from &&
+                range.to &&
+                Temporal.PlainDate.compare(date, range.from) > 0 &&
+                Temporal.PlainDate.compare(date, range.to) < 0)
+                return true;
+        }
+        return false;
+    }
+    isRangeStart(date) {
+        if (this.mode() !== 'range')
+            return false;
+        const range = this.getRange();
+        return range.from ? date.equals(range.from) : false;
+    }
+    isRangeEnd(date) {
+        if (this.mode() !== 'range')
+            return false;
+        const range = this.getRange();
+        return range.to ? date.equals(range.to) : false;
+    }
+    isRangeMiddle(date) {
+        if (this.mode() !== 'range')
+            return false;
+        const range = this.getRange();
+        if (!range.from || !range.to)
+            return false;
+        return (Temporal.PlainDate.compare(date, range.from) > 0 &&
+            Temporal.PlainDate.compare(date, range.to) < 0);
+    }
+    getDayClass(day) {
+        const isSelectedDay = this.isSelected(day.date);
+        const isRangeMiddleDay = this.isRangeMiddle(day.date);
+        return cn('inline-flex size-9 items-center justify-center rounded-md text-sm font-normal', 'ring-offset-background transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'hover:bg-accent hover:text-accent-foreground', 'disabled:pointer-events-none disabled:opacity-50', day.isToday && !isSelectedDay && 'bg-accent text-accent-foreground', isSelectedDay &&
+            !isRangeMiddleDay &&
+            'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground', isRangeMiddleDay && 'bg-accent text-accent-foreground rounded-none', day.isOutsideMonth && 'text-muted-foreground opacity-50', day.disabled && 'text-muted-foreground opacity-50');
+    }
+    handleDateClick(date) {
+        this.dateSelected.emit(date);
+    }
+    handleKeyDown(event) {
+        const day = Number(event.target.getAttribute('data-day'));
+        if (!day)
+            return;
+        const viewDate = this.viewDate();
+        const daysInMonth = viewDate.daysInMonth;
+        // Only handle edge cases where we need to scroll to prev/next month
+        if (day > 7 && day <= daysInMonth - 7)
+            return;
+        const arrowLeft = event.key === 'ArrowLeft';
+        const arrowRight = event.key === 'ArrowRight';
+        const arrowUp = event.key === 'ArrowUp';
+        const arrowDown = event.key === 'ArrowDown';
+        if ((day === 1 && arrowLeft) || (day <= 7 && arrowUp)) {
+            this.scrollUp();
+        }
+        if ((day === daysInMonth && arrowRight) ||
+            (day > daysInMonth - 7 && arrowDown)) {
+            this.scrollDown();
+        }
+    }
+    scrollDown() {
+        this.monthScrollDown.emit();
+        setTimeout(() => this._dayButtons()[0]?.element.focus());
+    }
+    scrollUp() {
+        this.monthScrollUp.emit();
+        setTimeout(() => this._dayButtons()[this._dayButtons().length - 1]?.element.focus());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScCalendarDayView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScCalendarDayView, isStandalone: true, selector: "[scCalendarDayView]", inputs: { viewDate: { classPropertyName: "viewDate", publicName: "viewDate", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, weekDays: { classPropertyName: "weekDays", publicName: "weekDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", monthScrollUp: "monthScrollUp", monthScrollDown: "monthScrollDown" }, viewQueries: [{ propertyName: "_dayButtons", predicate: GridCellWidget, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <table
+      ngGrid
+      tabindex="0"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="nowrap"
+      [enableSelection]="mode() !== 'multiple'"
+      selectionMode="explicit"
+      (keydown)="handleKeyDown($event)"
+    >
+      <thead>
+        <tr class="flex">
+          @for (day of weekDays(); track day) {
+            <th
+              scope="col"
+              class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground"
+            >
+              {{ day }}
+            </th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (week of weeks(); track $index) {
+          <tr ngGridRow class="mt-2 flex w-full">
+            @for (day of week; track day?.date?.toString() ?? $index) {
+              @if (day) {
+                <td
+                  ngGridCell
+                  class="relative p-0 text-center text-sm"
+                  [disabled]="day.disabled || day.isOutsideMonth"
+                  [(selected)]="day.selected"
+                >
+                  <button
+                    ngGridCellWidget
+                    type="button"
+                    [class]="getDayClass(day)"
+                    [attr.aria-label]="
+                      day.date.toLocaleString('en-US', {
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric',
+                      })
+                    "
+                    [attr.data-today]="day.isToday || null"
+                    [attr.data-selected]="isSelected(day.date) || null"
+                    [attr.data-outside]="day.isOutsideMonth || null"
+                    [attr.data-disabled]="day.disabled || null"
+                    [attr.data-range-start]="isRangeStart(day.date) || null"
+                    [attr.data-range-end]="isRangeEnd(day.date) || null"
+                    [attr.data-range-middle]="isRangeMiddle(day.date) || null"
+                    [attr.data-day]="day.date.day"
+                    (click)="handleDateClick(day.date)"
+                  >
+                    {{ day.date.day }}
+                  </button>
+                </td>
+              } @else {
+                <td
+                  ngGridCell
+                  class="relative p-0 text-center text-sm"
+                  disabled
+                >
+                  <span class="size-9"></span>
+                </td>
+              }
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Grid, selector: "[ngGrid]", inputs: ["enableSelection", "disabled", "softDisabled", "focusMode", "rowWrap", "colWrap", "multi", "selectionMode", "enableRangeSelection"], exportAs: ["ngGrid"] }, { kind: "directive", type: GridRow, selector: "[ngGridRow]", inputs: ["rowIndex"], exportAs: ["ngGridRow"] }, { kind: "directive", type: GridCell, selector: "[ngGridCell]", inputs: ["id", "role", "rowSpan", "colSpan", "rowIndex", "colIndex", "disabled", "selected", "selectable", "orientation", "wrap", "tabindex"], outputs: ["selectedChange"], exportAs: ["ngGridCell"] }, { kind: "directive", type: GridCellWidget, selector: "[ngGridCellWidget]", inputs: ["id", "widgetType", "disabled", "focusTarget", "tabindex"], outputs: ["onActivate", "onDeactivate"], exportAs: ["ngGridCellWidget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScCalendarDayView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scCalendarDayView]',
+                    imports: [Grid, GridRow, GridCell, GridCellWidget],
+                    template: `
+    <table
+      ngGrid
+      tabindex="0"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="nowrap"
+      [enableSelection]="mode() !== 'multiple'"
+      selectionMode="explicit"
+      (keydown)="handleKeyDown($event)"
+    >
+      <thead>
+        <tr class="flex">
+          @for (day of weekDays(); track day) {
+            <th
+              scope="col"
+              class="w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground"
+            >
+              {{ day }}
+            </th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (week of weeks(); track $index) {
+          <tr ngGridRow class="mt-2 flex w-full">
+            @for (day of week; track day?.date?.toString() ?? $index) {
+              @if (day) {
+                <td
+                  ngGridCell
+                  class="relative p-0 text-center text-sm"
+                  [disabled]="day.disabled || day.isOutsideMonth"
+                  [(selected)]="day.selected"
+                >
+                  <button
+                    ngGridCellWidget
+                    type="button"
+                    [class]="getDayClass(day)"
+                    [attr.aria-label]="
+                      day.date.toLocaleString('en-US', {
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric',
+                      })
+                    "
+                    [attr.data-today]="day.isToday || null"
+                    [attr.data-selected]="isSelected(day.date) || null"
+                    [attr.data-outside]="day.isOutsideMonth || null"
+                    [attr.data-disabled]="day.disabled || null"
+                    [attr.data-range-start]="isRangeStart(day.date) || null"
+                    [attr.data-range-end]="isRangeEnd(day.date) || null"
+                    [attr.data-range-middle]="isRangeMiddle(day.date) || null"
+                    [attr.data-day]="day.date.day"
+                    (click)="handleDateClick(day.date)"
+                  >
+                    {{ day.date.day }}
+                  </button>
+                </td>
+              } @else {
+                <td
+                  ngGridCell
+                  class="relative p-0 text-center text-sm"
+                  disabled
+                >
+                  <span class="size-9"></span>
+                </td>
+              }
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { _dayButtons: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => GridCellWidget), { isSignal: true }] }], viewDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewDate", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], monthScrollUp: [{ type: i0.Output, args: ["monthScrollUp"] }], monthScrollDown: [{ type: i0.Output, args: ["monthScrollDown"] }], weekDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekDays", required: false }] }] } });
+//# sourceMappingURL=calendar-day-view.js.map

package/esm2022/lib/components/calendar/calendar-day-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-day-view.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/calendar/calendar-day-view.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n  viewChildren,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { Grid, GridRow, GridCell, GridCellWidget } from '@angular/aria/grid';\nimport { cn } from '../../utils';\nimport { Temporal } from '@js-temporal/polyfill';\nimport { ScCalendarValue, ScDateRange } from './calendar';\n\ninterface DayInfo {\n  date: Temporal.PlainDate;\n  isToday: boolean;\n  isOutsideMonth: boolean;\n  disabled: boolean;\n  selected: ReturnType<typeof signal<boolean>>;\n}\n\n@Component({\n  selector: '[scCalendarDayView]',\n  imports: [Grid, GridRow, GridCell, GridCellWidget],\n  template: `\n    <table\n      ngGrid\n      tabindex=\"0\"\n      class=\"w-full border-collapse\"\n      colWrap=\"continuous\"\n      rowWrap=\"nowrap\"\n      [enableSelection]=\"mode() !== 'multiple'\"\n      selectionMode=\"explicit\"\n      (keydown)=\"handleKeyDown($event)\"\n    >\n      <thead>\n        <tr class=\"flex\">\n          @for (day of weekDays(); track day) {\n            <th\n              scope=\"col\"\n              class=\"w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground\"\n            >\n              {{ day }}\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (week of weeks(); track $index) {\n          <tr ngGridRow class=\"mt-2 flex w-full\">\n            @for (day of week; track day?.date?.toString() ?? $index) {\n              @if (day) {\n                <td\n                  ngGridCell\n                  class=\"relative p-0 text-center text-sm\"\n                  [disabled]=\"day.disabled || day.isOutsideMonth\"\n                  [(selected)]=\"day.selected\"\n                >\n                  <button\n                    ngGridCellWidget\n                    type=\"button\"\n                    [class]=\"getDayClass(day)\"\n                    [attr.aria-label]=\"\n                      day.date.toLocaleString('en-US', {\n                        month: 'long',\n                        day: 'numeric',\n                        year: 'numeric',\n                      })\n                    \"\n                    [attr.data-today]=\"day.isToday || null\"\n                    [attr.data-selected]=\"isSelected(day.date) || null\"\n                    [attr.data-outside]=\"day.isOutsideMonth || null\"\n                    [attr.data-disabled]=\"day.disabled || null\"\n                    [attr.data-range-start]=\"isRangeStart(day.date) || null\"\n                    [attr.data-range-end]=\"isRangeEnd(day.date) || null\"\n                    [attr.data-range-middle]=\"isRangeMiddle(day.date) || null\"\n                    [attr.data-day]=\"day.date.day\"\n                    (click)=\"handleDateClick(day.date)\"\n                  >\n                    {{ day.date.day }}\n                  </button>\n                </td>\n              } @else {\n                <td\n                  ngGridCell\n                  class=\"relative p-0 text-center text-sm\"\n                  disabled\n                >\n                  <span class=\"size-9\"></span>\n                </td>\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScCalendarDayView {\n  private readonly _dayButtons = viewChildren(GridCellWidget);\n\n  readonly viewDate = input.required<Temporal.PlainDate>();\n  readonly mode = input.required<'single' | 'multiple' | 'range'>();\n  readonly value = input<ScCalendarValue>(undefined);\n  readonly disabled = input<Temporal.PlainDate[]>([]);\n  readonly minDate = input<Temporal.PlainDate | undefined>(undefined);\n  readonly maxDate = input<Temporal.PlainDate | undefined>(undefined);\n\n  readonly dateSelected = output<Temporal.PlainDate>();\n  readonly monthScrollUp = output<void>();\n  readonly monthScrollDown = output<void>();\n\n  readonly weekDays = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']);\n\n  protected readonly weeks = computed(() => {\n    const date = this.viewDate();\n    const year = date.year;\n    const month = date.month;\n\n    const firstDay = new Temporal.PlainDate(year, month, 1);\n    const daysInMonth = firstDay.daysInMonth;\n    // dayOfWeek: 1=Mon..7=Sun; %7 gives 0=Sun like JS Date.getDay()\n    const firstDayOfWeek = firstDay.dayOfWeek % 7;\n\n    const days: (DayInfo | null)[][] = [];\n    let currentWeek: (DayInfo | null)[] = [];\n\n    // Add days from previous month to fill the first week\n    for (let i = 0; i < firstDayOfWeek; i++) {\n      const prevDate = firstDay.subtract({ days: firstDayOfWeek - i });\n      currentWeek.push(this.createDayInfo(prevDate, true));\n    }\n\n    // Add days of the month\n    for (let day = 1; day <= daysInMonth; day++) {\n      const currentDate = new Temporal.PlainDate(year, month, day);\n      currentWeek.push(this.createDayInfo(currentDate, false));\n\n      if (currentWeek.length === 7) {\n        days.push(currentWeek);\n        currentWeek = [];\n      }\n    }\n\n    // Add days from next month to fill the last week\n    if (currentWeek.length > 0) {\n      const nextMonthFirst = firstDay.add({ months: 1 });\n      let nextDay = 0;\n      while (currentWeek.length < 7) {\n        const nextDate = nextMonthFirst.add({ days: nextDay++ });\n        currentWeek.push(this.createDayInfo(nextDate, true));\n      }\n      days.push(currentWeek);\n    }\n\n    return days;\n  });\n\n  private createDayInfo(\n    date: Temporal.PlainDate,\n    isOutsideMonth: boolean,\n  ): DayInfo {\n    const today = Temporal.Now.plainDateISO();\n    const isToday = date.equals(today);\n    const disabled = this.isDateDisabled(date);\n\n    return {\n      date,\n      isToday,\n      isOutsideMonth,\n      disabled,\n      selected: signal(this.isSelected(date)),\n    };\n  }\n\n  private isDateDisabled(date: Temporal.PlainDate): boolean {\n    const disabledDates = this.disabled();\n    const min = this.minDate();\n    const max = this.maxDate();\n\n    if (min && Temporal.PlainDate.compare(date, min) < 0) return true;\n    if (max && Temporal.PlainDate.compare(date, max) > 0) return true;\n\n    return disabledDates.some((d) => d.equals(date));\n  }\n\n  private getRange(): ScDateRange {\n    return (\n      (this.value() as ScDateRange | undefined) ?? {\n        from: undefined,\n        to: undefined,\n      }\n    );\n  }\n\n  protected isSelected(date: Temporal.PlainDate): boolean {\n    const mode = this.mode();\n\n    if (mode === 'single') {\n      const selected = this.value() as Temporal.PlainDate | undefined;\n      return selected ? date.equals(selected) : false;\n    }\n\n    if (mode === 'multiple') {\n      const dates = (this.value() as Temporal.PlainDate[] | undefined) ?? [];\n      return dates.some((d) => date.equals(d));\n    }\n\n    if (mode === 'range') {\n      const range = this.getRange();\n      if (range.from && date.equals(range.from)) return true;\n      if (range.to && date.equals(range.to)) return true;\n      if (\n        range.from &&\n        range.to &&\n        Temporal.PlainDate.compare(date, range.from) > 0 &&\n        Temporal.PlainDate.compare(date, range.to) < 0\n      )\n        return true;\n    }\n\n    return false;\n  }\n\n  protected isRangeStart(date: Temporal.PlainDate): boolean {\n    if (this.mode() !== 'range') return false;\n    const range = this.getRange();\n    return range.from ? date.equals(range.from) : false;\n  }\n\n  protected isRangeEnd(date: Temporal.PlainDate): boolean {\n    if (this.mode() !== 'range') return false;\n    const range = this.getRange();\n    return range.to ? date.equals(range.to) : false;\n  }\n\n  protected isRangeMiddle(date: Temporal.PlainDate): boolean {\n    if (this.mode() !== 'range') return false;\n    const range = this.getRange();\n    if (!range.from || !range.to) return false;\n    return (\n      Temporal.PlainDate.compare(date, range.from) > 0 &&\n      Temporal.PlainDate.compare(date, range.to) < 0\n    );\n  }\n\n  protected getDayClass(day: DayInfo): string {\n    const isSelectedDay = this.isSelected(day.date);\n    const isRangeMiddleDay = this.isRangeMiddle(day.date);\n\n    return cn(\n      'inline-flex size-9 items-center justify-center rounded-md text-sm font-normal',\n      'ring-offset-background transition-colors',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      'hover:bg-accent hover:text-accent-foreground',\n      'disabled:pointer-events-none disabled:opacity-50',\n      day.isToday && !isSelectedDay && 'bg-accent text-accent-foreground',\n      isSelectedDay &&\n        !isRangeMiddleDay &&\n        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',\n      isRangeMiddleDay && 'bg-accent text-accent-foreground rounded-none',\n      day.isOutsideMonth && 'text-muted-foreground opacity-50',\n      day.disabled && 'text-muted-foreground opacity-50',\n    );\n  }\n\n  protected handleDateClick(date: Temporal.PlainDate): void {\n    this.dateSelected.emit(date);\n  }\n\n  protected handleKeyDown(event: KeyboardEvent): void {\n    const day = Number((event.target as Element).getAttribute('data-day'));\n    if (!day) return;\n\n    const viewDate = this.viewDate();\n    const daysInMonth = viewDate.daysInMonth;\n\n    // Only handle edge cases where we need to scroll to prev/next month\n    if (day > 7 && day <= daysInMonth - 7) return;\n\n    const arrowLeft = event.key === 'ArrowLeft';\n    const arrowRight = event.key === 'ArrowRight';\n    const arrowUp = event.key === 'ArrowUp';\n    const arrowDown = event.key === 'ArrowDown';\n\n    if ((day === 1 && arrowLeft) || (day <= 7 && arrowUp)) {\n      this.scrollUp();\n    }\n\n    if (\n      (day === daysInMonth && arrowRight) ||\n      (day > daysInMonth - 7 && arrowDown)\n    ) {\n      this.scrollDown();\n    }\n  }\n\n  private scrollDown(): void {\n    this.monthScrollDown.emit();\n    setTimeout(() => this._dayButtons()[0]?.element.focus());\n  }\n\n  private scrollUp(): void {\n    this.monthScrollUp.emit();\n    setTimeout(() =>\n      this._dayButtons()[this._dayButtons().length - 1]?.element.focus(),\n    );\n  }\n}\n"]}

package/esm2022/lib/components/calendar/calendar-header.js

@@ -0,0 +1,93 @@
+import { ChangeDetectionStrategy, Component, input, output, ViewEncapsulation, } from '@angular/core';
+import { ScButton } from '../button';
+import { SiChevronLeftIcon, SiChevronRightIcon, } from '@semantic-icons/lucide-icons';
+import * as i0 from "@angular/core";
+export class ScCalendarHeader {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    previousLabel = input.required(...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    nextLabel = input.required(...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    headerLabel = input.required(...(ngDevMode ? [{ debugName: "headerLabel" }] : []));
+    expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    previous = output();
+    next = output();
+    headerClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScCalendarHeader, isStandalone: true, selector: "[scCalendarHeader]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, headerLabel: { classPropertyName: "headerLabel", publicName: "headerLabel", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previous: "previous", next: "next", headerClick: "headerClick" }, ngImport: i0, template: `
+    <div class="relative flex items-center justify-center pt-1">
+      <button
+        scButton
+        variant="outline"
+        size="icon-sm"
+        class="absolute left-1"
+        (click)="previous.emit()"
+        [attr.aria-label]="previousLabel()"
+      >
+        <svg siChevronLeftIcon class="size-4"></svg>
+      </button>
+      <button
+        scButton
+        variant="ghost"
+        size="sm"
+        (click)="headerClick.emit()"
+        [attr.aria-label]="headerLabel()"
+        [attr.aria-expanded]="expanded()"
+      >
+        {{ label() }}
+      </button>
+      <button
+        scButton
+        variant="outline"
+        size="icon-sm"
+        class="absolute right-1"
+        (click)="next.emit()"
+        [attr.aria-label]="nextLabel()"
+      >
+        <svg siChevronRightIcon class="size-4"></svg>
+      </button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScButton, selector: "button[scButton]", inputs: ["class", "variant", "size", "type", "disabled"] }, { kind: "component", type: SiChevronLeftIcon, selector: "svg[siChevronLeftIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiChevronRightIcon, selector: "svg[siChevronRightIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScCalendarHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scCalendarHeader]',
+                    imports: [ScButton, SiChevronLeftIcon, SiChevronRightIcon],
+                    template: `
+    <div class="relative flex items-center justify-center pt-1">
+      <button
+        scButton
+        variant="outline"
+        size="icon-sm"
+        class="absolute left-1"
+        (click)="previous.emit()"
+        [attr.aria-label]="previousLabel()"
+      >
+        <svg siChevronLeftIcon class="size-4"></svg>
+      </button>
+      <button
+        scButton
+        variant="ghost"
+        size="sm"
+        (click)="headerClick.emit()"
+        [attr.aria-label]="headerLabel()"
+        [attr.aria-expanded]="expanded()"
+      >
+        {{ label() }}
+      </button>
+      <button
+        scButton
+        variant="outline"
+        size="icon-sm"
+        class="absolute right-1"
+        (click)="next.emit()"
+        [attr.aria-label]="nextLabel()"
+      >
+        <svg siChevronRightIcon class="size-4"></svg>
+      </button>
+    </div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: true }] }], headerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerLabel", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], previous: [{ type: i0.Output, args: ["previous"] }], next: [{ type: i0.Output, args: ["next"] }], headerClick: [{ type: i0.Output, args: ["headerClick"] }] } });
+//# sourceMappingURL=calendar-header.js.map

package/esm2022/lib/components/calendar/calendar-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-header.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/calendar/calendar-header.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EACL,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,8BAA8B,CAAC;;AA0CtC,MAAM,OAAO,gBAAgB;IAClB,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU,CAAC;IACjC,aAAa,GAAG,KAAK,CAAC,QAAQ,wDAAU,CAAC;IACzC,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAU,CAAC;IACrC,WAAW,GAAG,KAAK,CAAC,QAAQ,sDAAU,CAAC;IACvC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IAEjC,QAAQ,GAAG,MAAM,EAAQ,CAAC;IAC1B,IAAI,GAAG,MAAM,EAAQ,CAAC;IACtB,WAAW,GAAG,MAAM,EAAQ,CAAC;uGAT3B,gBAAgB;2FAAhB,gBAAgB,0zBArCjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCT,4DAlCS,QAAQ,uHAAE,iBAAiB,kLAAE,kBAAkB;;2FAsC9C,gBAAgB;kBAxC5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,OAAO,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,kBAAkB,CAAC;oBAC1D,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCT;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ScButton } from '../button';\nimport {\n  SiChevronLeftIcon,\n  SiChevronRightIcon,\n} from '@semantic-icons/lucide-icons';\n\n@Component({\n  selector: '[scCalendarHeader]',\n  imports: [ScButton, SiChevronLeftIcon, SiChevronRightIcon],\n  template: `\n    <div class=\"relative flex items-center justify-center pt-1\">\n      <button\n        scButton\n        variant=\"outline\"\n        size=\"icon-sm\"\n        class=\"absolute left-1\"\n        (click)=\"previous.emit()\"\n        [attr.aria-label]=\"previousLabel()\"\n      >\n        <svg siChevronLeftIcon class=\"size-4\"></svg>\n      </button>\n      <button\n        scButton\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"headerClick.emit()\"\n        [attr.aria-label]=\"headerLabel()\"\n        [attr.aria-expanded]=\"expanded()\"\n      >\n        {{ label() }}\n      </button>\n      <button\n        scButton\n        variant=\"outline\"\n        size=\"icon-sm\"\n        class=\"absolute right-1\"\n        (click)=\"next.emit()\"\n        [attr.aria-label]=\"nextLabel()\"\n      >\n        <svg siChevronRightIcon class=\"size-4\"></svg>\n      </button>\n    </div>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScCalendarHeader {\n  readonly label = input.required<string>();\n  readonly previousLabel = input.required<string>();\n  readonly nextLabel = input.required<string>();\n  readonly headerLabel = input.required<string>();\n  readonly expanded = input<boolean>(false);\n\n  readonly previous = output<void>();\n  readonly next = output<void>();\n  readonly headerClick = output<void>();\n}\n"]}