@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -65,11 +65,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const listViewBaseVariants = cva(`
-        flex flex-col h-full
-        outline-none overflow-hidden
-        bg-background text-foreground
-        border border-border
+const listViewBaseVariants = cva(`
+        flex flex-col h-full
+        outline-none overflow-hidden
+        bg-background text-foreground
+        border border-border
     `, {
     variants: {
         rounded: {
@@ -287,7 +287,7 @@ class ListViewComponent {
                 },
                 deps: [[new Optional(), new SkipSelf(), ListService]]
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListViewFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListViewGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListViewHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListViewItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListViewNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list\r\n    [ariaLabel]=\"ariaLabel()\"\r\n    [data]=\"viewItems()\"\r\n    [height]=\"listHeight()\"\r\n    [width]=\"listWidth()\"\r\n    [maxHeight]=\"listMaxHeight()\"\r\n    [maxWidth]=\"listMaxWidth()\"\r\n    [listItemClass]=\"listItemClass()\"\r\n    [listItemStyle]=\"listItemStyle()\"\r\n    [listClass]=\"listClass()\"\r\n    [listStyle]=\"listStyle()\">\r\n    @if (footerTemplate()) {\r\n        <ng-template monaListFooterTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (groupHeaderTemplate()) {\r\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (headerTemplate()) {\r\n        <ng-template monaListHeaderTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (itemTemplate()) {\r\n        <ng-template monaListItemTemplate let-dataItem>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (noDataTemplate()) {\r\n        <ng-template monaListNoDataTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-list>\r\n\r\n@let pageableOptions = listService.pageableOptions();\r\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\r\n    @let pageState = listService.pageState();\r\n    <div class=\"mona-list-view-pager\">\r\n        <mona-pager\r\n            [firstLast]=\"pageableOptions.firstLast\"\r\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\r\n            [visiblePages]=\"pageableOptions.visiblePages\"\r\n            [total]=\"itemCount()\"\r\n            [skip]=\"pageState.skip\"\r\n            [responsive]=\"false\"\r\n            [rounded]=\"rounded()\"\r\n            [pageSize]=\"pageState.take\"\r\n            [previousNext]=\"pageableOptions.previousNext\"\r\n            [showInfo]=\"pageableOptions.showInfo\"\r\n            (pageChange)=\"onPageChange($event)\"\r\n            (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\r\n    </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListViewFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListViewGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListViewHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListViewItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListViewNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\n    @if (footerTemplate()) {\n        <ng-template monaListFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (groupHeaderTemplate()) {\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <div class=\"mona-list-view-pager\">\n        <mona-pager\n            [firstLast]=\"pageableOptions.firstLast\"\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n            [visiblePages]=\"pageableOptions.visiblePages\"\n            [total]=\"itemCount()\"\n            [skip]=\"pageState.skip\"\n            [responsive]=\"false\"\n            [rounded]=\"rounded()\"\n            [pageSize]=\"pageState.take\"\n            [previousNext]=\"pageableOptions.previousNext\"\n            [showInfo]=\"pageableOptions.showInfo\"\n            (pageChange)=\"onPageChange($event)\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -311,7 +311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], host: {
                         "[class]": "baseClasses()",
                         "[attr.tabindex]": "-1"
-                    }, template: "<mona-list\r\n    [ariaLabel]=\"ariaLabel()\"\r\n    [data]=\"viewItems()\"\r\n    [height]=\"listHeight()\"\r\n    [width]=\"listWidth()\"\r\n    [maxHeight]=\"listMaxHeight()\"\r\n    [maxWidth]=\"listMaxWidth()\"\r\n    [listItemClass]=\"listItemClass()\"\r\n    [listItemStyle]=\"listItemStyle()\"\r\n    [listClass]=\"listClass()\"\r\n    [listStyle]=\"listStyle()\">\r\n    @if (footerTemplate()) {\r\n        <ng-template monaListFooterTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (groupHeaderTemplate()) {\r\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (headerTemplate()) {\r\n        <ng-template monaListHeaderTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (itemTemplate()) {\r\n        <ng-template monaListItemTemplate let-dataItem>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (noDataTemplate()) {\r\n        <ng-template monaListNoDataTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-list>\r\n\r\n@let pageableOptions = listService.pageableOptions();\r\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\r\n    @let pageState = listService.pageState();\r\n    <div class=\"mona-list-view-pager\">\r\n        <mona-pager\r\n            [firstLast]=\"pageableOptions.firstLast\"\r\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\r\n            [visiblePages]=\"pageableOptions.visiblePages\"\r\n            [total]=\"itemCount()\"\r\n            [skip]=\"pageState.skip\"\r\n            [responsive]=\"false\"\r\n            [rounded]=\"rounded()\"\r\n            [pageSize]=\"pageState.take\"\r\n            [previousNext]=\"pageableOptions.previousNext\"\r\n            [showInfo]=\"pageableOptions.showInfo\"\r\n            (pageChange)=\"onPageChange($event)\"\r\n            (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\r\n    </div>\r\n}\r\n" }]
+                    }, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\n    @if (footerTemplate()) {\n        <ng-template monaListFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (groupHeaderTemplate()) {\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        </ng-template>\n    }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <div class=\"mona-list-view-pager\">\n        <mona-pager\n            [firstLast]=\"pageableOptions.firstLast\"\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n            [visiblePages]=\"pageableOptions.visiblePages\"\n            [total]=\"itemCount()\"\n            [skip]=\"pageState.skip\"\n            [responsive]=\"false\"\n            [rounded]=\"rounded()\"\n            [pageSize]=\"pageState.take\"\n            [previousNext]=\"pageableOptions.previousNext\"\n            [showInfo]=\"pageableOptions.showInfo\"\n            (pageChange)=\"onPageChange($event)\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], listClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listClass", required: false }] }], listItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemClass", required: false }] }], listItemStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemStyle", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], scrollBottom: [{ type: i0.Output, args: ["scrollBottom"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 class ListViewGroupableDirective {

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Directive, contentChildren, input, contentChild, TemplateRef, computed, ChangeDetectionStrategy, Component, effect, forwardRef, inject, DestroyRef, DOCUMENT, ElementRef, signal, viewChildren, output, untracked, afterNextRender } from '@angular/core';
-import { PopupMenuToken, preparePopupMenuItems, PopupMenuItemType, PopupMenuTemplateType, ensurePopupComponentTypes, PopupMenuOrigin, ensurePopupTemplateTypes, PopupMenuTemplateOrigin, PopupMenuCheckboxItemComponent, PopupMenuGroupComponent, PopupMenuItemComponent, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuRadioItemToken, PopupMenuSeparatorComponent, PopupMenuGroupTemplateDirective, PopupMenuGroupTemplateToken, PopupMenuIconTemplateDirective, PopupMenuIconTemplateToken, PopupMenuShortcutTemplateDirective, PopupMenuShortcutTemplateToken, PopupMenuTextTemplateDirective, PopupMenuTextTemplateToken, PopupMenuComponent } from '@nanahoshi/mona-ui/popup-menu';
 import { any, zip, rotate } from '@mirei/ts-collections';
+import { PopupMenuToken, preparePopupMenuItems, PopupMenuItemType, PopupMenuTemplateType, ensurePopupComponentTypes, PopupMenuOrigin, ensurePopupTemplateTypes, PopupMenuTemplateOrigin, PopupMenuCheckboxItemComponent, PopupMenuGroupComponent, PopupMenuItemComponent, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuRadioItemToken, PopupMenuSeparatorComponent, PopupMenuGroupTemplateDirective, PopupMenuGroupTemplateToken, PopupMenuIconTemplateDirective, PopupMenuIconTemplateToken, PopupMenuShortcutTemplateDirective, PopupMenuShortcutTemplateToken, PopupMenuTextTemplateDirective, PopupMenuTextTemplateToken, PopupMenuComponent } from '@nanahoshi/mona-ui/popup-menu';
 import { v4 } from 'uuid';
 import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -392,10 +392,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const contextMenuContentVariants = cva(`
-        w-full gap-4 overflow-hidden
-        bg-background text-foreground
-        shadow-lg border border-border
+const contextMenuContentVariants = cva(`
+        w-full gap-4 overflow-hidden
+        bg-background text-foreground
+        shadow-lg border border-border
     `, {
     variants: {
         rounded: {
@@ -425,23 +425,23 @@ const menuItemIconVariants = cva(`absolute left-2 flex h-3.5 w-3.5 items-center
 const menuItemLinkVariants = cva(`flex h-3.5 w-3.5 items-center justify-center`);
 const menuItemShortcutVariants = cva(`flex items-center justify-end flex-1 opacity-60 text-xs`);
 const menuItemTextVariants = cva(`flex flex-1 items-center justify-start gap-2`);
-const menuItemVariants = cva(`
-        relative flex cursor-default select-none items-center px-2 py-1.5 gap-4
-        outline-none
-
-        hover:bg-hover
-        hover:text-hover-foreground
-
-        focus-within:bg-accent
-        focus-within:text-accent-foreground
-        focus-within:outline-none
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-
-        data-[focused]:bg-accent
-        data-[focused]:text-accent-foreground
+const menuItemVariants = cva(`
+        relative flex cursor-default select-none items-center px-2 py-1.5 gap-4
+        outline-none
+
+        hover:bg-hover
+        hover:text-hover-foreground
+
+        focus-within:bg-accent
+        focus-within:text-accent-foreground
+        focus-within:outline-none
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        data-[focused]:bg-accent
+        data-[focused]:text-accent-foreground
     `, {
     variants: {
         size: {
@@ -451,15 +451,15 @@ const menuItemVariants = cva(`
         }
     }
 });
-const menubarBaseVariants = cva(`
-        flex items-center justify-center
-        gap-1 overflow-hidden
-        bg-background text-foreground
-        shadow-sm border border-border
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+const menubarBaseVariants = cva(`
+        flex items-center justify-center
+        gap-1 overflow-hidden
+        bg-background text-foreground
+        shadow-sm border border-border
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
     `, {
     variants: {
         rounded: {
@@ -475,21 +475,21 @@ const menubarBaseVariants = cva(`
         }
     }
 });
-const menubarListItemVariants = cva(`
-        h-full flex items-center justify-center
-        px-2 py-1.5
-        cursor-pointer outline-none
-
-        hover:bg-hover
-        hover:text-hover-foreground
-        focus-within:bg-accent
-        focus-within:text-accent-foreground
-        focus-within:outline-none
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-        data-[active='true']:bg-accent
-        data-[active='true']:text-accent-foreground
+const menubarListItemVariants = cva(`
+        h-full flex items-center justify-center
+        px-2 py-1.5
+        cursor-pointer outline-none
+
+        hover:bg-hover
+        hover:text-hover-foreground
+        focus-within:bg-accent
+        focus-within:text-accent-foreground
+        focus-within:outline-none
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+        data-[active='true']:bg-accent
+        data-[active='true']:text-accent-foreground
     `, {
     variants: {
         rounded: {
@@ -500,10 +500,10 @@ const menubarListItemVariants = cva(`
         }
     }
 });
-const menubarListVariants = cva(`
-        w-full h-full list-none
-        flex items-center select-none
-        p-1
+const menubarListVariants = cva(`
+        w-full h-full list-none
+        flex items-center select-none
+        p-1
     `);
 
 const contextMenuContentThemeVariants = (theme) => {

package/fesm2022/nanahoshi-mona-ui-multi-select.mjs

@@ -2,7 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, signal, Injectable, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, viewChild, input, output, model, afterNextRender, effect, untracked, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { none } from '@mirei/ts-collections';
 import { ChipComponent } from '@nanahoshi/mona-ui/chip';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
@@ -10,7 +10,6 @@ import { createElementControlId, restoreOverlayScroll, rxFromResize } from '@nan
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
 import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { none } from '@mirei/ts-collections';
 import { filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -40,13 +39,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const multiSelectBaseVariants = cva(`
-        flex items-center justify-between
-        border border-input-border outline-none
-        bg-background shadow-xs
-        cursor-pointer
-        focus-within:ring-1 focus-within:ring-primary/40
-        transition-[color,box-shadow,border] ease-in-out duration-300
+const multiSelectBaseVariants = cva(`
+        flex items-center justify-between
+        border border-input-border outline-none
+        bg-background text-foreground shadow-xs
+        cursor-pointer
+        focus-within:ring-1 focus-within:ring-primary/40
+        transition-[color,box-shadow,border] ease-in-out duration-300
     `, {
     variants: {
         disabled: {
@@ -73,8 +72,8 @@ const multiSelectBaseVariants = cva(`
         }
     }
 });
-const multiSelectItemContainerVariants = cva(`
-        flex flex-1 items-center gap-1 flex-wrap p-1
+const multiSelectItemContainerVariants = cva(`
+        flex flex-1 items-center gap-1 flex-wrap p-1
     `, {
     variants: {
         rounded: {
@@ -536,7 +535,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: MultiSelectTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<div [class]=\"itemContainerClass()\">\r\n    @for (pair of valueTextMap(); track pair.key) {\r\n        <mona-chip\r\n            look=\"default\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\r\n            @if (tagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"tagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\r\n            } @else {\r\n                {{ pair.value }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n\r\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\r\n        <mona-chip\r\n            look=\"outline\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemGroupRemove($event)\">\r\n            @let remainingCount = selectedDataItems().length - tagCount();\r\n            @if (summaryTagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\r\n            } @else {\r\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\r\n                + {{ remainingCount }} {{ itemLabel }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n</div>\r\n\r\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [class]=\"indicatorClass()\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: MultiSelectTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\n                + {{ remainingCount }} {{ itemLabel }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -557,7 +556,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], imports: [
                         ChipComponent,
                         NgTemplateOutlet,
-                        FontAwesomeModule,
                         ListComponent,
                         ListGroupHeaderTemplateDirective,
                         ListItemTemplateDirective,
@@ -583,7 +581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-invalid]": "invalidState() || null",
                         "[class]": "baseClass()",
                         "(blur)": "onBlur()"
-                    }, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<div [class]=\"itemContainerClass()\">\r\n    @for (pair of valueTextMap(); track pair.key) {\r\n        <mona-chip\r\n            look=\"default\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\r\n            @if (tagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"tagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\r\n            } @else {\r\n                {{ pair.value }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n\r\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\r\n        <mona-chip\r\n            look=\"outline\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemGroupRemove($event)\">\r\n            @let remainingCount = selectedDataItems().length - tagCount();\r\n            @if (summaryTagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\r\n            } @else {\r\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\r\n                + {{ remainingCount }} {{ itemLabel }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n</div>\r\n\r\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [class]=\"indicatorClass()\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\n                + {{ remainingCount }} {{ itemLabel }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MultiSelectTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], checkboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxes", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });

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

@@ -35,31 +35,31 @@ const notificationContainerBaseVariants = cva(`p-2 z-40000`, {
 //-----------------------
 // Notification Component
 //-----------------------
-const notificationActionVariants = cva(`
-        absolute top-0 right-0
-        flex items-start h-auto
-        [&>svg.lucide]:cursor-pointer
-        [&>svg.lucide]:-mt-1
+const notificationActionVariants = cva(`
+        absolute top-0 right-0
+        flex items-start h-auto
+        [&>svg.lucide]:cursor-pointer
+        [&>svg.lucide]:-mt-1
     `);
-const notificationBaseVariants = cva(`
-        w-fit h-fit relative
-        overflow-hidden flex flex-col
-        mb-2 bg-background shadow-md
-        border border-border
+const notificationBaseVariants = cva(`
+        w-fit h-fit relative
+        overflow-hidden flex flex-col
+        mb-2 bg-background text-foreground shadow-md
+        border border-border
     `);
-const notificationBodyVariants = cva(`
-        flex flex-1 p-2 ps-0 pe-8
+const notificationBodyVariants = cva(`
+        flex flex-1 p-2 ps-0 pe-8
     `);
-const notificationContentVariants = cva(`
-        flex flex-1 w-full items-center
+const notificationContentVariants = cva(`
+        flex flex-1 w-full items-center
     `);
-const notificationHeaderVariants = cva(`
-        w-full flex flex-row items-center
-        flex-1 text-sm font-medium
-        select-none
+const notificationHeaderVariants = cva(`
+        w-full flex flex-row items-center
+        flex-1 text-sm font-medium
+        select-none
     `);
-const notificationIconVariants = cva(`
-        flex items-center justify-center px-4
+const notificationIconVariants = cva(`
+        flex items-center justify-center px-4
     `, {
     variants: {
         type: {
@@ -70,8 +70,8 @@ const notificationIconVariants = cva(`
         }
     }
 });
-const notificationTextVariants = cva(`
-        text-sm text-foreground
+const notificationTextVariants = cva(`
+        text-sm text-foreground
     `);
 
 const notificationContainerBaseThemeVariants = (theme) => {
@@ -270,7 +270,7 @@ class NotificationComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\r\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\r\n\r\n<div\r\n    [class]=\"baseClass()\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [attr.role]=\"role()\"\r\n    [attr.aria-live]=\"ariaLive()\">\r\n    @if (contentTemplate() || contentComponent()) {\r\n        @if (contentTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\r\n        } @else if (contentComponent()) {\r\n            <ng-container #contentHost></ng-container>\r\n        }\r\n    } @else {\r\n        <div [class]=\"bodyClass()\">\r\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\r\n                @switch (type()) {\r\n                    @case (\"error\") {\r\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"info\") {\r\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"success\") {\r\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"warning\") {\r\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\r\n                    }\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-col flex-1\">\r\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\r\n                <div [class]=\"contentClass()\">\r\n                    @if (isStringContent()) {\r\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\r\n                            data().options.content\r\n                        }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (data().options.progressBar) {\r\n            <div class=\"w-full h-1\">\r\n                <mona-progress-bar\r\n                    [value]=\"progressValue()\"\r\n                    [color]=\"progressColor()\"\r\n                    [labelVisible]=\"false\"\r\n                    [animate]=\"false\"\r\n                    rounded=\"none\"\r\n                    class=\"h-full\"></mona-progress-bar>\r\n            </div>\r\n        }\r\n    }\r\n    @if (data().options.closable) {\r\n        <div [class]=\"actionClass()\">\r\n            <button\r\n                monaButton\r\n                size=\"small\"\r\n                look=\"link\"\r\n                rounded=\"none\"\r\n                [iconOnly]=\"true\"\r\n                [title]=\"data().options.closeTitle || 'Close'\"\r\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\r\n                (click)=\"close()\">\r\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["aria-label", "aria-valuetext", "animate", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { 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: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"data().options.closeTitle || 'Close'\"\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["aria-label", "aria-valuetext", "animate", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { 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: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
@@ -288,7 +288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "(pointerleave)": "onInteractionEnd()",
                         "(focusin)": "onInteractionStart()",
                         "(focusout)": "onInteractionEnd()"
-                    }, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\r\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\r\n\r\n<div\r\n    [class]=\"baseClass()\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [attr.role]=\"role()\"\r\n    [attr.aria-live]=\"ariaLive()\">\r\n    @if (contentTemplate() || contentComponent()) {\r\n        @if (contentTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\r\n        } @else if (contentComponent()) {\r\n            <ng-container #contentHost></ng-container>\r\n        }\r\n    } @else {\r\n        <div [class]=\"bodyClass()\">\r\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\r\n                @switch (type()) {\r\n                    @case (\"error\") {\r\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"info\") {\r\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"success\") {\r\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"warning\") {\r\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\r\n                    }\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-col flex-1\">\r\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\r\n                <div [class]=\"contentClass()\">\r\n                    @if (isStringContent()) {\r\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\r\n                            data().options.content\r\n                        }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (data().options.progressBar) {\r\n            <div class=\"w-full h-1\">\r\n                <mona-progress-bar\r\n                    [value]=\"progressValue()\"\r\n                    [color]=\"progressColor()\"\r\n                    [labelVisible]=\"false\"\r\n                    [animate]=\"false\"\r\n                    rounded=\"none\"\r\n                    class=\"h-full\"></mona-progress-bar>\r\n            </div>\r\n        }\r\n    }\r\n    @if (data().options.closable) {\r\n        <div [class]=\"actionClass()\">\r\n            <button\r\n                monaButton\r\n                size=\"small\"\r\n                look=\"link\"\r\n                rounded=\"none\"\r\n                [iconOnly]=\"true\"\r\n                [title]=\"data().options.closeTitle || 'Close'\"\r\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\r\n                (click)=\"close()\">\r\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"] }]
+                    }, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"data().options.closeTitle || 'Close'\"\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ["contentHost", { ...{ read: ViewContainerRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 
 class NotificationContainerComponent {