@semantic-components/ui 0.65.0 → 0.67.0

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

@@ -0,0 +1,185 @@
+import { ChangeDetectionStrategy, Component, computed, input, output, signal, viewChildren, 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 ScCalendarMonthView {
+    _monthButtons = viewChildren(GridCellWidget, ...(ngDevMode ? [{ debugName: "_monthButtons" }] : []));
+    year = input.required(...(ngDevMode ? [{ debugName: "year" }] : []));
+    selectedMonth = input.required(...(ngDevMode ? [{ debugName: "selectedMonth" }] : []));
+    monthSelected = output();
+    yearScrollUp = output();
+    yearScrollDown = output();
+    months = computed(() => {
+        const monthNames = [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec',
+        ];
+        const currentMonth = this.selectedMonth();
+        const year = this.year();
+        const today = Temporal.Now.plainDateISO();
+        return monthNames.map((name, index) => {
+            const month = index + 1; // 1-based
+            return {
+                label: name,
+                value: month,
+                isCurrentMonth: month === today.month && year === today.year,
+                isSelected: month === currentMonth,
+                selected: signal(month === currentMonth),
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "months" }] : []));
+    monthRows = computed(() => {
+        const months = this.months();
+        const rows = [];
+        for (let i = 0; i < months.length; i += 3) {
+            rows.push(months.slice(i, i + 3));
+        }
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "monthRows" }] : []));
+    getMonthButtonClass(month) {
+        return cn('inline-flex w-full h-10 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', 'hover:bg-accent hover:text-accent-foreground', month.isCurrentMonth &&
+            !month.isSelected &&
+            'bg-accent text-accent-foreground', month.isSelected &&
+            'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground');
+    }
+    handleMonthClick(month) {
+        this.monthSelected.emit(month);
+    }
+    handleKeyDown(event, month) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.monthSelected.emit(month);
+        }
+    }
+    handleGridKeyDown(event) {
+        const monthAttr = event.target.getAttribute('data-month');
+        if (!monthAttr)
+            return;
+        const month = Number(monthAttr);
+        // Only handle edge cases where we need to scroll to prev/next year
+        if (month > 3 && month < 10)
+            return; // Middle months, let grid handle it
+        const arrowLeft = event.key === 'ArrowLeft';
+        const arrowRight = event.key === 'ArrowRight';
+        const arrowUp = event.key === 'ArrowUp';
+        const arrowDown = event.key === 'ArrowDown';
+        // First row (Jan, Feb, Mar) + arrow up, or January + arrow left
+        if ((month === 1 && arrowLeft) || (month <= 3 && arrowUp)) {
+            this.scrollUp();
+        }
+        // Last row (Oct, Nov, Dec) + arrow down, or December + arrow right
+        if ((month === 12 && arrowRight) || (month >= 10 && arrowDown)) {
+            this.scrollDown();
+        }
+    }
+    scrollDown() {
+        this.yearScrollDown.emit();
+        setTimeout(() => this._monthButtons()[0]?.element.focus());
+    }
+    scrollUp() {
+        this.yearScrollUp.emit();
+        setTimeout(() => this._monthButtons()[this._monthButtons().length - 1]?.element.focus());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScCalendarMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScCalendarMonthView, isStandalone: true, selector: "[scCalendarMonthView]", inputs: { year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null }, selectedMonth: { classPropertyName: "selectedMonth", publicName: "selectedMonth", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { monthSelected: "monthSelected", yearScrollUp: "yearScrollUp", yearScrollDown: "yearScrollDown" }, viewQueries: [{ propertyName: "_monthButtons", predicate: GridCellWidget, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <table
+      ngGrid
+      tabindex="0"
+      aria-label="Select month"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="continuous"
+      [enableSelection]="true"
+      selectionMode="explicit"
+      (keydown)="handleGridKeyDown($event)"
+    >
+      <tbody>
+        @for (row of monthRows(); track $index) {
+          <tr ngGridRow>
+            @for (month of row; track month.value) {
+              <td
+                ngGridCell
+                class="p-1 text-center"
+                [(selected)]="month.selected"
+              >
+                <button
+                  ngGridCellWidget
+                  type="button"
+                  [class]="getMonthButtonClass(month)"
+                  (click)="handleMonthClick(month.value)"
+                  (keydown)="handleKeyDown($event, month.value)"
+                  [attr.aria-current]="month.isCurrentMonth ? 'date' : null"
+                  [attr.aria-label]="month.label"
+                  [attr.data-month]="month.value"
+                >
+                  {{ month.label }}
+                </button>
+              </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: ScCalendarMonthView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scCalendarMonthView]',
+                    imports: [Grid, GridRow, GridCell, GridCellWidget],
+                    template: `
+    <table
+      ngGrid
+      tabindex="0"
+      aria-label="Select month"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="continuous"
+      [enableSelection]="true"
+      selectionMode="explicit"
+      (keydown)="handleGridKeyDown($event)"
+    >
+      <tbody>
+        @for (row of monthRows(); track $index) {
+          <tr ngGridRow>
+            @for (month of row; track month.value) {
+              <td
+                ngGridCell
+                class="p-1 text-center"
+                [(selected)]="month.selected"
+              >
+                <button
+                  ngGridCellWidget
+                  type="button"
+                  [class]="getMonthButtonClass(month)"
+                  (click)="handleMonthClick(month.value)"
+                  (keydown)="handleKeyDown($event, month.value)"
+                  [attr.aria-current]="month.isCurrentMonth ? 'date' : null"
+                  [attr.aria-label]="month.label"
+                  [attr.data-month]="month.value"
+                >
+                  {{ month.label }}
+                </button>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { _monthButtons: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => GridCellWidget), { isSignal: true }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: true }] }], selectedMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedMonth", required: true }] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], yearScrollUp: [{ type: i0.Output, args: ["yearScrollUp"] }], yearScrollDown: [{ type: i0.Output, args: ["yearScrollDown"] }] } });
+//# sourceMappingURL=calendar-month-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month-view.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/calendar/calendar-month-view.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n  signal,\n  viewChildren,\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';\n\ninterface MonthInfo {\n  label: string;\n  value: number;\n  isCurrentMonth: boolean;\n  isSelected: boolean;\n  selected: ReturnType<typeof signal<boolean>>;\n}\n\n@Component({\n  selector: '[scCalendarMonthView]',\n  imports: [Grid, GridRow, GridCell, GridCellWidget],\n  template: `\n    <table\n      ngGrid\n      tabindex=\"0\"\n      aria-label=\"Select month\"\n      class=\"w-full border-collapse\"\n      colWrap=\"continuous\"\n      rowWrap=\"continuous\"\n      [enableSelection]=\"true\"\n      selectionMode=\"explicit\"\n      (keydown)=\"handleGridKeyDown($event)\"\n    >\n      <tbody>\n        @for (row of monthRows(); track $index) {\n          <tr ngGridRow>\n            @for (month of row; track month.value) {\n              <td\n                ngGridCell\n                class=\"p-1 text-center\"\n                [(selected)]=\"month.selected\"\n              >\n                <button\n                  ngGridCellWidget\n                  type=\"button\"\n                  [class]=\"getMonthButtonClass(month)\"\n                  (click)=\"handleMonthClick(month.value)\"\n                  (keydown)=\"handleKeyDown($event, month.value)\"\n                  [attr.aria-current]=\"month.isCurrentMonth ? 'date' : null\"\n                  [attr.aria-label]=\"month.label\"\n                  [attr.data-month]=\"month.value\"\n                >\n                  {{ month.label }}\n                </button>\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScCalendarMonthView {\n  private readonly _monthButtons = viewChildren(GridCellWidget);\n\n  readonly year = input.required<number>();\n  readonly selectedMonth = input.required<number>();\n  readonly monthSelected = output<number>();\n  readonly yearScrollUp = output<void>();\n  readonly yearScrollDown = output<void>();\n\n  protected readonly months = computed((): MonthInfo[] => {\n    const monthNames = [\n      'Jan',\n      'Feb',\n      'Mar',\n      'Apr',\n      'May',\n      'Jun',\n      'Jul',\n      'Aug',\n      'Sep',\n      'Oct',\n      'Nov',\n      'Dec',\n    ];\n    const currentMonth = this.selectedMonth();\n    const year = this.year();\n    const today = Temporal.Now.plainDateISO();\n\n    return monthNames.map((name, index) => {\n      const month = index + 1; // 1-based\n      return {\n        label: name,\n        value: month,\n        isCurrentMonth: month === today.month && year === today.year,\n        isSelected: month === currentMonth,\n        selected: signal(month === currentMonth),\n      };\n    });\n  });\n\n  protected readonly monthRows = computed((): MonthInfo[][] => {\n    const months = this.months();\n    const rows: MonthInfo[][] = [];\n    for (let i = 0; i < months.length; i += 3) {\n      rows.push(months.slice(i, i + 3));\n    }\n    return rows;\n  });\n\n  protected getMonthButtonClass(month: MonthInfo): string {\n    return cn(\n      'inline-flex w-full h-10 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',\n      'hover:bg-accent hover:text-accent-foreground',\n      month.isCurrentMonth &&\n        !month.isSelected &&\n        'bg-accent text-accent-foreground',\n      month.isSelected &&\n        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',\n    );\n  }\n\n  protected handleMonthClick(month: number): void {\n    this.monthSelected.emit(month);\n  }\n\n  protected handleKeyDown(event: KeyboardEvent, month: number): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.monthSelected.emit(month);\n    }\n  }\n\n  protected handleGridKeyDown(event: KeyboardEvent): void {\n    const monthAttr = (event.target as Element).getAttribute('data-month');\n    if (!monthAttr) return;\n\n    const month = Number(monthAttr);\n\n    // Only handle edge cases where we need to scroll to prev/next year\n    if (month > 3 && month < 10) return; // Middle months, let grid handle it\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    // First row (Jan, Feb, Mar) + arrow up, or January + arrow left\n    if ((month === 1 && arrowLeft) || (month <= 3 && arrowUp)) {\n      this.scrollUp();\n    }\n\n    // Last row (Oct, Nov, Dec) + arrow down, or December + arrow right\n    if ((month === 12 && arrowRight) || (month >= 10 && arrowDown)) {\n      this.scrollDown();\n    }\n  }\n\n  private scrollDown(): void {\n    this.yearScrollDown.emit();\n    setTimeout(() => this._monthButtons()[0]?.element.focus());\n  }\n\n  private scrollUp(): void {\n    this.yearScrollUp.emit();\n    setTimeout(() =>\n      this._monthButtons()[this._monthButtons().length - 1]?.element.focus(),\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,174 @@
+import { ChangeDetectionStrategy, Component, computed, input, output, signal, viewChildren, 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 ScCalendarYearView {
+    _yearButtons = viewChildren(GridCellWidget, ...(ngDevMode ? [{ debugName: "_yearButtons" }] : []));
+    decadeStart = input.required(...(ngDevMode ? [{ debugName: "decadeStart" }] : []));
+    selectedYear = input.required(...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
+    yearSelected = output();
+    decadeScrollUp = output();
+    decadeScrollDown = output();
+    years = computed(() => {
+        const decadeStart = this.decadeStart();
+        const currentYear = Temporal.Now.plainDateISO().year;
+        const selectedYear = this.selectedYear();
+        return Array.from({ length: 12 }, (_, i) => {
+            const year = decadeStart + i;
+            return {
+                label: year.toString(),
+                value: year,
+                isCurrentYear: year === currentYear,
+                isSelected: year === selectedYear,
+                selected: signal(year === selectedYear),
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "years" }] : []));
+    yearRows = computed(() => {
+        const years = this.years();
+        const rows = [];
+        for (let i = 0; i < years.length; i += 3) {
+            rows.push(years.slice(i, i + 3));
+        }
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "yearRows" }] : []));
+    getYearButtonClass(year) {
+        return cn('inline-flex w-full h-10 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', 'hover:bg-accent hover:text-accent-foreground', year.isCurrentYear &&
+            !year.isSelected &&
+            'bg-accent text-accent-foreground', year.isSelected &&
+            'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground');
+    }
+    handleYearClick(year) {
+        this.yearSelected.emit(year);
+    }
+    handleKeyDown(event, year) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.yearSelected.emit(year);
+        }
+    }
+    handleGridKeyDown(event) {
+        const yearAttr = event.target.getAttribute('data-year');
+        if (!yearAttr)
+            return;
+        const year = Number(yearAttr);
+        const decadeStart = this.decadeStart();
+        const decadeEnd = decadeStart + 11;
+        // Only handle edge cases where we need to scroll to prev/next decade
+        const yearIndex = year - decadeStart;
+        if (yearIndex > 2 && yearIndex < 9)
+            return; // Middle years, let grid handle it
+        const arrowLeft = event.key === 'ArrowLeft';
+        const arrowRight = event.key === 'ArrowRight';
+        const arrowUp = event.key === 'ArrowUp';
+        const arrowDown = event.key === 'ArrowDown';
+        // First row (first 3 years) + arrow up, or first year + arrow left
+        if ((year === decadeStart && arrowLeft) || (yearIndex <= 2 && arrowUp)) {
+            this.scrollUp();
+        }
+        // Last row (last 3 years) + arrow down, or last year + arrow right
+        if ((year === decadeEnd && arrowRight) || (yearIndex >= 9 && arrowDown)) {
+            this.scrollDown();
+        }
+    }
+    scrollDown() {
+        this.decadeScrollDown.emit();
+        setTimeout(() => this._yearButtons()[0]?.element.focus());
+    }
+    scrollUp() {
+        this.decadeScrollUp.emit();
+        setTimeout(() => this._yearButtons()[this._yearButtons().length - 1]?.element.focus());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScCalendarYearView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScCalendarYearView, isStandalone: true, selector: "[scCalendarYearView]", inputs: { decadeStart: { classPropertyName: "decadeStart", publicName: "decadeStart", isSignal: true, isRequired: true, transformFunction: null }, selectedYear: { classPropertyName: "selectedYear", publicName: "selectedYear", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { yearSelected: "yearSelected", decadeScrollUp: "decadeScrollUp", decadeScrollDown: "decadeScrollDown" }, viewQueries: [{ propertyName: "_yearButtons", predicate: GridCellWidget, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <table
+      ngGrid
+      tabindex="0"
+      aria-label="Select year"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="continuous"
+      [enableSelection]="true"
+      selectionMode="explicit"
+      (keydown)="handleGridKeyDown($event)"
+    >
+      <tbody>
+        @for (row of yearRows(); track $index) {
+          <tr ngGridRow>
+            @for (year of row; track year.value) {
+              <td
+                ngGridCell
+                class="p-1 text-center"
+                [(selected)]="year.selected"
+              >
+                <button
+                  ngGridCellWidget
+                  type="button"
+                  [class]="getYearButtonClass(year)"
+                  (click)="handleYearClick(year.value)"
+                  (keydown)="handleKeyDown($event, year.value)"
+                  [attr.aria-current]="year.isCurrentYear ? 'date' : null"
+                  [attr.aria-label]="year.label"
+                  [attr.data-year]="year.value"
+                >
+                  {{ year.label }}
+                </button>
+              </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: ScCalendarYearView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scCalendarYearView]',
+                    imports: [Grid, GridRow, GridCell, GridCellWidget],
+                    template: `
+    <table
+      ngGrid
+      tabindex="0"
+      aria-label="Select year"
+      class="w-full border-collapse"
+      colWrap="continuous"
+      rowWrap="continuous"
+      [enableSelection]="true"
+      selectionMode="explicit"
+      (keydown)="handleGridKeyDown($event)"
+    >
+      <tbody>
+        @for (row of yearRows(); track $index) {
+          <tr ngGridRow>
+            @for (year of row; track year.value) {
+              <td
+                ngGridCell
+                class="p-1 text-center"
+                [(selected)]="year.selected"
+              >
+                <button
+                  ngGridCellWidget
+                  type="button"
+                  [class]="getYearButtonClass(year)"
+                  (click)="handleYearClick(year.value)"
+                  (keydown)="handleKeyDown($event, year.value)"
+                  [attr.aria-current]="year.isCurrentYear ? 'date' : null"
+                  [attr.aria-label]="year.label"
+                  [attr.data-year]="year.value"
+                >
+                  {{ year.label }}
+                </button>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { _yearButtons: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => GridCellWidget), { isSignal: true }] }], decadeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "decadeStart", required: true }] }], selectedYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedYear", required: true }] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], decadeScrollUp: [{ type: i0.Output, args: ["decadeScrollUp"] }], decadeScrollDown: [{ type: i0.Output, args: ["decadeScrollDown"] }] } });
+//# sourceMappingURL=calendar-year-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-year-view.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/calendar/calendar-year-view.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n  signal,\n  viewChildren,\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';\n\ninterface YearInfo {\n  label: string;\n  value: number;\n  isCurrentYear: boolean;\n  isSelected: boolean;\n  selected: ReturnType<typeof signal<boolean>>;\n}\n\n@Component({\n  selector: '[scCalendarYearView]',\n  imports: [Grid, GridRow, GridCell, GridCellWidget],\n  template: `\n    <table\n      ngGrid\n      tabindex=\"0\"\n      aria-label=\"Select year\"\n      class=\"w-full border-collapse\"\n      colWrap=\"continuous\"\n      rowWrap=\"continuous\"\n      [enableSelection]=\"true\"\n      selectionMode=\"explicit\"\n      (keydown)=\"handleGridKeyDown($event)\"\n    >\n      <tbody>\n        @for (row of yearRows(); track $index) {\n          <tr ngGridRow>\n            @for (year of row; track year.value) {\n              <td\n                ngGridCell\n                class=\"p-1 text-center\"\n                [(selected)]=\"year.selected\"\n              >\n                <button\n                  ngGridCellWidget\n                  type=\"button\"\n                  [class]=\"getYearButtonClass(year)\"\n                  (click)=\"handleYearClick(year.value)\"\n                  (keydown)=\"handleKeyDown($event, year.value)\"\n                  [attr.aria-current]=\"year.isCurrentYear ? 'date' : null\"\n                  [attr.aria-label]=\"year.label\"\n                  [attr.data-year]=\"year.value\"\n                >\n                  {{ year.label }}\n                </button>\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScCalendarYearView {\n  private readonly _yearButtons = viewChildren(GridCellWidget);\n\n  readonly decadeStart = input.required<number>();\n  readonly selectedYear = input.required<number>();\n  readonly yearSelected = output<number>();\n  readonly decadeScrollUp = output<void>();\n  readonly decadeScrollDown = output<void>();\n\n  protected readonly years = computed((): YearInfo[] => {\n    const decadeStart = this.decadeStart();\n    const currentYear = Temporal.Now.plainDateISO().year;\n    const selectedYear = this.selectedYear();\n\n    return Array.from({ length: 12 }, (_, i) => {\n      const year = decadeStart + i;\n      return {\n        label: year.toString(),\n        value: year,\n        isCurrentYear: year === currentYear,\n        isSelected: year === selectedYear,\n        selected: signal(year === selectedYear),\n      };\n    });\n  });\n\n  protected readonly yearRows = computed((): YearInfo[][] => {\n    const years = this.years();\n    const rows: YearInfo[][] = [];\n    for (let i = 0; i < years.length; i += 3) {\n      rows.push(years.slice(i, i + 3));\n    }\n    return rows;\n  });\n\n  protected getYearButtonClass(year: YearInfo): string {\n    return cn(\n      'inline-flex w-full h-10 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',\n      'hover:bg-accent hover:text-accent-foreground',\n      year.isCurrentYear &&\n        !year.isSelected &&\n        'bg-accent text-accent-foreground',\n      year.isSelected &&\n        'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',\n    );\n  }\n\n  protected handleYearClick(year: number): void {\n    this.yearSelected.emit(year);\n  }\n\n  protected handleKeyDown(event: KeyboardEvent, year: number): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.yearSelected.emit(year);\n    }\n  }\n\n  protected handleGridKeyDown(event: KeyboardEvent): void {\n    const yearAttr = (event.target as Element).getAttribute('data-year');\n    if (!yearAttr) return;\n\n    const year = Number(yearAttr);\n    const decadeStart = this.decadeStart();\n    const decadeEnd = decadeStart + 11;\n\n    // Only handle edge cases where we need to scroll to prev/next decade\n    const yearIndex = year - decadeStart;\n    if (yearIndex > 2 && yearIndex < 9) return; // Middle years, let grid handle it\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    // First row (first 3 years) + arrow up, or first year + arrow left\n    if ((year === decadeStart && arrowLeft) || (yearIndex <= 2 && arrowUp)) {\n      this.scrollUp();\n    }\n\n    // Last row (last 3 years) + arrow down, or last year + arrow right\n    if ((year === decadeEnd && arrowRight) || (yearIndex >= 9 && arrowDown)) {\n      this.scrollDown();\n    }\n  }\n\n  private scrollDown(): void {\n    this.decadeScrollDown.emit();\n    setTimeout(() => this._yearButtons()[0]?.element.focus());\n  }\n\n  private scrollUp(): void {\n    this.decadeScrollUp.emit();\n    setTimeout(() =>\n      this._yearButtons()[this._yearButtons().length - 1]?.element.focus(),\n    );\n  }\n}\n"]}