@acorex/components 22.4.21 → 22.4.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-components-calendar.mjs +3 -2
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-command.mjs +2 -2
- package/fesm2022/acorex-components-command.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +48 -14
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-loading.mjs +2 -2
- package/fesm2022/acorex-components-loading.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +4 -4
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-tag-box.mjs +2 -2
- package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
- package/package.json +3 -3
- package/types/acorex-components-data-table.d.ts +36 -6
|
@@ -130,7 +130,7 @@ class AXCommandComponent extends classes((MXInputBaseValueComponent), MXLookComp
|
|
|
130
130
|
},
|
|
131
131
|
{ provide: AXComponent, useExisting: AXCommandComponent },
|
|
132
132
|
{ provide: AXValuableComponent, useExisting: AXCommandComponent },
|
|
133
|
-
], viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["f"], descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: ["l"], descendants: true, read: AXListNavigationDirective, isSignal: true }, { propertyName: "listNav", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (searchBar()) {\n <div class=\"ax-search-box-container\">\n <ax-search-box\n #f\n [delayTime]=\"20\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [(ngModel)]=\"searchValue\"\n (onFocus)=\"focusHandler($event)\"\n (onBlur)=\"blurHandler($event)\"\n (onKeyDown)=\"searchEscapeHandler($event)\"\n [axAutoFocus]=\"true\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n}\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n @if (value?.pinned && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.pinned.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n }\n\n @for (item of value.pinned.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (value?.list && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.list.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n } @else if (divider()) {\n <div class=\"ax-command-divider\"></div>\n }\n\n @for (item of value.list.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (displayItems() && searchValue()) {\n <div class=\"ax-command-item-wrapper\">\n @for (item of displayItems(); track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n } @empty {\n <div class=\"ax-command-not-found\">\n <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n </div>\n }\n </div>\n }\n\n <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n <div\n (mouseenter)=\"activeHandler(listNavigation, a)\"\n class=\"ax-remove-default-select-style\"\n [class.ax-command-item-container]=\"!customTemplate()\"\n [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n #a=\"axListNavigationItem\"\n axListNavigationItem\n (click)=\"onItemClick(item)\"\n (onKeypress)=\"keyPress($event, item)\"\n >\n @if (customTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"customTemplate()\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n level: level,\n isActive: a.isActive(),\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-command-item\">\n @if (item.icon) {\n <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n }\n <span class=\"ax-command-item-text\">{{ item.text }}</span>\n </div>\n }\n </div>\n\n @if (item.children?.length) {\n @for (child of item.children; track child.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n >\n </ng-container>\n }\n }\n </ng-template>\n</div>\n\n@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n <div class=\"ax-command-footer\">\n @if (footerButtons().navigation) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↑']\"></ax-kbd-item>\n <ax-kbd-item [keys]=\"['↓']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n </div>\n }\n\n @if (footerButtons().select) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↩']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to select</ax-text>\n </div>\n }\n\n @if (footerButtons().close) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to close</ax-text>\n </div>\n }\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-command{display:block;overflow:hidden;border-radius:var(--radius-lg, .5rem);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:rgba(var(--ax-sys-color-border-light-surface))}ax-command .ax-search-box-container{background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 3)}ax-command .ax-search-box-container:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}ax-command .ax-command-container{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-surface));scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{display:block;padding:calc(var(--spacing, .25rem) * 3);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lighter-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lighter-surface)) 50%,transparent)}}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-divider{height:1px;width:100%;background-color:rgba(var(--ax-sys-color-surface))}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;padding:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-container .ax-command-item-container .ax-command-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:rgba(var(--ax-sys-color-on-lighter-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lighter-surface)) 50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{display:flex;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}ax-command .ax-command-container .ax-remove-default-select-style{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-command .ax-kbd{display:flex;height:100%;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-footer{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 6);border-bottom-right-radius:var(--radius-lg, .5rem);border-bottom-left-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding:calc(var(--spacing, .25rem) * 3);color:rgba(var(--ax-sys-color-on-light-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-light-surface)) 50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1.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: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.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: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i5.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i5.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
133
|
+
], viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["f"], descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: ["l"], descendants: true, read: AXListNavigationDirective, isSignal: true }, { propertyName: "listNav", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (searchBar()) {\n <div class=\"ax-search-box-container\">\n <ax-search-box\n #f\n [delayTime]=\"20\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [(ngModel)]=\"searchValue\"\n (onFocus)=\"focusHandler($event)\"\n (onBlur)=\"blurHandler($event)\"\n (onKeyDown)=\"searchEscapeHandler($event)\"\n [axAutoFocus]=\"true\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n}\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n @if (value?.pinned && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.pinned.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n }\n\n @for (item of value.pinned.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (value?.list && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.list.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n } @else if (divider()) {\n <div class=\"ax-command-divider\"></div>\n }\n\n @for (item of value.list.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (displayItems() && searchValue()) {\n <div class=\"ax-command-item-wrapper\">\n @for (item of displayItems(); track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n } @empty {\n <div class=\"ax-command-not-found\">\n <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n </div>\n }\n </div>\n }\n\n <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n <div\n (mouseenter)=\"activeHandler(listNavigation, a)\"\n class=\"ax-remove-default-select-style\"\n [class.ax-command-item-container]=\"!customTemplate()\"\n [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n #a=\"axListNavigationItem\"\n axListNavigationItem\n (click)=\"onItemClick(item)\"\n (onKeypress)=\"keyPress($event, item)\"\n >\n @if (customTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"customTemplate()\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n level: level,\n isActive: a.isActive(),\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-command-item\">\n @if (item.icon) {\n <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n }\n <span class=\"ax-command-item-text\">{{ item.text }}</span>\n </div>\n }\n </div>\n\n @if (item.children?.length) {\n @for (child of item.children; track child.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n >\n </ng-container>\n }\n }\n </ng-template>\n</div>\n\n@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n <div class=\"ax-command-footer\">\n @if (footerButtons().navigation) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↑']\"></ax-kbd-item>\n <ax-kbd-item [keys]=\"['↓']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n </div>\n }\n\n @if (footerButtons().select) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↩']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to select</ax-text>\n </div>\n }\n\n @if (footerButtons().close) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to close</ax-text>\n </div>\n }\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-command{display:block;overflow:hidden;border-radius:var(--radius-lg, .5rem);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:rgba(var(--ax-sys-color-border-light-surface))}ax-command .ax-search-box-container{background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 3)}ax-command .ax-search-box-container:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}ax-command .ax-command-container{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-surface));scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{display:block;padding:calc(var(--spacing, .25rem) * 3);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lighter-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lighter-surface)) 50%,transparent)}}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-divider{height:1px;width:100%;background-color:rgba(var(--ax-sys-color-surface))}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;padding:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-container .ax-command-item-container .ax-command-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:rgba(var(--ax-sys-color-on-lighter-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lighter-surface)) 50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{display:flex;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}ax-command .ax-command-container .ax-remove-default-select-style{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-command .ax-kbd{display:flex;height:100%;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-footer{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 6);border-bottom-right-radius:var(--radius-lg, .5rem);border-bottom-left-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding:calc(var(--spacing, .25rem) * 3);color:rgba(var(--ax-sys-color-on-light-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-light-surface)) 50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1.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: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.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: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i5.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i5.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
134
134
|
}
|
|
135
135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCommandComponent, decorators: [{
|
|
136
136
|
type: Component,
|
|
@@ -151,7 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
151
151
|
},
|
|
152
152
|
{ provide: AXComponent, useExisting: AXCommandComponent },
|
|
153
153
|
{ provide: AXValuableComponent, useExisting: AXCommandComponent },
|
|
154
|
-
], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "@if (searchBar()) {\n <div class=\"ax-search-box-container\">\n <ax-search-box\n #f\n [delayTime]=\"20\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [(ngModel)]=\"searchValue\"\n (onFocus)=\"focusHandler($event)\"\n (onBlur)=\"blurHandler($event)\"\n (onKeyDown)=\"searchEscapeHandler($event)\"\n [axAutoFocus]=\"true\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n}\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n @if (value?.pinned && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.pinned.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n }\n\n @for (item of value.pinned.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (value?.list && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.list.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n } @else if (divider()) {\n <div class=\"ax-command-divider\"></div>\n }\n\n @for (item of value.list.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (displayItems() && searchValue()) {\n <div class=\"ax-command-item-wrapper\">\n @for (item of displayItems(); track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n } @empty {\n <div class=\"ax-command-not-found\">\n <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n </div>\n }\n </div>\n }\n\n <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n <div\n (mouseenter)=\"activeHandler(listNavigation, a)\"\n class=\"ax-remove-default-select-style\"\n [class.ax-command-item-container]=\"!customTemplate()\"\n [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n #a=\"axListNavigationItem\"\n axListNavigationItem\n (click)=\"onItemClick(item)\"\n (onKeypress)=\"keyPress($event, item)\"\n >\n @if (customTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"customTemplate()\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n level: level,\n isActive: a.isActive(),\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-command-item\">\n @if (item.icon) {\n <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n }\n <span class=\"ax-command-item-text\">{{ item.text }}</span>\n </div>\n }\n </div>\n\n @if (item.children?.length) {\n @for (child of item.children; track child.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n >\n </ng-container>\n }\n }\n </ng-template>\n</div>\n\n@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n <div class=\"ax-command-footer\">\n @if (footerButtons().navigation) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↑']\"></ax-kbd-item>\n <ax-kbd-item [keys]=\"['↓']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n </div>\n }\n\n @if (footerButtons().select) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↩']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to select</ax-text>\n </div>\n }\n\n @if (footerButtons().close) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to close</ax-text>\n </div>\n }\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-command{display:block;overflow:hidden;border-radius:var(--radius-lg, .5rem);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:rgba(var(--ax-sys-color-border-light-surface))}ax-command .ax-search-box-container{background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 3)}ax-command .ax-search-box-container:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}ax-command .ax-command-container{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-surface));scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{display:block;padding:calc(var(--spacing, .25rem) * 3);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lighter-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lighter-surface)) 50%,transparent)}}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-divider{height:1px;width:100%;background-color:rgba(var(--ax-sys-color-surface))}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;padding:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-container .ax-command-item-container .ax-command-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:rgba(var(--ax-sys-color-on-lighter-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lighter-surface)) 50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{display:flex;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}ax-command .ax-command-container .ax-remove-default-select-style{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-command .ax-kbd{display:flex;height:100%;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-footer{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 6);border-bottom-right-radius:var(--radius-lg, .5rem);border-bottom-left-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding:calc(var(--spacing, .25rem) * 3);color:rgba(var(--ax-sys-color-on-light-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-light-surface)) 50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
154
|
+
], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "@if (searchBar()) {\n <div class=\"ax-search-box-container\">\n <ax-search-box\n #f\n [delayTime]=\"20\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [(ngModel)]=\"searchValue\"\n (onFocus)=\"focusHandler($event)\"\n (onBlur)=\"blurHandler($event)\"\n (onKeyDown)=\"searchEscapeHandler($event)\"\n [axAutoFocus]=\"true\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n}\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n @if (value?.pinned && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.pinned.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n }\n\n @for (item of value.pinned.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (value?.list && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.list.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n } @else if (divider()) {\n <div class=\"ax-command-divider\"></div>\n }\n\n @for (item of value.list.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (displayItems() && searchValue()) {\n <div class=\"ax-command-item-wrapper\">\n @for (item of displayItems(); track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n } @empty {\n <div class=\"ax-command-not-found\">\n <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n </div>\n }\n </div>\n }\n\n <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n <div\n (mouseenter)=\"activeHandler(listNavigation, a)\"\n class=\"ax-remove-default-select-style\"\n [class.ax-command-item-container]=\"!customTemplate()\"\n [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n #a=\"axListNavigationItem\"\n axListNavigationItem\n (click)=\"onItemClick(item)\"\n (onKeypress)=\"keyPress($event, item)\"\n >\n @if (customTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"customTemplate()\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n level: level,\n isActive: a.isActive(),\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-command-item\">\n @if (item.icon) {\n <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n }\n <span class=\"ax-command-item-text\">{{ item.text }}</span>\n </div>\n }\n </div>\n\n @if (item.children?.length) {\n @for (child of item.children; track child.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n >\n </ng-container>\n }\n }\n </ng-template>\n</div>\n\n@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n <div class=\"ax-command-footer\">\n @if (footerButtons().navigation) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↑']\"></ax-kbd-item>\n <ax-kbd-item [keys]=\"['↓']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n </div>\n }\n\n @if (footerButtons().select) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↩']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to select</ax-text>\n </div>\n }\n\n @if (footerButtons().close) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to close</ax-text>\n </div>\n }\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-command{display:block;overflow:hidden;border-radius:var(--radius-lg, .5rem);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:rgba(var(--ax-sys-color-border-light-surface))}ax-command .ax-search-box-container{background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 3)}ax-command .ax-search-box-container:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}ax-command .ax-command-container{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-surface));scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{display:block;padding:calc(var(--spacing, .25rem) * 3);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lighter-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lighter-surface)) 50%,transparent)}}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-divider{height:1px;width:100%;background-color:rgba(var(--ax-sys-color-surface))}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;padding:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-container .ax-command-item-container .ax-command-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:rgba(var(--ax-sys-color-on-lighter-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lighter-surface)) 50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{display:flex;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}ax-command .ax-command-container .ax-remove-default-select-style{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-command .ax-kbd{display:flex;height:100%;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-command .ax-command-footer{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 6);border-bottom-right-radius:var(--radius-lg, .5rem);border-bottom-left-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding:calc(var(--spacing, .25rem) * 3);color:rgba(var(--ax-sys-color-on-light-surface))}@supports (color: color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-light-surface)) 50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 3)}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
155
155
|
}], propDecorators: { searchBox: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onEscape: [{ type: i0.Output, args: ["onEscape"] }], onSearchBoxFocus: [{ type: i0.Output, args: ["onSearchBoxFocus"] }], onSearchBoxBlur: [{ type: i0.Output, args: ["onSearchBoxBlur"] }], listNavigation: [{ type: i0.ViewChild, args: ['l', { ...{ read: AXListNavigationDirective }, isSignal: true }] }], listNav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], searchBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBar", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], searchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchKey", required: false }] }], footerButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtons", required: false }] }] } });
|
|
156
156
|
|
|
157
157
|
const COMPONENT = [AXCommandComponent];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-components-command.mjs","sources":["../../../../packages/components/command/src/lib/command.component.ts","../../../../packages/components/command/src/lib/command.component.html","../../../../packages/components/command/src/lib/command.module.ts","../../../../packages/components/command/src/lib/command.type.ts","../../../../packages/components/command/src/acorex-components-command.ts"],"sourcesContent":["import {\n AXAutoFocusDirective,\n AXComponent,\n AXFocusEvent,\n AXHtmlEvent,\n AXValuableComponent,\n MXInputBaseValueComponent,\n MXLookComponent,\n} from '@acorex/cdk/common';\nimport {\n AXListNavigationDirective,\n AXListNavigationItemDirective,\n AXListNavigationModule,\n} from '@acorex/cdk/list-navigation';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';\nimport { AXSearchBoxComponent, AXSearchBoxModule } from '@acorex/components/search-box';\nimport { CommonModule } from '@angular/common';\nimport {\n Component,\n computed,\n forwardRef,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\nimport { AXCommandComponentEvent, AXCommandFooter, AXCommandItem, AXCommandMenuItem } from './command.type';\n\n@Component({\n selector: 'ax-command',\n templateUrl: './command.component.html',\n styleUrl: './command.component.css',\n encapsulation: ViewEncapsulation.None,\n imports: [\n AXSearchBoxModule,\n AXDecoratorModule,\n CommonModule,\n FormsModule,\n AXListNavigationModule,\n AXKBDComponent,\n AXKBDItemComponent,\n AXAutoFocusDirective,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXCommandComponent),\n multi: true,\n },\n { provide: AXComponent, useExisting: AXCommandComponent },\n { provide: AXValuableComponent, useExisting: AXCommandComponent },\n ],\n\n inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'],\n})\nexport class AXCommandComponent extends classes(MXInputBaseValueComponent<AXCommandMenuItem>, MXLookComponent) {\n protected searchValue = signal('');\n protected searchBox = viewChild<AXSearchBoxComponent>('f');\n readonly onSubmit = output<AXCommandComponentEvent>();\n readonly onEscape = output<AXHtmlEvent<KeyboardEvent>>();\n readonly onSearchBoxFocus = output<AXHtmlEvent<FocusEvent>>();\n readonly onSearchBoxBlur = output<AXHtmlEvent<FocusEvent>>();\n protected listNavigation = viewChild('l', { read: AXListNavigationDirective });\n private listNav = viewChild(AXListNavigationDirective);\n\n /**\n * The custom template used for rendering content.\n *\n * @param {TemplateRef<any>} customTemplate\n */\n customTemplate = input<TemplateRef<any>>();\n\n searchBar = input(true);\n\n divider = input(true);\n\n searchKey = input<string | null>(null);\n\n footerButtons = input<AXCommandFooter>({ navigation: true, select: true, close: true });\n\n protected displayItems = computed<AXCommandItem[]>(() => {\n const searchValue = this.searchValue();\n let filtered: AXCommandItem[];\n if (searchValue) {\n filtered = this.filterRecursive(this.value.list?.items ?? [], searchValue);\n } else {\n filtered = [];\n }\n return filtered;\n });\n\n protected focusHandler(e: AXFocusEvent) {\n this.onSearchBoxFocus.emit({ component: this, nativeEvent: e.nativeEvent });\n }\n\n protected blurHandler(e: AXFocusEvent) {\n this.onSearchBoxBlur.emit({ component: this, nativeEvent: e.nativeEvent });\n }\n\n private filterRecursive(items: any[], value: string): any[] {\n const lowerSignal = value.toLowerCase();\n const searchKey = this.searchKey();\n\n return items\n .map((item) => {\n let isMatch: boolean;\n if (searchKey) {\n isMatch = item[searchKey]?.toLowerCase().includes(lowerSignal);\n } else {\n isMatch = item.text?.toLowerCase().includes(lowerSignal) || item.href?.toLowerCase().includes(lowerSignal);\n }\n\n const filteredChildren = item.children ? this.filterRecursive(item.children, value) : [];\n\n if (isMatch || filteredChildren.length > 0) {\n return {\n ...item,\n children: filteredChildren,\n };\n }\n\n return null;\n })\n .filter(Boolean);\n }\n\n protected onItemClick(item: AXCommandItem) {\n this.onSubmit.emit({ data: item, component: this });\n }\n\n protected keyPress(e: AXHtmlEvent<KeyboardEvent>, item: AXCommandItem) {\n if (e.nativeEvent.key === 'Enter' || e.nativeEvent.code === 'Space') {\n e.nativeEvent.stopPropagation();\n e.nativeEvent.preventDefault();\n this.onSubmit.emit({ data: item, component: this });\n }\n }\n\n protected searchEscapeHandler(e: AXHtmlEvent<KeyboardEvent>) {\n if (e.nativeEvent.key === 'Escape') {\n this.onEscape.emit({ component: this, nativeEvent: e.nativeEvent });\n }\n if (e.nativeEvent.key === 'ArrowDown') {\n this.listNavigation().focusOnIndex(0);\n }\n }\n\n protected closeHandler(e: AXHtmlEvent<KeyboardEvent>) {\n if (!this.listNav().activeIndex() && e.nativeEvent.key === 'ArrowUp') {\n this.searchBox().focus();\n }\n\n if (\n e.nativeEvent.key === 'ArrowUp' ||\n e.nativeEvent.key === 'ArrowDown' ||\n e.nativeEvent.key === 'Tab' ||\n e.nativeEvent.key === 'Shift'\n )\n return;\n\n this.searchBox().focus();\n }\n\n protected activeHandler(l: AXListNavigationDirective, i: AXListNavigationItemDirective) {\n l?.navigateTo(i);\n }\n\n /** Moves focus to the command search field (when the search bar is visible). */\n focusSearch(): void {\n this.searchBox()?.focus();\n }\n}\n","@if (searchBar()) {\n <div class=\"ax-search-box-container\">\n <ax-search-box\n #f\n [delayTime]=\"20\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [(ngModel)]=\"searchValue\"\n (onFocus)=\"focusHandler($event)\"\n (onBlur)=\"blurHandler($event)\"\n (onKeyDown)=\"searchEscapeHandler($event)\"\n [axAutoFocus]=\"true\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n}\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n @if (value?.pinned && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.pinned.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n }\n\n @for (item of value.pinned.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (value?.list && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.list.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n } @else if (divider()) {\n <div class=\"ax-command-divider\"></div>\n }\n\n @for (item of value.list.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (displayItems() && searchValue()) {\n <div class=\"ax-command-item-wrapper\">\n @for (item of displayItems(); track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n } @empty {\n <div class=\"ax-command-not-found\">\n <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n </div>\n }\n </div>\n }\n\n <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n <div\n (mouseenter)=\"activeHandler(listNavigation, a)\"\n class=\"ax-remove-default-select-style\"\n [class.ax-command-item-container]=\"!customTemplate()\"\n [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n #a=\"axListNavigationItem\"\n axListNavigationItem\n (click)=\"onItemClick(item)\"\n (onKeypress)=\"keyPress($event, item)\"\n >\n @if (customTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"customTemplate()\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n level: level,\n isActive: a.isActive(),\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-command-item\">\n @if (item.icon) {\n <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n }\n <span class=\"ax-command-item-text\">{{ item.text }}</span>\n </div>\n }\n </div>\n\n @if (item.children?.length) {\n @for (child of item.children; track child.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n >\n </ng-container>\n }\n }\n </ng-template>\n</div>\n\n@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n <div class=\"ax-command-footer\">\n @if (footerButtons().navigation) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↑']\"></ax-kbd-item>\n <ax-kbd-item [keys]=\"['↓']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n </div>\n }\n\n @if (footerButtons().select) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↩']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to select</ax-text>\n </div>\n }\n\n @if (footerButtons().close) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to close</ax-text>\n </div>\n }\n </div>\n}\n","import { NgModule } from '@angular/core';\nimport { AXCommandComponent } from './command.component';\n\nconst COMPONENT = [AXCommandComponent];\nconst MODULES = [];\n\n@NgModule({\n imports: [...MODULES, ...COMPONENT],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXCommandModule {}\n","import { AXEvent } from '@acorex/cdk/common';\n\nexport type AXCommandItem = {\n id: string | number;\n text: string;\n icon?: string;\n href?: string;\n children?: AXCommandItem[];\n index?: number;\n data?: any;\n};\n\ntype forceId = {\n id: string | number;\n};\n\nexport type AXCommandMenuItem<T extends forceId = AXCommandItem> = {\n pinned?: { title?: string; items: T[] };\n list: { title?: string; items: T[] };\n};\n\nexport class AXCommandComponentEvent extends AXEvent {\n data: AXCommandItem;\n}\n\nexport type AXCommandFooter = { navigation: boolean; select: boolean; close: boolean };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA6DM,MAAO,kBAAmB,SAAQ,OAAO,EAAC,yBAA4C,GAAE,eAAe,CAAC,CAAA;AA3B9G,IAAA,WAAA,GAAA;;QA4BY,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,EAAE;wFAAC;QACxB,IAAA,CAAA,SAAS,GAAG,SAAS,CAAuB,GAAG;sFAAC;QACjD,IAAA,CAAA,QAAQ,GAAG,MAAM,EAA2B;QAC5C,IAAA,CAAA,QAAQ,GAAG,MAAM,EAA8B;QAC/C,IAAA,CAAA,gBAAgB,GAAG,MAAM,EAA2B;QACpD,IAAA,CAAA,eAAe,GAAG,MAAM,EAA2B;QAClD,IAAA,CAAA,cAAc,GAAG,SAAS,CAAC,GAAG,sFAAI,IAAI,EAAE,yBAAyB,EAAA,CAAG;QACtE,IAAA,CAAA,OAAO,GAAG,SAAS,CAAC,yBAAyB;oFAAC;AAEtD;;;;AAIG;AACH,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK;sGAAoB;QAE1C,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,IAAI;sFAAC;QAEvB,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,IAAI;oFAAC;QAErB,IAAA,CAAA,SAAS,GAAG,KAAK,CAAgB,IAAI;sFAAC;AAEtC,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAkB,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;0FAAC;AAE7E,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAkB,MAAK;AACtD,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE;AACtC,YAAA,IAAI,QAAyB;YAC7B,IAAI,WAAW,EAAE;AACf,gBAAA,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,WAAW,CAAC;YAC5E;iBAAO;gBACL,QAAQ,GAAG,EAAE;YACf;AACA,YAAA,OAAO,QAAQ;QACjB,CAAC;yFAAC;AAkFH,IAAA;AAhFW,IAAA,YAAY,CAAC,CAAe,EAAA;AACpC,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;IAC7E;AAEU,IAAA,WAAW,CAAC,CAAe,EAAA;AACnC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5E;IAEQ,eAAe,CAAC,KAAY,EAAE,KAAa,EAAA;AACjD,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE;AACvC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;AAElC,QAAA,OAAO;AACJ,aAAA,GAAG,CAAC,CAAC,IAAI,KAAI;AACZ,YAAA,IAAI,OAAgB;YACpB,IAAI,SAAS,EAAE;AACb,gBAAA,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;YAChE;iBAAO;gBACL,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;YAC5G;YAEA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,EAAE;YAExF,IAAI,OAAO,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC1C,OAAO;AACL,oBAAA,GAAG,IAAI;AACP,oBAAA,QAAQ,EAAE,gBAAgB;iBAC3B;YACH;AAEA,YAAA,OAAO,IAAI;AACb,QAAA,CAAC;aACA,MAAM,CAAC,OAAO,CAAC;IACpB;AAEU,IAAA,WAAW,CAAC,IAAmB,EAAA;AACvC,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrD;IAEU,QAAQ,CAAC,CAA6B,EAAE,IAAmB,EAAA;AACnE,QAAA,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,KAAK,OAAO,EAAE;AACnE,YAAA,CAAC,CAAC,WAAW,CAAC,eAAe,EAAE;AAC/B,YAAA,CAAC,CAAC,WAAW,CAAC,cAAc,EAAE;AAC9B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;QACrD;IACF;AAEU,IAAA,mBAAmB,CAAC,CAA6B,EAAA;QACzD,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,QAAQ,EAAE;AAClC,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;QACrE;QACA,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,WAAW,EAAE;YACrC,IAAI,CAAC,cAAc,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;QACvC;IACF;AAEU,IAAA,YAAY,CAAC,CAA6B,EAAA;AAClD,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,SAAS,EAAE;AACpE,YAAA,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE;QAC1B;AAEA,QAAA,IACE,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,SAAS;AAC/B,YAAA,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,WAAW;AACjC,YAAA,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,KAAK;AAC3B,YAAA,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,OAAO;YAE7B;AAEF,QAAA,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE;IAC1B;IAEU,aAAa,CAAC,CAA4B,EAAE,CAAgC,EAAA;AACpF,QAAA,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;IAClB;;IAGA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE;IAC3B;8GAnHW,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,SAAA,EAZlB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,kBAAkB,CAAC;AACjD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE;AACzD,YAAA,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,kBAAkB,EAAE;SAClE,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,GAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,GAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAWiD,yBAAyB,uEAC/C,yBAAyB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrEvD,0qJAiJA,EAAA,MAAA,EAAA,CAAA,olKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDzGI,iBAAiB,0ZACjB,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,+BAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,QAAA,EAAA,8IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACjB,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,WAAW,8VACX,sBAAsB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,EAAA,YAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,6BAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtB,cAAc,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,kBAAkB,mHAClB,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAcX,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBA3B9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,aAAA,EAGP,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;wBACP,iBAAiB;wBACjB,iBAAiB;wBACjB,YAAY;wBACZ,WAAW;wBACX,sBAAsB;wBACtB,cAAc;wBACd,kBAAkB;wBAClB,oBAAoB;qBACrB,EAAA,SAAA,EACU;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,wBAAwB,CAAC;AACjD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,oBAAoB,EAAE;AACzD,wBAAA,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,oBAAoB,EAAE;AAClE,qBAAA,EAAA,MAAA,EAEO,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAA,QAAA,EAAA,0qJAAA,EAAA,MAAA,EAAA,CAAA,olKAAA,CAAA,EAAA;uEAIrC,GAAG,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,gBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAKpB,GAAG,EAAA,EAAA,GAAE,EAAE,IAAI,EAAE,yBAAyB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MACjD,yBAAyB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AElEvD,MAAM,SAAS,GAAG,CAAC,kBAAkB,CAAC;AACtC,MAAM,OAAO,GAAG,EAAE;MAOL,eAAe,CAAA;8GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAf,eAAe,EAAA,OAAA,EAAA,CART,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAAlB,kBAAkB,CAAA,EAAA,CAAA,CAAA;+GAQxB,eAAe,EAAA,OAAA,EAAA,CAJb,OAAO,EAAK,SAAS,CAAA,EAAA,CAAA,CAAA;;2FAIvB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAL3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,GAAG,SAAS,CAAC;AACnC,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACWK,MAAO,uBAAwB,SAAQ,OAAO,CAAA;AAEnD;;ACvBD;;AAEG;;"}
|
|
1
|
+
{"version":3,"file":"acorex-components-command.mjs","sources":["../../../../packages/components/command/src/lib/command.component.ts","../../../../packages/components/command/src/lib/command.component.html","../../../../packages/components/command/src/lib/command.module.ts","../../../../packages/components/command/src/lib/command.type.ts","../../../../packages/components/command/src/acorex-components-command.ts"],"sourcesContent":["import {\n AXAutoFocusDirective,\n AXComponent,\n AXFocusEvent,\n AXHtmlEvent,\n AXValuableComponent,\n MXInputBaseValueComponent,\n MXLookComponent,\n} from '@acorex/cdk/common';\nimport {\n AXListNavigationDirective,\n AXListNavigationItemDirective,\n AXListNavigationModule,\n} from '@acorex/cdk/list-navigation';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';\nimport { AXSearchBoxComponent, AXSearchBoxModule } from '@acorex/components/search-box';\nimport { CommonModule } from '@angular/common';\nimport {\n Component,\n computed,\n forwardRef,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\nimport { AXCommandComponentEvent, AXCommandFooter, AXCommandItem, AXCommandMenuItem } from './command.type';\n\n@Component({\n selector: 'ax-command',\n templateUrl: './command.component.html',\n styleUrl: './command.component.css',\n encapsulation: ViewEncapsulation.None,\n imports: [\n AXSearchBoxModule,\n AXDecoratorModule,\n CommonModule,\n FormsModule,\n AXListNavigationModule,\n AXKBDComponent,\n AXKBDItemComponent,\n AXAutoFocusDirective,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXCommandComponent),\n multi: true,\n },\n { provide: AXComponent, useExisting: AXCommandComponent },\n { provide: AXValuableComponent, useExisting: AXCommandComponent },\n ],\n\n inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'],\n})\nexport class AXCommandComponent extends classes(MXInputBaseValueComponent<AXCommandMenuItem>, MXLookComponent) {\n protected searchValue = signal('');\n protected searchBox = viewChild<AXSearchBoxComponent>('f');\n readonly onSubmit = output<AXCommandComponentEvent>();\n readonly onEscape = output<AXHtmlEvent<KeyboardEvent>>();\n readonly onSearchBoxFocus = output<AXHtmlEvent<FocusEvent>>();\n readonly onSearchBoxBlur = output<AXHtmlEvent<FocusEvent>>();\n protected listNavigation = viewChild('l', { read: AXListNavigationDirective });\n private listNav = viewChild(AXListNavigationDirective);\n\n /**\n * The custom template used for rendering content.\n *\n * @param {TemplateRef<any>} customTemplate\n */\n customTemplate = input<TemplateRef<any>>();\n\n searchBar = input(true);\n\n divider = input(true);\n\n searchKey = input<string | null>(null);\n\n footerButtons = input<AXCommandFooter>({ navigation: true, select: true, close: true });\n\n protected displayItems = computed<AXCommandItem[]>(() => {\n const searchValue = this.searchValue();\n let filtered: AXCommandItem[];\n if (searchValue) {\n filtered = this.filterRecursive(this.value.list?.items ?? [], searchValue);\n } else {\n filtered = [];\n }\n return filtered;\n });\n\n protected focusHandler(e: AXFocusEvent) {\n this.onSearchBoxFocus.emit({ component: this, nativeEvent: e.nativeEvent });\n }\n\n protected blurHandler(e: AXFocusEvent) {\n this.onSearchBoxBlur.emit({ component: this, nativeEvent: e.nativeEvent });\n }\n\n private filterRecursive(items: any[], value: string): any[] {\n const lowerSignal = value.toLowerCase();\n const searchKey = this.searchKey();\n\n return items\n .map((item) => {\n let isMatch: boolean;\n if (searchKey) {\n isMatch = item[searchKey]?.toLowerCase().includes(lowerSignal);\n } else {\n isMatch = item.text?.toLowerCase().includes(lowerSignal) || item.href?.toLowerCase().includes(lowerSignal);\n }\n\n const filteredChildren = item.children ? this.filterRecursive(item.children, value) : [];\n\n if (isMatch || filteredChildren.length > 0) {\n return {\n ...item,\n children: filteredChildren,\n };\n }\n\n return null;\n })\n .filter(Boolean);\n }\n\n protected onItemClick(item: AXCommandItem) {\n this.onSubmit.emit({ data: item, component: this });\n }\n\n protected keyPress(e: AXHtmlEvent<KeyboardEvent>, item: AXCommandItem) {\n if (e.nativeEvent.key === 'Enter' || e.nativeEvent.code === 'Space') {\n e.nativeEvent.stopPropagation();\n e.nativeEvent.preventDefault();\n this.onSubmit.emit({ data: item, component: this });\n }\n }\n\n protected searchEscapeHandler(e: AXHtmlEvent<KeyboardEvent>) {\n if (e.nativeEvent.key === 'Escape') {\n this.onEscape.emit({ component: this, nativeEvent: e.nativeEvent });\n }\n if (e.nativeEvent.key === 'ArrowDown') {\n this.listNavigation().focusOnIndex(0);\n }\n }\n\n protected closeHandler(e: AXHtmlEvent<KeyboardEvent>) {\n if (!this.listNav().activeIndex() && e.nativeEvent.key === 'ArrowUp') {\n this.searchBox().focus();\n }\n\n if (\n e.nativeEvent.key === 'ArrowUp' ||\n e.nativeEvent.key === 'ArrowDown' ||\n e.nativeEvent.key === 'Tab' ||\n e.nativeEvent.key === 'Shift'\n )\n return;\n\n this.searchBox().focus();\n }\n\n protected activeHandler(l: AXListNavigationDirective, i: AXListNavigationItemDirective) {\n l?.navigateTo(i);\n }\n\n /** Moves focus to the command search field (when the search bar is visible). */\n focusSearch(): void {\n this.searchBox()?.focus();\n }\n}\n","@if (searchBar()) {\n <div class=\"ax-search-box-container\">\n <ax-search-box\n #f\n [delayTime]=\"20\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [(ngModel)]=\"searchValue\"\n (onFocus)=\"focusHandler($event)\"\n (onBlur)=\"blurHandler($event)\"\n (onKeyDown)=\"searchEscapeHandler($event)\"\n [axAutoFocus]=\"true\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n}\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n @if (value?.pinned && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.pinned.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n }\n\n @for (item of value.pinned.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (value?.list && !searchValue()) {\n <div class=\"ax-command-item-pinned-container\">\n @if (value.list.title) {\n <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n } @else if (divider()) {\n <div class=\"ax-command-divider\"></div>\n }\n\n @for (item of value.list.items; track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n }\n </div>\n }\n\n @if (displayItems() && searchValue()) {\n <div class=\"ax-command-item-wrapper\">\n @for (item of displayItems(); track item.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n >\n </ng-container>\n } @empty {\n <div class=\"ax-command-not-found\">\n <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n </div>\n }\n </div>\n }\n\n <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n <div\n (mouseenter)=\"activeHandler(listNavigation, a)\"\n class=\"ax-remove-default-select-style\"\n [class.ax-command-item-container]=\"!customTemplate()\"\n [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n #a=\"axListNavigationItem\"\n axListNavigationItem\n (click)=\"onItemClick(item)\"\n (onKeypress)=\"keyPress($event, item)\"\n >\n @if (customTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"customTemplate()\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n level: level,\n isActive: a.isActive(),\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-command-item\">\n @if (item.icon) {\n <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n }\n <span class=\"ax-command-item-text\">{{ item.text }}</span>\n </div>\n }\n </div>\n\n @if (item.children?.length) {\n @for (child of item.children; track child.id) {\n <ng-container\n [ngTemplateOutlet]=\"renderItem\"\n [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n >\n </ng-container>\n }\n }\n </ng-template>\n</div>\n\n@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n <div class=\"ax-command-footer\">\n @if (footerButtons().navigation) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↑']\"></ax-kbd-item>\n <ax-kbd-item [keys]=\"['↓']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n </div>\n }\n\n @if (footerButtons().select) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['↩']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to select</ax-text>\n </div>\n }\n\n @if (footerButtons().close) {\n <div class=\"ax-kbd-footer\">\n <ax-kbd class=\"ax-kbd\">\n <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n </ax-kbd>\n <ax-text class=\"ax-kbd-text\">to close</ax-text>\n </div>\n }\n </div>\n}\n","import { NgModule } from '@angular/core';\nimport { AXCommandComponent } from './command.component';\n\nconst COMPONENT = [AXCommandComponent];\nconst MODULES = [];\n\n@NgModule({\n imports: [...MODULES, ...COMPONENT],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXCommandModule {}\n","import { AXEvent } from '@acorex/cdk/common';\n\nexport type AXCommandItem = {\n id: string | number;\n text: string;\n icon?: string;\n href?: string;\n children?: AXCommandItem[];\n index?: number;\n data?: any;\n};\n\ntype forceId = {\n id: string | number;\n};\n\nexport type AXCommandMenuItem<T extends forceId = AXCommandItem> = {\n pinned?: { title?: string; items: T[] };\n list: { title?: string; items: T[] };\n};\n\nexport class AXCommandComponentEvent extends AXEvent {\n data: AXCommandItem;\n}\n\nexport type AXCommandFooter = { navigation: boolean; select: boolean; close: boolean };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -2375,6 +2375,8 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
2375
2375
|
*/
|
|
2376
2376
|
this.treeFillResolvedWidths = signal(new Map(), /* @ts-ignore */
|
|
2377
2377
|
...(ngDevMode ? [{ debugName: "treeFillResolvedWidths" }] : /* istanbul ignore next */ []));
|
|
2378
|
+
/** Coalesces tree remeasure until expanded rows are in the DOM. */
|
|
2379
|
+
this.treeFillAfterExpandTimer = null;
|
|
2378
2380
|
/** @ignore */
|
|
2379
2381
|
this.resizeObserver = null;
|
|
2380
2382
|
/**
|
|
@@ -2758,6 +2760,13 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
2758
2760
|
this.displayedRows.update((prev) => this.toggleExpanded(prev, expandedItem, children));
|
|
2759
2761
|
}
|
|
2760
2762
|
this.scheduleTextHighlight();
|
|
2763
|
+
this.scheduleTreeFillAfterExpand();
|
|
2764
|
+
});
|
|
2765
|
+
this.destroyRef.onDestroy(() => {
|
|
2766
|
+
if (this.treeFillAfterExpandTimer != null) {
|
|
2767
|
+
clearTimeout(this.treeFillAfterExpandTimer);
|
|
2768
|
+
this.treeFillAfterExpandTimer = null;
|
|
2769
|
+
}
|
|
2761
2770
|
});
|
|
2762
2771
|
this.dataSource.onItemRefreshChildren.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
|
|
2763
2772
|
const { id } = data;
|
|
@@ -2837,9 +2846,10 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
2837
2846
|
}
|
|
2838
2847
|
/**
|
|
2839
2848
|
* Tree expand columns keep a content minimum and grow into leftover table space for nested indent.
|
|
2849
|
+
* `expandHandler` opts any column in, including hosts that extend the base column instead of `ax-text-column`.
|
|
2840
2850
|
*/
|
|
2841
2851
|
isTreeFillColumn(column) {
|
|
2842
|
-
return column
|
|
2852
|
+
return column.expandHandler === true;
|
|
2843
2853
|
}
|
|
2844
2854
|
/**
|
|
2845
2855
|
* Tree fill columns must never keep a pixel width from auto-fit; they absorb remaining table width.
|
|
@@ -3163,7 +3173,7 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3163
3173
|
event.stopPropagation();
|
|
3164
3174
|
const columnIndex = this.columnsList().indexOf(column);
|
|
3165
3175
|
if (columnIndex !== -1) {
|
|
3166
|
-
this.autoFitColumn(columnIndex);
|
|
3176
|
+
this.autoFitColumn(columnIndex, { isUserInteraction: true });
|
|
3167
3177
|
}
|
|
3168
3178
|
}
|
|
3169
3179
|
/**
|
|
@@ -3285,10 +3295,9 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3285
3295
|
firstEndColumn['isFirstFixedColumn'] = true;
|
|
3286
3296
|
}
|
|
3287
3297
|
/**
|
|
3288
|
-
* Auto-fits columns that have width
|
|
3289
|
-
*
|
|
3290
|
-
*
|
|
3291
|
-
* @ignore
|
|
3298
|
+
* Auto-fits columns that have `width: 'auto'` (captured at init) and columns awaiting a full pass after header-only sizing.
|
|
3299
|
+
* The table runs a header-only pass after view init and a best-effort pass ~100ms after data loads; cell templates that
|
|
3300
|
+
* render asynchronously should call {@link autoFitColumnByName} or this method again once content is in the DOM.
|
|
3292
3301
|
*/
|
|
3293
3302
|
autoFitColumnsWithAutoWidth(options = {}) {
|
|
3294
3303
|
const headerOnly = options.headerOnly ?? false;
|
|
@@ -3316,9 +3325,7 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3316
3325
|
console.error(`Failed to auto-fit column ${index}:`, error);
|
|
3317
3326
|
}
|
|
3318
3327
|
});
|
|
3319
|
-
this.
|
|
3320
|
-
this.enforceTreeFillColumnWidths();
|
|
3321
|
-
this.updateColumnLayoutWidths();
|
|
3328
|
+
this.refreshTreeFillLayout(headerOnly);
|
|
3322
3329
|
}
|
|
3323
3330
|
/**
|
|
3324
3331
|
* Auto-fits all resizable columns to their content width.
|
|
@@ -3351,15 +3358,14 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3351
3358
|
console.error(`Failed to auto-fit column ${index}:`, error);
|
|
3352
3359
|
}
|
|
3353
3360
|
});
|
|
3354
|
-
this.
|
|
3355
|
-
this.enforceTreeFillColumnWidths();
|
|
3356
|
-
this.updateColumnLayoutWidths();
|
|
3361
|
+
this.refreshTreeFillLayout(false);
|
|
3357
3362
|
}
|
|
3358
3363
|
/**
|
|
3359
3364
|
* Auto-fits a single column to its content width.
|
|
3360
3365
|
* Similar to Excel's "AutoFit Column Width" feature.
|
|
3361
3366
|
*
|
|
3362
3367
|
* @param columnIndex - 0-based index in the columns `QueryList`.
|
|
3368
|
+
* @param options - Measurement options; programmatic calls default to `isUserInteraction: false`.
|
|
3363
3369
|
*/
|
|
3364
3370
|
autoFitColumn(columnIndex, options = {}) {
|
|
3365
3371
|
if (!isPlatformBrowser(this.platformID)) {
|
|
@@ -3371,6 +3377,8 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3371
3377
|
return;
|
|
3372
3378
|
}
|
|
3373
3379
|
if (this.isTreeFillColumn(column)) {
|
|
3380
|
+
// Keep `width: 'auto'` and do not emit a resize. Hosts persist pixel widths from that event.
|
|
3381
|
+
this.refreshTreeFillLayout(options.headerOnly ?? false);
|
|
3374
3382
|
return;
|
|
3375
3383
|
}
|
|
3376
3384
|
const finalWidth = this.measureColumnContentWidth(columnIndex, options);
|
|
@@ -3389,7 +3397,6 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3389
3397
|
this.calculateStickyColumnsPositions();
|
|
3390
3398
|
}, 0);
|
|
3391
3399
|
}
|
|
3392
|
-
// Emit column size changed event
|
|
3393
3400
|
this.onColumnSizeChanged.emit({
|
|
3394
3401
|
type: 'end',
|
|
3395
3402
|
data: {
|
|
@@ -3397,7 +3404,7 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3397
3404
|
width: column.width,
|
|
3398
3405
|
dataField: column.name,
|
|
3399
3406
|
},
|
|
3400
|
-
isUserInteraction:
|
|
3407
|
+
isUserInteraction: options.isUserInteraction ?? false,
|
|
3401
3408
|
component: this,
|
|
3402
3409
|
});
|
|
3403
3410
|
this.updateColumnLayoutWidths();
|
|
@@ -3587,6 +3594,28 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3587
3594
|
el.style.flex = '0 0 auto';
|
|
3588
3595
|
});
|
|
3589
3596
|
}
|
|
3597
|
+
/**
|
|
3598
|
+
* Re-measures tree-expander columns and assigns leftover wrapper width.
|
|
3599
|
+
* Does not write a pixel `column.width` or emit `onColumnSizeChanged`.
|
|
3600
|
+
*/
|
|
3601
|
+
refreshTreeFillLayout(headerOnly) {
|
|
3602
|
+
this.measureTreeFillColumns(headerOnly);
|
|
3603
|
+
this.enforceTreeFillColumnWidths();
|
|
3604
|
+
this.updateColumnLayoutWidths();
|
|
3605
|
+
}
|
|
3606
|
+
/** Nested rows paint after `onItemExpanded`; measure indent once they are in the DOM. */
|
|
3607
|
+
scheduleTreeFillAfterExpand() {
|
|
3608
|
+
if (!isPlatformBrowser(this.platformID) || !this.columnsList().some((column) => this.isTreeFillColumn(column))) {
|
|
3609
|
+
return;
|
|
3610
|
+
}
|
|
3611
|
+
if (this.treeFillAfterExpandTimer != null) {
|
|
3612
|
+
clearTimeout(this.treeFillAfterExpandTimer);
|
|
3613
|
+
}
|
|
3614
|
+
this.treeFillAfterExpandTimer = setTimeout(() => {
|
|
3615
|
+
this.treeFillAfterExpandTimer = null;
|
|
3616
|
+
this.refreshTreeFillLayout(false);
|
|
3617
|
+
}, 0);
|
|
3618
|
+
}
|
|
3590
3619
|
/**
|
|
3591
3620
|
* Stores the content width of tree-expander columns, including visible nested indent.
|
|
3592
3621
|
*/
|
|
@@ -3716,6 +3745,11 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
3716
3745
|
}
|
|
3717
3746
|
/**
|
|
3718
3747
|
* Auto-fits a single column by its `name` / data field.
|
|
3748
|
+
* Call after async cell content has rendered when `width` is `'auto'`.
|
|
3749
|
+
* A tree expand column keeps `width: 'auto'` and refreshes the shared tree layout instead of pinning a pixel width.
|
|
3750
|
+
*
|
|
3751
|
+
* @param columnName - Column `name` / data field.
|
|
3752
|
+
* @param options - Measurement options; programmatic calls default to `isUserInteraction: false`.
|
|
3719
3753
|
*/
|
|
3720
3754
|
autoFitColumnByName(columnName, options = {}) {
|
|
3721
3755
|
const columnIndex = this.columnsList().findIndex((column) => column.name === columnName);
|