@nanahoshi/mona-ui 0.24.0 → 0.24.2

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

@@ -446,7 +446,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 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: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\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            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\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</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "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: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+        ], 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: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\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            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\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</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "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: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,

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

@@ -643,7 +643,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\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=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openDateTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\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 h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().dateTimePicker\"\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                    {{ messages().date }}\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    {{ messages().time }}\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" [attr.aria-label]=\"messages().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=\"flex-1 border-none shadow-none\">\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=\"flex h-full max-h-64 items-center justify-center\" [attr.aria-label]=\"messages().timePicker\">\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                {{ messages().set }}\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                {{ messages().cancel }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["aria-label", "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=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openDateTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\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 h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().dateTimePicker\"\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                    {{ messages().date }}\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    {{ messages().time }}\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" [attr.aria-label]=\"messages().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=\"flex-1 border-none shadow-none\">\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=\"flex h-full max-h-64 items-center justify-center\" [attr.aria-label]=\"messages().timePicker\">\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                {{ messages().set }}\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                {{ messages().cancel }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["aria-label", "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,

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

@@ -333,7 +333,7 @@ class DialogContentComponent {
         return [{ cssClass: "", iconOnly: false, look: "primary", rounded: "medium", text: this.messages().ok }];
     }
     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();\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                        [attr.aria-label]=\"messages().closeDialog\"\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 || (actions() | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of 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", "type", "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" }] }); }
+    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                        [attr.aria-label]=\"messages().closeDialog\"\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 || (actions() | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of 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", "type", "class"], outputs: ["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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, decorators: [{
             type: Component,

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

@@ -271,7 +271,7 @@ class DropdownButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, decorators: [{
             type: Component,

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

@@ -775,7 +775,7 @@ class EditorBasicTextStylesComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorBasicTextStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorBasicTextStylesComponent, isStandalone: true, selector: "mona-editor-basic-text-styles", ngImport: i0, template: "@if (anyToolVisible()) {\n    <mona-button-group selection=\"multiple\" [size]=\"'small'\">\n        @if (boldVisible()) {\n            <button\n                monaButton\n                [selected]=\"boldSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onBoldToggle()\"\n                [title]=\"messages().bold\">\n                <i class=\"ri-bold\"></i>\n            </button>\n        }\n        @if (italicVisible()) {\n            <button\n                monaButton\n                [selected]=\"italicSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onItalicToggle()\"\n                [title]=\"messages().italic\">\n                <i class=\"ri-italic\"></i>\n            </button>\n        }\n        @if (underlineVisible()) {\n            <button\n                monaButton\n                [selected]=\"underlineSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onUnderlineToggle()\"\n                [title]=\"messages().underline\">\n                <i class=\"ri-underline\"></i>\n            </button>\n        }\n        @if (strikeThroughVisible()) {\n            <button\n                monaButton\n                [selected]=\"strikeThroughSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onStrikeThroughToggle()\"\n                [title]=\"messages().strikethrough\">\n                <i class=\"ri-strikethrough\"></i>\n            </button>\n        }\n        @if (subscriptVisible()) {\n            <button\n                monaButton\n                [selected]=\"subscriptSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onSubscriptToggle()\"\n                [title]=\"messages().subscript\">\n                <i class=\"ri-subscript\"></i>\n            </button>\n        }\n        @if (superscriptVisible()) {\n            <button\n                monaButton\n                [selected]=\"superscriptSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onSuperscriptToggle()\"\n                [title]=\"messages().superscript\">\n                <i class=\"ri-superscript\"></i>\n            </button>\n        }\n    </mona-button-group>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorBasicTextStylesComponent, isStandalone: true, selector: "mona-editor-basic-text-styles", ngImport: i0, template: "@if (anyToolVisible()) {\n    <mona-button-group selection=\"multiple\" [size]=\"'small'\">\n        @if (boldVisible()) {\n            <button\n                monaButton\n                [selected]=\"boldSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onBoldToggle()\"\n                [title]=\"messages().bold\">\n                <i class=\"ri-bold\"></i>\n            </button>\n        }\n        @if (italicVisible()) {\n            <button\n                monaButton\n                [selected]=\"italicSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onItalicToggle()\"\n                [title]=\"messages().italic\">\n                <i class=\"ri-italic\"></i>\n            </button>\n        }\n        @if (underlineVisible()) {\n            <button\n                monaButton\n                [selected]=\"underlineSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onUnderlineToggle()\"\n                [title]=\"messages().underline\">\n                <i class=\"ri-underline\"></i>\n            </button>\n        }\n        @if (strikeThroughVisible()) {\n            <button\n                monaButton\n                [selected]=\"strikeThroughSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onStrikeThroughToggle()\"\n                [title]=\"messages().strikethrough\">\n                <i class=\"ri-strikethrough\"></i>\n            </button>\n        }\n        @if (subscriptVisible()) {\n            <button\n                monaButton\n                [selected]=\"subscriptSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onSubscriptToggle()\"\n                [title]=\"messages().subscript\">\n                <i class=\"ri-subscript\"></i>\n            </button>\n        }\n        @if (superscriptVisible()) {\n            <button\n                monaButton\n                [selected]=\"superscriptSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onSuperscriptToggle()\"\n                [title]=\"messages().superscript\">\n                <i class=\"ri-superscript\"></i>\n            </button>\n        }\n    </mona-button-group>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorBasicTextStylesComponent, decorators: [{
             type: Component,
@@ -804,7 +804,7 @@ class EditorBlockquoteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorBlockquoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorBlockquoteComponent, isStandalone: true, selector: "mona-editor-blockquote", ngImport: i0, template: "<button monaButton [size]=\"'small'\" [selected]=\"blockquoteSelected()\" (click)=\"onBlockquoteToggle()\" [title]=\"messages().quotation\">\n    <i class=\"ri-double-quotes-r\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorBlockquoteComponent, isStandalone: true, selector: "mona-editor-blockquote", ngImport: i0, template: "<button monaButton [size]=\"'small'\" [selected]=\"blockquoteSelected()\" (click)=\"onBlockquoteToggle()\" [title]=\"messages().quotation\">\n    <i class=\"ri-double-quotes-r\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorBlockquoteComponent, decorators: [{
             type: Component,
@@ -828,7 +828,7 @@ class EditorCodeBlockComponent {
         this.#editorService.editor.chain().toggleCodeBlock().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorCodeBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorCodeBlockComponent, isStandalone: true, selector: "mona-editor-code-block", ngImport: i0, template: "<button monaButton [size]=\"'small'\" [selected]=\"codeBlockSelected()\" (click)=\"onCodeBlockClick()\" [title]=\"messages().codeBlock\">\n    <i class=\"ri-code-s-slash-line\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorCodeBlockComponent, isStandalone: true, selector: "mona-editor-code-block", ngImport: i0, template: "<button monaButton [size]=\"'small'\" [selected]=\"codeBlockSelected()\" (click)=\"onCodeBlockClick()\" [title]=\"messages().codeBlock\">\n    <i class=\"ri-code-s-slash-line\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorCodeBlockComponent, decorators: [{
             type: Component,
@@ -1100,7 +1100,7 @@ class EditorHistoryComponent {
         this.#editorService.editor.chain().focus().undo().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorHistoryComponent, isStandalone: true, selector: "mona-editor-history", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [disabled]=\"undoDisabled()\" (click)=\"onUndoClick()\" [title]=\"messages().undo\">\n        <i class=\"ri-arrow-go-back-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"redoDisabled()\" (click)=\"onRedoClick()\" [title]=\"messages().redo\">\n        <i class=\"ri-arrow-go-forward-line\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorHistoryComponent, isStandalone: true, selector: "mona-editor-history", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [disabled]=\"undoDisabled()\" (click)=\"onUndoClick()\" [title]=\"messages().undo\">\n        <i class=\"ri-arrow-go-back-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"redoDisabled()\" (click)=\"onRedoClick()\" [title]=\"messages().redo\">\n        <i class=\"ri-arrow-go-forward-line\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHistoryComponent, decorators: [{
             type: Component,
@@ -1119,7 +1119,7 @@ class EditorHorizontalRuleComponent {
         this.#editorService.editor.chain().focus().setHorizontalRule().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHorizontalRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorHorizontalRuleComponent, isStandalone: true, selector: "mona-editor-horizontal-rule", ngImport: i0, template: "<button monaButton [size]=\"'small'\" (click)=\"onHorizontalRuleClick()\" [title]=\"messages().addHorizontalLine\">\n    <i class=\"ri-subtract-line\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorHorizontalRuleComponent, isStandalone: true, selector: "mona-editor-horizontal-rule", ngImport: i0, template: "<button monaButton [size]=\"'small'\" (click)=\"onHorizontalRuleClick()\" [title]=\"messages().addHorizontalLine\">\n    <i class=\"ri-subtract-line\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHorizontalRuleComponent, decorators: [{
             type: Component,
@@ -1174,7 +1174,7 @@ class EditorImageInserterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageInserterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorImageInserterComponent, isStandalone: true, selector: "mona-editor-image-inserter", outputs: { cancel: "cancel", insert: "insert" }, ngImport: i0, template: "<form [formRoot]=\"iForm\" [class]=\"formClass()\">\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().imageUrl }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.link\"></mona-text-box>\n    </div>\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().altText }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.alt\"></mona-text-box>\n    </div>\n    <div class=\"flex gap-2\">\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">{{ messages().widthPx }}</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.width\"></mona-numeric-text-box>\n        </div>\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">{{ messages().heightPx }}</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.height\"></mona-numeric-text-box>\n        </div>\n    </div>\n    <div [class]=\"actionsClass()\">\n        <button monaButton [size]=\"'small'\" [disabled]=\"!iForm().valid()\" look=\"primary\" (click)=\"onImageInsert()\">\n            {{ messages().insert }}\n        </button>\n        <button monaButton [size]=\"'small'\" [look]=\"'secondary'\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n    </div>\n</form>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorImageInserterComponent, isStandalone: true, selector: "mona-editor-image-inserter", outputs: { cancel: "cancel", insert: "insert" }, ngImport: i0, template: "<form [formRoot]=\"iForm\" [class]=\"formClass()\">\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().imageUrl }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.link\"></mona-text-box>\n    </div>\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().altText }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.alt\"></mona-text-box>\n    </div>\n    <div class=\"flex gap-2\">\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">{{ messages().widthPx }}</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.width\"></mona-numeric-text-box>\n        </div>\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">{{ messages().heightPx }}</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.height\"></mona-numeric-text-box>\n        </div>\n    </div>\n    <div [class]=\"actionsClass()\">\n        <button monaButton [size]=\"'small'\" [disabled]=\"!iForm().valid()\" look=\"primary\" (click)=\"onImageInsert()\">\n            {{ messages().insert }}\n        </button>\n        <button monaButton [size]=\"'small'\" [look]=\"'secondary'\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n    </div>\n</form>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageInserterComponent, decorators: [{
             type: Component,
@@ -1222,7 +1222,7 @@ class EditorImageComponent {
             .run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorImageComponent, isStandalone: true, selector: "mona-editor-image", ngImport: i0, template: "<button monaButton [size]=\"'small'\" (click)=\"onDisplayInserterClick()\" [title]=\"messages().insertImage\">\n    <i class=\"ri-image-add-line\"></i>\n</button>\n\n@if (inserterVisible()) {\n    <mona-window\n        [width]=\"400\"\n        [modal]=\"false\"\n        [title]=\"messages().insertImage\"\n        [minimizable]=\"false\"\n        [maximizable]=\"false\"\n        (close)=\"onInserterClose()\">\n        <ng-template monaWindowContentTemplate>\n            <mona-editor-image-inserter\n                (insert)=\"onImageInsert($event)\"\n                (cancel)=\"onInsertCancel()\"></mona-editor-image-inserter>\n        </ng-template>\n    </mona-window>\n}\n", dependencies: [{ kind: "component", type: WindowComponent, selector: "mona-window", inputs: ["closable", "closeOnEscape", "draggable", "focusedElement", "height", "left", "look", "maxHeight", "maxWidth", "maximizable", "messages", "minHeight", "minWidth", "minimizable", "modal", "resizable", "rounded", "title", "top", "width"], outputs: ["close", "closed", "dragEnd", "dragStart", "heightChange", "leftChange", "topChange", "widthChange"] }, { kind: "component", type: EditorImageInserterComponent, selector: "mona-editor-image-inserter", outputs: ["cancel", "insert"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: WindowContentTemplateDirective, selector: "ng-template[monaWindowContentTemplate]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorImageComponent, isStandalone: true, selector: "mona-editor-image", ngImport: i0, template: "<button monaButton [size]=\"'small'\" (click)=\"onDisplayInserterClick()\" [title]=\"messages().insertImage\">\n    <i class=\"ri-image-add-line\"></i>\n</button>\n\n@if (inserterVisible()) {\n    <mona-window\n        [width]=\"400\"\n        [modal]=\"false\"\n        [title]=\"messages().insertImage\"\n        [minimizable]=\"false\"\n        [maximizable]=\"false\"\n        (close)=\"onInserterClose()\">\n        <ng-template monaWindowContentTemplate>\n            <mona-editor-image-inserter\n                (insert)=\"onImageInsert($event)\"\n                (cancel)=\"onInsertCancel()\"></mona-editor-image-inserter>\n        </ng-template>\n    </mona-window>\n}\n", dependencies: [{ kind: "component", type: WindowComponent, selector: "mona-window", inputs: ["closable", "closeOnEscape", "draggable", "focusedElement", "height", "left", "look", "maxHeight", "maxWidth", "maximizable", "messages", "minHeight", "minWidth", "minimizable", "modal", "resizable", "rounded", "title", "top", "width"], outputs: ["close", "closed", "dragEnd", "dragStart", "heightChange", "leftChange", "topChange", "widthChange"] }, { kind: "component", type: EditorImageInserterComponent, selector: "mona-editor-image-inserter", outputs: ["cancel", "insert"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: WindowContentTemplateDirective, selector: "ng-template[monaWindowContentTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageComponent, decorators: [{
             type: Component,
@@ -1254,7 +1254,7 @@ class EditorIndentComponent {
         this.#editorService.editor.chain().focus().outdent().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorIndentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorIndentComponent, isStandalone: true, selector: "mona-editor-indent", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [disabled]=\"indentDisabled()\" (click)=\"onIndentClick()\" [title]=\"messages().indent\">\n        <i class=\"ri-indent-increase\"></i>\n    </button>\n    <button monaButton [disabled]=\"outdentDisabled()\" (click)=\"onOutdentClick()\" [title]=\"messages().outdent\">\n        <i class=\"ri-indent-decrease\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorIndentComponent, isStandalone: true, selector: "mona-editor-indent", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [disabled]=\"indentDisabled()\" (click)=\"onIndentClick()\" [title]=\"messages().indent\">\n        <i class=\"ri-indent-increase\"></i>\n    </button>\n    <button monaButton [disabled]=\"outdentDisabled()\" (click)=\"onOutdentClick()\" [title]=\"messages().outdent\">\n        <i class=\"ri-indent-decrease\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorIndentComponent, decorators: [{
             type: Component,
@@ -1303,7 +1303,7 @@ class EditorLinkComponent {
         this.#editorService.editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorLinkComponent, isStandalone: true, selector: "mona-editor-link", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"linkSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onLinkDialogDisplay()\"\n        [title]=\"messages().insertLink\">\n        <i class=\"ri-link-m\"></i>\n    </button>\n    <button monaButton [disabled]=\"unlinkDisabled()\" (click)=\"onUnlinkClick()\" [title]=\"messages().removeLink\">\n        <i class=\"ri-link-unlink-m\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorLinkComponent, isStandalone: true, selector: "mona-editor-link", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"linkSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onLinkDialogDisplay()\"\n        [title]=\"messages().insertLink\">\n        <i class=\"ri-link-m\"></i>\n    </button>\n    <button monaButton [disabled]=\"unlinkDisabled()\" (click)=\"onUnlinkClick()\" [title]=\"messages().removeLink\">\n        <i class=\"ri-link-unlink-m\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorLinkComponent, decorators: [{
             type: Component,
@@ -1335,7 +1335,7 @@ class EditorListComponent {
         this.#editorService.editor.chain().focus().toggleBulletList().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorListComponent, isStandalone: true, selector: "mona-editor-list", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"unorderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onUnorderedListToggle()\"\n        [title]=\"messages().insertUnorderedList\">\n        <i class=\"ri-list-unordered\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"orderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onOrderedListToggle()\"\n        [title]=\"messages().insertOrderedList\">\n        <i class=\"ri-list-ordered-2\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorListComponent, isStandalone: true, selector: "mona-editor-list", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"unorderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onUnorderedListToggle()\"\n        [title]=\"messages().insertUnorderedList\">\n        <i class=\"ri-list-unordered\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"orderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onOrderedListToggle()\"\n        [title]=\"messages().insertOrderedList\">\n        <i class=\"ri-list-ordered-2\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorListComponent, decorators: [{
             type: Component,
@@ -1491,7 +1491,7 @@ class EditorTableComponent {
         this.#editorService.editor.chain().focus().toggleHeaderRow().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: EditorTableComponent, isStandalone: true, selector: "mona-editor-table", viewQueries: [{ propertyName: "popover", first: true, predicate: ["popoverComponent"], descendants: true, isSignal: true }], ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [title]=\"messages().insertTable\" #insertTableButton>\n        <i class=\"ri-grid-line\"></i>\n    </button>\n    <button\n        monaButton\n        [disabled]=\"addColumnBeforeDisabled()\"\n        (click)=\"onAddColumnBeforeClick()\"\n        [title]=\"messages().addColumnBefore\">\n        <i class=\"ri-insert-column-left\"></i>\n    </button>\n    <button monaButton [disabled]=\"addColumnAfterDisabled()\" (click)=\"onAddColumnAfterClick()\" [title]=\"messages().addColumnAfter\">\n        <i class=\"ri-insert-column-right\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowBeforeDisabled()\" (click)=\"onAddRowBeforeClick()\" [title]=\"messages().addRowBefore\">\n        <i class=\"ri-insert-row-top\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowAfterDisabled()\" (click)=\"onAddRowAfterClick()\" [title]=\"messages().addRowAfter\">\n        <i class=\"ri-insert-row-bottom\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteColumnDisabled()\" (click)=\"onDeleteColumnClick()\" [title]=\"messages().deleteColumn\">\n        <i class=\"ri-delete-column\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteRowDisabled()\" (click)=\"onDeleteRowClick()\" [title]=\"messages().deleteRow\">\n        <i class=\"ri-delete-row\"></i>\n    </button>\n    <button monaButton [disabled]=\"mergeCellsDisabled()\" (click)=\"onMergeCellsClick()\" [title]=\"messages().mergeCells\">\n        <i class=\"ri-merge-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"splitCellDisabled()\" (click)=\"onSplitCellClick()\" [title]=\"messages().splitCell\">\n        <i class=\"ri-split-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"toggleHeaderRowDisabled()\" (click)=\"onToggleHeaderRow()\" [title]=\"messages().toggleHeaderRow\">\n        <i class=\"ri-table-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteTableDisabled()\" (click)=\"onDeleteTableClick()\" [title]=\"messages().deleteTable\">\n        <i class=\"ri-close-large-line\"></i>\n    </button>\n</mona-button-group>\n\n<mona-popover [target]=\"insertTableButton\" position=\"bottom\" #popoverComponent>\n    <mona-editor-table-creator (insert)=\"onTableInsert($event)\"></mona-editor-table-creator>\n</mona-popover>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopoverComponent, selector: "mona-popover", inputs: ["displayArrow", "position", "rounded", "target", "title", "trigger"], outputs: ["hide", "hidden", "show", "shown"], exportAs: ["monaPopover"] }, { kind: "component", type: EditorTableCreatorComponent, selector: "mona-editor-table-creator", outputs: ["insert"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: EditorTableComponent, isStandalone: true, selector: "mona-editor-table", viewQueries: [{ propertyName: "popover", first: true, predicate: ["popoverComponent"], descendants: true, isSignal: true }], ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [title]=\"messages().insertTable\" #insertTableButton>\n        <i class=\"ri-grid-line\"></i>\n    </button>\n    <button\n        monaButton\n        [disabled]=\"addColumnBeforeDisabled()\"\n        (click)=\"onAddColumnBeforeClick()\"\n        [title]=\"messages().addColumnBefore\">\n        <i class=\"ri-insert-column-left\"></i>\n    </button>\n    <button monaButton [disabled]=\"addColumnAfterDisabled()\" (click)=\"onAddColumnAfterClick()\" [title]=\"messages().addColumnAfter\">\n        <i class=\"ri-insert-column-right\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowBeforeDisabled()\" (click)=\"onAddRowBeforeClick()\" [title]=\"messages().addRowBefore\">\n        <i class=\"ri-insert-row-top\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowAfterDisabled()\" (click)=\"onAddRowAfterClick()\" [title]=\"messages().addRowAfter\">\n        <i class=\"ri-insert-row-bottom\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteColumnDisabled()\" (click)=\"onDeleteColumnClick()\" [title]=\"messages().deleteColumn\">\n        <i class=\"ri-delete-column\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteRowDisabled()\" (click)=\"onDeleteRowClick()\" [title]=\"messages().deleteRow\">\n        <i class=\"ri-delete-row\"></i>\n    </button>\n    <button monaButton [disabled]=\"mergeCellsDisabled()\" (click)=\"onMergeCellsClick()\" [title]=\"messages().mergeCells\">\n        <i class=\"ri-merge-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"splitCellDisabled()\" (click)=\"onSplitCellClick()\" [title]=\"messages().splitCell\">\n        <i class=\"ri-split-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"toggleHeaderRowDisabled()\" (click)=\"onToggleHeaderRow()\" [title]=\"messages().toggleHeaderRow\">\n        <i class=\"ri-table-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteTableDisabled()\" (click)=\"onDeleteTableClick()\" [title]=\"messages().deleteTable\">\n        <i class=\"ri-close-large-line\"></i>\n    </button>\n</mona-button-group>\n\n<mona-popover [target]=\"insertTableButton\" position=\"bottom\" #popoverComponent>\n    <mona-editor-table-creator (insert)=\"onTableInsert($event)\"></mona-editor-table-creator>\n</mona-popover>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: PopoverComponent, selector: "mona-popover", inputs: ["displayArrow", "position", "rounded", "target", "title", "trigger"], outputs: ["hide", "hidden", "show", "shown"], exportAs: ["monaPopover"] }, { kind: "component", type: EditorTableCreatorComponent, selector: "mona-editor-table-creator", outputs: ["insert"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTableComponent, decorators: [{
             type: Component,
@@ -1515,7 +1515,7 @@ class EditorTaskListComponent {
         this.#editorService.editor.chain().focus().toggleTaskList().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTaskListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorTaskListComponent, isStandalone: true, selector: "mona-editor-task-list", ngImport: i0, template: "<button monaButton [selected]=\"taskSelected()\" [size]=\"'small'\" (click)=\"onTaskToggle()\" [title]=\"messages().insertTaskList\">\n    <i class=\"ri-checkbox-fill\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorTaskListComponent, isStandalone: true, selector: "mona-editor-task-list", ngImport: i0, template: "<button monaButton [selected]=\"taskSelected()\" [size]=\"'small'\" (click)=\"onTaskToggle()\" [title]=\"messages().insertTaskList\">\n    <i class=\"ri-checkbox-fill\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTaskListComponent, decorators: [{
             type: Component,
@@ -1583,7 +1583,7 @@ class EditorTextAlignmentsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTextAlignmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorTextAlignmentsComponent, isStandalone: true, selector: "mona-editor-text-alignments", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"alignLeftSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignLeft()\"\n        [title]=\"messages().alignLeft\">\n        <i class=\"ri-align-left\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignCenterSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignCenter()\"\n        [title]=\"messages().alignCenter\">\n        <i class=\"ri-align-center\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignRightSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignRight()\"\n        [title]=\"messages().alignRight\">\n        <i class=\"ri-align-right\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignJustifySelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignJustify()\"\n        [title]=\"messages().justify\">\n        <i class=\"ri-align-justify\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorTextAlignmentsComponent, isStandalone: true, selector: "mona-editor-text-alignments", ngImport: i0, template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"alignLeftSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignLeft()\"\n        [title]=\"messages().alignLeft\">\n        <i class=\"ri-align-left\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignCenterSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignCenter()\"\n        [title]=\"messages().alignCenter\">\n        <i class=\"ri-align-center\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignRightSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignRight()\"\n        [title]=\"messages().alignRight\">\n        <i class=\"ri-align-right\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignJustifySelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignJustify()\"\n        [title]=\"messages().justify\">\n        <i class=\"ri-align-justify\"></i>\n    </button>\n</mona-button-group>\n", dependencies: [{ 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTextAlignmentsComponent, decorators: [{
             type: Component,

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

@@ -704,7 +704,7 @@ class FilterMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FilterMenuComponent, isStandalone: true, selector: "mona-filter-menu", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", field: "fieldChange", operators: "operatorsChange", type: "typeChange", value: "valueChange" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<div [class]=\"filterMenuItemClass()\">\n    @if (type() === \"string\") {\n        <mona-dropdown-list\n            [data]=\"stringFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-text-box\n            [ngModel]=\"stringFilterValues()[0]\"\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\n            [size]=\"size()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\n    }\n\n    @if (type() === \"number\") {\n        <mona-dropdown-list\n            [data]=\"numericFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-numeric-text-box\n            [ngModel]=\"numberFilterValues()[0]\"\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\n    }\n\n    @if (type() === \"date\") {\n        <mona-dropdown-list\n            [data]=\"dateFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n\n        @if (type() === \"date\") {\n            <mona-date-picker\n                [ngModel]=\"dateFilterValues()[0]\"\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\n                [format]=\"effectiveDateOptions().format\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\n        }\n    }\n\n    @if (type() === \"boolean\") {\n        <mona-dropdown-list\n            [data]=\"booleanFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n    }\n</div>\n@if (firstFilterValid()) {\n    <div [class]=\"filterMenuItemClass()\">\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\n            @for (item of connectorDataItems(); track item.value) {\n                <button\n                    monaButton\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\n                    {{ item.text }}\n                </button>\n            }\n        </mona-button-group>\n    </div>\n}\n@if (!!selectedConnectorItem()) {\n    <div [class]=\"filterMenuItemClass()\">\n        @if (type() === \"string\") {\n            <mona-dropdown-list\n                [data]=\"stringFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n            <mona-text-box\n                [ngModel]=\"stringFilterValues()[1]\"\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\n        }\n\n        @if (type() === \"number\") {\n            <mona-dropdown-list\n                [data]=\"numericFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            <mona-numeric-text-box\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"numberFilterValues()[1]\"\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\n        }\n\n        @if (type() === \"date\") {\n            <mona-dropdown-list\n                [data]=\"dateFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            @if (type() === \"date\") {\n                <mona-date-picker\n                    [ngModel]=\"dateFilterValues()[1]\"\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\n                    [format]=\"effectiveDateOptions().format\"\n                    [size]=\"size()\"\n                    [rounded]=\"rounded()\"\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\n            }\n        }\n\n        @if (type() === \"boolean\") {\n            <mona-dropdown-list\n                [data]=\"booleanFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n        }\n    </div>\n}\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\n    <button\n        monaButton\n        (click)=\"onFilterApply()\"\n        [look]=\"'primary'\"\n        [size]=\"size()\"\n        [rounded]=\"rounded()\"\n        [disabled]=\"applyDisabled()\">\n        {{ messages().apply }}\n    </button>\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">{{ messages().clear }}</button>\n</div>\n", dependencies: [{ kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "pipe", type: ValuelessOperatorPipe, name: "valuelessOperator" }, { kind: "pipe", type: OperatorFilterPipe, name: "operatorFilter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FilterMenuComponent, isStandalone: true, selector: "mona-filter-menu", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", field: "fieldChange", operators: "operatorsChange", type: "typeChange", value: "valueChange" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<div [class]=\"filterMenuItemClass()\">\n    @if (type() === \"string\") {\n        <mona-dropdown-list\n            [data]=\"stringFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-text-box\n            [ngModel]=\"stringFilterValues()[0]\"\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\n            [size]=\"size()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\n    }\n\n    @if (type() === \"number\") {\n        <mona-dropdown-list\n            [data]=\"numericFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-numeric-text-box\n            [ngModel]=\"numberFilterValues()[0]\"\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\n    }\n\n    @if (type() === \"date\") {\n        <mona-dropdown-list\n            [data]=\"dateFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n\n        @if (type() === \"date\") {\n            <mona-date-picker\n                [ngModel]=\"dateFilterValues()[0]\"\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\n                [format]=\"effectiveDateOptions().format\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\n        }\n    }\n\n    @if (type() === \"boolean\") {\n        <mona-dropdown-list\n            [data]=\"booleanFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n    }\n</div>\n@if (firstFilterValid()) {\n    <div [class]=\"filterMenuItemClass()\">\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\n            @for (item of connectorDataItems(); track item.value) {\n                <button\n                    monaButton\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\n                    {{ item.text }}\n                </button>\n            }\n        </mona-button-group>\n    </div>\n}\n@if (!!selectedConnectorItem()) {\n    <div [class]=\"filterMenuItemClass()\">\n        @if (type() === \"string\") {\n            <mona-dropdown-list\n                [data]=\"stringFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n            <mona-text-box\n                [ngModel]=\"stringFilterValues()[1]\"\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\n        }\n\n        @if (type() === \"number\") {\n            <mona-dropdown-list\n                [data]=\"numericFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            <mona-numeric-text-box\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"numberFilterValues()[1]\"\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\n        }\n\n        @if (type() === \"date\") {\n            <mona-dropdown-list\n                [data]=\"dateFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            @if (type() === \"date\") {\n                <mona-date-picker\n                    [ngModel]=\"dateFilterValues()[1]\"\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\n                    [format]=\"effectiveDateOptions().format\"\n                    [size]=\"size()\"\n                    [rounded]=\"rounded()\"\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\n            }\n        }\n\n        @if (type() === \"boolean\") {\n            <mona-dropdown-list\n                [data]=\"booleanFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n        }\n    </div>\n}\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\n    <button\n        monaButton\n        (click)=\"onFilterApply()\"\n        [look]=\"'primary'\"\n        [size]=\"size()\"\n        [rounded]=\"rounded()\"\n        [disabled]=\"applyDisabled()\">\n        {{ messages().apply }}\n    </button>\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">{{ messages().clear }}</button>\n</div>\n", dependencies: [{ kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { 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: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "pipe", type: ValuelessOperatorPipe, name: "valuelessOperator" }, { kind: "pipe", type: OperatorFilterPipe, name: "operatorFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,

package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs → nanahoshi-mona-ui-grid-grid-footer-row.component-x_euoNnS.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, computed, input, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
-import { a as GridService, v as gridFooterTableCellThemeVariants, w as gridFooterTableRowThemeVariants, m as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs';
+import { a as GridService, v as gridFooterTableCellThemeVariants, w as gridFooterTableRowThemeVariants, m as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-Iw-wvKGl.mjs';
 import { NgTemplateOutlet } from '@angular/common';
 import { ImmutableDictionary } from '@mirei/ts-collections';
 
@@ -166,4 +166,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }] } });
 
 export { GridFooterRowComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-row.component-x_euoNnS.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-list.component-DxY6bfTX.mjs → nanahoshi-mona-ui-grid-grid-list.component-C1_6vq77.mjs}

@@ -5,9 +5,9 @@ import { inject, DestroyRef, ElementRef, viewChild, computed, input, afterNextRe
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ImmutableList } from '@mirei/ts-collections';
 import { fromEvent } from 'rxjs';
-import { G as GridNavigationService, g as gridListBaseThemeVariants, a as GridService, b as gridRowDragPreviewThemeVariants, c as gridListTableThemeVariants, d as GridColgroupComponent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs';
-import { G as GridAddRowComponent, a as GridDetailRowComponent, b as GridGroupRowComponent, c as GridRowComponent } from './nanahoshi-mona-ui-grid-grid-row.component-CaO5Lae6.mjs';
-import { GridFooterRowComponent } from './nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs';
+import { G as GridNavigationService, g as gridListBaseThemeVariants, a as GridService, b as gridRowDragPreviewThemeVariants, c as gridListTableThemeVariants, d as GridColgroupComponent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-Iw-wvKGl.mjs';
+import { G as GridAddRowComponent, a as GridDetailRowComponent, b as GridGroupRowComponent, c as GridRowComponent } from './nanahoshi-mona-ui-grid-grid-row.component-BhukVWIy.mjs';
+import { GridFooterRowComponent } from './nanahoshi-mona-ui-grid-grid-footer-row.component-x_euoNnS.mjs';
 
 const ROW_MOVE_DURATION = 200;
 const ROW_MOVE_EASING = "cubic-bezier(0.2, 0, 0, 1)";
@@ -173,4 +173,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 export { GridListComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-DxY6bfTX.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-C1_6vq77.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-row.component-CaO5Lae6.mjs → nanahoshi-mona-ui-grid-grid-row.component-BhukVWIy.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, computed, input, Directive, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, model, Injector, LOCALE_ID } from '@angular/core';
-import { a as GridService, i as gridListTableCellThemeVariants, j as gridCellEditorBaseThemeVariants, k as gridCellEditorInputThemeVariants, l as gridListTableRowThemeVariants, m as GridLockedCellDirective, n as GridLogicalCellDirective, o as gridGroupRowThemeVariants, G as GridNavigationService, p as gridCellBaseThemeVariants, q as gridCellContainerThemeVariants, r as gridCellDirtyIndicatorThemeVariants, s as gridCellTextThemeVariants, t as gridRowReorderHandleThemeVariants, u as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs';
+import { a as GridService, i as gridListTableCellThemeVariants, j as gridCellEditorBaseThemeVariants, k as gridCellEditorInputThemeVariants, l as gridListTableRowThemeVariants, m as GridLockedCellDirective, n as GridLogicalCellDirective, o as gridGroupRowThemeVariants, G as GridNavigationService, p as gridCellBaseThemeVariants, q as gridCellContainerThemeVariants, r as gridCellDirtyIndicatorThemeVariants, s as gridCellTextThemeVariants, t as gridRowReorderHandleThemeVariants, u as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-Iw-wvKGl.mjs';
 import { NgTemplateOutlet, formatDate } from '@angular/common';
 import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
 import { twMerge } from 'tailwind-merge';
@@ -163,7 +163,7 @@ class GridCommandCellComponent {
         this.gridService.commitRowEdit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCommandCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridCommandCellComponent, isStandalone: true, selector: "mona-grid-command-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, newRow: { classPropertyName: "newRow", publicName: "newRow", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center w-full min-h-9" }, ngImport: i0, template: "@if (column().commandTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().commandTemplate\"\n        [ngTemplateOutletContext]=\"commandContext()\"></ng-container>\n} @else {\n    <div class=\"flex min-h-9 items-center gap-1 px-1\">\n        @if (isEditing()) {\n            @if (hasRowError()) {\n                <span class=\"shrink-0 px-1 text-error\" #rowErrorIcon>\n                    <svg lucideOctagonAlert [size]=\"14\"></svg>\n                </span>\n                <mona-tooltip [target]=\"rowErrorIcon\">\n                    <span class=\"p-1 whitespace-pre-line\">{{ rowErrorTooltip() }}</span>\n                </mona-tooltip>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().saveRow\"\n                [attr.title]=\"messages().save\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"save($event)\">\n                <svg lucideCheck [size]=\"14\"></svg>\n            </button>\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().cancelRowEdit\"\n                [attr.title]=\"messages().cancel\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"cancel($event)\">\n                <svg lucideX [size]=\"14\"></svg>\n            </button>\n        } @else {\n            @if (canEditRows()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"messages().editRow\"\n                    [attr.title]=\"messages().edit\"\n                    class=\"w-6 h-6\"\n                    [tabindex]=\"-1\"\n                    (click)=\"edit($event)\">\n                    <svg lucidePencil [size]=\"14\"></svg>\n                </button>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().removeRow\"\n                [attr.title]=\"messages().remove\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"remove($event)\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucidePencil, selector: "svg[lucidePencil]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: TooltipComponent, selector: "mona-tooltip", inputs: ["disabled", "hideDelay", "position", "rounded", "showDelay", "target"], outputs: ["hidden", "shown"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridCommandCellComponent, isStandalone: true, selector: "mona-grid-command-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, newRow: { classPropertyName: "newRow", publicName: "newRow", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center w-full min-h-9" }, ngImport: i0, template: "@if (column().commandTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().commandTemplate\"\n        [ngTemplateOutletContext]=\"commandContext()\"></ng-container>\n} @else {\n    <div class=\"flex min-h-9 items-center gap-1 px-1\">\n        @if (isEditing()) {\n            @if (hasRowError()) {\n                <span class=\"shrink-0 px-1 text-error\" #rowErrorIcon>\n                    <svg lucideOctagonAlert [size]=\"14\"></svg>\n                </span>\n                <mona-tooltip [target]=\"rowErrorIcon\">\n                    <span class=\"p-1 whitespace-pre-line\">{{ rowErrorTooltip() }}</span>\n                </mona-tooltip>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().saveRow\"\n                [attr.title]=\"messages().save\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"save($event)\">\n                <svg lucideCheck [size]=\"14\"></svg>\n            </button>\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().cancelRowEdit\"\n                [attr.title]=\"messages().cancel\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"cancel($event)\">\n                <svg lucideX [size]=\"14\"></svg>\n            </button>\n        } @else {\n            @if (canEditRows()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"messages().editRow\"\n                    [attr.title]=\"messages().edit\"\n                    class=\"w-6 h-6\"\n                    [tabindex]=\"-1\"\n                    (click)=\"edit($event)\">\n                    <svg lucidePencil [size]=\"14\"></svg>\n                </button>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().removeRow\"\n                [attr.title]=\"messages().remove\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"remove($event)\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucidePencil, selector: "svg[lucidePencil]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: TooltipComponent, selector: "mona-tooltip", inputs: ["disabled", "hideDelay", "position", "rounded", "showDelay", "target"], outputs: ["hidden", "shown"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCommandCellComponent, decorators: [{
             type: Component,
@@ -943,4 +943,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
 export { GridAddRowComponent as G, GridDetailRowComponent as a, GridGroupRowComponent as b, GridRowComponent as c };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-row.component-CaO5Lae6.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-row.component-BhukVWIy.mjs.map