@agorapulse/ui-components 22.4.4-beta.1 → 22.4.4-beta.2

package/fesm2022/agorapulse-ui-components-datepicker.mjs

@@ -759,19 +759,15 @@ class DatepickerSelectComponent {
     ariaLabel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /**
-     * dayjs format of the displayed text. Defaults to `'MM/DD/YYYY'`, which needs no plugin: the
-     * localized tokens (`ll`, `LL`) assume the host application loaded `dayjs/plugin/localizedFormat`.
+     * How the field writes its dates, in every mode: a dayjs pattern, or `Intl.DateTimeFormat` options
+     * for the locale's own wording — with options, a period is written by `formatRange`, which writes
+     * what both ends share once ("Mar 2 – 15").
+     *
+     * Defaults to `'MM/DD/YYYY'`, which needs no plugin: the localized dayjs tokens (`ll`, `LL`) assume
+     * the host application loaded `dayjs/plugin/localizedFormat`.
      */
     dateFormat = input('MM/DD/YYYY', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
-    /**
-     * Writes a complete period's text in Range mode, in place of `dateFormat` on each end — for what a
-     * dayjs pattern cannot express, such as `Intl.DateTimeFormat#formatRange`, which orders the day and
-     * the month as the locale does and writes what both ends share once ("Mar 2 – 15"). A one-day
-     * period comes in as is.
-     */
-    formatPeriod = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formatPeriod" }] : /* istanbul ignore next */ []));
     locale = input('en', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     firstDayOfWeek = input('monday', /* @ts-ignore */
@@ -862,33 +858,44 @@ class DatepickerSelectComponent {
         return startDate !== undefined || endDate !== undefined;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** `dateFormat` applied, built once per format and locale rather than per date written. */
+    writer = computed(() => {
+        const format = this.dateFormat();
+        const locale = this.locale();
+        if (typeof format === 'string') {
+            const writeDate = (date) => date.locale(locale).format(format);
+            return { date: writeDate, period: (startDate, endDate) => `${writeDate(startDate)} - ${writeDate(endDate)}` };
+        }
+        const intl = new Intl.DateTimeFormat(locale, format);
+        return {
+            date: date => intl.format(date.toDate()),
+            period: (startDate, endDate) => intl.formatRange(startDate.toDate(), endDate.toDate()),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "writer" }] : /* istanbul ignore next */ []));
     /** The field's text: a one-day period reads as that day. Empty in Multiple, where the field shows chips instead. */
     displayed = computed(() => {
-        const format = (date) => date.locale(this.locale()).format(this.dateFormat());
+        const writer = this.writer();
         const mode = this.mode();
         if (mode === DatepickerMode.Single) {
             const date = this.selectedDate();
-            return date ? format(date) : '';
+            return date ? writer.date(date) : '';
         }
         if (mode === DatepickerMode.Range) {
             const { startDate, endDate } = this.selectedPeriod();
             if (!startDate || !endDate) {
                 return '';
             }
-            const formatPeriod = this.formatPeriod();
-            if (formatPeriod) {
-                return formatPeriod({ startDate, endDate });
-            }
-            return startDate.isSame(endDate, 'day') ? format(startDate) : `${format(startDate)} - ${format(endDate)}`;
+            return startDate.isSame(endDate, 'day') ? writer.date(startDate) : writer.period(startDate, endDate);
         }
         return '';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []));
     /** The chips shown in Multiple mode, one per selected date. */
-    chips = computed(() => this.selectedDates().map(date => ({
-        label: date.locale(this.locale()).format(this.dateFormat()),
-        date,
-    })), /* @ts-ignore */
+    chips = computed(() => {
+        const writer = this.writer();
+        return this.selectedDates().map(date => ({ label: writer.date(date), date }));
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
     /** The zone abbreviation ("EST", "CEST"…), computed without touching dayjs globally. */
     timeZoneOffset = computed(() => {
@@ -969,7 +976,7 @@ class DatepickerSelectComponent {
         return value !== undefined && isPeriod(value) && value.startDate !== undefined && value.endDate !== undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerSelectComponent, isStandalone: true, selector: "ap-datepicker-select", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDays: { classPropertyName: "maxRangeDays", publicName: "maxRangeDays", isSignal: true, isRequired: false, transformFunction: null }, panelHint: { classPropertyName: "panelHint", publicName: "panelHint", isSignal: true, isRequired: false, transformFunction: null }, panelFooter: { classPropertyName: "panelFooter", publicName: "panelFooter", isSignal: true, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, formatPeriod: { classPropertyName: "formatPeriod", publicName: "formatPeriod", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, timeZoneTooltip: { classPropertyName: "timeZoneTooltip", publicName: "timeZoneTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange", selectionRejected: "selectionRejected", opened: "opened", closed: "closed" }, host: { properties: { "class.ap-datepicker-select--open": "isOpen()", "class.ap-datepicker-select--multiple": "mode() === DatepickerMode.Multiple" }, classAttribute: "ap-datepicker-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerSelectComponent, isStandalone: true, selector: "ap-datepicker-select", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDays: { classPropertyName: "maxRangeDays", publicName: "maxRangeDays", isSignal: true, isRequired: false, transformFunction: null }, panelHint: { classPropertyName: "panelHint", publicName: "panelHint", isSignal: true, isRequired: false, transformFunction: null }, panelFooter: { classPropertyName: "panelFooter", publicName: "panelFooter", isSignal: true, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, timeZoneTooltip: { classPropertyName: "timeZoneTooltip", publicName: "timeZoneTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange", selectionRejected: "selectionRejected", opened: "opened", closed: "closed" }, host: { properties: { "class.ap-datepicker-select--open": "isOpen()", "class.ap-datepicker-select--multiple": "mode() === DatepickerMode.Multiple" }, classAttribute: "ap-datepicker-select" }, providers: [
             withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apClose, apInfo),
             // The vendored DaterangepickerComponent the panel renders injects LocaleService, and the plain
             // NgxDaterangepickerMd module provides none — only its forRoot() does.
@@ -1001,7 +1008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[class.ap-datepicker-select--open]': 'isOpen()',
                         '[class.ap-datepicker-select--multiple]': 'mode() === DatepickerMode.Multiple',
                     }, encapsulation: ViewEncapsulation.None, template: "<!--\n    The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n    own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n    band above, below or beside it fell on nothing. The group is also what the panel should line up\n    with, and `toggle()` anchors the overlay to the trigger.\n\n    Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n    the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n    [apDropdownTrigger]=\"dropdown\"\n    [class.invalid]=\"invalid() && touched()\"\n    [disabled]=\"disabled()\">\n    <div class=\"ap-datepicker-select__field\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"calendar\" />\n\n        <!--\n            The combobox is this box and not the field around it: ng-select does the same, carrying the\n            role on its inner input so the clear and the arrow stay its siblings rather than its\n            descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n            anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n            bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n        -->\n        <div\n            #overflow=\"apOverflowCount\"\n            class=\"ap-datepicker-select__values\"\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            apOverflowCount\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.tabindex]=\"disabled() ? -1 : 0\"\n            [attr.aria-controls]=\"dropdown.panelId\"\n            [attr.aria-disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-invalid]=\"invalid() && touched()\"\n            (blur)=\"touch.emit()\">\n            @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n                @for (chip of chips(); track chip.date.valueOf()) {\n                    <ap-tag\n                        apOverflowItem\n                        color=\"grey\"\n                        [mini]=\"true\"\n                        [clearable]=\"!disabled()\"\n                        (clear)=\"removeDate(chip)\">\n                        {{ chip.label }}\n                    </ap-tag>\n                }\n                @if (overflow.hiddenCount() > 0) {\n                    <ap-tag\n                        apOverflowCounter\n                        color=\"grey\"\n                        [mini]=\"true\">\n                        +{{ overflow.hiddenCount() }}\n                    </ap-tag>\n                }\n            } @else if (displayed()) {\n                <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n            } @else {\n                <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n            }\n        </div>\n\n        <!--\n            Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n            inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n            stopPropagation() in clear().\n        -->\n        @if (clearable() && hasValue() && !disabled()) {\n            <ap-icon-button\n                class=\"ap-datepicker-select__clear\"\n                type=\"flat\"\n                name=\"datepicker-clear\"\n                symbolId=\"close\"\n                ariaLabel=\"Clear selection\"\n                (click)=\"clear($event)\" />\n        }\n\n        <span class=\"ap-datepicker-select__chevron\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n        </span>\n    </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n    <div\n        class=\"ap-datepicker-select__timezone\"\n        apTooltipPosition=\"bottom\"\n        [apTooltip]=\"zone\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"clock\"\n            color=\"grey\" />\n        <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n    </div>\n    @if (timeZoneTooltip(); as tooltip) {\n        <ap-symbol\n            class=\"ap-datepicker-select__timezone-info\"\n            size=\"sm\"\n            symbolId=\"info\"\n            color=\"grey-blue\"\n            apTooltipPosition=\"bottom\"\n            [apTooltip]=\"tooltip\" />\n    }\n}\n\n<ap-datepicker-dropdown\n    #dropdown\n    [closeOnSelect]=\"closesOnSelect()\"\n    [dateLimit]=\"maxRangeDays()\"\n    [placement]=\"placement()\"\n    [disabled]=\"disabled()\"\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\n    [hint]=\"panelHint()\"\n    [locale]=\"locale()\"\n    [maxDate]=\"maxDate()\"\n    [minDate]=\"minDate()\"\n    [mode]=\"mode()\"\n    [panelFooter]=\"panelFooter()\"\n    [presets]=\"presets()\"\n    [selectedDate]=\"selectedDate()\"\n    [selectedDates]=\"selectedDates()\"\n    [selectedPeriod]=\"selectedPeriod()\"\n    (closed)=\"onPanelClosed()\"\n    (dateSelected)=\"onDateSelected($event)\"\n    (opened)=\"onPanelOpened()\"\n    (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select .ap-input-group:where(:not(.disabled):focus-within:not(:has(:focus-visible))){border-color:var(--ap-input-group-rest-border-color)}.ap-datepicker-select .ap-input-group:where(:not(.disabled):focus-within:not(:has(:focus-visible))):where(:hover){border-color:var(--comp-input-border-hover-color)}.ap-datepicker-select--open .ap-input-group{border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], panelHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHint", required: false }] }], panelFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooter", required: false }] }], canSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelect", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], formatPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPeriod", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], timeZoneTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZoneTooltip", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionRejected: [{ type: i0.Output, args: ["selectionRejected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }] } });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], panelHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHint", required: false }] }], panelFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooter", required: false }] }], canSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelect", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], timeZoneTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZoneTooltip", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionRejected: [{ type: i0.Output, args: ["selectionRejected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.