@egose/shadcn-theme-ng 0.0.9 → 0.0.11

package/date-picker/fesm2022/date-picker.mjs

@@ -0,0 +1,599 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, forwardRef, input, computed, booleanAttribute, linkedSignal, signal, output, ChangeDetectionStrategy, Component, numberAttribute, untracked, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { BrnPopover, BrnPopoverTrigger, BrnPopoverContent } from '@spartan-ng/brain/popover';
+import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
+import { HlmCalendar, HlmCalendarMulti, HlmCalendarRange } from '@egose/shadcn-theme-ng/calendar';
+import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
+import { HlmPopoverContent } from '@egose/shadcn-theme-ng/popover';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+
+function getDefaultConfig$2() {
+    return {
+        formatDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
+        transformDate: (date) => date,
+        autoCloseOnSelect: false,
+    };
+}
+const HlmDatePickerConfigToken = new InjectionToken('HlmDatePickerConfig');
+function provideHlmDatePickerConfig(config) {
+    return { provide: HlmDatePickerConfigToken, useValue: { ...getDefaultConfig$2(), ...config } };
+}
+function injectHlmDatePickerConfig() {
+    const injectedConfig = inject(HlmDatePickerConfigToken, { optional: true });
+    return injectedConfig ? injectedConfig : getDefaultConfig$2();
+}
+
+const HLM_DATE_PICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmDatePicker),
+    multi: true,
+};
+let nextId$2 = 0;
+class HlmDatePicker extends BrnFormFieldControl {
+    _config = injectHlmDatePickerConfig();
+    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
+    _computedClass = computed(() => hlm('tw:ring-offset-background tw:border-input tw:bg-background tw:hover:bg-input/50 tw:dark:bg-input/10 tw:dark:hover:bg-input/50 tw:inline-flex tw:h-9 tw:w-full tw:cursor-default tw:items-center tw:justify-between tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:border tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:font-normal tw:transition-all tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:focus-visible:ring-ring tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2', 'tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:[&_ng-icon]:pointer-events-none tw:[&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    /** The id of the button that opens the date picker. */
+    buttonId = input(`hlm-date-picker-${nextId$2++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+    /** The minimum date that can be selected.*/
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    /** The maximum date that can be selected. */
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /** The selected value. */
+    date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    _mutableDate = linkedSignal(this.date);
+    /** If true, the date picker will close when a date is selected. */
+    autoCloseOnSelect = input(this._config.autoCloseOnSelect, ...(ngDevMode ? [{ debugName: "autoCloseOnSelect", transform: booleanAttribute }] : [{
+            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" }] : []));
+    _mutableDisabled = linkedSignal(this.disabled);
+    _formattedDate = computed(() => {
+        const date = this._mutableDate();
+        return date ? this.formatDate()(date) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "_formattedDate" }] : []));
+    dateChange = output();
+    _onChange;
+    _onTouched;
+    _handleChange(value) {
+        if (this._mutableDisabled())
+            return;
+        const transformedDate = this.transformDate()(value);
+        this._mutableDate.set(transformedDate);
+        this._onChange?.(transformedDate);
+        this.dateChange.emit(transformedDate);
+        if (this.autoCloseOnSelect()) {
+            this._popoverState.set('closed');
+        }
+    }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        this._mutableDate.set(value ? this.transformDate()(value) : undefined);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._mutableDisabled.set(isDisabled);
+    }
+    open() {
+        this._popoverState.set('open');
+    }
+    close() {
+        this._popoverState.set('closed');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: HlmDatePicker, isStandalone: true, selector: "hlm-date-picker", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", 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: { dateChange: "dateChange" }, host: { classAttribute: "block" }, providers: [
+            HLM_DATE_PICKER_VALUE_ACCESSOR,
+            provideIcons({ lucideChevronDown }),
+            {
+                provide: BrnFormFieldControl,
+                useExisting: forwardRef(() => HlmDatePicker),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button
+        [id]="buttonId()"
+        type="button"
+        [class]="_computedClass()"
+        [disabled]="_mutableDisabled()"
+        brnPopoverTrigger
+      >
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideChevronDown" />
+      </button>
+
+      <div hlmPopoverContent class="tw:w-auto tw:p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar
+          calendarClass="tw:border-0 tw:rounded-none"
+          [date]="_mutableDate()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_mutableDisabled()"
+          (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: "20.3.0", 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({ lucideChevronDown }),
+                        {
+                            provide: BrnFormFieldControl,
+                            useExisting: forwardRef(() => HlmDatePicker),
+                        },
+                    ],
+                    template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button
+        [id]="buttonId()"
+        type="button"
+        [class]="_computedClass()"
+        [disabled]="_mutableDisabled()"
+        brnPopoverTrigger
+      >
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideChevronDown" />
+      </button>
+
+      <div hlmPopoverContent class="tw:w-auto tw:p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar
+          calendarClass="tw:border-0 tw:rounded-none"
+          [date]="_mutableDate()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_mutableDisabled()"
+          (dateChange)="_handleChange($event)"
+        />
+      </div>
+    </brn-popover>
+  `,
+                    host: {
+                        class: 'block',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+function getDefaultConfig$1() {
+    return {
+        formatDates: (dates) => dates.map((date) => (date instanceof Date ? date.toDateString() : `${date}`)).join(', '),
+        transformDates: (dates) => dates,
+        autoCloseOnMaxSelection: false,
+    };
+}
+const HlmDatePickerMultiConfigToken = new InjectionToken('HlmDatePickerMultiConfig');
+function provideHlmDatePickerMultiConfig(config) {
+    return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig$1(), ...config } };
+}
+function injectHlmDatePickerMultiConfig() {
+    const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
+    return injectedConfig ? injectedConfig : getDefaultConfig$1();
+}
+
+const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmDatePickerMulti),
+    multi: true,
+};
+let nextId$1 = 0;
+class HlmDatePickerMulti {
+    _config = injectHlmDatePickerMultiConfig();
+    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
+    _computedClass = computed(() => hlm('tw:ring-offset-background tw:border-input tw:bg-background tw:hover:bg-accent tw:dark:bg-input/30 tw:dark:hover:bg-input/50 tw:inline-flex tw:h-9 tw:w-[280px] tw:cursor-default tw:items-center tw:justify-between tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:border tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:font-normal tw:transition-all tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:focus-visible:ring-ring tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2', 'tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:[&_ng-icon]:pointer-events-none tw:[&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    /** The id of the button that opens the date picker. */
+    buttonId = input(`hlm-date-picker-multi-${nextId$1++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+    /** The minimum date that can be selected.*/
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    /** The maximum date that can be selected. */
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    /** The minimum selectable dates.  */
+    minSelection = input(undefined, ...(ngDevMode ? [{ debugName: "minSelection", transform: numberAttribute }] : [{
+            transform: numberAttribute,
+        }]));
+    /** The maximum selectable dates.  */
+    maxSelection = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelection", transform: numberAttribute }] : [{
+            transform: numberAttribute,
+        }]));
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /** The selected value. */
+    date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    _mutableDate = linkedSignal(this.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 }] : [{
+            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" }] : []));
+    _mutableDisabled = linkedSignal(this.disabled);
+    _formattedDate = computed(() => {
+        const dates = this._mutableDate();
+        return dates ? this.formatDates()(dates) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "_formattedDate" }] : []));
+    dateChange = output();
+    _onChange;
+    _onTouched;
+    _handleChange(value) {
+        if (value === undefined)
+            return;
+        if (this._mutableDisabled())
+            return;
+        const transformedDate = this.transformDates()(value);
+        this._mutableDate.set(transformedDate);
+        this._onChange?.(transformedDate);
+        this.dateChange.emit(transformedDate);
+        if (this.autoCloseOnMaxSelection() && this._mutableDate()?.length === this.maxSelection()) {
+            this._popoverState.set('closed');
+        }
+    }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        this._mutableDate.set(value ? this.transformDates()(value) : undefined);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._mutableDisabled.set(isDisabled);
+    }
+    open() {
+        this._popoverState.set('open');
+    }
+    close() {
+        this._popoverState.set('closed');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmDatePickerMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: HlmDatePickerMulti, isStandalone: true, selector: "hlm-date-picker-multi", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", 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: { dateChange: "dateChange" }, host: { classAttribute: "block" }, providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })], ngImport: i0, template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button
+        [id]="buttonId()"
+        type="button"
+        [class]="_computedClass()"
+        [disabled]="_mutableDisabled()"
+        brnPopoverTrigger
+      >
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideChevronDown" />
+      </button>
+
+      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar-multi
+          calendarClass="border-0 rounded-none"
+          [date]="_mutableDate()"
+          [min]="min()"
+          [max]="max()"
+          [minSelection]="minSelection()"
+          [maxSelection]="maxSelection()"
+          [disabled]="_mutableDisabled()"
+          (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: "20.3.0", 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({ lucideChevronDown })],
+                    template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button
+        [id]="buttonId()"
+        type="button"
+        [class]="_computedClass()"
+        [disabled]="_mutableDisabled()"
+        brnPopoverTrigger
+      >
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideChevronDown" />
+      </button>
+
+      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar-multi
+          calendarClass="border-0 rounded-none"
+          [date]="_mutableDate()"
+          [min]="min()"
+          [max]="max()"
+          [minSelection]="minSelection()"
+          [maxSelection]="maxSelection()"
+          [disabled]="_mutableDisabled()"
+          (dateChange)="_handleChange($event)"
+        />
+      </div>
+    </brn-popover>
+  `,
+                    host: {
+                        class: 'block',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+function getDefaultConfig() {
+    return {
+        formatDates: (dates) => dates
+            .filter(Boolean)
+            .map((date) => (date instanceof Date ? date.toDateString() : `${date}`))
+            .join(' - '),
+        transformDates: (dates) => dates,
+        autoCloseOnEndSelection: false,
+    };
+}
+const HlmDateRangePickerConfigToken = new InjectionToken('HlmDateRangePickerConfig');
+function provideHlmDateRangePickerConfig(config) {
+    return { provide: HlmDateRangePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+function injectHlmDateRangePickerConfig() {
+    const injectedConfig = inject(HlmDateRangePickerConfigToken, { optional: true });
+    return injectedConfig ? injectedConfig : getDefaultConfig();
+}
+
+const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmDateRangePicker),
+    multi: true,
+};
+let nextId = 0;
+class HlmDateRangePicker {
+    _config = injectHlmDateRangePickerConfig();
+    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
+    _computedClass = computed(() => hlm('tw:ring-offset-background tw:border-input tw:bg-background tw:hover:bg-accent tw:dark:bg-input/30 tw:dark:hover:bg-input/50 tw:inline-flex tw:h-9 tw:w-[280px] tw:cursor-default tw:items-center tw:justify-between tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:border tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:font-normal tw:transition-all tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:focus-visible:ring-ring tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2', 'tw:disabled:pointer-events-none tw:disabled:opacity-50', 'tw:[&_ng-icon]:pointer-events-none tw:[&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    /** The id of the button that opens the date picker. */
+    buttonId = input(`hlm-date-picker-range-${nextId++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+    /** The minimum date that can be selected.*/
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    /** The maximum date that can be selected. */
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /** The selected value. */
+    date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
+    _mutableDate = linkedSignal(this.date);
+    _start = linkedSignal(() => this._mutableDate()?.[0]);
+    _end = linkedSignal(() => this._mutableDate()?.[1]);
+    /** If true, the date picker will close when the end date is selected */
+    autoCloseOnEndSelection = input(this._config.autoCloseOnEndSelection, ...(ngDevMode ? [{ debugName: "autoCloseOnEndSelection", transform: booleanAttribute }] : [{
+            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" }] : []));
+    _mutableDisabled = linkedSignal(this.disabled);
+    _formattedDate = computed(() => {
+        const start = this._start();
+        const end = this._end();
+        return start || end ? this.formatDates()([start, end]) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "_formattedDate" }] : []));
+    dateChange = output();
+    _onChange;
+    _onTouched;
+    _handleStartDayChange(value) {
+        this._start.set(value);
+    }
+    _handleEndDateChange(value) {
+        this._end.set(value);
+        if (this._mutableDisabled())
+            return;
+        const start = this._start();
+        if (start && value) {
+            const transformedDates = this.transformDates()([start, value]);
+            this._mutableDate.set(transformedDates);
+            this.dateChange.emit(transformedDates);
+            this._onChange?.(transformedDates);
+            if (this.autoCloseOnEndSelection()) {
+                this._popoverState.set('closed');
+            }
+        }
+    }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        untracked(() => {
+            if (!value) {
+                this._mutableDate.set(undefined);
+            }
+            else {
+                this._mutableDate.set(this.transformDates()(value));
+            }
+        });
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._mutableDisabled.set(isDisabled);
+    }
+    open() {
+        this._popoverState.set('open');
+    }
+    close() {
+        this._popoverState.set('closed');
+    }
+    _onClose() {
+        const dates = this._mutableDate();
+        if (this._start() && !this._end() && dates) {
+            this._start.set(dates[0]);
+            this._end.set(dates[1]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: HlmDateRangePicker, isStandalone: true, selector: "hlm-date-range-picker", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", 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 }, autoCloseOnEndSelection: { classPropertyName: "autoCloseOnEndSelection", publicName: "autoCloseOnEndSelection", 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: { dateChange: "dateChange" }, host: { classAttribute: "block" }, providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })], ngImport: i0, template: `
+    <brn-popover
+      sideOffset="5"
+      [state]="_popoverState()"
+      (stateChanged)="_popoverState.set($event)"
+      (closed)="_onClose()"
+    >
+      <button
+        [id]="buttonId()"
+        type="button"
+        [class]="_computedClass()"
+        [disabled]="_mutableDisabled()"
+        brnPopoverTrigger
+      >
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideChevronDown" />
+      </button>
+
+      <div hlmPopoverContent class="tw:w-auto tw:p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar-range
+          calendarClass="tw:border-0 tw:rounded-none"
+          [startDate]="_start()"
+          [endDate]="_end()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_mutableDisabled()"
+          (startDateChange)="_handleStartDayChange($event)"
+          (endDateChange)="_handleEndDateChange($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: HlmCalendarRange, selector: "hlm-calendar-range", inputs: ["calendarClass", "min", "max", "disabled", "startDate", "endDate", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["startDateChange", "endDateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmDateRangePicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-date-range-picker',
+                    imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarRange],
+                    providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+                    template: `
+    <brn-popover
+      sideOffset="5"
+      [state]="_popoverState()"
+      (stateChanged)="_popoverState.set($event)"
+      (closed)="_onClose()"
+    >
+      <button
+        [id]="buttonId()"
+        type="button"
+        [class]="_computedClass()"
+        [disabled]="_mutableDisabled()"
+        brnPopoverTrigger
+      >
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideChevronDown" />
+      </button>
+
+      <div hlmPopoverContent class="tw:w-auto tw:p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar-range
+          calendarClass="tw:border-0 tw:rounded-none"
+          [startDate]="_start()"
+          [endDate]="_end()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_mutableDisabled()"
+          (startDateChange)="_handleStartDayChange($event)"
+          (endDateChange)="_handleEndDateChange($event)"
+        />
+      </div>
+    </brn-popover>
+  `,
+                    host: {
+                        class: 'block',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/*
+ * Public API Surface of date-picker
+ */
+const HlmDatePickerImports = [HlmDatePicker, HlmDatePickerMulti, HlmDateRangePicker];
+class HlmDatePickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: HlmDatePickerModule, imports: [HlmDatePicker, HlmDatePickerMulti, HlmDateRangePicker], exports: [HlmDatePicker, HlmDatePickerMulti, HlmDateRangePicker] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmDatePickerModule, imports: [HlmDatePickerImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmDatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmDatePickerImports],
+                    exports: [...HlmDatePickerImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, HLM_DATE_PICKER_VALUE_ACCESSOR, HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, HlmDatePicker, HlmDatePickerImports, HlmDatePickerModule, HlmDatePickerMulti, HlmDateRangePicker, injectHlmDatePickerConfig, injectHlmDatePickerMultiConfig, injectHlmDateRangePickerConfig, provideHlmDatePickerConfig, provideHlmDatePickerMultiConfig, provideHlmDateRangePickerConfig };
+//# sourceMappingURL=date-picker.mjs.map