@acorex/components 22.2.14 → 22.2.15

package/fesm2022/acorex-components-emojipicker.mjs

@@ -383,10 +383,10 @@ class AXEmojiPickerComponent {
         const next = [emoji, ...this.recentItems().filter((item) => item.code !== emoji.code)].slice(0, RECENT_EMOJI_LIMIT);
         this.recentChanged.emit(next);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXEmojiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXEmojiPickerComponent, isStandalone: true, selector: "ax-emoji-picker", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showRecent: { classPropertyName: "showRecent", publicName: "showRecent", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, excludeCategories: { classPropertyName: "excludeCategories", publicName: "excludeCategories", isSignal: true, isRequired: false, transformFunction: null }, excludeCodes: { classPropertyName: "excludeCodes", publicName: "excludeCodes", isSignal: true, isRequired: false, transformFunction: null }, excludeUnicode: { classPropertyName: "excludeUnicode", publicName: "excludeUnicode", isSignal: true, isRequired: false, transformFunction: null }, recentItems: { classPropertyName: "recentItems", publicName: "recentItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", recentChanged: "recentChanged" }, host: { properties: { "class.ax-emoji-picker-native": "appearance() === \"native\"", "style.--ax-comp-emoji-picker-columns": "effectiveColumns()", "style.--ax-comp-emoji-picker-available-width": "availableWidthCss()" }, classAttribute: "ax-emoji-picker" }, ngImport: i0, template: "<div class=\"ax-emoji-picker-layout\">\n  <ax-tabs\n    class=\"ax-emoji-picker-categories\"\n    [look]=\"'pills'\"\n    location=\"bottom\"\n    [attr.aria-label]=\"'Emoji categories'\"\n    (onActiveTabChanged)=\"onCategoryTabChanged($event)\"\n    axGesture\n    direction=\"horizontal\"\n    (swipe)=\"onCategorySwipe($event)\"\n  >\n    @for (category of categories(); track category.id) {\n      <ax-tab-item\n        [text]=\"category.iconUnicode\"\n        [key]=\"category.id\"\n        [active]=\"isCategoryActive(category.id)\"\n        [class.ax-emoji-picker-tab-recent]=\"isRecentCategory(category.id)\"\n        [attr.aria-label]=\"category.label\"\n        [title]=\"category.label\"\n      ></ax-tab-item>\n    }\n  </ax-tabs>\n\n  <div class=\"ax-emoji-picker-search-container\">\n    @if (showSearch()) {\n      <div class=\"ax-emoji-picker-search\">\n        <ax-search-box\n          [look]=\"'fill'\"\n          [value]=\"searchQuery()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [delayTime]=\"250\"\n          (onValueChanged)=\"onSearchChanged($event)\"\n        ></ax-search-box>\n      </div>\n    }\n\n    @if (isEmpty()) {\n      <div class=\"ax-emoji-picker-empty\">\n        @if (isSearching()) {\n          <span>No emojis found</span>\n        } @else if (activeCategoryId() === 'recent') {\n          <span>No recent emojis yet</span>\n        } @else {\n          <span>No emojis in this category</span>\n        }\n      </div>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"ax-emoji-picker-grid\"\n        [itemSize]=\"rowHeight()\"\n        [minBufferPx]=\"rowHeight() * 4\"\n        [maxBufferPx]=\"rowHeight() * 8\"\n      >\n        <div class=\"ax-emoji-picker-row\" *cdkVirtualFor=\"let row of emojiRows(); trackBy: trackRow\">\n          @for (emoji of row; track emoji.code) {\n            <button\n              type=\"button\"\n              class=\"ax-emoji-picker-item\"\n              (click)=\"selectEmoji(emoji)\"\n              [attr.aria-label]=\"emoji.name\"\n              [title]=\"emoji.name\"\n            >\n              <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" [appearance]=\"appearance()\"></ax-emoji>\n            </button>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-emoji-picker{--ax-comp-emoji-picker-max-width: 22rem;--ax-comp-emoji-picker-cell-size: 2.25rem;--ax-comp-emoji-picker-cell-gap: .125rem;--ax-comp-emoji-picker-inline-padding: 1.5rem;--ax-comp-emoji-picker-height: 24rem;--ax-comp-emoji-picker-radius: 1.5rem;--ax-comp-emoji-picker-padding: .75rem;--ax-comp-emoji-picker-columns: 8;--ax-comp-emoji-picker-category-font-family: \"Noto Color Emoji\", \"Twemoji Country Flags\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Twemoji Mozilla\", emoji, sans-serif;--ax-comp-emoji-picker-border: rgba(var(--ax-sys-color-on-surface), .08);--ax-comp-emoji-picker-surface: rgb(var(--ax-sys-color-lightest-surface));--ax-comp-emoji-picker-shadow: 0 1px 2px rgba(var(--ax-sys-color-on-surface), .04);--ax-comp-emoji-picker-text: rgba(var(--ax-sys-color-on-surface), .92);--ax-comp-emoji-picker-muted: rgba(var(--ax-sys-color-on-surface), .52);--ax-comp-emoji-picker-hover: rgba(var(--ax-sys-color-on-surface), .06);--ax-comp-emoji-picker-active: rgba(var(--ax-sys-color-on-surface), .08);--ax-comp-emoji-picker-placeholder: rgba(var(--ax-sys-color-on-surface), .45);display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;box-sizing:border-box;width:100%;max-width:min(100%,var(--ax-comp-emoji-picker-max-width),var(--ax-comp-emoji-picker-available-width, 100%));height:var(--ax-comp-emoji-picker-height);min-height:16rem;border-radius:var(--ax-comp-emoji-picker-radius);border:1px solid var(--ax-comp-emoji-picker-border);background:var(--ax-comp-emoji-picker-surface);box-shadow:var(--ax-comp-emoji-picker-shadow);color:var(--ax-comp-emoji-picker-text)}ax-emoji-picker .ax-emoji-picker-layout{display:flex;width:100%;height:100%;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2.5);background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-emoji-picker .ax-emoji-picker-search-container{display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3);padding-top:0}ax-emoji-picker .ax-emoji-picker-categories{width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-shrink:0;gap:calc(var(--spacing, .25rem) * .5);overflow-x:auto;border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);border-bottom-color:var(--ax-comp-emoji-picker-border)}ax-emoji-picker .ax-emoji-picker-categories ax-tab-item{display:flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);min-width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;justify-content:center;border-radius:.625rem;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: 1;line-height:1;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);font-family:var(--ax-comp-emoji-picker-category-font-family);font-variant-emoji:emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-emoji-picker .ax-emoji-picker-categories ax-tab-item .ax-tab-item-text{padding:calc(var(--spacing, .25rem) * 0)}ax-emoji-picker .ax-emoji-picker-categories ax-tab-item.ax-state-active{background:var(--ax-comp-emoji-picker-active);box-shadow:none}@media(hover:hover){ax-emoji-picker .ax-emoji-picker-categories ax-tab-item:hover{background:var(--ax-comp-emoji-picker-hover)}}ax-emoji-picker .ax-emoji-picker-categories ax-tab-item.ax-emoji-picker-tab-recent .ax-tab-item-text{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));opacity:65%}ax-emoji-picker.ax-emoji-picker-native{--ax-comp-emoji-picker-category-font-family: \"Twemoji Country Flags\", \"Segoe UI Emoji\", \"Apple Color Emoji\", \"Twemoji Mozilla\", emoji, sans-serif}ax-emoji-picker .ax-emoji-picker-search{flex-shrink:0}ax-emoji-picker .ax-emoji-picker-search .ax-editor-container{min-height:calc(var(--spacing, .25rem) * 9);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;padding-inline:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:var(--ax-comp-emoji-picker-hover);transition:background-color .15s ease}ax-emoji-picker .ax-emoji-picker-search .ax-editor-container:after{display:none}ax-emoji-picker .ax-emoji-picker-search .ax-editor-container:hover:not(.ax-state-disabled,.ax-state-readonly,.ax-state-error),ax-emoji-picker .ax-emoji-picker-search .ax-editor-container:focus-within:not(.ax-state-disabled,.ax-state-readonly,.ax-state-error){border-style:var(--tw-border-style);border-width:0px;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none;background:var(--ax-comp-emoji-picker-active)}ax-emoji-picker .ax-emoji-picker-search .ax-input,ax-emoji-picker .ax-emoji-picker-search input{min-height:calc(var(--spacing, .25rem) * 9);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding-block:calc(var(--spacing, .25rem) * 1.5);font-size:.8125rem;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none}ax-emoji-picker .ax-emoji-picker-search .ax-input::placeholder,ax-emoji-picker .ax-emoji-picker-search input::placeholder{color:var(--ax-comp-emoji-picker-placeholder)}ax-emoji-picker .ax-emoji-picker-grid{display:block;min-height:0;min-width:0;width:100%;flex:1 1 auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}ax-emoji-picker .ax-emoji-picker-grid .cdk-virtual-scroll-content-wrapper{width:100%;min-width:0}ax-emoji-picker .ax-emoji-picker-row{display:grid;width:100%;min-width:0;padding-block:.125rem;gap:var(--ax-comp-emoji-picker-cell-gap);grid-template-columns:repeat(var(--ax-comp-emoji-picker-columns),minmax(0,1fr))}ax-emoji-picker .ax-emoji-picker-item{display:flex;width:100%;height:var(--ax-comp-emoji-picker-cell-size);cursor:pointer;align-items:center;justify-content:center;border:0;border-radius:.5rem;background:transparent;padding:0;transition:background-color .12s ease,transform .12s ease}@media(hover:hover){ax-emoji-picker .ax-emoji-picker-item:hover{scale:1.06;background:var(--ax-comp-emoji-picker-hover)}}ax-emoji-picker .ax-emoji-picker-item:active{scale:.96}ax-emoji-picker .ax-emoji-picker-empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;font-size:.8125rem;color:var(--ax-comp-emoji-picker-muted)}@media(max-width:400px){ax-emoji-picker{--ax-comp-emoji-picker-cell-size: 2rem;--ax-comp-emoji-picker-height: 22rem}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-leading: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXEmojiComponent, selector: "ax-emoji", inputs: ["emoji", "appearance", "size"] }, { kind: "component", type: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: AXGestureDirective, selector: "[axGesture]", inputs: ["options", "direction", "enablePinch", "enableRotate", "disabled", "tapInterval"], outputs: ["tap", "doubletap", "press", "pan", "panstart", "panmove", "panend", "swipe", "pinch", "rotate"], exportAs: ["axGesture"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXEmojiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXEmojiPickerComponent, isStandalone: true, selector: "ax-emoji-picker", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showRecent: { classPropertyName: "showRecent", publicName: "showRecent", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, excludeCategories: { classPropertyName: "excludeCategories", publicName: "excludeCategories", isSignal: true, isRequired: false, transformFunction: null }, excludeCodes: { classPropertyName: "excludeCodes", publicName: "excludeCodes", isSignal: true, isRequired: false, transformFunction: null }, excludeUnicode: { classPropertyName: "excludeUnicode", publicName: "excludeUnicode", isSignal: true, isRequired: false, transformFunction: null }, recentItems: { classPropertyName: "recentItems", publicName: "recentItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", recentChanged: "recentChanged" }, host: { properties: { "class.ax-emoji-picker-native": "appearance() === \"native\"", "style.--ax-comp-emoji-picker-columns": "effectiveColumns()", "style.--ax-comp-emoji-picker-available-width": "availableWidthCss()" }, classAttribute: "ax-emoji-picker" }, ngImport: i0, template: "<div class=\"ax-emoji-picker-layout\">\n  <ax-tabs\n    class=\"ax-emoji-picker-categories\"\n    [look]=\"'pills'\"\n    location=\"bottom\"\n    [attr.aria-label]=\"'Emoji categories'\"\n    (onActiveTabChanged)=\"onCategoryTabChanged($event)\"\n    axGesture\n    direction=\"horizontal\"\n    (swipe)=\"onCategorySwipe($event)\"\n  >\n    @for (category of categories(); track category.id) {\n      <ax-tab-item\n        [text]=\"category.iconUnicode\"\n        [key]=\"category.id\"\n        [active]=\"isCategoryActive(category.id)\"\n        [class.ax-emoji-picker-tab-recent]=\"isRecentCategory(category.id)\"\n        [attr.aria-label]=\"category.label\"\n        [title]=\"category.label\"\n      ></ax-tab-item>\n    }\n  </ax-tabs>\n\n  <div class=\"ax-emoji-picker-search-container\">\n    @if (showSearch()) {\n      <div class=\"ax-emoji-picker-search\">\n        <ax-search-box\n          [look]=\"'fill'\"\n          [value]=\"searchQuery()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [delayTime]=\"250\"\n          (onValueChanged)=\"onSearchChanged($event)\"\n        ></ax-search-box>\n      </div>\n    }\n\n    @if (isEmpty()) {\n      <div class=\"ax-emoji-picker-empty\">\n        @if (isSearching()) {\n          <span>No emojis found</span>\n        } @else if (activeCategoryId() === 'recent') {\n          <span>No recent emojis yet</span>\n        } @else {\n          <span>No emojis in this category</span>\n        }\n      </div>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"ax-emoji-picker-grid\"\n        [itemSize]=\"rowHeight()\"\n        [minBufferPx]=\"rowHeight() * 4\"\n        [maxBufferPx]=\"rowHeight() * 8\"\n      >\n        <div class=\"ax-emoji-picker-row\" *cdkVirtualFor=\"let row of emojiRows(); trackBy: trackRow\">\n          @for (emoji of row; track emoji.code) {\n            <button\n              type=\"button\"\n              class=\"ax-emoji-picker-item\"\n              (click)=\"selectEmoji(emoji)\"\n              [attr.aria-label]=\"emoji.name\"\n              [title]=\"emoji.name\"\n            >\n              <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" [appearance]=\"appearance()\"></ax-emoji>\n            </button>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-emoji-picker{--ax-comp-emoji-picker-max-width: 22rem;--ax-comp-emoji-picker-cell-size: 2.25rem;--ax-comp-emoji-picker-cell-gap: .125rem;--ax-comp-emoji-picker-inline-padding: 1.5rem;--ax-comp-emoji-picker-height: 24rem;--ax-comp-emoji-picker-radius: 1.5rem;--ax-comp-emoji-picker-padding: .75rem;--ax-comp-emoji-picker-columns: 8;--ax-comp-emoji-picker-category-font-family: \"Noto Color Emoji\", \"Twemoji Country Flags\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Twemoji Mozilla\", emoji, sans-serif;--ax-comp-emoji-picker-border: rgba(var(--ax-sys-color-on-surface), .08);--ax-comp-emoji-picker-surface: rgb(var(--ax-sys-color-lightest-surface));--ax-comp-emoji-picker-shadow: 0 1px 2px rgba(var(--ax-sys-color-on-surface), .04);--ax-comp-emoji-picker-text: rgba(var(--ax-sys-color-on-surface), .92);--ax-comp-emoji-picker-muted: rgba(var(--ax-sys-color-on-surface), .52);--ax-comp-emoji-picker-hover: rgba(var(--ax-sys-color-on-surface), .06);--ax-comp-emoji-picker-active: rgba(var(--ax-sys-color-on-surface), .08);--ax-comp-emoji-picker-placeholder: rgba(var(--ax-sys-color-on-surface), .45);display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;box-sizing:border-box;width:100%;max-width:min(100%,var(--ax-comp-emoji-picker-max-width),var(--ax-comp-emoji-picker-available-width, 100%));height:var(--ax-comp-emoji-picker-height);min-height:16rem;border-radius:var(--ax-comp-emoji-picker-radius);border:1px solid var(--ax-comp-emoji-picker-border);background:var(--ax-comp-emoji-picker-surface);box-shadow:var(--ax-comp-emoji-picker-shadow);color:var(--ax-comp-emoji-picker-text)}ax-emoji-picker .ax-emoji-picker-layout{display:flex;width:100%;height:100%;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2.5);background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-emoji-picker .ax-emoji-picker-search-container{display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3);padding-top:0}ax-emoji-picker .ax-emoji-picker-categories{width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-shrink:0;gap:calc(var(--spacing, .25rem) * .5);overflow-x:auto;border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);border-bottom-color:var(--ax-comp-emoji-picker-border)}ax-emoji-picker .ax-emoji-picker-categories ax-tab-item{display:flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);min-width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;justify-content:center;border-radius:.625rem;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: 1;line-height:1;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);font-family:var(--ax-comp-emoji-picker-category-font-family);font-variant-emoji:emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-emoji-picker .ax-emoji-picker-categories ax-tab-item .ax-tab-item-text{padding:calc(var(--spacing, .25rem) * 0)}ax-emoji-picker .ax-emoji-picker-categories ax-tab-item.ax-state-active{background:var(--ax-comp-emoji-picker-active);box-shadow:none}@media(hover:hover){ax-emoji-picker .ax-emoji-picker-categories ax-tab-item:hover{background:var(--ax-comp-emoji-picker-hover)}}ax-emoji-picker .ax-emoji-picker-categories ax-tab-item.ax-emoji-picker-tab-recent .ax-tab-item-text{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));opacity:65%}ax-emoji-picker.ax-emoji-picker-native{--ax-comp-emoji-picker-category-font-family: \"Twemoji Country Flags\", \"Segoe UI Emoji\", \"Apple Color Emoji\", \"Twemoji Mozilla\", emoji, sans-serif}ax-emoji-picker .ax-emoji-picker-search{flex-shrink:0}ax-emoji-picker .ax-emoji-picker-search .ax-editor-container{min-height:calc(var(--spacing, .25rem) * 9);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;padding-inline:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:var(--ax-comp-emoji-picker-hover);transition:background-color .15s ease}ax-emoji-picker .ax-emoji-picker-search .ax-editor-container:after{display:none}ax-emoji-picker .ax-emoji-picker-search .ax-editor-container:hover:not(.ax-state-disabled,.ax-state-readonly,.ax-state-error),ax-emoji-picker .ax-emoji-picker-search .ax-editor-container:focus-within:not(.ax-state-disabled,.ax-state-readonly,.ax-state-error){border-style:var(--tw-border-style);border-width:0px;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none;background:var(--ax-comp-emoji-picker-active)}ax-emoji-picker .ax-emoji-picker-search .ax-input,ax-emoji-picker .ax-emoji-picker-search input{min-height:calc(var(--spacing, .25rem) * 9);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding-block:calc(var(--spacing, .25rem) * 1.5);font-size:.8125rem;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none}ax-emoji-picker .ax-emoji-picker-search .ax-input::placeholder,ax-emoji-picker .ax-emoji-picker-search input::placeholder{color:var(--ax-comp-emoji-picker-placeholder)}ax-emoji-picker .ax-emoji-picker-grid{display:block;min-height:0;min-width:0;width:100%;flex:1 1 auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}ax-emoji-picker .ax-emoji-picker-grid .cdk-virtual-scroll-content-wrapper{width:100%;min-width:0}ax-emoji-picker .ax-emoji-picker-row{display:grid;width:100%;min-width:0;padding-block:.125rem;gap:var(--ax-comp-emoji-picker-cell-gap);grid-template-columns:repeat(var(--ax-comp-emoji-picker-columns),minmax(0,1fr))}ax-emoji-picker .ax-emoji-picker-item{display:flex;width:100%;height:var(--ax-comp-emoji-picker-cell-size);cursor:pointer;align-items:center;justify-content:center;border:0;border-radius:.5rem;background:transparent;padding:0;transition:background-color .12s ease,transform .12s ease}@media(hover:hover){ax-emoji-picker .ax-emoji-picker-item:hover{scale:1.06;background:var(--ax-comp-emoji-picker-hover)}}ax-emoji-picker .ax-emoji-picker-item:active{scale:.96}ax-emoji-picker .ax-emoji-picker-empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;font-size:.8125rem;color:var(--ax-comp-emoji-picker-muted)}@media(max-width:400px){ax-emoji-picker{--ax-comp-emoji-picker-cell-size: 2rem;--ax-comp-emoji-picker-height: 22rem}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-leading: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXEmojiComponent, selector: "ax-emoji", inputs: ["emoji", "appearance", "size"] }, { kind: "component", type: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: AXGestureDirective, selector: "[axGesture]", inputs: ["options", "direction", "enablePinch", "enableRotate", "disabled", "tapInterval"], outputs: ["tap", "doubletap", "press", "pan", "panstart", "panmove", "panend", "swipe", "pinch", "rotate"], exportAs: ["axGesture"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXEmojiPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXEmojiPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-emoji-picker', encapsulation: ViewEncapsulation.None, host: {
                         class: 'ax-emoji-picker',
