@nanahoshi/mona-ui 0.1.0 → 0.1.1

package/fesm2022/nanahoshi-mona-ui-datetime-picker.mjs

@@ -3,7 +3,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, ElementRef, signal, computed, linkedSignal, contentChild, viewChild, TemplateRef, output, input, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { any } from '@mirei/ts-collections';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { ButtonGroupComponent } from '@nanahoshi/mona-ui/button-group';
 import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, CalendarComponent } from '@nanahoshi/mona-ui/calendar';
@@ -14,20 +14,19 @@ import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
 import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
-import { any } from '@mirei/ts-collections';
 import { DateTime } from 'luxon';
 import { fromEvent, mergeWith } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const dateTimePickerBaseVariants = cva(`
-        flex items-center w-full
-        border border-border
-        focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
-        [&_mona-text-box]:h-full
-        [&_mona-text-box]:border-none
+const dateTimePickerBaseVariants = cva(`
+        flex items-center w-full
+        border border-border
+        focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        [&_mona-text-box]:h-full
+        [&_mona-text-box]:border-none
     `, {
     variants: {
         focused: {
@@ -47,14 +46,14 @@ const dateTimePickerBaseVariants = cva(`
         }
     }
 });
-const dateTimePickerHeaderVariants = cva(`
-        p-2 bg-accent/20 border-b border-border flex items-center
-        [&>mona-button-group]:w-full
-        [&>mona-button-group>[monaButton]]:flex-1
+const dateTimePickerHeaderVariants = cva(`
+        p-2 bg-accent/20 border-b border-border flex items-center
+        [&>mona-button-group]:w-full
+        [&>mona-button-group>[monaButton]]:flex-1
     `);
-const dateTimePickerFooterVariants = cva(`
-        p-2 bg-accent/20 border-t border-border flex items-center justify-between gap-2
-        [&>[monaButton]]:flex-1
+const dateTimePickerFooterVariants = cva(`
+        p-2 bg-accent/20 border-t border-border flex items-center justify-between gap-2
+        [&>[monaButton]]:flex-1
     `);
 
 const dateTimePickerBaseThemeVariants = (theme) => {
@@ -610,7 +609,7 @@ class DateTimePickerComponent {
                 useExisting: forwardRef(() => DateTimePickerComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\r\n    (inputBlur)=\"onDateInputBlur()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    [clearButton]=\"showClearButton()\"\r\n    [disabled]=\"disabled()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [required]=\"required()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\"\r\n    [value]=\"currentDateString()\">\r\n    @if (prefixTemplate()) {\r\n        <ng-template monaTextBoxPrefixTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    <ng-template monaTextBoxSuffixTemplate>\r\n        <button\r\n            monaButton\r\n            look=\"ghost\"\r\n            [iconOnly]=\"true\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"'none'\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open date and time picker'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            (click)=\"onDateInputButtonClick()\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\">\r\n            <i class=\"ri-calendar-line\"></i>\r\n        </button>\r\n    </ng-template>\r\n</mona-text-box>\r\n\r\n<ng-template #datePopupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        class=\"flex flex-col h-68\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        cdkTrapFocus>\r\n        <div [class]=\"headerClass()\">\r\n            <mona-button-group\r\n                selection=\"single\"\r\n                [allowEmpty]=\"false\"\r\n                class=\"w-full\"\r\n                [disabled]=\"disabled()\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                role=\"tablist\">\r\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\r\n                    Date\r\n                </button>\r\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\r\n                    Time\r\n                </button>\r\n            </mona-button-group>\r\n        </div>\r\n        <div class=\"overflow-hidden\">\r\n            @if (activeView() === \"date\") {\r\n                <div class=\"h-full flex items-center justify-center\" aria-label=\"Calendar\">\r\n                    <mona-calendar\r\n                        [disabledDates]=\"disabledDates()\"\r\n                        [minDate]=\"min()\"\r\n                        [maxDate]=\"max()\"\r\n                        [firstDay]=\"firstDay()\"\r\n                        [weekNumber]=\"weekNumber()\"\r\n                        [value]=\"navigatedDate()\"\r\n                        [disabled]=\"disabled()\"\r\n                        [readonly]=\"readonly()\"\r\n                        [rounded]=\"rounded()\"\r\n                        (valueChange)=\"onCalendarValueChange($event)\"\r\n                        class=\"shadow-none border-none flex-1\">\r\n                        @if (decadeCellTemplate()) {\r\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\r\n                            </ng-template>\r\n                        }\r\n                        @if (monthCellTemplate()) {\r\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\r\n                            </ng-template>\r\n                        }\r\n                        @if (yearCellTemplate()) {\r\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\r\n                            </ng-template>\r\n                        }\r\n                    </mona-calendar>\r\n                </div>\r\n            }\r\n            @if (activeView() === \"time\") {\r\n                <div class=\"h-full flex items-center justify-center max-h-64\" aria-label=\"Time picker\">\r\n                    <mona-time-selector\r\n                        [value]=\"navigatedDate()\"\r\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\r\n                        [disabled]=\"disabled()\"\r\n                        [readonly]=\"readonly()\"\r\n                        [max]=\"timePickerMax()\"\r\n                        [min]=\"timePickerMin()\"\r\n                        [footer]=\"false\"\r\n                        [size]=\"size()\"\r\n                        [rounded]=\"rounded()\"\r\n                        [hourStep]=\"hourStep()\"\r\n                        [minuteStep]=\"minuteStep()\"\r\n                        [secondStep]=\"secondStep()\"\r\n                        [hourFormat]=\"hourFormat()\"\r\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\r\n                </div>\r\n            }\r\n        </div>\r\n        <div [class]=\"footerClass()\">\r\n            <button\r\n                monaButton\r\n                look=\"primary\"\r\n                [disabled]=\"disabled()\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                (click)=\"onSetDateClick()\">\r\n                Set\r\n            </button>\r\n            <button\r\n                monaButton\r\n                look=\"default\"\r\n                [disabled]=\"disabled()\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                (click)=\"onCancelClick()\">\r\n                Cancel\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "rounded", "selection", "required", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"h-full w-auto aspect-square\"\n            [attr.aria-label]=\"'Open date and time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex flex-col h-68\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    Date\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    Time\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"h-full flex items-center justify-center\" aria-label=\"Calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"shadow-none border-none flex-1\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"h-full flex items-center justify-center max-h-64\" aria-label=\"Time picker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                Set\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                Cancel\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "rounded", "selection", "required", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -625,7 +624,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         }
                     ], imports: [
                         ButtonDirective,
-                        FontAwesomeModule,
                         CalendarComponent,
                         TimeSelectorComponent,
                         TextBoxComponent,
@@ -644,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-invalid]": "invalidState() || null",
                         "[class]": "baseClass()",
                         "(blur)": "onDateInputBlur()"
-                    }, template: "<mona-text-box\r\n    (inputBlur)=\"onDateInputBlur()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    [clearButton]=\"showClearButton()\"\r\n    [disabled]=\"disabled()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [required]=\"required()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\"\r\n    [value]=\"currentDateString()\">\r\n    @if (prefixTemplate()) {\r\n        <ng-template monaTextBoxPrefixTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    <ng-template monaTextBoxSuffixTemplate>\r\n        <button\r\n            monaButton\r\n            look=\"ghost\"\r\n            [iconOnly]=\"true\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"'none'\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open date and time picker'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            (click)=\"onDateInputButtonClick()\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\">\r\n            <i class=\"ri-calendar-line\"></i>\r\n        </button>\r\n    </ng-template>\r\n</mona-text-box>\r\n\r\n<ng-template #datePopupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        class=\"flex flex-col h-68\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        cdkTrapFocus>\r\n        <div [class]=\"headerClass()\">\r\n            <mona-button-group\r\n                selection=\"single\"\r\n                [allowEmpty]=\"false\"\r\n                class=\"w-full\"\r\n                [disabled]=\"disabled()\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                role=\"tablist\">\r\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\r\n                    Date\r\n                </button>\r\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\r\n                    Time\r\n                </button>\r\n            </mona-button-group>\r\n        </div>\r\n        <div class=\"overflow-hidden\">\r\n            @if (activeView() === \"date\") {\r\n                <div class=\"h-full flex items-center justify-center\" aria-label=\"Calendar\">\r\n                    <mona-calendar\r\n                        [disabledDates]=\"disabledDates()\"\r\n                        [minDate]=\"min()\"\r\n                        [maxDate]=\"max()\"\r\n                        [firstDay]=\"firstDay()\"\r\n                        [weekNumber]=\"weekNumber()\"\r\n                        [value]=\"navigatedDate()\"\r\n                        [disabled]=\"disabled()\"\r\n                        [readonly]=\"readonly()\"\r\n                        [rounded]=\"rounded()\"\r\n                        (valueChange)=\"onCalendarValueChange($event)\"\r\n                        class=\"shadow-none border-none flex-1\">\r\n                        @if (decadeCellTemplate()) {\r\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\r\n                            </ng-template>\r\n                        }\r\n                        @if (monthCellTemplate()) {\r\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\r\n                            </ng-template>\r\n                        }\r\n                        @if (yearCellTemplate()) {\r\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\r\n                            </ng-template>\r\n                        }\r\n                    </mona-calendar>\r\n                </div>\r\n            }\r\n            @if (activeView() === \"time\") {\r\n                <div class=\"h-full flex items-center justify-center max-h-64\" aria-label=\"Time picker\">\r\n                    <mona-time-selector\r\n                        [value]=\"navigatedDate()\"\r\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\r\n                        [disabled]=\"disabled()\"\r\n                        [readonly]=\"readonly()\"\r\n                        [max]=\"timePickerMax()\"\r\n                        [min]=\"timePickerMin()\"\r\n                        [footer]=\"false\"\r\n                        [size]=\"size()\"\r\n                        [rounded]=\"rounded()\"\r\n                        [hourStep]=\"hourStep()\"\r\n                        [minuteStep]=\"minuteStep()\"\r\n                        [secondStep]=\"secondStep()\"\r\n                        [hourFormat]=\"hourFormat()\"\r\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\r\n                </div>\r\n            }\r\n        </div>\r\n        <div [class]=\"footerClass()\">\r\n            <button\r\n                monaButton\r\n                look=\"primary\"\r\n                [disabled]=\"disabled()\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                (click)=\"onSetDateClick()\">\r\n                Set\r\n            </button>\r\n            <button\r\n                monaButton\r\n                look=\"default\"\r\n                [disabled]=\"disabled()\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                (click)=\"onCancelClick()\">\r\n                Cancel\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n" }]
+                    }, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"h-full w-auto aspect-square\"\n            [attr.aria-label]=\"'Open date and time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex flex-col h-68\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    Date\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    Time\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"h-full flex items-center justify-center\" aria-label=\"Calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"shadow-none border-none flex-1\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"h-full flex items-center justify-center max-h-64\" aria-label=\"Time picker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                Set\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                Cancel\n            </button>\n        </div>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["datePopupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DateInputPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-dialog.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Directive, inject, ElementRef, computed, afterNextRender, ChangeDetectionStrategy, Component, signal, DOCUMENT, Injector, forwardRef, Injectable, DestroyRef, contentChild, TemplateRef, output, input, effect } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, map, takeUntil, take } from 'rxjs';
 import { PopupDataInjectionToken, PopupCloseEvent, PopupCloseSource, PopupService } from '@nanahoshi/mona-ui/popup';
