@acorex/platform 21.0.0-next.72 → 21.0.0-next.73

package/fesm2022/acorex-platform-layout-components.mjs

@@ -23,7 +23,7 @@ import * as i1$1 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
 import * as i3$1 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
-import { isNil, isEmpty, cloneDeep, isEqual, get, unionBy, sortBy, isArray, set, merge, capitalize } from 'lodash-es';
+import { isNil, isEmpty, cloneDeep, isEqual, get, isString, unionBy, sortBy, isArray, set, merge, capitalize } from 'lodash-es';
 import * as i1$3 from '@acorex/components/badge';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
 import { AXPLayoutThemeService, AXPMenuVerticalMode } from '@acorex/platform/themes/shared';
@@ -339,11 +339,11 @@ class AXPAvatarComponent {
         // ax-accent3-lightest
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPAvatarComponent, isStandalone: true, selector: "axp-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, fallbackText: { classPropertyName: "fallbackText", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\" />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text>\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$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: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPAvatarComponent, isStandalone: true, selector: "axp-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, fallbackText: { classPropertyName: "fallbackText", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\" />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text>\n    <small class=\"ax-font-semibold\" [style.font-size]=\"size() * 0.35 + 'px'\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$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: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\" />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text>\n    <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}\n"] }]
+            args: [{ selector: 'axp-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-avatar [size]=\"size()\" class=\"ax-cursor-pointer ax-relative\" [title]=\"title()\"\n  class=\"ax-{{ avatarColor() }}-lightest ax-border \">\n  @if (hasAvatar()) {\n  <ng-container>\n    <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"resolvedSrc()\"\n      [class.ax-opacity-0]=\"isLoading()\" class=\"ax-transition-opacity ax-duration-200\" />\n    @if (isLoading()) {\n    <ax-icon icon=\"fa-solid fa-user fa-2x\" class=\"ax-text-3xl\" />\n    }\n  </ng-container>\n  } @else {\n  <ax-text>\n    <small class=\"ax-font-semibold\" [style.font-size]=\"size() * 0.35 + 'px'\">{{ avatarText() }}</small>\n  </ax-text>\n  }\n</ax-avatar>", styles: [":host ax-text{border-style:none;background-color:transparent;color:unset!important}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], fullName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullName", required: false }] }], fallbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 const AXP_TASK_BADGE_PROVIDERS = new InjectionToken('AXP_TASK_BADGE_PROVIDERS');
@@ -2114,7 +2114,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1 ax-min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content{display:flex;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);padding:1rem;background:var(--surface-color);flex-shrink:0;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area ax-data-table{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$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: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.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: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1 ax-min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content{display:flex;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);padding:1rem;background:var(--surface-color);flex-shrink:0;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area ax-data-table{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$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: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.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: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
@@ -3817,6 +3817,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+//#region ---- Signature editor types ----
+//#endregion
+
+//#region ---- Constants ----
+const SIGNATURE_WIDGET_NAME = 'signature';
+//#endregion
+//#region ---- Signature editor service ----
+/**
+ * Opens the shared signature capture dialog (paint pad, Clear, and Save/Apply).
+ * Clear resets the canvas; the primary action persists the current pad (empty removes the signature).
+ */
+class AXPSignatureEditorService {
+    constructor() {
+        //#region ---- Services & Dependencies ----
+        this.layoutBuilder = inject(AXPLayoutBuilderService);
+    }
+    //#endregion
+    //#region ---- Public API ----
+    async open(options = {}) {
+        const initialValue = options.value ?? null;
+        const disabled = options.disabled ?? false;
+        const ref = await this.layoutBuilder
+            .create()
+            .dialog((dialog) => {
+            dialog
+                .setTitle(options.title ?? '@platform-layout-widgets:widgets.signature.title')
+                .setSize('sm')
+                .setCloseButton(true)
+                .setContext({ value: initialValue })
+                .content((content) => {
+                content
+                    .setDirection('column')
+                    .setGap('16px')
+                    .setAlignItems('stretch')
+                    .customWidget(SIGNATURE_WIDGET_NAME, {
+                    name: SIGNATURE_WIDGET_NAME,
+                    path: 'value',
+                    disabled,
+                    showOverlay: false,
+                    editMode: true,
+                });
+            })
+                .setActions((actions) => {
+                actions.cancel('@general:actions.cancel.title');
+                actions.custom({
+                    title: '@general:actions.clear.title',
+                    icon: 'fa-light fa-eraser',
+                    disabled: '{{ !context.value }}',
+                    command: { name: 'widget:signature.clear' },
+                    position: 'prefix',
+                });
+                actions.submit(options.submitActionKey ?? '@general:actions.apply.title');
+            });
+        })
+            .show();
+        const action = this.resolveAction(ref.action());
+        const context = ref.context() ?? {};
+        if (action === 'apply') {
+            const newValue = context.value;
+            const value = this.resolveAppliedValue(newValue, initialValue);
+            ref.close();
+            return { action: 'apply', value };
+        }
+        ref.close();
+        return { action: 'cancel', value: initialValue };
+    }
+    //#endregion
+    //#region ---- Utility Methods ----
+    resolveAction(action) {
+        if (action === 'submit' || action === 'signature-apply') {
+            return 'apply';
+        }
+        return 'cancel';
+    }
+    resolveAppliedValue(newValue, initialValue) {
+        if (newValue === null || newValue === '') {
+            return null;
+        }
+        if (isString(newValue)) {
+            return newValue;
+        }
+        return initialValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSignatureEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSignatureEditorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSignatureEditorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Copies {@link AXPWidgetProperty.validations} onto `schema.interface.options` so the property
  * viewer binds a stable widget node.
@@ -8683,10 +8774,14 @@ class AXPUserAvatarComponent {
         this.size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.userId = input('', ...(ngDevMode ? [{ debugName: "userId" }] : /* istanbul ignore next */ []));
         this.src = signal('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        /** Username from the user record. */
         this.userName = computed(() => this.userInfo()?.username || '', ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
-        this.firstName = computed(() => this.userInfo()?.firstName || 'Root', ...(ngDevMode ? [{ debugName: "firstName" }] : /* istanbul ignore next */ []));
-        this.lastName = computed(() => this.userInfo()?.lastName || 'User', ...(ngDevMode ? [{ debugName: "lastName" }] : /* istanbul ignore next */ []));
-        this.title = computed(() => `${this.firstName()} ${this.lastName()}`, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Given name segment used for display and templates. */
+        this.firstName = computed(() => this.userInfo()?.firstName?.trim() || '', ...(ngDevMode ? [{ debugName: "firstName" }] : /* istanbul ignore next */ []));
+        /** Family name segment used for display and templates. */
+        this.lastName = computed(() => this.userInfo()?.lastName?.trim() || '', ...(ngDevMode ? [{ debugName: "lastName" }] : /* istanbul ignore next */ []));
+        /** Full display name used for avatar initials and external templates. */
+        this.title = computed(() => this.resolveDisplayName(this.userInfo()), ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.isOnline = computed(() => this.userInfo()?.status === 'online', ...(ngDevMode ? [{ debugName: "isOnline" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
@@ -8723,6 +8818,16 @@ class AXPUserAvatarComponent {
         }
         this.src.set('');
     }
+    resolveDisplayName(info) {
+        if (!info) {
+            return '';
+        }
+        const parts = [info.firstName, info.lastName].map((part) => part?.trim()).filter(Boolean);
+        if (parts.length > 0) {
+            return parts.join(' ');
+        }
+        return info.username.trim();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<axp-avatar [size]=\"size()\" [src]=\"src()\" [fullName]=\"title()\" />\n", styles: [""], dependencies: [{ kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSkeletonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -8731,6 +8836,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ selector: 'axp-user-avatar', imports: [AXPAvatarComponent, AXBadgeModule, AXSkeletonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [], template: "<axp-avatar [size]=\"size()\" [src]=\"src()\" [fullName]=\"title()\" />\n" }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }] } });
 
+//#region ---- Imports ----
+//#endregion
+//#region ---- Constants ----
+const DIGIT_KEYS = [
+    { digit: '1' },
+    { digit: '2', letters: 'ABC' },
+    { digit: '3', letters: 'DEF' },
+    { digit: '4', letters: 'GHI' },
+    { digit: '5', letters: 'JKL' },
+    { digit: '6', letters: 'MNO' },
+    { digit: '7', letters: 'PQRS' },
+    { digit: '8', letters: 'TUV' },
+    { digit: '9', letters: 'WXYZ' },
+];
+const ZERO_KEY = { digit: '0' };
+//#endregion
+//#region ---- Virtual keypad component ----
+/**
+ * Touch-friendly numeric keypad for PIN and code entry on mobile layouts.
+ */
+class AXPVirtualKeypadComponent {
+    constructor() {
+        //#region ---- Inputs ----
+        /** Disables all keypad buttons. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Shows phone-style letter hints under digits 2–9. */
+        this.showLetterHints = input(true, ...(ngDevMode ? [{ debugName: "showLetterHints" }] : /* istanbul ignore next */ []));
+        /** Visual style of keypad keys. */
+        this.look = input('solid', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Outputs ----
+        /** Emitted when a digit key is pressed. */
+        this.digitPress = output();
+        /** Emitted when the backspace key is pressed. */
+        this.backspace = output();
+        /** Emitted for either digit or backspace actions. */
+        this.keyPress = output();
+        //#endregion
+        //#region ---- Template data ----
+        this.digitKeys = DIGIT_KEYS;
+        this.zeroKey = ZERO_KEY;
+    }
+    //#endregion
+    //#region ---- UI handlers ----
+    onDigitPress(digit) {
+        if (this.disabled()) {
+            return;
+        }
+        const value = Number(digit);
+        this.digitPress.emit(value);
+        this.keyPress.emit({ action: 'digit', digit: value });
+    }
+    onBackspace() {
+        if (this.disabled()) {
+            return;
+        }
+        this.backspace.emit();
+        this.keyPress.emit({ action: 'backspace' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPVirtualKeypadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPVirtualKeypadComponent, isStandalone: true, selector: "axp-virtual-keypad", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLetterHints: { classPropertyName: "showLetterHints", publicName: "showLetterHints", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { digitPress: "digitPress", backspace: "backspace", keyPress: "keyPress" }, host: { classAttribute: "axp-virtual-keypad-host" }, ngImport: i0, template: "<div\n  class=\"axp-virtual-keypad\"\n  role=\"group\"\n  [attr.data-look]=\"look()\"\n  [attr.aria-label]=\"'@general:virtual-keypad.aria-label' | translate | async\"\n>\n  <div class=\"__grid\">\n    @for (key of digitKeys; track key.digit) {\n      <button\n        type=\"button\"\n        class=\"__key\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"key.digit\"\n        (click)=\"onDigitPress(key.digit)\"\n      >\n        <span class=\"__digit\">{{ key.digit }}</span>\n        @if (showLetterHints() && key.letters) {\n          <span class=\"__letters\" aria-hidden=\"true\">{{ key.letters }}</span>\n        }\n      </button>\n    }\n\n    <span class=\"__spacer\" aria-hidden=\"true\"></span>\n\n    <button\n      type=\"button\"\n      class=\"__key\"\n      [disabled]=\"disabled()\"\n      aria-label=\"0\"\n      (click)=\"onDigitPress(zeroKey.digit)\"\n    >\n      <span class=\"__digit\">{{ zeroKey.digit }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"__key __key--action\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"'@general:virtual-keypad.backspace' | translate | async\"\n      (click)=\"onBackspace()\"\n    >\n      <i class=\"fa-light fa-delete-left\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".axp-virtual-keypad-host{display:block;width:100%}.axp-virtual-keypad{--axp-keypad-key-size: 4.25rem;--axp-keypad-gap: .75rem;display:flex;width:100%;-webkit-user-select:none;user-select:none;justify-content:center}.axp-virtual-keypad .__grid{margin-left:auto;margin-right:auto;display:grid;width:fit-content;justify-items:center;grid-template-columns:repeat(3,var(--axp-keypad-key-size));gap:var(--axp-keypad-gap)}.axp-virtual-keypad .__spacer{display:block;width:var(--axp-keypad-key-size);height:var(--axp-keypad-key-size)}.axp-virtual-keypad .__key{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:9999px;border-width:0px;background-color:transparent;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s;animation-duration:.1s;width:var(--axp-keypad-key-size);height:var(--axp-keypad-key-size)}.axp-virtual-keypad .__key:active:not(:disabled){transform:scale(.96)}.axp-virtual-keypad .__key:disabled{cursor:not-allowed;opacity:.5}.axp-virtual-keypad .__key:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-600));outline-offset:2px}.axp-virtual-keypad .__digit{font-size:1.875rem;line-height:2.25rem;font-weight:500;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);line-height:1}.axp-virtual-keypad .__letters{margin-top:.25rem;font-size:.6875rem;font-weight:600;line-height:1;letter-spacing:.14em;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1));opacity:.6}.axp-virtual-keypad .__key--action{font-size:1.125rem;line-height:1.75rem}.axp-virtual-keypad .__key--action i{font-size:1.5rem;line-height:2rem}.axp-virtual-keypad[data-look=solid] .__key{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-virtual-keypad[data-look=solid] .__key:active:not(:disabled){background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-virtual-keypad[data-look=blank] .__key{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.axp-virtual-keypad[data-look=blank] .__key:active:not(:disabled){background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPVirtualKeypadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-virtual-keypad', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTranslationModule, AsyncPipe], host: {
+                        class: 'axp-virtual-keypad-host',
+                    }, template: "<div\n  class=\"axp-virtual-keypad\"\n  role=\"group\"\n  [attr.data-look]=\"look()\"\n  [attr.aria-label]=\"'@general:virtual-keypad.aria-label' | translate | async\"\n>\n  <div class=\"__grid\">\n    @for (key of digitKeys; track key.digit) {\n      <button\n        type=\"button\"\n        class=\"__key\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"key.digit\"\n        (click)=\"onDigitPress(key.digit)\"\n      >\n        <span class=\"__digit\">{{ key.digit }}</span>\n        @if (showLetterHints() && key.letters) {\n          <span class=\"__letters\" aria-hidden=\"true\">{{ key.letters }}</span>\n        }\n      </button>\n    }\n\n    <span class=\"__spacer\" aria-hidden=\"true\"></span>\n\n    <button\n      type=\"button\"\n      class=\"__key\"\n      [disabled]=\"disabled()\"\n      aria-label=\"0\"\n      (click)=\"onDigitPress(zeroKey.digit)\"\n    >\n      <span class=\"__digit\">{{ zeroKey.digit }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"__key __key--action\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"'@general:virtual-keypad.backspace' | translate | async\"\n      (click)=\"onBackspace()\"\n    >\n      <i class=\"fa-light fa-delete-left\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".axp-virtual-keypad-host{display:block;width:100%}.axp-virtual-keypad{--axp-keypad-key-size: 4.25rem;--axp-keypad-gap: .75rem;display:flex;width:100%;-webkit-user-select:none;user-select:none;justify-content:center}.axp-virtual-keypad .__grid{margin-left:auto;margin-right:auto;display:grid;width:fit-content;justify-items:center;grid-template-columns:repeat(3,var(--axp-keypad-key-size));gap:var(--axp-keypad-gap)}.axp-virtual-keypad .__spacer{display:block;width:var(--axp-keypad-key-size);height:var(--axp-keypad-key-size)}.axp-virtual-keypad .__key{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:9999px;border-width:0px;background-color:transparent;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s;animation-duration:.1s;width:var(--axp-keypad-key-size);height:var(--axp-keypad-key-size)}.axp-virtual-keypad .__key:active:not(:disabled){transform:scale(.96)}.axp-virtual-keypad .__key:disabled{cursor:not-allowed;opacity:.5}.axp-virtual-keypad .__key:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-600));outline-offset:2px}.axp-virtual-keypad .__digit{font-size:1.875rem;line-height:2.25rem;font-weight:500;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);line-height:1}.axp-virtual-keypad .__letters{margin-top:.25rem;font-size:.6875rem;font-weight:600;line-height:1;letter-spacing:.14em;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1));opacity:.6}.axp-virtual-keypad .__key--action{font-size:1.125rem;line-height:1.75rem}.axp-virtual-keypad .__key--action i{font-size:1.5rem;line-height:2rem}.axp-virtual-keypad[data-look=solid] .__key{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-virtual-keypad[data-look=solid] .__key:active:not(:disabled){background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-virtual-keypad[data-look=blank] .__key{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.axp-virtual-keypad[data-look=blank] .__key:active:not(:disabled){background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showLetterHints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLetterHints", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], digitPress: [{ type: i0.Output, args: ["digitPress"] }], backspace: [{ type: i0.Output, args: ["backspace"] }], keyPress: [{ type: i0.Output, args: ["keyPress"] }] } });
+
+//#region ---- Virtual keypad types ----
+//#endregion
+
 class AXPQueryViewsComponent {
     constructor() {
         this.popupService = inject(AXPopupService);
@@ -9403,5 +9580,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPLogoComponent, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, preparePropertyForViewer, preparePropertyViewerTabs, registerFieldDefinitions, withValidationsOnEditorNode };
+export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPLogoComponent, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSignatureEditorService, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPVirtualKeypadComponent, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, preparePropertyForViewer, preparePropertyViewerTabs, registerFieldDefinitions, withValidationsOnEditorNode };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map