@@ -405,11 +405,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showRecent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRecent", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], excludeCategories: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeCategories", required: false }] }], excludeCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeCodes", required: false }] }], excludeUnicode: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeUnicode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], recentItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "recentItems", required: false }] }], recentChanged: [{ type: i0.Output, args: ["recentChanged"] }] } });
 
 class AXEmojiPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXEmojiPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXEmojiPickerModule, imports: [AXEmojiPickerComponent], exports: [AXEmojiPickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXEmojiPickerModule, imports: [AXEmojiPickerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXEmojiPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXEmojiPickerModule, imports: [AXEmojiPickerComponent], exports: [AXEmojiPickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXEmojiPickerModule, imports: [AXEmojiPickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXEmojiPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXEmojiPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXEmojiPickerComponent],

package/fesm2022/acorex-components-fab.mjs

@@ -70,10 +70,10 @@ class AXFabComponent {
     close() {
         this.popoverRef().close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXFabComponent, isStandalone: true, selector: "ax-fab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, popupStyle: { classPropertyName: "popupStyle", publicName: "popupStyle", isSignal: true, isRequired: false, transformFunction: null }, popupPlacement: { classPropertyName: "popupPlacement", publicName: "popupPlacement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popupPlacement: "popupPlacementChange", onClick: "onClick", onOpened: "onOpened", onClosed: "onClosed" }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-button class=\"ax-{{ size() }}\" #btn (onClick)=\"onClick.emit($event)\" color=\"primary\" look=\"solid\" [text]=\"label()\">\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ax-button>\n\n<ax-popover\n  (onOpened)=\"openPopover()\"\n  (onClosed)=\"closePopover()\"\n  [disablePanelClass]=\"true\"\n  [offsetY]=\"offsetPopover()\"\n  [placement]=\"popupPlacement()\"\n  [target]=\"btn\"\n>\n  <div class=\"ax-fab-item-container ax-action-list ax-action-list-vertical\">\n    <ng-content select=\"ax-fab-item\"> </ng-content>\n  </div>\n</ax-popover>\n", styles: ["@layer components{ax-fab{--ax-comp-fab-shadow-rest: var(--ax-sys-effect-control-rest);--ax-comp-fab-shadow-hover: var(--ax-sys-effect-control-hover);--ax-comp-fab-shadow-active: var(--ax-sys-effect-control-active);--ax-comp-fab-highlight-rest: var(--ax-sys-highlight-control);--ax-comp-fab-highlight-hover: var(--ax-sys-highlight-control);--ax-comp-fab-inner-border-rest: var(--ax-sys-inner-border-control);--ax-comp-fab-inner-border-hover: var(--ax-sys-inner-border-control);--ax-comp-fab-inner-border-active: var(--ax-sys-inner-border-control);--ax-comp-fab-bevel-rest: var(--ax-sys-bevel-control-rest);--ax-comp-fab-bevel-hover: var(--ax-sys-bevel-control-hover);--ax-comp-fab-bevel-active: var(--ax-sys-bevel-control-active);--ax-comp-fab-background-image-rest: var(--ax-sys-gradient-control-rest);--ax-comp-fab-background-image-hover: var(--ax-sys-gradient-control-hover);--ax-comp-fab-background-image-active: var(--ax-sys-gradient-control-active);--ax-comp-fab-transform-active: var(--ax-sys-transform-control-active)}ax-fab ax-button{border-radius:1000vmax}ax-fab ax-button button.ax-solid-interactive{box-shadow:var(--ax-comp-fab-inner-border-rest),var(--ax-comp-fab-bevel-rest),var(--ax-comp-fab-highlight-rest),var(--ax-comp-fab-shadow-rest);background-image:var(--ax-comp-fab-background-image-rest)}ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):hover,ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus,ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus-within{box-shadow:var(--ax-comp-fab-inner-border-hover),var(--ax-comp-fab-bevel-hover),var(--ax-comp-fab-highlight-hover),var(--ax-comp-fab-shadow-hover);background-image:var(--ax-comp-fab-background-image-hover)}ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):active{box-shadow:var(--ax-comp-fab-inner-border-active),var(--ax-comp-fab-bevel-active),var(--ax-comp-fab-shadow-active);background-image:var(--ax-comp-fab-background-image-active);transform:var(--ax-comp-fab-transform-active)}.ax-fab-item-container{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);padding-block:calc(var(--spacing, .25rem) * 1)}.ax-fab-item-container.ax-fab-box-style{background-color:rgba(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.ax-fab-item-container ax-popover{display:none}.ax-fab-item-container ax-button{border-radius:1000vmax}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXFabComponent, isStandalone: true, selector: "ax-fab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, popupStyle: { classPropertyName: "popupStyle", publicName: "popupStyle", isSignal: true, isRequired: false, transformFunction: null }, popupPlacement: { classPropertyName: "popupPlacement", publicName: "popupPlacement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popupPlacement: "popupPlacementChange", onClick: "onClick", onOpened: "onOpened", onClosed: "onClosed" }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-button class=\"ax-{{ size() }}\" #btn (onClick)=\"onClick.emit($event)\" color=\"primary\" look=\"solid\" [text]=\"label()\">\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ax-button>\n\n<ax-popover\n  (onOpened)=\"openPopover()\"\n  (onClosed)=\"closePopover()\"\n  [disablePanelClass]=\"true\"\n  [offsetY]=\"offsetPopover()\"\n  [placement]=\"popupPlacement()\"\n  [target]=\"btn\"\n>\n  <div class=\"ax-fab-item-container ax-action-list ax-action-list-vertical\">\n    <ng-content select=\"ax-fab-item\"> </ng-content>\n  </div>\n</ax-popover>\n", styles: ["@layer components{ax-fab{--ax-comp-fab-shadow-rest: var(--ax-sys-effect-control-rest);--ax-comp-fab-shadow-hover: var(--ax-sys-effect-control-hover);--ax-comp-fab-shadow-active: var(--ax-sys-effect-control-active);--ax-comp-fab-highlight-rest: var(--ax-sys-highlight-control);--ax-comp-fab-highlight-hover: var(--ax-sys-highlight-control);--ax-comp-fab-inner-border-rest: var(--ax-sys-inner-border-control);--ax-comp-fab-inner-border-hover: var(--ax-sys-inner-border-control);--ax-comp-fab-inner-border-active: var(--ax-sys-inner-border-control);--ax-comp-fab-bevel-rest: var(--ax-sys-bevel-control-rest);--ax-comp-fab-bevel-hover: var(--ax-sys-bevel-control-hover);--ax-comp-fab-bevel-active: var(--ax-sys-bevel-control-active);--ax-comp-fab-background-image-rest: var(--ax-sys-gradient-control-rest);--ax-comp-fab-background-image-hover: var(--ax-sys-gradient-control-hover);--ax-comp-fab-background-image-active: var(--ax-sys-gradient-control-active);--ax-comp-fab-transform-active: var(--ax-sys-transform-control-active)}ax-fab ax-button{border-radius:1000vmax}ax-fab ax-button button.ax-solid-interactive{box-shadow:var(--ax-comp-fab-inner-border-rest),var(--ax-comp-fab-bevel-rest),var(--ax-comp-fab-highlight-rest),var(--ax-comp-fab-shadow-rest);background-image:var(--ax-comp-fab-background-image-rest)}ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):hover,ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus,ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus-within{box-shadow:var(--ax-comp-fab-inner-border-hover),var(--ax-comp-fab-bevel-hover),var(--ax-comp-fab-highlight-hover),var(--ax-comp-fab-shadow-hover);background-image:var(--ax-comp-fab-background-image-hover)}ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):active{box-shadow:var(--ax-comp-fab-inner-border-active),var(--ax-comp-fab-bevel-active),var(--ax-comp-fab-shadow-active);background-image:var(--ax-comp-fab-background-image-active);transform:var(--ax-comp-fab-transform-active)}.ax-fab-item-container{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);padding-block:calc(var(--spacing, .25rem) * 1)}.ax-fab-item-container.ax-fab-box-style{background-color:rgba(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.ax-fab-item-container ax-popover{display:none}.ax-fab-item-container ax-button{border-radius:1000vmax}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXFabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXFabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-fab', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXPopoverModule, AXDecoratorModule], template: "<ax-button class=\"ax-{{ size() }}\" #btn (onClick)=\"onClick.emit($event)\" color=\"primary\" look=\"solid\" [text]=\"label()\">\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ax-button>\n\n<ax-popover\n  (onOpened)=\"openPopover()\"\n  (onClosed)=\"closePopover()\"\n  [disablePanelClass]=\"true\"\n  [offsetY]=\"offsetPopover()\"\n  [placement]=\"popupPlacement()\"\n  [target]=\"btn\"\n>\n  <div class=\"ax-fab-item-container ax-action-list ax-action-list-vertical\">\n    <ng-content select=\"ax-fab-item\"> </ng-content>\n  </div>\n</ax-popover>\n", styles: ["@layer components{ax-fab{--ax-comp-fab-shadow-rest: var(--ax-sys-effect-control-rest);--ax-comp-fab-shadow-hover: var(--ax-sys-effect-control-hover);--ax-comp-fab-shadow-active: var(--ax-sys-effect-control-active);--ax-comp-fab-highlight-rest: var(--ax-sys-highlight-control);--ax-comp-fab-highlight-hover: var(--ax-sys-highlight-control);--ax-comp-fab-inner-border-rest: var(--ax-sys-inner-border-control);--ax-comp-fab-inner-border-hover: var(--ax-sys-inner-border-control);--ax-comp-fab-inner-border-active: var(--ax-sys-inner-border-control);--ax-comp-fab-bevel-rest: var(--ax-sys-bevel-control-rest);--ax-comp-fab-bevel-hover: var(--ax-sys-bevel-control-hover);--ax-comp-fab-bevel-active: var(--ax-sys-bevel-control-active);--ax-comp-fab-background-image-rest: var(--ax-sys-gradient-control-rest);--ax-comp-fab-background-image-hover: var(--ax-sys-gradient-control-hover);--ax-comp-fab-background-image-active: var(--ax-sys-gradient-control-active);--ax-comp-fab-transform-active: var(--ax-sys-transform-control-active)}ax-fab ax-button{border-radius:1000vmax}ax-fab ax-button button.ax-solid-interactive{box-shadow:var(--ax-comp-fab-inner-border-rest),var(--ax-comp-fab-bevel-rest),var(--ax-comp-fab-highlight-rest),var(--ax-comp-fab-shadow-rest);background-image:var(--ax-comp-fab-background-image-rest)}ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):hover,ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus,ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus-within{box-shadow:var(--ax-comp-fab-inner-border-hover),var(--ax-comp-fab-bevel-hover),var(--ax-comp-fab-highlight-hover),var(--ax-comp-fab-shadow-hover);background-image:var(--ax-comp-fab-background-image-hover)}ax-fab ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):active{box-shadow:var(--ax-comp-fab-inner-border-active),var(--ax-comp-fab-bevel-active),var(--ax-comp-fab-shadow-active);background-image:var(--ax-comp-fab-background-image-active);transform:var(--ax-comp-fab-transform-active)}.ax-fab-item-container{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);padding-block:calc(var(--spacing, .25rem) * 1)}.ax-fab-item-container.ax-fab-box-style{background-color:rgba(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.ax-fab-item-container ax-popover{display:none}.ax-fab-item-container ax-button{border-radius:1000vmax}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], popupStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupStyle", required: false }] }], popupPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupPlacement", required: false }] }, { type: i0.Output, args: ["popupPlacementChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
@@ -107,10 +107,10 @@ class AXFabItemComponent {
     clickHandler() {
         this.onClick.emit({ component: this });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXFabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXFabItemComponent, isStandalone: true, selector: "ax-fab-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ng-template #iconTpl>\n  <ng-content select=\"ax-icon\"></ng-content>\n</ng-template>\n\n@if (parent.popupStyle() === 'bubble') {\n  <ax-button class=\"ax-{{ buttonSize() }}\" [text]=\"label()\" (onClick)=\"clickHandler()\">\n    <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n  </ax-button>\n} @else {\n  <ax-button-item [text]=\"label()\" (onClick)=\"clickHandler()\">\n    <ax-prefix>\n      <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n    </ax-prefix>\n  </ax-button-item>\n}\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXFabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXFabItemComponent, isStandalone: true, selector: "ax-fab-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ng-template #iconTpl>\n  <ng-content select=\"ax-icon\"></ng-content>\n</ng-template>\n\n@if (parent.popupStyle() === 'bubble') {\n  <ax-button class=\"ax-{{ buttonSize() }}\" [text]=\"label()\" (onClick)=\"clickHandler()\">\n    <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n  </ax-button>\n} @else {\n  <ax-button-item [text]=\"label()\" (onClick)=\"clickHandler()\">\n    <ax-prefix>\n      <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n    </ax-prefix>\n  </ax-button-item>\n}\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXFabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXFabItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-fab-item', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXButtonItemComponent, AXDecoratorModule, NgTemplateOutlet], template: "<ng-template #iconTpl>\n  <ng-content select=\"ax-icon\"></ng-content>\n</ng-template>\n\n@if (parent.popupStyle() === 'bubble') {\n  <ax-button class=\"ax-{{ buttonSize() }}\" [text]=\"label()\" (onClick)=\"clickHandler()\">\n    <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n  </ax-button>\n} @else {\n  <ax-button-item [text]=\"label()\" (onClick)=\"clickHandler()\">\n    <ax-prefix>\n      <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n    </ax-prefix>\n  </ax-button-item>\n}\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });