@3ddv/software-division-components 1.5.0 → 2.0.0

package/dist/fesm2022/3ddv-software-division-components-backoffice-datepicker.mjs

@@ -0,0 +1,1061 @@
+import * as i0 from '@angular/core';
+import { input, computed, booleanAttribute, model, numberAttribute, viewChild, ChangeDetectionStrategy, Component, NgModule, Directive, signal, inject, Renderer2, ElementRef, effect, InjectionToken, forwardRef, output } from '@angular/core';
+import { NG_VALUE_ACCESSOR, FormSubmittedEvent, TouchedChangeEvent, PristineChangeEvent, ReactiveFormsModule } from '@angular/forms';
+import { injectDateAdapter, provideDateAdapter, BrnNativeDateAdapter } from '@spartan-ng/brain/date-time';
+import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
+import { provideIcons, NgIcon } from '@ng-icons/core';
+import { lucideChevronRight, lucideChevronLeft, lucideCalendar } from '@ng-icons/lucide';
+import { hlm, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { BrnPopover, BrnPopoverTrigger, BrnPopoverContent } from '@spartan-ng/brain/popover';
+import { buttonVariants } from '@3ddv/software-division-components/generic/button';
+import { injectBrnCalendarI18n, BrnCalendar, BrnCalendarHeader, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarWeekday, BrnCalendarWeek, BrnCalendarCellButton, BrnCalendarCell, BrnCalendarGrid, BrnCalendarMulti } from '@spartan-ng/brain/calendar';
+
+class HlmCalendar {
+    calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
+    _computedCalenderClass = computed(() => hlm('rounded-md 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 });
+    /** 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(0, { ...(ngDevMode ? { debugName: "weekStartsOn" } : {}), 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.formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
+    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100', 'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30', 'data-[today]:bg-accent data-[today]:text-accent-foreground', 'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary dark:hover:text-accent-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground', 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", 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="inline-flex flex-col space-y-4">
+        <!-- Header -->
+        <div class="space-y-4">
+          <div class="relative flex items-center justify-center pt-1">
+            <div brnCalendarHeader class="text-sm font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="flex items-center space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
+                [attr.aria-label]="_i18n.labelWeekday(weekday)">
+                {{ _i18n.formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&: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: "21.1.4", 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="inline-flex flex-col space-y-4">
+        <!-- Header -->
+        <div class="space-y-4">
+          <div class="relative flex items-center justify-center pt-1">
+            <div brnCalendarHeader class="text-sm font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="flex items-center space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
+                [attr.aria-label]="_i18n.labelWeekday(weekday)">
+                {{ _i18n.formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&: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,
+                }]
+        }], propDecorators: { calendarClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarClass", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCalendar), { isSignal: true }] }] } });
+
+class HlmCalendarMulti {
+    calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
+    _computedCalenderClass = computed(() => hlm('rounded-md 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 });
+    /** The maximum selectable dates.  */
+    maxSelection = input(undefined, { ...(ngDevMode ? { debugName: "maxSelection" } : {}), transform: numberAttribute });
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), 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(0, { ...(ngDevMode ? { debugName: "weekStartsOn" } : {}), 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.formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
+    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100', 'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30', 'data-[today]:bg-accent data-[today]:text-accent-foreground', 'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground', 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", 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="inline-flex flex-col space-y-4">
+        <!-- Header -->
+        <div class="space-y-4">
+          <div class="relative flex items-center justify-center pt-1">
+            <div brnCalendarHeader class="text-sm font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="flex items-center space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
+                [attr.aria-label]="_i18n.labelWeekday(weekday)">
+                {{ _i18n.formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&: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: "21.1.4", 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="inline-flex flex-col space-y-4">
+        <!-- Header -->
+        <div class="space-y-4">
+          <div class="relative flex items-center justify-center pt-1">
+            <div brnCalendarHeader class="text-sm font-medium">
+              {{ _heading() }}
+            </div>
+
+            <div class="flex items-center space-x-1">
+              <button
+                brnCalendarPreviousButton
+                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+                <ng-icon hlm name="lucideChevronLeft" size="sm" />
+              </button>
+
+              <button
+                brnCalendarNextButton
+                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+                <ng-icon hlm name="lucideChevronRight" size="sm" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
+          <thead>
+            <tr class="flex">
+              <th
+                *brnCalendarWeekday="let weekday"
+                scope="col"
+                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
+                [attr.aria-label]="_i18n.labelWeekday(weekday)">
+                {{ _i18n.formatWeekdayName(weekday) }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+              @for (date of week; track _dateAdapter.getTime(date)) {
+                <td
+                  brnCalendarCell
+                  class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&: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,
+                }]
+        }], propDecorators: { calendarClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarClass", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelection", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCalendarMulti), { isSignal: true }] }] } });
+
+const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti];
+class HlmCalendarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendar, HlmCalendarMulti], exports: [HlmCalendar, HlmCalendarMulti] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendarImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmCalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmCalendarImports],
+                    exports: [...HlmCalendarImports],
+                }]
+        }] });
+
+class HlmPopoverClose {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm('absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmPopoverClose, isStandalone: true, selector: "[hlmPopoverClose],[brnPopoverClose][hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmPopoverClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmPopoverClose],[brnPopoverClose][hlm]',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmPopoverContent {
+    _stateProvider = injectExposesStateProvider({ host: true });
+    state = this._stateProvider.state ?? signal('closed');
+    _renderer = inject(Renderer2);
+    _element = inject(ElementRef);
+    constructor() {
+        effect(() => {
+            this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+        });
+    }
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm('relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmPopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmPopoverContent, isStandalone: true, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmPopoverContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmPopoverContent],[brnPopoverContent][hlm]',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const HlmPopoverImports = [HlmPopoverContent, HlmPopoverClose];
+class HlmPopoverModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: HlmPopoverModule, imports: [HlmPopoverContent, HlmPopoverClose], exports: [HlmPopoverContent, HlmPopoverClose] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmPopoverModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmPopoverImports],
+                    exports: [...HlmPopoverImports],
+                }]
+        }] });
+
+function getDefaultConfig$1() {
+    return {
+        formatDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
+        transformDate: (date) => date,
+        autoCloseOnSelect: false,
+    };
+}
+const HlmDatePickerConfigToken = new InjectionToken('HlmDatePickerConfig');
+function provideHlmDatePickerConfig$1(config) {
+    return { provide: HlmDatePickerConfigToken, useValue: { ...getDefaultConfig$1(), ...config } };
+}
+function injectHlmDatePickerConfig() {
+    const injectedConfig = inject(HlmDatePickerConfigToken, { optional: true });
+    return injectedConfig ? injectedConfig : getDefaultConfig$1();
+}
+
+const HLM_DATE_PICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmDatePicker),
+    multi: true,
+};
+class HlmDatePicker {
+    _config = injectHlmDatePickerConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm('inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 ring-offset-background transition-colors border border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground w-[280px] justify-start text-left font-normal cursor-default justify-between', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', !this.date() ? 'text-muted-foreground' : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    /**
+     * This is used to apply the theme-sdc class to the datepicker's dialog.
+     */
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    /** 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 });
+    /** The selected value. */
+    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    /** If true, the date picker will close when a date is selected. */
+    autoCloseOnSelect = input(this._config.autoCloseOnSelect, { ...(ngDevMode ? { debugName: "autoCloseOnSelect" } : {}), transform: booleanAttribute });
+    /** Defines how the date should be displayed in the UI.  */
+    formatDate = input(this._config.formatDate, ...(ngDevMode ? [{ debugName: "formatDate" }] : []));
+    /** Defines how the date should be transformed before saving to model/form. */
+    transformDate = input(this._config.transformDate, ...(ngDevMode ? [{ debugName: "transformDate" }] : []));
+    _popoverState = signal(null, ...(ngDevMode ? [{ debugName: "_popoverState" }] : []));
+    _state = computed(() => ({
+        disabled: signal(this.disabled()),
+    }), ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    _formattedDate = computed(() => {
+        const date = this.date();
+        return date ? this.formatDate()(date) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "_formattedDate" }] : []));
+    changed = output();
+    _onChange;
+    _onTouched;
+    _handleChange(value) {
+        if (this._state().disabled())
+            return;
+        const transformedDate = this.transformDate()(value);
+        this.date.set(transformedDate);
+        this._onChange?.(transformedDate);
+        this.changed.emit(transformedDate);
+        if (this.autoCloseOnSelect()) {
+            this._popoverState.set('closed');
+        }
+    }
+    /** CONROL VALUE ACCESSOR */
+    writeValue(value) {
+        // optional FormControl is initialized with null value
+        if (value === null)
+            return;
+        this.date.set(this.transformDate()(value));
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._state().disabled.set(isDisabled);
+    }
+    open() {
+        this._popoverState.set('open');
+    }
+    close() {
+        this._popoverState.set('closed');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HlmDatePicker, isStandalone: true, selector: "hlm-date-picker", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", 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 }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", changed: "changed" }, host: { classAttribute: "block" }, providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })], ngImport: i0, template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideCalendar" />
+      </button>
+
+      <div hlmPopoverContent [class]="styleClass()" class="w-auto p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar
+          calendarClass="border-0 rounded-none"
+          [date]="date()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_state().disabled()"
+          (dateChange)="_handleChange($event)" />
+      </div>
+    </brn-popover>
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "component", type: BrnPopover, selector: "brn-popover", inputs: ["align", "sideOffset"], exportAs: ["brnPopover"] }, { kind: "directive", type: BrnPopoverTrigger, selector: "button[brnPopoverTrigger],button[brnPopoverTriggerFor]", inputs: ["brnPopoverTriggerFor"] }, { kind: "directive", type: BrnPopoverContent, selector: "[brnPopoverContent]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: ["class"] }, { kind: "component", type: HlmCalendar, selector: "hlm-calendar", inputs: ["calendarClass", "min", "max", "disabled", "date", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmDatePicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-date-picker',
+                    imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendar],
+                    providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+                    template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideCalendar" />
+      </button>
+
+      <div hlmPopoverContent [class]="styleClass()" class="w-auto p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar
+          calendarClass="border-0 rounded-none"
+          [date]="date()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_state().disabled()"
+          (dateChange)="_handleChange($event)" />
+      </div>
+    </brn-popover>
+  `,
+                    host: {
+                        class: 'block',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], autoCloseOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnSelect", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], transformDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDate", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+function getDefaultConfig() {
+    return {
+        formatDates: (dates) => dates.map((date) => (date instanceof Date ? date.toDateString() : `${date}`)).join(', '),
+        transformDates: (dates) => dates,
+        autoCloseOnMaxSelection: false,
+    };
+}
+const HlmDatePickerMultiConfigToken = new InjectionToken('HlmDatePickerMultiConfig');
+function provideHlmDatePickerConfig(config) {
+    return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+function injectHlmDatePickerMultiConfig() {
+    const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
+    return injectedConfig ? injectedConfig : getDefaultConfig();
+}
+
+const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmDatePickerMulti),
+    multi: true,
+};
+class HlmDatePickerMulti {
+    _config = injectHlmDatePickerMultiConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm('inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', !this.date() ? 'text-muted-foreground' : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    /** 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 });
+    /** The maximum selectable dates.  */
+    maxSelection = input(undefined, { ...(ngDevMode ? { debugName: "maxSelection" } : {}), transform: numberAttribute });
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** The selected value. */
+    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    /** If true, the date picker will close when the max selection of dates is reached.. */
+    autoCloseOnMaxSelection = input(this._config.autoCloseOnMaxSelection, { ...(ngDevMode ? { debugName: "autoCloseOnMaxSelection" } : {}), transform: booleanAttribute });
+    /** Defines how the date should be displayed in the UI.  */
+    formatDates = input(this._config.formatDates, ...(ngDevMode ? [{ debugName: "formatDates" }] : []));
+    /** Defines how the date should be transformed before saving to model/form. */
+    transformDates = input(this._config.transformDates, ...(ngDevMode ? [{ debugName: "transformDates" }] : []));
+    _popoverState = signal(null, ...(ngDevMode ? [{ debugName: "_popoverState" }] : []));
+    _state = computed(() => ({
+        disabled: signal(this.disabled()),
+    }), ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    _formattedDate = computed(() => {
+        const dates = this.date();
+        return dates ? this.formatDates()(dates) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "_formattedDate" }] : []));
+    changed = output();
+    _onChange;
+    _onTouched;
+    _handleChange(value) {
+        if (value === undefined)
+            return;
+        if (this._state().disabled())
+            return;
+        const transformedDate = this.transformDates()(value);
+        this.date.set(transformedDate);
+        this._onChange?.(transformedDate);
+        this.changed.emit(transformedDate);
+        if (this.autoCloseOnMaxSelection() && this.date()?.length === this.maxSelection()) {
+            this._popoverState.set('closed');
+        }
+    }
+    /** CONROL VALUE ACCESSOR */
+    writeValue(value) {
+        // optional FormControl is initialized with null value
+        if (value === null)
+            return;
+        this.date.set(this.transformDates()(value));
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._state().disabled.set(isDisabled);
+    }
+    open() {
+        this._popoverState.set('open');
+    }
+    close() {
+        this._popoverState.set('closed');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmDatePickerMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HlmDatePickerMulti, isStandalone: true, selector: "hlm-date-picker-multi", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", 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 }, autoCloseOnMaxSelection: { classPropertyName: "autoCloseOnMaxSelection", publicName: "autoCloseOnMaxSelection", isSignal: true, isRequired: false, transformFunction: null }, formatDates: { classPropertyName: "formatDates", publicName: "formatDates", isSignal: true, isRequired: false, transformFunction: null }, transformDates: { classPropertyName: "transformDates", publicName: "transformDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", changed: "changed" }, host: { classAttribute: "block" }, providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })], ngImport: i0, template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
+        <ng-icon hlm size="sm" name="lucideCalendar" />
+
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+      </button>
+
+      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar-multi
+          calendarClass="border-0 rounded-none"
+          [date]="date()"
+          [min]="min()"
+          [max]="max()"
+          [minSelection]="minSelection()"
+          [maxSelection]="maxSelection()"
+          [disabled]="_state().disabled()"
+          (dateChange)="_handleChange($event)" />
+      </div>
+    </brn-popover>
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "component", type: BrnPopover, selector: "brn-popover", inputs: ["align", "sideOffset"], exportAs: ["brnPopover"] }, { kind: "directive", type: BrnPopoverTrigger, selector: "button[brnPopoverTrigger],button[brnPopoverTriggerFor]", inputs: ["brnPopoverTriggerFor"] }, { kind: "directive", type: BrnPopoverContent, selector: "[brnPopoverContent]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: ["class"] }, { kind: "component", type: HlmCalendarMulti, selector: "hlm-calendar-multi", inputs: ["calendarClass", "min", "max", "minSelection", "maxSelection", "disabled", "date", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmDatePickerMulti, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-date-picker-multi',
+                    imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarMulti],
+                    providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+                    template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
+        <ng-icon hlm size="sm" name="lucideCalendar" />
+
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+      </button>
+
+      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar-multi
+          calendarClass="border-0 rounded-none"
+          [date]="date()"
+          [min]="min()"
+          [max]="max()"
+          [minSelection]="minSelection()"
+          [maxSelection]="maxSelection()"
+          [disabled]="_state().disabled()"
+          (dateChange)="_handleChange($event)" />
+      </div>
+    </brn-popover>
+  `,
+                    host: {
+                        class: 'block',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelection", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], autoCloseOnMaxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnMaxSelection", required: false }] }], formatDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDates", required: false }] }], transformDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDates", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+const HlmDatePickerImports = [HlmDatePicker, HlmDatePickerMulti];
+class HlmDatePickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: HlmDatePickerModule, imports: [HlmDatePicker, HlmDatePickerMulti], exports: [HlmDatePicker, HlmDatePickerMulti] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmDatePickerModule, imports: [HlmDatePickerImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmDatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmDatePickerImports],
+                    exports: [...HlmDatePickerImports],
+                }]
+        }] });
+
+/**
+ * A customizable datepicker component built on Spartan UI datepicker component.
+ *
+ * This component supports various configurations and exposes all native datepicker functionality.
+ * All HTML datepicker attributes and events are automatically forwarded to the inner datepicker element.
+ *
+ * @since 1.0.0-alpha.1
+ */
+class DatePickerComponent {
+    allowedVariants = [
+        'variant-primary',
+        'variant-secondary',
+        'variant-alternative',
+        'variant-success',
+        'variant-warning',
+        'variant-danger',
+    ];
+    allowedRadius = ['radius-default', 'radius-sm', 'radius-md', 'radius-lg', 'radius-xl'];
+    /**
+     * The current theme applied to the component.
+     */
+    theme = input('theme-sdc', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    /**
+     * Predefined styles to apply to the component.
+     * Can be a single class or multiple classes from different categories.
+     */
+    styleClass = input([], ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    // Computed signal that validates and filters the styleClass datepicker
+    _validatedStyleClass = computed(() => {
+        const value = this.styleClass();
+        if (!Array.isArray(value)) {
+            return [];
+        }
+        const validValues = value.filter(style => {
+            return (this.allowedVariants.includes(style) ||
+                this.allowedRadius.includes(style));
+        });
+        const invalidValues = value.filter(style => {
+            return (!this.allowedVariants.includes(style) &&
+                !this.allowedRadius.includes(style));
+        });
+        if (invalidValues.length > 0) {
+            throw new Error(`DatePickerComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${[
+                ...this.allowedVariants,
+                ...this.allowedRadius,
+            ].join(', ')}`);
+        }
+        return validValues;
+    }, ...(ngDevMode ? [{ debugName: "_validatedStyleClass" }] : []));
+    /**
+     * Additional CSS classes to apply to the component.
+     */
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    /**
+     * The label text to be displayed.
+     * Only visible when a value is provided.
+     */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /**
+     * The position of the label relative to the datepicker.
+     * 'top' places the label above the datepicker, 'left' places it to the left.
+     */
+    labelPosition = input('top', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    /**
+     * The placeholder text for the datepicker.
+     */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /**
+     * Whether the component is disabled.
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * The hint text for the datepicker.
+     */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /**
+     * The name of the form control.
+     */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * The maximum date for the datepicker.
+     */
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    /**
+     * The minimum date for the datepicker.
+     */
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    /**
+     * Whether the datepicker should close when a date is selected.
+     */
+    autoCloseOnSelect = input(false, ...(ngDevMode ? [{ debugName: "autoCloseOnSelect" }] : []));
+    /**
+     * Custom error message to override the validator's error message.
+     */
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    /**
+     * Controls when errors are displayed.
+     * - 'after-submit': Show errors only after form submission (default)
+     * - 'always': Show errors immediately when validation fails
+     */
+    errorDisplayMode = input('after-submit', ...(ngDevMode ? [{ debugName: "errorDisplayMode" }] : []));
+    /**
+     * The FormControl instance to bind to this datepicker.
+     * This allows the component to access form state without circular dependencies.
+     */
+    control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : []));
+    /**
+     * Callback function to format the date display.
+     * Receives a Date object and returns a formatted string.
+     */
+    formatDate = input(this.defaultFormatDate, ...(ngDevMode ? [{ debugName: "formatDate" }] : []));
+    /**
+     * Component subscriptions.
+     */
+    subscriptions = [];
+    /**
+     * The current selected date value.
+     */
+    date = signal(undefined, ...(ngDevMode ? [{ debugName: "date" }] : []));
+    /**
+     * Computed signal that ensures the date is always either a valid Date object or undefined.
+     * This prevents null values from being passed to the Spartan calendar component.
+     */
+    safeDate = computed(() => {
+        if (this.date() instanceof Date || this.date() === undefined) {
+            return this.date();
+        }
+        throw new Error('DatePickerComponent: date must be a valid Date object or undefined');
+    }, ...(ngDevMode ? [{ debugName: "safeDate" }] : []));
+    /**
+     * The state of the form control.
+     */
+    controlState = signal({ invalid: false, touched: false, dirty: false, errors: null, value: undefined, isFormSubmitted: false }, ...(ngDevMode ? [{ debugName: "controlState" }] : []));
+    /**
+     * Event emitted when the date value changes.
+     */
+    dateChange = output();
+    /**
+     * Computed class string that combines theme and user classes.
+     */
+    computedClass = computed(() => {
+        const themeClass = this.theme();
+        const styleClass = this._validatedStyleClass();
+        const className = this.className();
+        const errorClass = this.showError() ? 'has-error' : '';
+        return ['sdc-datepicker', themeClass, ...styleClass, className, errorClass].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    /**
+     * Computed class string for the label positioning.
+     */
+    labelClass = computed(() => {
+        const position = this.labelPosition();
+        return position === 'left' ? 'sdc-datepicker-label left' : 'sdc-datepicker-label top';
+    }, ...(ngDevMode ? [{ debugName: "labelClass" }] : []));
+    /**
+     * Computed signal to determine if the label should be visible.
+     */
+    showLabel = computed(() => {
+        return this.label() && this.label().trim().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    /**
+     * Computed signal to get the current error message.
+     */
+    currentErrorMessage = computed(() => {
+        const customMessage = this.errorMessage();
+        const hasErrors = Object.keys(this.controlState()?.errors ?? {}).length > 0;
+        if (hasErrors && customMessage && customMessage.trim().length > 0) {
+            return customMessage;
+        }
+        // If no custom message, try to get validation error from the form control state
+        if (hasErrors) {
+            const firstErrorKey = Object.keys(this.controlState()?.errors ?? {})[0];
+            const firstErrorValue = this.controlState()?.errors?.[firstErrorKey];
+            return this.getValidatorErrorMessage(firstErrorKey, firstErrorValue);
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "currentErrorMessage" }] : []));
+    /**
+     * Computed signal to determine if there's an error to display.
+     */
+    showError = computed(() => {
+        const errorMode = this.errorDisplayMode();
+        // For validation errors, respect the error display mode
+        if (this.controlState()?.invalid) {
+            if (errorMode === 'always') {
+                // Show errors when component is touched and invalid
+                return this.controlState()?.touched || this.controlState()?.dirty || this.controlState()?.isFormSubmitted;
+            }
+            else if (errorMode === 'after-submit') {
+                // Show errors when form is submitted, regardless of touch/focus state
+                return this.controlState()?.isFormSubmitted;
+            }
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    ngOnInit() {
+        // Validate the name datepicker
+        if ((this.control() || this.showLabel()) && !this.name()) {
+            throw new Error('DatePickerComponent: name is required when control or label inputs are present');
+        }
+        // Initialize the date value from the form control if it exists
+        if (this.control()) {
+            const initialValue = this.control()?.value;
+            // Ensure we start with undefined, if no value is provided
+            this.date.set(initialValue instanceof Date ? initialValue : undefined);
+        }
+        const formEventsSubscription = this.control()?.parent?.events.subscribe(event => {
+            // We do not reset this signal because it is used to show the errors
+            // When a form is submitted at least once, we want to show the errors
+            if (event instanceof FormSubmittedEvent) {
+                this.controlState.set({ ...this.controlState(), isFormSubmitted: true });
+                // We add this because the statusChanges event is not triggered when the form is submitted
+                if (event.source.status === 'INVALID') {
+                    this.controlState.set({ ...this.controlState(), invalid: true });
+                }
+            }
+            if (event instanceof TouchedChangeEvent) {
+                this.controlState.set({ ...this.controlState(), touched: event.touched });
+            }
+            if (event instanceof PristineChangeEvent) {
+                this.controlState.set({ ...this.controlState(), dirty: !event.pristine });
+            }
+            this.controlState.set({ ...this.controlState(), errors: this.control()?.errors });
+        });
+        const statusChangesSubscription = this.control()?.statusChanges.subscribe(status => {
+            if (status === 'INVALID') {
+                this.controlState.set({ ...this.controlState(), invalid: true });
+            }
+            this.controlState.set({ ...this.controlState(), errors: this.control()?.errors });
+        });
+        this.subscriptions.push(formEventsSubscription, statusChangesSubscription);
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription?.unsubscribe());
+    }
+    defaultFormatDate(date) {
+        return date.toLocaleDateString('en-GB', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+        });
+    }
+    /**
+     * Handles date change events from the Spartan date picker.
+     */
+    handleDateChange(date) {
+        // Convert null to undefined for the signal to prevent null values
+        const dateValue = date instanceof Date ? date : undefined;
+        this.date.set(dateValue);
+        this.dateChange.emit(date);
+        // Update the form control value if it exists
+        const control = this.control();
+        if (control) {
+            control.setValue(date);
+            control.markAsDirty();
+            control.markAsTouched();
+            this.controlState.set({ ...this.controlState(), value: dateValue });
+        }
+    }
+    /**
+     * Gets the error message for a specific validator error.
+     */
+    getValidatorErrorMessage(errorKey, errorValue) {
+        switch (errorKey) {
+            case 'required':
+                return 'This field is required.';
+            case 'pattern':
+                return 'Please enter a valid value.';
+            default:
+                return 'Please enter a valid value.';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DatePickerComponent, isStandalone: true, selector: "sdc-datepicker", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplayMode: { classPropertyName: "errorDisplayMode", publicName: "errorDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, providers: [provideDateAdapter(BrnNativeDateAdapter)], ngImport: i0, template: "<div [class]=\"computedClass()\">\n  <div class=\"component-container\">\n    <!-- Label positioned above or to the left -->\n    @if (showLabel()) {\n      <label [class]=\"labelClass()\" [for]=\"name()\">\n        {{ label() }}\n      </label>\n    }\n\n    <!-- The styleClass is applied to the date picker's dialog -->\n    <hlm-date-picker\n      [styleClass]=\"computedClass()\"\n      [id]=\"name()\"\n      [min]=\"minDate()!\"\n      [max]=\"maxDate()!\"\n      [date]=\"safeDate()\"\n      [formatDate]=\"formatDate()\"\n      [autoCloseOnSelect]=\"autoCloseOnSelect()\"\n      [disabled]=\"disabled()\"\n      (changed)=\"handleDateChange($event)\">\n      @if (placeholder()) {\n        <span class=\"sdc-datepicker-placeholder\">{{ placeholder() }}</span>\n      }\n    </hlm-date-picker>\n  </div>\n\n  <!-- Error message  -->\n  @if (showError()) {\n    <div class=\"sdc-datepicker-error\">\n      {{ currentErrorMessage() }}\n    </div>\n  }\n\n  <!-- Hint message -->\n  @if (hint() && hint().trim().length > 0 && !showError()) {\n    <div class=\"sdc-datepicker-hint\">\n      {{ hint() }}\n    </div>\n  }\n</div>\n", styles: [".sdc-datepicker{--sdc-datepicker-label-color: var(--color-neutral-700);--sdc-datepicker-label-size: var(--text-base);--sdc-datepicker-label-weight: var(--font-semibold);--sdc-datepicker-label-gap: var(--space-6);--sdc-datepicker-label-width: auto;--sdc-datepicker-input-width: 100%;--sdc-datepicker-input-background: var(--color-pure-white);--sdc-datepicker-input-border-color: var(--color-neutral-300);--sdc-datepicker-input-border-width: var(--border-default);--sdc-datepicker-input-border-radius: var(--radius-full);--sdc-datepicker-input-padding-vertical: var(--space-2);--sdc-datepicker-input-padding-horizontal: var(--space-3);--sdc-datepicker-input-text-color: var(--color-neutral-900);--sdc-datepicker-input-text-size: var(--text-base);--sdc-datepicker-input-text-weight: var(--font-medium);--sdc-datepicker-input-border-hover: var(--color-neutral-500);--sdc-datepicker-input-focus-ring-width: var(--border-default);--sdc-datepicker-input-focus-ring-color: var(--color-primary);--sdc-datepicker-input-focus-ring-offset: var(--border-2);--sdc-datepicker-placeholder-color: var(--color-neutral-500);--sdc-datepicker-placeholder-size: var(--text-sm);--sdc-datepicker-placeholder-weight: var(--font-medium);--sdc-datepicker-hint-color: var(--color-neutral-600);--sdc-datepicker-hint-size: var(--text-xs);--sdc-datepicker-error-color: var(--color-danger);--sdc-datepicker-error-size: var(--text-xs);--sdc-datepicker-calendar-background: var(--color-pure-white);--sdc-datepicker-calendar-border-color: var(--color-neutral-200);--sdc-datepicker-calendar-border-width: var(--border-default);--sdc-datepicker-calendar-border-radius: var(--radius-lg);--sdc-datepicker-calendar-shadow: 0 1px 3px rgba(0, 0, 0, .08);--sdc-datepicker-calendar-padding: var(--space-4);--sdc-datepicker-month-year-text-color: var(--color-neutral-900);--sdc-datepicker-month-year-text-size: var(--text-base);--sdc-datepicker-month-year-text-weight: var(--font-semibold);--sdc-datepicker-month-year-hover-text-color: var(--color-neutral-900);--sdc-datepicker-month-year-padding: var(--space-2);--sdc-datepicker-month-year-button-background: var(--color-pure-white);--sdc-datepicker-month-year-button-text-color-hover: var(--color-pure-white);--sdc-datepicker-month-year-button-background-hover: var(--color-neutral-900);--sdc-datepicker-day-button-disabled-background: transparent;--sdc-datepicker-day-button-disabled-text-color: var(--color-neutral-300);--sdc-datepicker-day-button-background: transparent;--sdc-datepicker-day-button-text-color: var(--color-neutral-900);--sdc-datepicker-day-button-text-size: var(--text-sm);--sdc-datepicker-day-button-text-weight: var(--font-semibold);--sdc-datepicker-day-button-border-radius: var(--radius-md);--sdc-datepicker-day-button-padding: var(--space-2);--sdc-datepicker-day-button-hover-background: var(--color-secondary);--sdc-datepicker-day-button-hover-text-color: var(--color-pure-white)}.component-container{display:flex;flex-direction:column;gap:var(--sdc-datepicker-label-gap);width:var(--sdc-datepicker-input-width)}.component-container hlm-date-picker{width:var(--sdc-datepicker-input-width)}.sdc-datepicker-label{font-weight:var(--sdc-datepicker-label-weight);font-size:var(--sdc-datepicker-label-size);color:hsl(var(--sdc-datepicker-label-color));width:var(--sdc-datepicker-label-width);padding-left:var(--sdc-datepicker-input-padding-horizontal);line-height:1.25rem;display:block}.component-container:has(.sdc-datepicker-label.left){padding-left:0;flex-direction:row;align-items:center}.sdc-datepicker button[brnpopovertrigger]{width:var(--sdc-datepicker-input-width);background:var(--sdc-datepicker-input-background);border:var(--sdc-datepicker-input-border-width) solid hsl(var(--sdc-datepicker-input-border-color));border-radius:var(--sdc-datepicker-input-border-radius);padding:var(--sdc-datepicker-input-padding-vertical) var(--sdc-datepicker-input-padding-horizontal);color:hsl(var(--sdc-datepicker-input-text-color));font-size:var(--sdc-datepicker-input-text-size);font-weight:var(--sdc-datepicker-input-text-weight);cursor:pointer;outline:none}.sdc-datepicker-placeholder{color:hsl(var(--sdc-datepicker-placeholder-color));font-size:var(--sdc-datepicker-placeholder-size);font-weight:var(--sdc-datepicker-placeholder-weight)}.sdc-datepicker button[brnpopovertrigger]:hover:not(:disabled){border-color:hsl(var(--sdc-datepicker-input-border-hover))}.sdc-datepicker button[brnpopovertrigger][data-state=open]{outline:var(--sdc-datepicker-input-focus-ring-width) solid hsl(var(--sdc-datepicker-input-focus-ring-color));outline-offset:var(--sdc-datepicker-input-focus-ring-offset)}.sdc-datepicker button[brnpopovertrigger]:disabled{opacity:.6;cursor:not-allowed;background:hsl(var(--color-neutral-100))}.sdc-datepicker-error{color:hsl(var(--sdc-datepicker-error-color));font-size:var(--sdc-datepicker-error-size);line-height:1rem}.sdc-datepicker-hint{color:hsl(var(--sdc-datepicker-hint-color));font-size:var(--sdc-datepicker-hint-size);line-height:1rem}.sdc-datepicker div[brncalendar]{background:hsl(var(--sdc-datepicker-calendar-background));border:var(--sdc-datepicker-calendar-border-width) solid hsl(var(--sdc-datepicker-calendar-border-color));border-radius:var(--sdc-datepicker-calendar-border-radius);box-shadow:var(--sdc-datepicker-calendar-shadow);padding:var(--sdc-datepicker-calendar-padding)}.sdc-datepicker div[brncalendarheader]{color:hsl(var(--sdc-datepicker-month-year-text-color));font-size:var(--sdc-datepicker-month-year-text-size);font-weight:var(--sdc-datepicker-month-year-text-weight);padding:var(--sdc-datepicker-month-year-padding)}.sdc-datepicker button[brncalendarpreviousbutton],.sdc-datepicker button[brncalendarnextbutton]{cursor:pointer;color:hsl(var(--sdc-datepicker-month-year-text-color));background:hsl(var(--sdc-datepicker-month-year-button-background));transition:all .2s ease}.sdc-datepicker button[brncalendarpreviousbutton]:disabled,.sdc-datepicker button[brncalendarnextbutton]:disabled{opacity:.6;cursor:not-allowed;color:hsl(var(--color-neutral-100))}.sdc-datepicker button[brncalendarpreviousbutton]:hover:not(:disabled),.sdc-datepicker button[brncalendarnextbutton]:hover:not(:disabled){color:hsl(var(--sdc-datepicker-month-year-button-text-color-hover));background:hsl(var(--sdc-datepicker-month-year-button-background-hover))}.sdc-datepicker button[brncalendarcellbutton]{background:hsl(var(--sdc-datepicker-day-button-background));color:hsl(var(--sdc-datepicker-day-button-text-color));font-size:var(--sdc-datepicker-day-button-text-size);font-weight:var(--sdc-datepicker-day-button-text-weight);border-radius:var(--sdc-datepicker-day-button-border-radius);padding:var(--sdc-datepicker-day-button-padding);transition:all .2s ease;cursor:pointer}.sdc-datepicker button[brncalendarcellbutton]:hover:not(:disabled){background-color:hsl(var(--sdc-datepicker-day-button-hover-background));color:hsl(var(--sdc-datepicker-day-button-hover-text-color))}.sdc-datepicker button[brncalendarcellbutton]:disabled{background-color:hsl(var(--sdc-datepicker-day-button-disabled-background));color:hsl(var(--sdc-datepicker-day-button-disabled-text-color));cursor:not-allowed}.variant-primary.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-primary)}.variant-secondary.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-secondary)}.variant-alternative.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-alternative)}.variant-success.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-success)}.variant-warning.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-warning)}.variant-danger.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-danger)}.radius-default.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-default);--sdc-datepicker-day-button-border-radius: var(--radius-default)}.radius-sm.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-sm);--sdc-datepicker-day-button-border-radius: var(--radius-sm)}.radius-md.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-md);--sdc-datepicker-day-button-border-radius: var(--radius-md)}.radius-lg.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-lg);--sdc-datepicker-day-button-border-radius: var(--radius-lg)}.radius-xl.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-xl);--sdc-datepicker-day-button-border-radius: var(--radius-xl)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HlmDatePicker, selector: "hlm-date-picker", inputs: ["class", "styleClass", "min", "max", "disabled", "date", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange", "changed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sdc-datepicker', imports: [ReactiveFormsModule, HlmDatePicker], providers: [provideDateAdapter(BrnNativeDateAdapter)], template: "<div [class]=\"computedClass()\">\n  <div class=\"component-container\">\n    <!-- Label positioned above or to the left -->\n    @if (showLabel()) {\n      <label [class]=\"labelClass()\" [for]=\"name()\">\n        {{ label() }}\n      </label>\n    }\n\n    <!-- The styleClass is applied to the date picker's dialog -->\n    <hlm-date-picker\n      [styleClass]=\"computedClass()\"\n      [id]=\"name()\"\n      [min]=\"minDate()!\"\n      [max]=\"maxDate()!\"\n      [date]=\"safeDate()\"\n      [formatDate]=\"formatDate()\"\n      [autoCloseOnSelect]=\"autoCloseOnSelect()\"\n      [disabled]=\"disabled()\"\n      (changed)=\"handleDateChange($event)\">\n      @if (placeholder()) {\n        <span class=\"sdc-datepicker-placeholder\">{{ placeholder() }}</span>\n      }\n    </hlm-date-picker>\n  </div>\n\n  <!-- Error message  -->\n  @if (showError()) {\n    <div class=\"sdc-datepicker-error\">\n      {{ currentErrorMessage() }}\n    </div>\n  }\n\n  <!-- Hint message -->\n  @if (hint() && hint().trim().length > 0 && !showError()) {\n    <div class=\"sdc-datepicker-hint\">\n      {{ hint() }}\n    </div>\n  }\n</div>\n", styles: [".sdc-datepicker{--sdc-datepicker-label-color: var(--color-neutral-700);--sdc-datepicker-label-size: var(--text-base);--sdc-datepicker-label-weight: var(--font-semibold);--sdc-datepicker-label-gap: var(--space-6);--sdc-datepicker-label-width: auto;--sdc-datepicker-input-width: 100%;--sdc-datepicker-input-background: var(--color-pure-white);--sdc-datepicker-input-border-color: var(--color-neutral-300);--sdc-datepicker-input-border-width: var(--border-default);--sdc-datepicker-input-border-radius: var(--radius-full);--sdc-datepicker-input-padding-vertical: var(--space-2);--sdc-datepicker-input-padding-horizontal: var(--space-3);--sdc-datepicker-input-text-color: var(--color-neutral-900);--sdc-datepicker-input-text-size: var(--text-base);--sdc-datepicker-input-text-weight: var(--font-medium);--sdc-datepicker-input-border-hover: var(--color-neutral-500);--sdc-datepicker-input-focus-ring-width: var(--border-default);--sdc-datepicker-input-focus-ring-color: var(--color-primary);--sdc-datepicker-input-focus-ring-offset: var(--border-2);--sdc-datepicker-placeholder-color: var(--color-neutral-500);--sdc-datepicker-placeholder-size: var(--text-sm);--sdc-datepicker-placeholder-weight: var(--font-medium);--sdc-datepicker-hint-color: var(--color-neutral-600);--sdc-datepicker-hint-size: var(--text-xs);--sdc-datepicker-error-color: var(--color-danger);--sdc-datepicker-error-size: var(--text-xs);--sdc-datepicker-calendar-background: var(--color-pure-white);--sdc-datepicker-calendar-border-color: var(--color-neutral-200);--sdc-datepicker-calendar-border-width: var(--border-default);--sdc-datepicker-calendar-border-radius: var(--radius-lg);--sdc-datepicker-calendar-shadow: 0 1px 3px rgba(0, 0, 0, .08);--sdc-datepicker-calendar-padding: var(--space-4);--sdc-datepicker-month-year-text-color: var(--color-neutral-900);--sdc-datepicker-month-year-text-size: var(--text-base);--sdc-datepicker-month-year-text-weight: var(--font-semibold);--sdc-datepicker-month-year-hover-text-color: var(--color-neutral-900);--sdc-datepicker-month-year-padding: var(--space-2);--sdc-datepicker-month-year-button-background: var(--color-pure-white);--sdc-datepicker-month-year-button-text-color-hover: var(--color-pure-white);--sdc-datepicker-month-year-button-background-hover: var(--color-neutral-900);--sdc-datepicker-day-button-disabled-background: transparent;--sdc-datepicker-day-button-disabled-text-color: var(--color-neutral-300);--sdc-datepicker-day-button-background: transparent;--sdc-datepicker-day-button-text-color: var(--color-neutral-900);--sdc-datepicker-day-button-text-size: var(--text-sm);--sdc-datepicker-day-button-text-weight: var(--font-semibold);--sdc-datepicker-day-button-border-radius: var(--radius-md);--sdc-datepicker-day-button-padding: var(--space-2);--sdc-datepicker-day-button-hover-background: var(--color-secondary);--sdc-datepicker-day-button-hover-text-color: var(--color-pure-white)}.component-container{display:flex;flex-direction:column;gap:var(--sdc-datepicker-label-gap);width:var(--sdc-datepicker-input-width)}.component-container hlm-date-picker{width:var(--sdc-datepicker-input-width)}.sdc-datepicker-label{font-weight:var(--sdc-datepicker-label-weight);font-size:var(--sdc-datepicker-label-size);color:hsl(var(--sdc-datepicker-label-color));width:var(--sdc-datepicker-label-width);padding-left:var(--sdc-datepicker-input-padding-horizontal);line-height:1.25rem;display:block}.component-container:has(.sdc-datepicker-label.left){padding-left:0;flex-direction:row;align-items:center}.sdc-datepicker button[brnpopovertrigger]{width:var(--sdc-datepicker-input-width);background:var(--sdc-datepicker-input-background);border:var(--sdc-datepicker-input-border-width) solid hsl(var(--sdc-datepicker-input-border-color));border-radius:var(--sdc-datepicker-input-border-radius);padding:var(--sdc-datepicker-input-padding-vertical) var(--sdc-datepicker-input-padding-horizontal);color:hsl(var(--sdc-datepicker-input-text-color));font-size:var(--sdc-datepicker-input-text-size);font-weight:var(--sdc-datepicker-input-text-weight);cursor:pointer;outline:none}.sdc-datepicker-placeholder{color:hsl(var(--sdc-datepicker-placeholder-color));font-size:var(--sdc-datepicker-placeholder-size);font-weight:var(--sdc-datepicker-placeholder-weight)}.sdc-datepicker button[brnpopovertrigger]:hover:not(:disabled){border-color:hsl(var(--sdc-datepicker-input-border-hover))}.sdc-datepicker button[brnpopovertrigger][data-state=open]{outline:var(--sdc-datepicker-input-focus-ring-width) solid hsl(var(--sdc-datepicker-input-focus-ring-color));outline-offset:var(--sdc-datepicker-input-focus-ring-offset)}.sdc-datepicker button[brnpopovertrigger]:disabled{opacity:.6;cursor:not-allowed;background:hsl(var(--color-neutral-100))}.sdc-datepicker-error{color:hsl(var(--sdc-datepicker-error-color));font-size:var(--sdc-datepicker-error-size);line-height:1rem}.sdc-datepicker-hint{color:hsl(var(--sdc-datepicker-hint-color));font-size:var(--sdc-datepicker-hint-size);line-height:1rem}.sdc-datepicker div[brncalendar]{background:hsl(var(--sdc-datepicker-calendar-background));border:var(--sdc-datepicker-calendar-border-width) solid hsl(var(--sdc-datepicker-calendar-border-color));border-radius:var(--sdc-datepicker-calendar-border-radius);box-shadow:var(--sdc-datepicker-calendar-shadow);padding:var(--sdc-datepicker-calendar-padding)}.sdc-datepicker div[brncalendarheader]{color:hsl(var(--sdc-datepicker-month-year-text-color));font-size:var(--sdc-datepicker-month-year-text-size);font-weight:var(--sdc-datepicker-month-year-text-weight);padding:var(--sdc-datepicker-month-year-padding)}.sdc-datepicker button[brncalendarpreviousbutton],.sdc-datepicker button[brncalendarnextbutton]{cursor:pointer;color:hsl(var(--sdc-datepicker-month-year-text-color));background:hsl(var(--sdc-datepicker-month-year-button-background));transition:all .2s ease}.sdc-datepicker button[brncalendarpreviousbutton]:disabled,.sdc-datepicker button[brncalendarnextbutton]:disabled{opacity:.6;cursor:not-allowed;color:hsl(var(--color-neutral-100))}.sdc-datepicker button[brncalendarpreviousbutton]:hover:not(:disabled),.sdc-datepicker button[brncalendarnextbutton]:hover:not(:disabled){color:hsl(var(--sdc-datepicker-month-year-button-text-color-hover));background:hsl(var(--sdc-datepicker-month-year-button-background-hover))}.sdc-datepicker button[brncalendarcellbutton]{background:hsl(var(--sdc-datepicker-day-button-background));color:hsl(var(--sdc-datepicker-day-button-text-color));font-size:var(--sdc-datepicker-day-button-text-size);font-weight:var(--sdc-datepicker-day-button-text-weight);border-radius:var(--sdc-datepicker-day-button-border-radius);padding:var(--sdc-datepicker-day-button-padding);transition:all .2s ease;cursor:pointer}.sdc-datepicker button[brncalendarcellbutton]:hover:not(:disabled){background-color:hsl(var(--sdc-datepicker-day-button-hover-background));color:hsl(var(--sdc-datepicker-day-button-hover-text-color))}.sdc-datepicker button[brncalendarcellbutton]:disabled{background-color:hsl(var(--sdc-datepicker-day-button-disabled-background));color:hsl(var(--sdc-datepicker-day-button-disabled-text-color));cursor:not-allowed}.variant-primary.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-primary)}.variant-secondary.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-secondary)}.variant-alternative.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-alternative)}.variant-success.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-success)}.variant-warning.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-warning)}.variant-danger.sdc-datepicker{--sdc-datepicker-day-button-hover-background: var(--color-danger)}.radius-default.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-default);--sdc-datepicker-day-button-border-radius: var(--radius-default)}.radius-sm.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-sm);--sdc-datepicker-day-button-border-radius: var(--radius-sm)}.radius-md.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-md);--sdc-datepicker-day-button-border-radius: var(--radius-md)}.radius-lg.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-lg);--sdc-datepicker-day-button-border-radius: var(--radius-lg)}.radius-xl.sdc-datepicker{--sdc-datepicker-input-border-radius: var(--radius-xl);--sdc-datepicker-day-button-border-radius: var(--radius-xl)}\n"] }]
+        }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], autoCloseOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnSelect", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplayMode", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+
+// Export the main form component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatePickerComponent };
+//# sourceMappingURL=3ddv-software-division-components-backoffice-datepicker.mjs.map