@egose/shadcn-theme-ng 0.0.9 → 0.0.11

package/calendar/fesm2022/calendar.mjs

@@ -0,0 +1,637 @@
+import * as i0 from '@angular/core';
+import { input, computed, booleanAttribute, model, numberAttribute, viewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { provideIcons, NgIcon } from '@ng-icons/core';
+import { lucideChevronRight, lucideChevronLeft } from '@ng-icons/lucide';
+import { injectBrnCalendarI18n, BrnCalendar, BrnCalendarHeader, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarWeekday, BrnCalendarWeek, BrnCalendarCellButton, BrnCalendarCell, BrnCalendarGrid, BrnCalendarMulti, BrnCalendarRange } from '@spartan-ng/brain/calendar';
+import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { buttonVariants } from '@egose/shadcn-theme-ng/button';
+import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+
+class HlmCalendar {
+    calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
+    _computedCalenderClass = computed(() => hlm('tw:rounded-md tw:border tw:p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
+    /** Access the calendar i18n */
+    _i18n = injectBrnCalendarI18n();
+    /** Access the date time adapter */
+    _dateAdapter = injectDateAdapter();
+    /** The minimum date that can be selected.*/
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    /** The maximum date that can be selected. */
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /** The selected value. */
+    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    /** Whether a specific date is disabled. */
+    dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : []));
+    /** The day the week starts on */
+    weekStartsOn = input(undefined, ...(ngDevMode ? [{ debugName: "weekStartsOn", transform: (v) => numberAttribute(v) }] : [{
+            transform: (v) => numberAttribute(v),
+        }]));
+    /** The default focused date. */
+    defaultFocusedDate = input(...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : []));
+    /** Access the calendar directive */
+    _calendar = viewChild.required(BrnCalendar);
+    /** Get the heading for the current month and year */
+    _heading = computed(() => this._i18n
+        .config()
+        .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
+    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'tw:size-8 tw:p-0 tw:font-normal tw:aria-selected:opacity-100', 'tw:data-[outside]:text-muted-foreground tw:data-[outside]:aria-selected:bg-secondary/50 tw:data-[outside]:aria-selected:text-muted-foreground tw:data-[outside]:opacity-50 tw:data-[outside]:aria-selected:opacity-30', 'tw:data-[today]:bg-secondary tw:data-[today]:text-secondary-foreground', 'tw:data-[selected]:bg-primary tw:data-[selected]:text-primary-foreground tw:data-[selected]:hover:bg-primary tw:data-[selected]:focus:bg-primary tw:data-[selected]:focus:text-primary-foreground', 'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: HlmCalendar, isStandalone: true, selector: "hlm-calendar", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendar, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      brnCalendar
+      [min]="min()"
+      [max]="max()"
+      [disabled]="disabled()"
+      [(date)]="date"
+      [dateDisabled]="dateDisabled()"
+      [weekStartsOn]="weekStartsOn()"
+      [defaultFocusedDate]="defaultFocusedDate()"
+      [class]="_computedCalenderClass()"
+    >
+      <div class="tw:inline-flex tw:flex-col tw:space-y-4">
+        <!-- Header -->
+        <div class="tw:space-y-4">
+          <div class="tw:relative tw:flex tw:items-center tw:justify-center tw:pt-1">
+            <div brnCalendarHeader class="tw:text-sm tw:font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="tw:flex tw:items-center tw:space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="tw:focus-visible:ring-ring tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:text-popover-foreground tw:absolute tw:left-1 tw:inline-flex tw:size-8 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="tw:focus-visible:ring-ring tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:text-popover-foreground tw:absolute tw:right-1 tw:inline-flex tw:size-8 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="tw:flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
+                [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+              >
+                {{ _i18n.config().formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="tw:data-[selected]:data-[outside]:bg-secondary/50 tw:data-[selected]:bg-secondary tw:relative tw:size-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
+                >
+                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                    {{ _dateAdapter.getDate(date) }}
+                  </button>
+                </td>
+              }
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: BrnCalendar, selector: "[brnCalendar]", inputs: ["min", "max", "disabled", "date", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["dateChange"] }, { kind: "directive", type: BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-calendar',
+                    imports: [
+                        BrnCalendar,
+                        BrnCalendarHeader,
+                        BrnCalendarNextButton,
+                        BrnCalendarPreviousButton,
+                        BrnCalendarWeekday,
+                        BrnCalendarWeek,
+                        BrnCalendarCellButton,
+                        BrnCalendarCell,
+                        BrnCalendarGrid,
+                        NgIcon,
+                        HlmIcon,
+                    ],
+                    viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+                    template: `
+    <div
+      brnCalendar
+      [min]="min()"
+      [max]="max()"
+      [disabled]="disabled()"
+      [(date)]="date"
+      [dateDisabled]="dateDisabled()"
+      [weekStartsOn]="weekStartsOn()"
+      [defaultFocusedDate]="defaultFocusedDate()"
+      [class]="_computedCalenderClass()"
+    >
+      <div class="tw:inline-flex tw:flex-col tw:space-y-4">
+        <!-- Header -->
+        <div class="tw:space-y-4">
+          <div class="tw:relative tw:flex tw:items-center tw:justify-center tw:pt-1">
+            <div brnCalendarHeader class="tw:text-sm tw:font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="tw:flex tw:items-center tw:space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="tw:focus-visible:ring-ring tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:text-popover-foreground tw:absolute tw:left-1 tw:inline-flex tw:size-8 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="tw:focus-visible:ring-ring tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:text-popover-foreground tw:absolute tw:right-1 tw:inline-flex tw:size-8 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="tw:flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
+                [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+              >
+                {{ _i18n.config().formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="tw:data-[selected]:data-[outside]:bg-secondary/50 tw:data-[selected]:bg-secondary tw:relative tw:size-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
+                >
+                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                    {{ _dateAdapter.getDate(date) }}
+                  </button>
+                </td>
+              }
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class HlmCalendarMulti {
+    calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
+    _computedCalenderClass = computed(() => hlm('tw:rounded-md tw:border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
+    /** Access the calendar i18n */
+    _i18n = injectBrnCalendarI18n();
+    /** Access the date time adapter */
+    _dateAdapter = injectDateAdapter();
+    /** The minimum date that can be selected.*/
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    /** The maximum date that can be selected. */
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    /** The minimum selectable dates.  */
+    minSelection = input(undefined, ...(ngDevMode ? [{ debugName: "minSelection", transform: numberAttribute }] : [{
+            transform: numberAttribute,
+        }]));
+    /** The maximum selectable dates.  */
+    maxSelection = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelection", transform: numberAttribute }] : [{
+            transform: numberAttribute,
+        }]));
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /** The selected value. */
+    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    /** Whether a specific date is disabled. */
+    dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : []));
+    /** The day the week starts on */
+    weekStartsOn = input(undefined, ...(ngDevMode ? [{ debugName: "weekStartsOn", transform: (v) => numberAttribute(v) }] : [{
+            transform: (v) => numberAttribute(v),
+        }]));
+    /** The default focused date. */
+    defaultFocusedDate = input(...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : []));
+    /** Access the calendar directive */
+    _calendar = viewChild.required(BrnCalendarMulti);
+    /** Get the heading for the current month and year */
+    _heading = computed(() => this._i18n
+        .config()
+        .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
+    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'tw:size-8 tw:p-0 tw:font-normal tw:aria-selected:opacity-100', 'tw:data-[outside]:text-muted-foreground tw:data-[outside]:aria-selected:bg-accent/50 tw:data-[outside]:aria-selected:text-muted-foreground tw:data-[outside]:opacity-50 tw:data-[outside]:aria-selected:opacity-30', 'tw:data-[today]:bg-accent tw:data-[today]:text-accent-foreground', 'tw:data-[selected]:bg-primary tw:data-[selected]:text-primary-foreground tw:data-[selected]:hover:bg-primary tw:data-[selected]:hover:text-primary-foreground tw:data-[selected]:focus:bg-primary tw:data-[selected]:focus:text-primary-foreground', 'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: HlmCalendarMulti, isStandalone: true, selector: "hlm-calendar-multi", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minSelection: { classPropertyName: "minSelection", publicName: "minSelection", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendarMulti, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      brnCalendarMulti
+      [min]="min()"
+      [max]="max()"
+      [minSelection]="minSelection()"
+      [maxSelection]="maxSelection()"
+      [disabled]="disabled()"
+      [(date)]="date"
+      [dateDisabled]="dateDisabled()"
+      [weekStartsOn]="weekStartsOn()"
+      [defaultFocusedDate]="defaultFocusedDate()"
+      [class]="_computedCalenderClass()"
+    >
+      <div class="tw:inline-flex tw:flex-col space-y-4">
+        <!-- Header -->
+        <div class="tw:space-y-4">
+          <div class="tw:relative tw:flex tw:items-center tw:justify-center pt-1">
+            <div brnCalendarHeader class="tw:text-sm tw:font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="tw:flex items-center tw:space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:left-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:right-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="tw:flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
+                [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+              >
+                {{ _i18n.config().formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="tw:data-[selected]:data-[outside]:bg-accent/50 tw:data-[selected]:bg-accent tw:relative tw:h-8 tw:w-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
+                >
+                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                    {{ _dateAdapter.getDate(date) }}
+                  </button>
+                </td>
+              }
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: BrnCalendarMulti, selector: "[brnCalendarMulti]", inputs: ["min", "max", "minSelection", "maxSelection", "disabled", "date", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["dateChange"] }, { kind: "directive", type: BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendarMulti, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-calendar-multi',
+                    imports: [
+                        BrnCalendarMulti,
+                        BrnCalendarHeader,
+                        BrnCalendarNextButton,
+                        BrnCalendarPreviousButton,
+                        BrnCalendarWeekday,
+                        BrnCalendarWeek,
+                        BrnCalendarCellButton,
+                        BrnCalendarCell,
+                        BrnCalendarGrid,
+                        NgIcon,
+                        HlmIcon,
+                    ],
+                    viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+                    template: `
+    <div
+      brnCalendarMulti
+      [min]="min()"
+      [max]="max()"
+      [minSelection]="minSelection()"
+      [maxSelection]="maxSelection()"
+      [disabled]="disabled()"
+      [(date)]="date"
+      [dateDisabled]="dateDisabled()"
+      [weekStartsOn]="weekStartsOn()"
+      [defaultFocusedDate]="defaultFocusedDate()"
+      [class]="_computedCalenderClass()"
+    >
+      <div class="tw:inline-flex tw:flex-col space-y-4">
+        <!-- Header -->
+        <div class="tw:space-y-4">
+          <div class="tw:relative tw:flex tw:items-center tw:justify-center pt-1">
+            <div brnCalendarHeader class="tw:text-sm tw:font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="tw:flex items-center tw:space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:left-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:right-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="tw:flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
+                [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+              >
+                {{ _i18n.config().formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="tw:data-[selected]:data-[outside]:bg-accent/50 tw:data-[selected]:bg-accent tw:relative tw:h-8 tw:w-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
+                >
+                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                    {{ _dateAdapter.getDate(date) }}
+                  </button>
+                </td>
+              }
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class HlmCalendarRange {
+    calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
+    _computedCalenderClass = computed(() => hlm('tw:rounded-md tw:border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
+    /** Access the calendar i18n */
+    _i18n = injectBrnCalendarI18n();
+    /** Access the date time adapter */
+    _dateAdapter = injectDateAdapter();
+    /** The minimum date that can be selected.*/
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    /** The maximum date that can be selected. */
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /** The start date of the range. */
+    startDate = model(...(ngDevMode ? [undefined, { debugName: "startDate" }] : []));
+    /** The end date of the range. */
+    endDate = model(...(ngDevMode ? [undefined, { debugName: "endDate" }] : []));
+    /** Whether a specific date is disabled. */
+    dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : []));
+    /** The day the week starts on */
+    weekStartsOn = input(undefined, ...(ngDevMode ? [{ debugName: "weekStartsOn", transform: (v) => numberAttribute(v) }] : [{
+            transform: (v) => numberAttribute(v),
+        }]));
+    /** The default focused date. */
+    defaultFocusedDate = input(...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : []));
+    /** Access the calendar directive */
+    _calendar = viewChild.required(BrnCalendarRange);
+    /** Get the heading for the current month and year */
+    _heading = computed(() => this._i18n
+        .config()
+        .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
+    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'tw:size-8 tw:p-0 tw:font-normal tw:aria-selected:opacity-100', 'tw:data-[outside]:text-muted-foreground tw:data-[outside]:aria-selected:text-muted-foreground', 'tw:data-[today]:bg-accent tw:data-[today]:text-accent-foreground', 'tw:data-[selected]:bg-primary tw:data-[selected]:text-primary-foreground tw:data-[selected]:focus:bg-primary tw:data-[selected]:focus:text-primary-foreground', 'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50', 'tw:data-[range-start]:rounded-l-md', 'tw:data-[range-end]:rounded-r-md', 'tw:data-[range-between]:bg-accent tw:data-[range-between]:text-accent-foreground tw:data-[range-between]:rounded-none');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendarRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: HlmCalendarRange, isStandalone: true, selector: "hlm-calendar-range", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendarRange, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      brnCalendarRange
+      [min]="min()"
+      [max]="max()"
+      [disabled]="disabled()"
+      [(startDate)]="startDate"
+      [(endDate)]="endDate"
+      [dateDisabled]="dateDisabled()"
+      [weekStartsOn]="weekStartsOn()"
+      [defaultFocusedDate]="defaultFocusedDate()"
+      [class]="_computedCalenderClass()"
+    >
+      <div class="tw:inline-flex tw:flex-col tw:space-y-4">
+        <!-- Header -->
+        <div class="tw:space-y-4">
+          <div class="tw:relative tw:flex tw:items-center tw:justify-center tw:pt-1">
+            <div brnCalendarHeader class="tw:text-sm tw:font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="tw:flex tw:items-center tw:space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:left-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:right-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="tw:flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
+                [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+              >
+                {{ _i18n.config().formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="tw:data-[selected]:data-[outside]:bg-accent/50 tw:data-[selected]:bg-accent tw:relative tw:h-8 tw:w-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
+                >
+                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                    {{ _dateAdapter.getDate(date) }}
+                  </button>
+                </td>
+              }
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "directive", type: BrnCalendarRange, selector: "[brnCalendarRange]", inputs: ["min", "max", "disabled", "dateDisabled", "weekStartsOn", "defaultFocusedDate", "startDate", "endDate"], outputs: ["startDateChange", "endDateChange"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendarRange, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-calendar-range',
+                    imports: [
+                        BrnCalendarHeader,
+                        BrnCalendarNextButton,
+                        BrnCalendarPreviousButton,
+                        BrnCalendarWeekday,
+                        BrnCalendarWeek,
+                        BrnCalendarCellButton,
+                        BrnCalendarCell,
+                        BrnCalendarGrid,
+                        NgIcon,
+                        HlmIcon,
+                        BrnCalendarRange,
+                    ],
+                    viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+                    template: `
+    <div
+      brnCalendarRange
+      [min]="min()"
+      [max]="max()"
+      [disabled]="disabled()"
+      [(startDate)]="startDate"
+      [(endDate)]="endDate"
+      [dateDisabled]="dateDisabled()"
+      [weekStartsOn]="weekStartsOn()"
+      [defaultFocusedDate]="defaultFocusedDate()"
+      [class]="_computedCalenderClass()"
+    >
+      <div class="tw:inline-flex tw:flex-col tw:space-y-4">
+        <!-- Header -->
+        <div class="tw:space-y-4">
+          <div class="tw:relative tw:flex tw:items-center tw:justify-center tw:pt-1">
+            <div brnCalendarHeader class="tw:text-sm tw:font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="tw:flex tw:items-center tw:space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:left-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="tw:ring-offset-background tw:focus-visible:ring-ring tw:border-input tw:hover:bg-accent tw:hover:text-accent-foreground tw:absolute tw:right-1 tw:inline-flex tw:h-7 tw:w-7 tw:items-center tw:justify-center tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:opacity-50 tw:transition-colors tw:hover:opacity-100 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:disabled:pointer-events-none tw:disabled:opacity-50"
+              >
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="tw:flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="tw:text-muted-foreground tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal"
+                [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+              >
+                {{ _i18n.config().formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="tw:data-[selected]:data-[outside]:bg-accent/50 tw:data-[selected]:bg-accent tw:relative tw:h-8 tw:w-8 tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:first:data-[selected]:rounded-l-md tw:last:data-[selected]:rounded-r-md tw:[&:has([aria-selected].day-range-end)]:rounded-r-md"
+                >
+                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                    {{ _dateAdapter.getDate(date) }}
+                  </button>
+                </td>
+              }
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/*
+ * Public API Surface of calendar
+ */
+const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti, HlmCalendarRange];
+class HlmCalendarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange], exports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendarImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmCalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmCalendarImports],
+                    exports: [...HlmCalendarImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmCalendar, HlmCalendarImports, HlmCalendarModule, HlmCalendarMulti, HlmCalendarRange };
+//# sourceMappingURL=calendar.mjs.map