@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -1,16 +1,15 @@
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, computed, input, DestroyRef, signal, viewChild, viewChildren, ElementRef, model, output, afterRenderEffect, untracked, afterNextRender, ChangeDetectionStrategy, Component, contentChild, TemplateRef, contentChildren, linkedSignal } from '@angular/core';
+import { Directive, inject, computed, input, DestroyRef, signal, viewChild, viewChildren, ElementRef, model, output, afterRenderEffect, untracked, afterNextRender, Component, contentChild, TemplateRef, ChangeDetectionStrategy, contentChildren, linkedSignal } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { firstOrDefault, select } from '@mirei/ts-collections';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faChevronLeft, faChevronRight, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { LucideChevronLeft, LucideChevronRight, LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { Subject, switchMap, EMPTY, timer, interval, tap, asapScheduler } from 'rxjs';
-import { twMerge } from 'tailwind-merge';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 
 class TabCloseEvent extends PreventableEvent {
@@ -64,11 +63,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const tabListBaseVariants = cva(`
-        w-fit max-w-full
-        flex overflow-hidden
-        bg-accent
-        font-medium text-sm
+const tabListBaseVariants = cva(`
+        w-fit max-w-full
+        flex overflow-hidden
+        bg-accent
+        font-medium text-sm
     `, {
     variants: {
         rounded: {
@@ -86,18 +85,18 @@ const tabListBaseVariants = cva(`
     }
 });
 const tabListListWrapperVariants = cva(`w-full h-full overflow-hidden`);
-const tabListListVariants = cva(`
-        flex h-full w-full overflow-hidden
-        list-none cursor-default
-        select-none whitespace-nowrap
-        p-[3px]
-        transition-colors duration-300 ease-out
+const tabListListVariants = cva(`
+        flex h-full w-full overflow-hidden
+        list-none cursor-default
+        select-none whitespace-nowrap
+        p-[3px]
+        transition-colors duration-300 ease-out
     `);
-const tabListListItemVariants = cva(`
-        flex items-center justify-center
-        cursor-pointer
-        px-2 outline-none
-        focus-visible:ring-2 focus-visible:ring-primary/40
+const tabListListItemVariants = cva(`
+        flex items-center justify-center
+        cursor-pointer
+        px-2 outline-none
+        focus-visible:ring-2 focus-visible:ring-primary/40
     `, {
     variants: {
         active: {
@@ -120,14 +119,14 @@ const tabListListItemVariants = cva(`
         rounded: "medium"
     }
 });
-const tabListScrollButtonVariants = cva(`
-        flex items-center justify-center
-        h-full px-2
+const tabListScrollButtonVariants = cva(`
+        flex items-center justify-center
+        h-full px-2
     `);
-const tabContentVariants = cva(`
-        w-full overflow-auto flex-1
-        border border-border shadow-sm
-        bg-background
+const tabContentVariants = cva(`
+        w-full overflow-auto flex-1
+        border border-border shadow-sm
+        bg-background text-foreground
     `, {
     variants: {
         rounded: {
@@ -142,9 +141,9 @@ const tabContentVariants = cva(`
         rounded: "medium"
     }
 });
-const tabsBaseVariants = cva(`
-        max-w-full
-        flex flex-col gap-2
+const tabsBaseVariants = cva(`
+        max-w-full
+        flex flex-col gap-2
     `);
 
 const tabListBaseThemeVariants = (theme) => {
@@ -265,11 +264,8 @@ class TabListComponent {
             return tabListScrollButtonThemeVariants(theme)();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scrollButtonClass" }] : /* istanbul ignore next */ []));
-        this.scrollLeftIcon = faChevronLeft;
-        this.scrollRightIcon = faChevronRight;
         this.scrollsVisible = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scrollsVisible" }] : /* istanbul ignore next */ []));
-        this.tabCloseIcon = faXmark;
         this.tabListElement = viewChild.required("tabListElement", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabListElement" }] : /* istanbul ignore next */ []));
         this.tabListItems = viewChildren(TabListItemDirective, { ...(ngDevMode ? { debugName: "tabListItems" } : /* istanbul ignore next */ {}), read: ElementRef });
@@ -474,14 +470,14 @@ class TabListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (scrollsVisible()) {\r\n    <button\r\n        monaButton\r\n        look=\"link\"\r\n        size=\"small\"\r\n        [class]=\"scrollButtonClass()\"\r\n        (click)=\"startScrolling(tabListElement, 'left', 'single')\"\r\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'left')\"\r\n        (pointerup)=\"stopScrolling()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        tabindex=\"-1\">\r\n        <fa-icon [icon]=\"scrollLeftIcon\"></fa-icon>\r\n    </button>\r\n}\r\n<div class=\"w-full h-full overflow-hidden\">\r\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\">\r\n        @for (tab of tabList(); track tab) {\r\n            @let selected = tab.id === selectedTabId();\r\n            @let itemDisabled = tab.disabled || disabled();\r\n            <li\r\n                monaTabListItem\r\n                [id]=\"tab.id + '-tab'\"\r\n                [active]=\"selected\"\r\n                [disabled]=\"itemDisabled\"\r\n                [rounded]=\"rounded()\"\r\n                role=\"tab\"\r\n                [tabindex]=\"selected ? 0 : -1\"\r\n                [attr.aria-selected]=\"selected\"\r\n                [attr.aria-disabled]=\"itemDisabled\"\r\n                [attr.aria-controls]=\"tab.id + '-panel'\"\r\n                [attr.data-selected]=\"selected\"\r\n                [attr.data-tab-id]=\"tab.id\"\r\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\r\n                <div>\r\n                    @if (tab.titleTemplate) {\r\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ tab.title }}</span>\r\n                    }\r\n                </div>\r\n                @if (tab.closable || closable()) {\r\n                    <button\r\n                        monaButton\r\n                        look=\"link\"\r\n                        [disabled]=\"itemDisabled\"\r\n                        (click)=\"onTabClose(tab, $event)\"\r\n                        class=\"px-0 h-fit ml-1 w-min\"\r\n                        tabindex=\"-1\">\r\n                        <fa-icon [icon]=\"tabCloseIcon\" class=\"text-xs flex\"></fa-icon>\r\n                    </button>\r\n                }\r\n            </li>\r\n        }\r\n    </ul>\r\n</div>\r\n@if (scrollsVisible()) {\r\n    <button\r\n        monaButton\r\n        look=\"link\"\r\n        size=\"small\"\r\n        [class]=\"scrollButtonClass()\"\r\n        (click)=\"startScrolling(tabListElement, 'right', 'single')\"\r\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'right')\"\r\n        (pointerup)=\"stopScrolling()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        tabindex=\"-1\">\r\n        <fa-icon [icon]=\"scrollRightIcon\"></fa-icon>\r\n    </button>\r\n}\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (scrollsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'left', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'left')\"\n        (pointerup)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        <svg lucideChevronLeft [size]=\"16\"></svg>\n    </button>\n}\n<div class=\"w-full h-full overflow-hidden\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [rounded]=\"rounded()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ml-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (scrollsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'right', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'right')\"\n        (pointerup)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        <svg lucideChevronRight [size]=\"16\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "rounded"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tab-list", imports: [ButtonDirective, FaIconComponent, NgTemplateOutlet, TabListItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: "mona-tab-list", imports: [ButtonDirective, NgTemplateOutlet, TabListItemDirective, LucideChevronLeft, LucideChevronRight, LucideX], host: {
                         "[class]": "baseClass()",
                         "(keydown)": "onKeydown($event)"
-                    }, template: "@if (scrollsVisible()) {\r\n    <button\r\n        monaButton\r\n        look=\"link\"\r\n        size=\"small\"\r\n        [class]=\"scrollButtonClass()\"\r\n        (click)=\"startScrolling(tabListElement, 'left', 'single')\"\r\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'left')\"\r\n        (pointerup)=\"stopScrolling()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        tabindex=\"-1\">\r\n        <fa-icon [icon]=\"scrollLeftIcon\"></fa-icon>\r\n    </button>\r\n}\r\n<div class=\"w-full h-full overflow-hidden\">\r\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\">\r\n        @for (tab of tabList(); track tab) {\r\n            @let selected = tab.id === selectedTabId();\r\n            @let itemDisabled = tab.disabled || disabled();\r\n            <li\r\n                monaTabListItem\r\n                [id]=\"tab.id + '-tab'\"\r\n                [active]=\"selected\"\r\n                [disabled]=\"itemDisabled\"\r\n                [rounded]=\"rounded()\"\r\n                role=\"tab\"\r\n                [tabindex]=\"selected ? 0 : -1\"\r\n                [attr.aria-selected]=\"selected\"\r\n                [attr.aria-disabled]=\"itemDisabled\"\r\n                [attr.aria-controls]=\"tab.id + '-panel'\"\r\n                [attr.data-selected]=\"selected\"\r\n                [attr.data-tab-id]=\"tab.id\"\r\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\r\n                <div>\r\n                    @if (tab.titleTemplate) {\r\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ tab.title }}</span>\r\n                    }\r\n                </div>\r\n                @if (tab.closable || closable()) {\r\n                    <button\r\n                        monaButton\r\n                        look=\"link\"\r\n                        [disabled]=\"itemDisabled\"\r\n                        (click)=\"onTabClose(tab, $event)\"\r\n                        class=\"px-0 h-fit ml-1 w-min\"\r\n                        tabindex=\"-1\">\r\n                        <fa-icon [icon]=\"tabCloseIcon\" class=\"text-xs flex\"></fa-icon>\r\n                    </button>\r\n                }\r\n            </li>\r\n        }\r\n    </ul>\r\n</div>\r\n@if (scrollsVisible()) {\r\n    <button\r\n        monaButton\r\n        look=\"link\"\r\n        size=\"small\"\r\n        [class]=\"scrollButtonClass()\"\r\n        (click)=\"startScrolling(tabListElement, 'right', 'single')\"\r\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'right')\"\r\n        (pointerup)=\"stopScrolling()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        tabindex=\"-1\">\r\n        <fa-icon [icon]=\"scrollRightIcon\"></fa-icon>\r\n    </button>\r\n}\r\n" }]
+                    }, template: "@if (scrollsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'left', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'left')\"\n        (pointerup)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        <svg lucideChevronLeft [size]=\"16\"></svg>\n    </button>\n}\n<div class=\"w-full h-full overflow-hidden\">\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\">\n        @for (tab of tabList(); track tab) {\n            @let selected = tab.id === selectedTabId();\n            @let itemDisabled = tab.disabled || disabled();\n            <li\n                monaTabListItem\n                [id]=\"tab.id + '-tab'\"\n                [active]=\"selected\"\n                [disabled]=\"itemDisabled\"\n                [rounded]=\"rounded()\"\n                role=\"tab\"\n                [tabindex]=\"selected ? 0 : -1\"\n                [attr.aria-selected]=\"selected\"\n                [attr.aria-disabled]=\"itemDisabled\"\n                [attr.aria-controls]=\"tab.id + '-panel'\"\n                [attr.data-selected]=\"selected\"\n                [attr.data-tab-id]=\"tab.id\"\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\n                <div>\n                    @if (tab.titleTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\n                    } @else {\n                        <span>{{ tab.title }}</span>\n                    }\n                </div>\n                @if (tab.closable || closable()) {\n                    <button\n                        monaButton\n                        look=\"link\"\n                        [disabled]=\"itemDisabled\"\n                        (click)=\"onTabClose(tab, $event)\"\n                        class=\"px-0 h-fit ml-1 w-min\"\n                        tabindex=\"-1\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</div>\n@if (scrollsVisible()) {\n    <button\n        monaButton\n        look=\"link\"\n        size=\"small\"\n        [class]=\"scrollButtonClass()\"\n        (click)=\"startScrolling(tabListElement, 'right', 'single')\"\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'right')\"\n        (pointerup)=\"stopScrolling()\"\n        [attr.aria-hidden]=\"true\"\n        tabindex=\"-1\">\n        <svg lucideChevronRight [size]=\"16\"></svg>\n    </button>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { tabListElement: [{ type: i0.ViewChild, args: ["tabListElement", { isSignal: true }] }], tabListItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TabListItemDirective), { ...{ read: ElementRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabId", required: false }] }, { type: i0.Output, args: ["selectedTabIdChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], tabList: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabList", required: true }] }] } });
 
 class TabComponent {
@@ -643,13 +639,13 @@ class TabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "mona-tabs", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepTabContent: { classPropertyName: "keepTabContent", publicName: "keepTabContent", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<mona-tab-list\r\n    [closable]=\"closable()\"\r\n    [disabled]=\"disabled()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [tabList]=\"tabList()\"\r\n    [selectedTabId]=\"selectedTabId()\"\r\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\r\n    (tabClose)=\"tabClose.emit($event)\"\r\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\r\n<div [class]=\"contentClass()\">\r\n    @for (tab of tabList(); track tab) {\r\n        @let selected = tab.id === selectedTabId();\r\n        @let tabLoaded = keepTabContent() || selected;\r\n        @let tabHidden = keepTabContent() && !selected;\r\n        @if (tabLoaded) {\r\n            <div\r\n                class=\"w-full h-full outline-none\"\r\n                [class.hidden]=\"tabHidden\"\r\n                role=\"tabpanel\"\r\n                [id]=\"tab.id + '-panel'\"\r\n                tabindex=\"0\"\r\n                (keydown)=\"handlePanelKeyDown($event)\"\r\n                [attr.aria-hidden]=\"tabHidden\"\r\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\r\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n            </div>\r\n        }\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TabListComponent, selector: "mona-tab-list", inputs: ["closable", "disabled", "rounded", "selectedTabId", "size", "tabList"], outputs: ["selectedTabIdChange", "tabClose", "tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "mona-tabs", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepTabContent: { classPropertyName: "keepTabContent", publicName: "keepTabContent", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TabListComponent, selector: "mona-tab-list", inputs: ["closable", "disabled", "rounded", "selectedTabId", "size", "tabList"], outputs: ["selectedTabIdChange", "tabClose", "tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-tabs", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TabListComponent], host: {
                         "[class]": "baseClass()"
-                    }, template: "<mona-tab-list\r\n    [closable]=\"closable()\"\r\n    [disabled]=\"disabled()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [tabList]=\"tabList()\"\r\n    [selectedTabId]=\"selectedTabId()\"\r\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\r\n    (tabClose)=\"tabClose.emit($event)\"\r\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\r\n<div [class]=\"contentClass()\">\r\n    @for (tab of tabList(); track tab) {\r\n        @let selected = tab.id === selectedTabId();\r\n        @let tabLoaded = keepTabContent() || selected;\r\n        @let tabHidden = keepTabContent() && !selected;\r\n        @if (tabLoaded) {\r\n            <div\r\n                class=\"w-full h-full outline-none\"\r\n                [class.hidden]=\"tabHidden\"\r\n                role=\"tabpanel\"\r\n                [id]=\"tab.id + '-panel'\"\r\n                tabindex=\"0\"\r\n                (keydown)=\"handlePanelKeyDown($event)\"\r\n                [attr.aria-hidden]=\"tabHidden\"\r\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\r\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n            </div>\r\n        }\r\n    }\r\n</div>\r\n" }]
+                    }, template: "<mona-tab-list\n    [closable]=\"closable()\"\n    [disabled]=\"disabled()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [tabList]=\"tabList()\"\n    [selectedTabId]=\"selectedTabId()\"\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\n    (tabClose)=\"tabClose.emit($event)\"\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\n<div [class]=\"contentClass()\">\n    @for (tab of tabList(); track tab) {\n        @let selected = tab.id === selectedTabId();\n        @let tabLoaded = keepTabContent() || selected;\n        @let tabHidden = keepTabContent() && !selected;\n        @if (tabLoaded) {\n            <div\n                class=\"w-full h-full outline-none\"\n                [class.hidden]=\"tabHidden\"\n                role=\"tabpanel\"\n                [id]=\"tab.id + '-panel'\"\n                tabindex=\"0\"\n                (keydown)=\"handlePanelKeyDown($event)\"\n                [attr.aria-hidden]=\"tabHidden\"\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n            </div>\n        }\n    }\n</div>\n" }]
         }], propDecorators: { tabListComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabListComponent), { isSignal: true }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], keepTabContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepTabContent", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-text-area.mjs

@@ -4,28 +4,28 @@ import { twMerge } from 'tailwind-merge';
 import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 
-const textAreaVariants = cva(`
-        bg-input-background
-
-        border border-input-border outline-none
-        selection:bg-primary selection:text-primary-foreground
-        transition-[color,box-shadow,border] ease-in-out duration-300
-
-        shadow-xs
-        px-2 py-1 text-sm
-
-        placeholder:text-muted-foreground
-
-        focus-visible:ring-2 focus-visible:ring-primary/40
-        focus-visible:border-primary
-
-        disabled:pointer-events-none disabled:opacity-50
-        disabled:cursor-not-allowed disabled:select-none
-
-        [&.ng-touched.ng-invalid]:border-error
-        [&.ng-touched.ng-invalid]:ring-error/40
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const textAreaVariants = cva(`
+        bg-input-background
+
+        border border-input-border outline-none
+        selection:bg-primary selection:text-primary-foreground
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        shadow-xs
+        px-2 py-1 text-sm
+
+        placeholder:text-muted-foreground
+
+        focus-visible:ring-2 focus-visible:ring-primary/40
+        focus-visible:border-primary
+
+        disabled:pointer-events-none disabled:opacity-50
+        disabled:cursor-not-allowed disabled:select-none
+
+        [&.ng-touched.ng-invalid]:border-error
+        [&.ng-touched.ng-invalid]:ring-error/40
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
     `, {
     variants: {
         rounded: {

package/fesm2022/nanahoshi-mona-ui-text-box.mjs

@@ -32,31 +32,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const textBoxVariants = cva(`
-        flex items-center w-full min-w-0
-        overflow-hidden
-
-        bg-input-background
-        border border-input-border outline-none
-        selection:bg-primary selection:text-primary-foreground
-
-        transition-[color,box-shadow,border] ease-in-out duration-300
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-
-        focus-within:ring-2 focus-within:ring-primary/40
-        focus-within:border-primary
-
-        [&>input]:w-full [&>input]:h-full
-        [&>input]:bg-transparent
-        [&>input]:border-0 [&>input]:outline-none
-        [&>input]:placeholder:text-muted-foreground
-        [&>input]:px-2
-
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const textBoxVariants = cva(`
+        flex items-center w-full min-w-0
+        overflow-hidden
+
+        bg-input-background text-foreground
+        border border-input-border outline-none
+        selection:bg-primary selection:text-primary-foreground
+
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        focus-within:ring-2 focus-within:ring-primary/40
+        focus-within:border-primary
+
+        [&>input]:w-full [&>input]:h-full
+        [&>input]:bg-transparent
+        [&>input]:border-0 [&>input]:outline-none
+        [&>input]:placeholder:text-muted-foreground
+        [&>input]:px-2
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
     `, {
     variants: {
         rounded: {
@@ -73,33 +73,33 @@ const textBoxVariants = cva(`
         }
     }
 });
-const inputVariants = cva(`
-        bg-input-background
-        px-2
-
-        border border-input-border outline-none
-        selection:bg-primary selection:text-primary-foreground
-
-        transition-[color,box-shadow,border] ease-in-out duration-300
-
-        shadow-xs
-
-        file:text-foreground
-        file:inline-flex file:border-0
-        file:bg-transparent file:text-xs
-        file:font-medium
-
-        placeholder:text-muted-foreground
-
-        disabled:pointer-events-none
-        disabled:cursor-not-allowed
-        disabled:opacity-50
-
-        focus-visible:ring-2 focus-visible:ring-primary/40
-        focus-visible:border-primary
-
-        [&.ng-touched.ng-invalid]:border-error
-        [&.ng-touched.ng-invalid]:ring-error/40
+const inputVariants = cva(`
+        bg-input-background
+        px-2
+
+        border border-input-border outline-none
+        selection:bg-primary selection:text-primary-foreground
+
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        shadow-xs
+
+        file:text-foreground
+        file:inline-flex file:border-0
+        file:bg-transparent file:text-xs
+        file:font-medium
+
+        placeholder:text-muted-foreground
+
+        disabled:pointer-events-none
+        disabled:cursor-not-allowed
+        disabled:opacity-50
+
+        focus-visible:ring-2 focus-visible:ring-primary/40
+        focus-visible:border-primary
+
+        [&.ng-touched.ng-invalid]:border-error
+        [&.ng-touched.ng-invalid]:ring-error/40
     `, {
     variants: {
         rounded: {
@@ -300,7 +300,7 @@ class TextBoxComponent {
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TextBoxComponent, isStandalone: true, selector: "mona-text-box", inputs: { clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidInput() || null", "class": "classes()" } }, queries: [{ propertyName: "prefixTemplateList", predicate: TextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplateList", predicate: TextBoxSuffixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-wrap h-full\">\r\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n<input\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [required]=\"required()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [type]=\"type()\"\r\n    [class]=\"inputClass()\"\r\n    [style]=\"inputStyle()\"\r\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\r\n    [monaAttributeBinder]=\"inputAttributes()\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    (focus)=\"inputFocus.emit($event)\"\r\n    #input />\r\n\r\n@let textBoxValue = value();\r\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\r\n    <button monaButton look=\"link\" size=\"small\" class=\"p-0 mr-2\" aria-label=\"Clear\" (click)=\"onClearClick()\">\r\n        <svg lucideX class=\"opacity-50 size-4 hover:opacity-90\"></svg>\r\n    </button>\r\n}\r\n\r\n@for (suffixTemplate of suffixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-wrap h-full\">\r\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TextBoxComponent, isStandalone: true, selector: "mona-text-box", inputs: { clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidInput() || null", "class": "classes()" } }, queries: [{ propertyName: "prefixTemplateList", predicate: TextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplateList", predicate: TextBoxSuffixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-wrap h-full\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"p-0 mr-2\" aria-label=\"Clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"opacity-50 size-4 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-wrap h-full\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
@@ -310,7 +310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-required]": "required() || null",
                         "[attr.data-invalid]": "invalidInput() || null",
                         "[class]": "classes()"
-                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-wrap h-full\">\r\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n<input\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [required]=\"required()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [type]=\"type()\"\r\n    [class]=\"inputClass()\"\r\n    [style]=\"inputStyle()\"\r\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\r\n    [monaAttributeBinder]=\"inputAttributes()\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    (focus)=\"inputFocus.emit($event)\"\r\n    #input />\r\n\r\n@let textBoxValue = value();\r\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\r\n    <button monaButton look=\"link\" size=\"small\" class=\"p-0 mr-2\" aria-label=\"Clear\" (click)=\"onClearClick()\">\r\n        <svg lucideX class=\"opacity-50 size-4 hover:opacity-90\"></svg>\r\n    </button>\r\n}\r\n\r\n@for (suffixTemplate of suffixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-wrap h-full\">\r\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n" }]
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-wrap h-full\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"p-0 mr-2\" aria-label=\"Clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"opacity-50 size-4 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-wrap h-full\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n" }]
         }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttributes", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TextBoxDirective {

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

@@ -2,7 +2,6 @@ import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, ElementRef, computed, linkedSignal, signal, viewChild, output, input, model, afterNextRender, effect, untracked, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, dropdownPopupThemeVariants, DropdownPopupInputToken, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
@@ -15,14 +14,14 @@ import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const timePickerBaseVariants = cva(`
-        flex items-center w-full
-        border border-border
-        focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
-        [&_mona-text-box]:h-full
-        [&_mona-text-box]:border-none
+const timePickerBaseVariants = cva(`
+        flex items-center w-full
+        border border-border
+        focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        [&_mona-text-box]:h-full
+        [&_mona-text-box]:border-none
     `, {
     variants: {
         focused: {
@@ -410,7 +409,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: false
             }
-        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [required]=\"required()\"\r\n    [value]=\"currentDateString()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\"\r\n    [clearButton]=\"showClearButton()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    (inputBlur)=\"onTimeInputBlur()\">\r\n    <ng-template monaTextBoxSuffixTemplate>\r\n        <button\r\n            monaButton\r\n            look=\"ghost\"\r\n            [iconOnly]=\"true\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"'none'\"\r\n            (click)=\"onTimeInputButtonClick()\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open time picker'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\">\r\n            <i class=\"ri-time-line\"></i>\r\n        </button>\r\n    </ng-template>\r\n</mona-text-box>\r\n\r\n<ng-template #timePopupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        aria-label=\"Time picker\"\r\n        cdkTrapFocus>\r\n        <mona-time-selector\r\n            [value]=\"value()\"\r\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\r\n            [max]=\"max()\"\r\n            [min]=\"min()\"\r\n            [disabled]=\"disabled()\"\r\n            [readonly]=\"readonly()\"\r\n            [hourFormat]=\"hourFormat()\"\r\n            [hourStep]=\"hourStep()\"\r\n            [minuteStep]=\"minuteStep()\"\r\n            [secondStep]=\"secondStep()\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"h-full w-auto aspect-square\"\n            [attr.aria-label]=\"'Open time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-time-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        aria-label=\"Time picker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -421,21 +420,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: false
                         }
-                    ], imports: [
-                        ButtonDirective,
-                        FontAwesomeModule,
-                        TimeSelectorComponent,
-                        TextBoxComponent,
-                        TextBoxSuffixTemplateDirective,
-                        CdkTrapFocus
-                    ], hostDirectives: [DropdownPopupHandlerDirective], host: {
+                    ], imports: [ButtonDirective, TimeSelectorComponent, TextBoxComponent, TextBoxSuffixTemplateDirective, CdkTrapFocus], hostDirectives: [DropdownPopupHandlerDirective], host: {
                         "[attr.tabindex]": "disabled() ? null : -1",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.data-expanded]": "expanded()",
                         "[attr.data-invalid]": "invalidState() || null",
                         "[class]": "baseClass()",
                         "(blur)": "onTimeInputBlur()"
-                    }, template: "<mona-text-box\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [required]=\"required()\"\r\n    [value]=\"currentDateString()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\"\r\n    [clearButton]=\"showClearButton()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    (inputBlur)=\"onTimeInputBlur()\">\r\n    <ng-template monaTextBoxSuffixTemplate>\r\n        <button\r\n            monaButton\r\n            look=\"ghost\"\r\n            [iconOnly]=\"true\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"'none'\"\r\n            (click)=\"onTimeInputButtonClick()\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open time picker'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\">\r\n            <i class=\"ri-time-line\"></i>\r\n        </button>\r\n    </ng-template>\r\n</mona-text-box>\r\n\r\n<ng-template #timePopupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        aria-label=\"Time picker\"\r\n        cdkTrapFocus>\r\n        <mona-time-selector\r\n            [value]=\"value()\"\r\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\r\n            [max]=\"max()\"\r\n            [min]=\"min()\"\r\n            [disabled]=\"disabled()\"\r\n            [readonly]=\"readonly()\"\r\n            [hourFormat]=\"hourFormat()\"\r\n            [hourStep]=\"hourStep()\"\r\n            [minuteStep]=\"minuteStep()\"\r\n            [secondStep]=\"secondStep()\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\r\n    </div>\r\n</ng-template>\r\n" }]
+                    }, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"h-full w-auto aspect-square\"\n            [attr.aria-label]=\"'Open time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-time-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        aria-label=\"Time picker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { timePopupTemplateRef: [{ type: i0.ViewChild, args: ["timePopupTemplate", { isSignal: true }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*