+import { Subject, map, takeUntil, take } from 'rxjs';
 import { PreventableEvent, AnyPipe } from '@nanahoshi/mona-ui/common';
 import { createElementControlId, focusElement, setWindowStyles } from '@nanahoshi/mona-ui/internal';
 import * as i1 from '@angular/cdk/a11y';
@@ -85,12 +85,12 @@ class DialogActionEvent extends PreventableEvent {
     }
 }
 
-const dialogBaseVariants = cva(`
-        flex flex-col gap-0.5
-        w-full h-full
-        bg-background
-        border border-border shadow-sm
-        outline-none overflow-hidden
+const dialogBaseVariants = cva(`
+        flex flex-col gap-0.5
+        w-full h-full
+        bg-background text-foreground
+        border border-border shadow-sm
+        outline-none overflow-hidden
     `, {
     variants: {
         rounded: {
@@ -104,12 +104,12 @@ const dialogBaseVariants = cva(`
         rounded: "medium"
     }
 });
-const dialogContentContainerVariants = cva(`
-        flex flex-row gap-1 flex-1
+const dialogContentContainerVariants = cva(`
+        flex flex-row gap-1 flex-1
     `);
-const dialogBodyVariants = cva(`
-        flex flex-col gap-0 pb-2
-        w-full h-full pr-2
+const dialogBodyVariants = cva(`
+        flex flex-col gap-0 pb-2
+        w-full h-full pr-2
     `, {
     variants: {
         hasIcon: {
@@ -118,18 +118,18 @@ const dialogBodyVariants = cva(`
         }
     }
 });
-const dialogHeaderVariants = cva(`
-        flex flex-row gap-2
-        pt-4 select-none
+const dialogHeaderVariants = cva(`
+        flex flex-row gap-2
+        pt-4 select-none
     `);
-const dialogIconContainerVariants = cva(`
-        flex items-start justify-center pt-8 pr-4 pl-6
+const dialogIconContainerVariants = cva(`
+        flex items-start justify-center pt-8 pr-4 pl-6
     `);
-const dialogIconVariants = cva(`
-        rounded-full w-fit h-fit p-1.5 border relative
-        [&>span]:absolute [&>span]:flex [&>span]:rounded-full
-        [&>span]:-top-3 [&>span]:-right-3 [&>span]:-bottom-3 [&>span]:-left-3
-        [&>span]:border [&>span]:min-w-full [&>span]:min-h-full
+const dialogIconVariants = cva(`
+        rounded-full w-fit h-fit p-1.5 border relative
+        [&>span]:absolute [&>span]:flex [&>span]:rounded-full
+        [&>span]:-top-3 [&>span]:-right-3 [&>span]:-bottom-3 [&>span]:-left-3
+        [&>span]:border [&>span]:min-w-full [&>span]:min-h-full
     `, {
     variants: {
         type: {
@@ -144,27 +144,27 @@ const dialogIconVariants = cva(`
         type: "info"
     }
 });
-const dialogTitleContainerVariants = cva(`
-        flex flex-1 items-center justify-start select-none p-1
+const dialogTitleContainerVariants = cva(`
+        flex flex-1 items-center justify-start select-none p-1
     `);
-const dialogCloseButtonContainerVariants = cva(`
-        flex items-start justify-end
+const dialogCloseButtonContainerVariants = cva(`
+        flex items-start justify-end
     `);
-const dialogTitleVariants = cva(`
-        text-lg font-semibold leading-none tracking-tight
+const dialogTitleVariants = cva(`
+        text-lg font-semibold leading-none tracking-tight
     `);
-const dialogDescriptionVariants = cva(`
-        text-sm text-muted-foreground
-        select-none
+const dialogDescriptionVariants = cva(`
+        text-sm text-muted-foreground
+        select-none
     `);
-const dialogContentVariants = cva(`
-        flex-1 overflow-auto p-1
+const dialogContentVariants = cva(`
+        flex-1 overflow-auto p-1
     `);
-const dialogFooterVariants = cva(`
-        flex flex-row
-        gap-2 px-4 py-2
-        border-t border-border
-        select-none
+const dialogFooterVariants = cva(`
+        flex flex-row
+        gap-2 px-4 py-2
+        border-t border-border
+        select-none
     `, {
     variants: {
         layout: {
@@ -412,7 +412,7 @@ class DialogContentComponent {
         focusElement(dialogElement, element);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogContentComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "baseClass()", "attr.aria-describedby": "describedById()", "attr.aria-labelledby": "headerId", "attr.role": "role()" } }, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "@let dialogIcon = icon();\r\n@let data = dialogData();\r\n\r\n<div [class]=\"contentContainerClass()\">\r\n    @if (dialogIcon) {\r\n        <div [class]=\"iconContainerClass()\">\r\n            @if (data.iconTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\r\n            } @else {\r\n                <div [class]=\"iconClass()\">\r\n                    <span aria-hidden=\"true\"></span>\r\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div [class]=\"bodyClass()\">\r\n        <div [class]=\"headerClass()\">\r\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\r\n                @if (data.titleTemplate) {\r\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\r\n                } @else {\r\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\r\n                }\r\n            </div>\r\n            @if (data.closable) {\r\n                <div [class]=\"closeButtonContainerClass()\">\r\n                    <button\r\n                        monaButton\r\n                        look=\"ghost\"\r\n                        size=\"small\"\r\n                        [iconOnly]=\"true\"\r\n                        aria-label=\"Close dialog\"\r\n                        (click)=\"onCloseClick()\">\r\n                        <svg lucideX [size]=\"16\"></svg>\r\n                    </button>\r\n                </div>\r\n            }\r\n        </div>\r\n\r\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\r\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\r\n            @if (data.descriptionTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\r\n            } @else if (data.description) {\r\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div [class]=\"contentClass()\">\r\n            @if (data.content) {\r\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\r\n            } @else if (data.text) {\r\n                <p class=\"select-none\">{{ data.text }}</p>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (data.footerTemplate || (data.actions | monaAny)) {\r\n    @if (data.footerTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\r\n    } @else {\r\n        <div [class]=\"footerClass()\">\r\n            @for (action of data.actions; track $index) {\r\n                <button\r\n                    monaButton\r\n                    type=\"button\"\r\n                    [class]=\"action.cssClass || ''\"\r\n                    [iconOnly]=\"action.iconOnly || false\"\r\n                    [look]=\"action.look\"\r\n                    [rounded]=\"action.rounded || data.rounded\"\r\n                    (click)=\"onActionClick(action)\">\r\n                    {{ action.text }}\r\n                </button>\r\n            }\r\n        </div>\r\n    }\r\n}\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: AnyPipe, name: "monaAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogContentComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "baseClass()", "attr.aria-describedby": "describedById()", "attr.aria-labelledby": "headerId", "attr.role": "role()" } }, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "@let dialogIcon = icon();\n@let data = dialogData();\n\n<div [class]=\"contentContainerClass()\">\n    @if (dialogIcon) {\n        <div [class]=\"iconContainerClass()\">\n            @if (data.iconTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\n            } @else {\n                <div [class]=\"iconClass()\">\n                    <span aria-hidden=\"true\"></span>\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\n                </div>\n            }\n        </div>\n    }\n    <div [class]=\"bodyClass()\">\n        <div [class]=\"headerClass()\">\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n                @if (data.titleTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\n                } @else {\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\n                }\n            </div>\n            @if (data.closable) {\n                <div [class]=\"closeButtonContainerClass()\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close dialog\"\n                        (click)=\"onCloseClick()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                </div>\n            }\n        </div>\n\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\n            @if (data.descriptionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\n            } @else if (data.description) {\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\n            }\n        </div>\n\n        <div [class]=\"contentClass()\">\n            @if (data.content) {\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\n            } @else if (data.text) {\n                <p class=\"select-none\">{{ data.text }}</p>\n            }\n        </div>\n    </div>\n</div>\n\n@if (data.footerTemplate || (data.actions | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of data.actions; track $index) {\n                <button\n                    monaButton\n                    type=\"button\"\n                    [class]=\"action.cssClass || ''\"\n                    [iconOnly]=\"action.iconOnly || false\"\n                    [look]=\"action.look\"\n                    [rounded]=\"action.rounded || data.rounded\"\n                    (click)=\"onActionClick(action)\">\n                    {{ action.text }}\n                </button>\n            }\n        </div>\n    }\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: AnyPipe, name: "monaAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, decorators: [{
             type: Component,
@@ -421,7 +421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-describedby]": "describedById()",
                         "[attr.aria-labelledby]": "headerId",
                         "[attr.role]": "role()"
-                    }, hostDirectives: [CdkTrapFocus], template: "@let dialogIcon = icon();\r\n@let data = dialogData();\r\n\r\n<div [class]=\"contentContainerClass()\">\r\n    @if (dialogIcon) {\r\n        <div [class]=\"iconContainerClass()\">\r\n            @if (data.iconTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\r\n            } @else {\r\n                <div [class]=\"iconClass()\">\r\n                    <span aria-hidden=\"true\"></span>\r\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div [class]=\"bodyClass()\">\r\n        <div [class]=\"headerClass()\">\r\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\r\n                @if (data.titleTemplate) {\r\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\r\n                } @else {\r\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\r\n                }\r\n            </div>\r\n            @if (data.closable) {\r\n                <div [class]=\"closeButtonContainerClass()\">\r\n                    <button\r\n                        monaButton\r\n                        look=\"ghost\"\r\n                        size=\"small\"\r\n                        [iconOnly]=\"true\"\r\n                        aria-label=\"Close dialog\"\r\n                        (click)=\"onCloseClick()\">\r\n                        <svg lucideX [size]=\"16\"></svg>\r\n                    </button>\r\n                </div>\r\n            }\r\n        </div>\r\n\r\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\r\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\r\n            @if (data.descriptionTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\r\n            } @else if (data.description) {\r\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div [class]=\"contentClass()\">\r\n            @if (data.content) {\r\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\r\n            } @else if (data.text) {\r\n                <p class=\"select-none\">{{ data.text }}</p>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (data.footerTemplate || (data.actions | monaAny)) {\r\n    @if (data.footerTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\r\n    } @else {\r\n        <div [class]=\"footerClass()\">\r\n            @for (action of data.actions; track $index) {\r\n                <button\r\n                    monaButton\r\n                    type=\"button\"\r\n                    [class]=\"action.cssClass || ''\"\r\n                    [iconOnly]=\"action.iconOnly || false\"\r\n                    [look]=\"action.look\"\r\n                    [rounded]=\"action.rounded || data.rounded\"\r\n                    (click)=\"onActionClick(action)\">\r\n                    {{ action.text }}\r\n                </button>\r\n            }\r\n        </div>\r\n    }\r\n}\r\n" }]
+                    }, hostDirectives: [CdkTrapFocus], template: "@let dialogIcon = icon();\n@let data = dialogData();\n\n<div [class]=\"contentContainerClass()\">\n    @if (dialogIcon) {\n        <div [class]=\"iconContainerClass()\">\n            @if (data.iconTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\n            } @else {\n                <div [class]=\"iconClass()\">\n                    <span aria-hidden=\"true\"></span>\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\n                </div>\n            }\n        </div>\n    }\n    <div [class]=\"bodyClass()\">\n        <div [class]=\"headerClass()\">\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n                @if (data.titleTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\n                } @else {\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\n                }\n            </div>\n            @if (data.closable) {\n                <div [class]=\"closeButtonContainerClass()\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close dialog\"\n                        (click)=\"onCloseClick()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                </div>\n            }\n        </div>\n\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\n            @if (data.descriptionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\n            } @else if (data.description) {\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\n            }\n        </div>\n\n        <div [class]=\"contentClass()\">\n            @if (data.content) {\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\n            } @else if (data.text) {\n                <p class=\"select-none\">{{ data.text }}</p>\n            }\n        </div>\n    </div>\n</div>\n\n@if (data.footerTemplate || (data.actions | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of data.actions; track $index) {\n                <button\n                    monaButton\n                    type=\"button\"\n                    [class]=\"action.cssClass || ''\"\n                    [iconOnly]=\"action.iconOnly || false\"\n                    [look]=\"action.look\"\n                    [rounded]=\"action.rounded || data.rounded\"\n                    (click)=\"onActionClick(action)\">\n                    {{ action.text }}\n                </button>\n            }\n        </div>\n    }\n}\n" }]
         }], ctorParameters: () => [] });
 
 class DialogRef {

package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs

@@ -2,10 +2,9 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, ElementRef, linkedSignal, computed, contentChild, TemplateRef, viewChild, input, output, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { createElementControlId, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownListService, DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { createElementControlId, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListItemTemplateDirective, ListGroupHeaderTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
 import { ThemeService } from '@nanahoshi/mona-ui/theme';
@@ -24,17 +23,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const dropdownListInputVariants = cva(`
-        inline-flex items-center
-
-        border border-input-border
-        bg-background outline-none
-        shadow-xs
-        cursor-pointer select-none
-
-        hover:bg-accent hover:text-accent-foreground
-        transition-[color,box-shadow,border] ease-in-out duration-300
-        focus-within:ring-1 focus-within:ring-primary/40
+const dropdownListInputVariants = cva(`
+        inline-flex items-center
+
+        border border-input-border
+        bg-background outline-none
+        text-foreground shadow-xs
+        cursor-pointer select-none
+
+        hover:bg-accent hover:text-accent-foreground
+        transition-[color,box-shadow,border] ease-in-out duration-300
+        focus-within:ring-1 focus-within:ring-primary/40
     `, {
     variants: {
         disabled: {
@@ -552,7 +551,7 @@ class DropdownListComponent {
                 useExisting: forwardRef(() => DropdownListComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: DropdownListValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<span [class]=\"valueContainerClass()\">\r\n    @if (!valueTemplate()) {\r\n        <span>\r\n            @if (selectedListItem()) {\r\n                <span>{{ valueText() }}</span>\r\n            } @else {\r\n                <span>{{ placeholder() }}</span>\r\n            }\r\n        </span>\r\n    } @else {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"valueTemplate()\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\r\n    }\r\n</span>\r\n\r\n@if (selectedListItem() && showClearButton() && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: DropdownListValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<span [class]=\"valueContainerClass()\">\n    @if (!valueTemplate()) {\n        <span>\n            @if (selectedListItem()) {\n                <span>{{ valueText() }}</span>\n            } @else {\n                <span>{{ placeholder() }}</span>\n            }\n        </span>\n    } @else {\n        <ng-container\n            [ngTemplateOutlet]=\"valueTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\n    }\n</span>\n\n@if (selectedListItem() && showClearButton() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListComponent, decorators: [{
             type: Component,
@@ -572,7 +571,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         }
                     ], imports: [
                         NgTemplateOutlet,
-                        FontAwesomeModule,
                         ListComponent,
                         ListItemTemplateDirective,
                         ListGroupHeaderTemplateDirective,
@@ -598,7 +596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.tabindex]": "disabled() ? null : 0",
                         "[class]": "baseClass()",
                         "(blur)": "onBlur()"
-                    }, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<span [class]=\"valueContainerClass()\">\r\n    @if (!valueTemplate()) {\r\n        <span>\r\n            @if (selectedListItem()) {\r\n                <span>{{ valueText() }}</span>\r\n            } @else {\r\n                <span>{{ placeholder() }}</span>\r\n            }\r\n        </span>\r\n    } @else {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"valueTemplate()\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\r\n    }\r\n</span>\r\n\r\n@if (selectedListItem() && showClearButton() && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<span [class]=\"valueContainerClass()\">\n    @if (!valueTemplate()) {\n        <span>\n            @if (selectedListItem()) {\n                <span>{{ valueText() }}</span>\n            } @else {\n                <span>{{ placeholder() }}</span>\n            }\n        </span>\n    } @else {\n        <ng-container\n            [ngTemplateOutlet]=\"valueTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedDataItem() }\"></ng-container>\n    }\n</span>\n\n@if (selectedListItem() && showClearButton() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect($event)\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownListValueTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });