@acorex/components 7.1.36 → 7.1.37
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/button/src/button.component.d.ts +3 -3
- package/common/src/classes/styles.class.d.ts +1 -1
- package/common/src/components/color-component.class.d.ts +5 -5
- package/data-pager/src/data-pager-next-buttons.components.d.ts +3 -3
- package/data-pager/src/data-pager-numeric-selector.component.d.ts +3 -3
- package/data-pager/src/data-pager-pagesize-dropdown.component.d.ts +3 -3
- package/data-pager/src/data-pager-prev-buttons.component.d.ts +3 -3
- package/esm2022/alert/src/alert.component.mjs +2 -2
- package/esm2022/avatar/src/avatar.component.mjs +2 -2
- package/esm2022/badge/src/badge.component.mjs +2 -2
- package/esm2022/button/src/button-item.component.mjs +6 -6
- package/esm2022/button/src/button.component.mjs +14 -31
- package/esm2022/chips/src/chips.component.mjs +4 -4
- package/esm2022/collapse/src/collapse.component.mjs +2 -2
- package/esm2022/common/src/classes/styles.class.mjs +3 -12
- package/esm2022/common/src/components/color-component.class.mjs +7 -7
- package/esm2022/data-pager/src/data-pager-next-buttons.components.mjs +20 -20
- package/esm2022/data-pager/src/data-pager-numeric-selector.component.mjs +32 -34
- package/esm2022/data-pager/src/data-pager-pagesize-dropdown.component.mjs +26 -28
- package/esm2022/data-pager/src/data-pager-prev-buttons.component.mjs +18 -18
- package/esm2022/dialog/src/dialog.service.mjs +2 -2
- package/esm2022/loading/src/loading.component.mjs +2 -2
- package/esm2022/menu/src/menu.component.mjs +2 -2
- package/esm2022/mixin/src/color-look-mixing.class.mjs +10 -13
- package/esm2022/result/src/result.component.mjs +3 -3
- package/esm2022/select-box/src/selectbox.component.mjs +3 -3
- package/esm2022/switch/src/switch.component.mjs +2 -2
- package/esm2022/tabs/src/tabs.component.mjs +2 -2
- package/esm2022/tag/src/tag.component.mjs +4 -4
- package/esm2022/toast/src/toast.component.mjs +4 -4
- package/fesm2022/acorex-components-alert.mjs +2 -2
- package/fesm2022/acorex-components-alert.mjs.map +1 -1
- package/fesm2022/acorex-components-avatar.mjs +2 -2
- package/fesm2022/acorex-components-avatar.mjs.map +1 -1
- package/fesm2022/acorex-components-badge.mjs +2 -2
- package/fesm2022/acorex-components-badge.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +16 -33
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-chips.mjs +3 -3
- package/fesm2022/acorex-components-chips.mjs.map +1 -1
- package/fesm2022/acorex-components-collapse.mjs +2 -2
- package/fesm2022/acorex-components-collapse.mjs.map +1 -1
- package/fesm2022/acorex-components-common.mjs +6 -15
- package/fesm2022/acorex-components-common.mjs.map +1 -1
- package/fesm2022/acorex-components-data-pager.mjs +84 -88
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +1 -1
- package/fesm2022/acorex-components-dialog.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 +2 -2
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-mixin.mjs +8 -11
- package/fesm2022/acorex-components-mixin.mjs.map +1 -1
- package/fesm2022/acorex-components-result.mjs +2 -2
- package/fesm2022/acorex-components-result.mjs.map +1 -1
- package/fesm2022/acorex-components-select-box.mjs +2 -2
- package/fesm2022/acorex-components-select-box.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +2 -2
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +2 -2
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-tag.mjs +3 -3
- package/fesm2022/acorex-components-tag.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +2 -2
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/mixin/src/color-look-mixing.class.d.ts +8 -8
- package/package.json +1 -1
|
@@ -38,12 +38,12 @@ class AXLoadingComponent extends AXBaseComponentMixin {
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
41
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type", options: "options" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template> `, isInline: true, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}.ax-loading-overlay{background:rgba(var(--ax-color-
|
|
41
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type", options: "options" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template> `, isInline: true, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}.ax-loading-overlay{background:rgba(var(--ax-color-on-surface))}.ax-loading-spinner{display:flex;gap:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
42
42
|
}
|
|
43
43
|
export { AXLoadingComponent };
|
|
44
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXLoadingComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
|
-
args: [{ selector: 'ax-loading', template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-loading' }, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}.ax-loading-overlay{background:rgba(var(--ax-color-
|
|
46
|
+
args: [{ selector: 'ax-loading', template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-loading' }, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}.ax-loading-overlay{background:rgba(var(--ax-color-on-surface))}.ax-loading-spinner{display:flex;gap:.75rem}\n"] }]
|
|
47
47
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { visibleChange: [{
|
|
48
48
|
type: Output
|
|
49
49
|
}], visible: [{
|
|
@@ -317,12 +317,12 @@ class AXMenuComponent extends AXBaseMenuMixin {
|
|
|
317
317
|
this._overlayRef?.detach();
|
|
318
318
|
}
|
|
319
319
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
|
|
320
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", opened: "opened", active: "active", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", dividerField: "dividerField", openMode: "openMode", displayMode: "displayMode", showModal: "showModal" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"></ng-container>\n </ul>\n <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\n <ng-container *ngFor=\"let item of list\">\n <li *ngIf=\"item[visibleField] != false\" [class.ax-state-disabled]=\"item[disableField]\" (click)=\"_onMenuClick($event, item)\" (mouseenter)=\"_onMenuMouseEnter($event, item)\">\n <div\n class=\"ax-menu-item\"\n [ngClass]=\"{\n 'ax-is-parent': item?.children?.length,\n 'ax-is-child': !isRoot,\n 'ax-state-active ': item.active\n }\"\n *ngIf=\"itemTemplate == null; else tmpItem\">\n <div class=\"ax-menu-item-prefix\">\n <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\n <span>{{ _getItemDisplayTextTemplte(item) }}</span>\n </div>\n <div class=\"ax-menu-item-suffix\">\n <span\n class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': item?.children?.length > 0,\n 'ax-menu-active-icon': item.opened\n }\"\n *ngIf=\"!item.isLoading\"></span>\n <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\n </div>\n </div>\n <!--------------- check for custom item template --------------->\n <ng-template #tmpItem>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\n </ng-container>\n </ng-template>\n <ul *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\" [class.ax-state-disabled]=\"item[disableField]\">\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\"> </ng-container>\n </ul>\n </li>\n <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\n </ng-container>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n <ng-template>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n <ax-loading [options]=\"_loadingOptions\"></ax-loading>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #tmpEmpty>\n <ng-container *ngIf=\"!isLoading\">\n <!--------------- check for custom template --------------->\n <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n </ng-container>\n <ng-template #elseEmptyTemplate>\n {{ 'common.no-result-found' | trans }}\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: ["ax-menu{font-size
|
|
320
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", opened: "opened", active: "active", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", dividerField: "dividerField", openMode: "openMode", displayMode: "displayMode", showModal: "showModal" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"></ng-container>\n </ul>\n <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\n <ng-container *ngFor=\"let item of list\">\n <li *ngIf=\"item[visibleField] != false\" [class.ax-state-disabled]=\"item[disableField]\" (click)=\"_onMenuClick($event, item)\" (mouseenter)=\"_onMenuMouseEnter($event, item)\">\n <div\n class=\"ax-menu-item\"\n [ngClass]=\"{\n 'ax-is-parent': item?.children?.length,\n 'ax-is-child': !isRoot,\n 'ax-state-active ': item.active\n }\"\n *ngIf=\"itemTemplate == null; else tmpItem\">\n <div class=\"ax-menu-item-prefix\">\n <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\n <span>{{ _getItemDisplayTextTemplte(item) }}</span>\n </div>\n <div class=\"ax-menu-item-suffix\">\n <span\n class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': item?.children?.length > 0,\n 'ax-menu-active-icon': item.opened\n }\"\n *ngIf=\"!item.isLoading\"></span>\n <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\n </div>\n </div>\n <!--------------- check for custom item template --------------->\n <ng-template #tmpItem>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\n </ng-container>\n </ng-template>\n <ul *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\" [class.ax-state-disabled]=\"item[disableField]\">\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\"> </ng-container>\n </ul>\n </li>\n <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\n </ng-container>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n <ng-template>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n <ax-loading [options]=\"_loadingOptions\"></ax-loading>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #tmpEmpty>\n <ng-container *ngIf=\"!isLoading\">\n <!--------------- check for custom template --------------->\n <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n </ng-container>\n <ng-template #elseEmptyTemplate>\n {{ 'common.no-result-found' | trans }}\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: ["ax-menu{font-size:initial;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column}ax-menu ul li.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item{display:flex}ax-menu ul li .ax-menu-item.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item .ax-menu-item-prefix,ax-menu ul li .ax-menu-item .ax-menu-item-suffix{display:flex;align-items:center;justify-content:center}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon-chevron,ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon-chevron{transform:rotate(-90deg)}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon:not(:empty),ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon:not(:empty){min-width:1.25rem;min-height:1.25rem}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon{padding-inline-end:.5rem}ax-menu ul li .ax-menu-item .ax-menu-item-icon{font-size:1.25rem}ax-menu ul li.ax-state-disabled{cursor:not-allowed!important;opacity:.5}ax-menu ul li.ax-state-active .ax-menu-item-icon-chevron{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-menu .ax-horizontal>li,ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-horizontal{flex-direction:row;align-items:center}ax-menu .ax-horizontal .ax-menu-item-divider{width:1px;height:1rem;background-color:rgba(var(--ax-color-on-surface))}ax-menu .ax-horizontal li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-horizontal li:not(.ax-menu-item-divider){padding:.5rem;cursor:pointer}ax-menu .ax-vertical{flex-direction:column;width:100%}ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-vertical .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-vertical li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-vertical li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}ax-menu .ax-vertical.ax-submenu-ul li{border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-menu-item-divider){padding:.5rem}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-state-disabled,.ax-menu-item-divider):hover{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding:0 .5rem}ax-menu .ax-side-menu li .ax-menu-item-icon-chevron.ax-menu-active-icon{transform:rotate(180deg)!important}ax-menu .ax-side-menu li .ax-menu-item{justify-content:space-between}ax-menu .ax-side-menu li .ax-menu-item.ax-is-parent{font-weight:500}ax-menu .ax-side-menu li .ax-menu-item.ax-is-child{font-size:.875rem}ax-menu .ax-side-menu li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "options"], outputs: ["visibleChange"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
321
321
|
}
|
|
322
322
|
export { AXMenuComponent };
|
|
323
323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXMenuComponent, decorators: [{
|
|
324
324
|
type: Component,
|
|
325
|
-
args: [{ selector: 'ax-menu', inputs: ['disabled', 'tabIndex', 'textField', 'valueField', 'items', 'parentId', 'iconField', 'tooltip', 'opened', 'active', 'visibleField', 'disableField', 'hasChildField', 'dividerField', 'openMode', 'displayMode', 'showModal'], outputs: ['onBlur', 'onFocus', 'onMenuItemClick'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"></ng-container>\n </ul>\n <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\n <ng-container *ngFor=\"let item of list\">\n <li *ngIf=\"item[visibleField] != false\" [class.ax-state-disabled]=\"item[disableField]\" (click)=\"_onMenuClick($event, item)\" (mouseenter)=\"_onMenuMouseEnter($event, item)\">\n <div\n class=\"ax-menu-item\"\n [ngClass]=\"{\n 'ax-is-parent': item?.children?.length,\n 'ax-is-child': !isRoot,\n 'ax-state-active ': item.active\n }\"\n *ngIf=\"itemTemplate == null; else tmpItem\">\n <div class=\"ax-menu-item-prefix\">\n <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\n <span>{{ _getItemDisplayTextTemplte(item) }}</span>\n </div>\n <div class=\"ax-menu-item-suffix\">\n <span\n class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': item?.children?.length > 0,\n 'ax-menu-active-icon': item.opened\n }\"\n *ngIf=\"!item.isLoading\"></span>\n <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\n </div>\n </div>\n <!--------------- check for custom item template --------------->\n <ng-template #tmpItem>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\n </ng-container>\n </ng-template>\n <ul *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\" [class.ax-state-disabled]=\"item[disableField]\">\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\"> </ng-container>\n </ul>\n </li>\n <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\n </ng-container>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n <ng-template>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n <ax-loading [options]=\"_loadingOptions\"></ax-loading>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #tmpEmpty>\n <ng-container *ngIf=\"!isLoading\">\n <!--------------- check for custom template --------------->\n <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n </ng-container>\n <ng-template #elseEmptyTemplate>\n {{ 'common.no-result-found' | trans }}\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: ["ax-menu{font-size
|
|
325
|
+
args: [{ selector: 'ax-menu', inputs: ['disabled', 'tabIndex', 'textField', 'valueField', 'items', 'parentId', 'iconField', 'tooltip', 'opened', 'active', 'visibleField', 'disableField', 'hasChildField', 'dividerField', 'openMode', 'displayMode', 'showModal'], outputs: ['onBlur', 'onFocus', 'onMenuItemClick'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"></ng-container>\n </ul>\n <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\n <ng-container *ngFor=\"let item of list\">\n <li *ngIf=\"item[visibleField] != false\" [class.ax-state-disabled]=\"item[disableField]\" (click)=\"_onMenuClick($event, item)\" (mouseenter)=\"_onMenuMouseEnter($event, item)\">\n <div\n class=\"ax-menu-item\"\n [ngClass]=\"{\n 'ax-is-parent': item?.children?.length,\n 'ax-is-child': !isRoot,\n 'ax-state-active ': item.active\n }\"\n *ngIf=\"itemTemplate == null; else tmpItem\">\n <div class=\"ax-menu-item-prefix\">\n <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\n <span>{{ _getItemDisplayTextTemplte(item) }}</span>\n </div>\n <div class=\"ax-menu-item-suffix\">\n <span\n class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': item?.children?.length > 0,\n 'ax-menu-active-icon': item.opened\n }\"\n *ngIf=\"!item.isLoading\"></span>\n <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\n </div>\n </div>\n <!--------------- check for custom item template --------------->\n <ng-template #tmpItem>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\n </ng-container>\n </ng-template>\n <ul *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\" [class.ax-state-disabled]=\"item[disableField]\">\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\"> </ng-container>\n </ul>\n </li>\n <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\n </ng-container>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n <ng-template>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n <ax-loading [options]=\"_loadingOptions\"></ax-loading>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #tmpEmpty>\n <ng-container *ngIf=\"!isLoading\">\n <!--------------- check for custom template --------------->\n <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n </ng-container>\n <ng-template #elseEmptyTemplate>\n {{ 'common.no-result-found' | trans }}\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: ["ax-menu{font-size:initial;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column}ax-menu ul li.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item{display:flex}ax-menu ul li .ax-menu-item.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item .ax-menu-item-prefix,ax-menu ul li .ax-menu-item .ax-menu-item-suffix{display:flex;align-items:center;justify-content:center}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon-chevron,ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon-chevron{transform:rotate(-90deg)}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon:not(:empty),ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon:not(:empty){min-width:1.25rem;min-height:1.25rem}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon{padding-inline-end:.5rem}ax-menu ul li .ax-menu-item .ax-menu-item-icon{font-size:1.25rem}ax-menu ul li.ax-state-disabled{cursor:not-allowed!important;opacity:.5}ax-menu ul li.ax-state-active .ax-menu-item-icon-chevron{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-menu .ax-horizontal>li,ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-horizontal{flex-direction:row;align-items:center}ax-menu .ax-horizontal .ax-menu-item-divider{width:1px;height:1rem;background-color:rgba(var(--ax-color-on-surface))}ax-menu .ax-horizontal li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-horizontal li:not(.ax-menu-item-divider){padding:.5rem;cursor:pointer}ax-menu .ax-vertical{flex-direction:column;width:100%}ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-vertical .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-vertical li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-vertical li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}ax-menu .ax-vertical.ax-submenu-ul li{border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-menu-item-divider){padding:.5rem}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-state-disabled,.ax-menu-item-divider):hover{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding:0 .5rem}ax-menu .ax-side-menu li .ax-menu-item-icon-chevron.ax-menu-active-icon{transform:rotate(180deg)!important}ax-menu .ax-side-menu li .ax-menu-item{justify-content:space-between}ax-menu .ax-side-menu li .ax-menu-item.ax-is-parent{font-weight:500}ax-menu .ax-side-menu li .ax-menu-item.ax-is-child{font-size:.875rem}ax-menu .ax-side-menu li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}\n"] }]
|
|
326
326
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2.AXPlatform }]; }, propDecorators: { _contentEmptyTemplate: [{
|
|
327
327
|
type: ContentChild,
|
|
328
328
|
args: ['emptyTemplate']
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { EventEmitter } from
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
|
2
2
|
export function _ColorLookComponentMixin(Base) {
|
|
3
3
|
return class extends Base {
|
|
4
4
|
constructor(...args) {
|
|
5
5
|
super(...args);
|
|
6
6
|
}
|
|
7
7
|
colorChange = new EventEmitter();
|
|
8
|
-
_color = '
|
|
8
|
+
_color = 'default';
|
|
9
9
|
/**
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
* Predefined color schemes
|
|
11
|
+
*/
|
|
12
12
|
get color() {
|
|
13
13
|
return this._color;
|
|
14
14
|
}
|
|
@@ -18,14 +18,14 @@ export function _ColorLookComponentMixin(Base) {
|
|
|
18
18
|
value,
|
|
19
19
|
afterCallback: () => {
|
|
20
20
|
this._cdr.markForCheck();
|
|
21
|
-
}
|
|
21
|
+
},
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
lookChange = new EventEmitter();
|
|
25
25
|
_look = 'default';
|
|
26
26
|
/**
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
* Predefined look schemes
|
|
28
|
+
*/
|
|
29
29
|
get look() {
|
|
30
30
|
return this._look;
|
|
31
31
|
}
|
|
@@ -35,14 +35,11 @@ export function _ColorLookComponentMixin(Base) {
|
|
|
35
35
|
value,
|
|
36
36
|
afterCallback: () => {
|
|
37
37
|
this._cdr.markForCheck();
|
|
38
|
-
}
|
|
38
|
+
},
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
|
-
export const COLOR_LOOK_INPUTS = [
|
|
44
|
-
'color',
|
|
45
|
-
'look',
|
|
46
|
-
];
|
|
43
|
+
export const COLOR_LOOK_INPUTS = ['color', 'look'];
|
|
47
44
|
export const COLOR_LOOK_OUTPUT = ['lookChange', 'colorChange'];
|
|
48
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItbG9vay1taXhpbmcuY2xhc3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hY29yZXgvY29tcG9uZW50cy9taXhpbi9zcmMvY29sb3ItbG9vay1taXhpbmcuY2xhc3MudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUs3QyxNQUFNLFVBQVUsd0JBQXdCLENBQTZDLElBQVc7SUFDOUYsT0FBTyxLQUFNLFNBQVEsSUFBSTtRQUN2QixZQUFZLEdBQUcsSUFBVztZQUN4QixLQUFLLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQztRQUNqQixDQUFDO1FBRUQsV0FBVyxHQUFtQyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ2pFLE1BQU0sR0FBcUIsU0FBUyxDQUFDO1FBQ3JDOztXQUVHO1FBQ0gsSUFBSSxLQUFLO1lBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ3JCLENBQUM7UUFDRCxJQUFJLEtBQUssQ0FBQyxLQUF1QjtZQUMvQixJQUFJLENBQUMsVUFBVSxDQUFDO2dCQUNkLElBQUksRUFBRSxPQUFPO2dCQUNiLEtBQUs7Z0JBQ0wsYUFBYSxFQUFFLEdBQUcsRUFBRTtvQkFDbEIsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztnQkFDM0IsQ0FBQzthQUNGLENBQUMsQ0FBQztRQUNMLENBQUM7UUFFRCxVQUFVLEdBQWtDLElBQUksWUFBWSxFQUFFLENBQUM7UUFDL0QsS0FBSyxHQUFxQixTQUFTLENBQUM7UUFDcEM7O1dBRUc7UUFDSCxJQUFJLElBQUk7WUFDTixPQUFPLElBQUksQ0FBQyxLQUFNLENBQUM7UUFDckIsQ0FBQztRQUNELElBQUksSUFBSSxDQUFDLEtBQXNCO1lBQzdCLElBQUksQ0FBQyxVQUFVLENBQUM7Z0JBQ2QsSUFBSSxFQUFFLE1BQU07Z0JBQ1osS0FBSztnQkFDTCxhQUFhLEVBQUUsR0FBRyxFQUFFO29CQUNsQixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO2dCQUMzQixDQUFDO2FBQ0YsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztLQUNGLENBQUM7QUFDSixDQUFDO0FBRUQsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxPQUFPLEVBQUUsTUFBTSxDQUFDLENBQUM7QUFDbkQsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxZQUFZLEVBQUUsYUFBYSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFYU3R5bGVDb2xvclR5cGUsIEFYU3R5bGVMb29rVHlwZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHsgQVhCYXNlQ29tcG9uZW50IH0gZnJvbSAnLi9iYXNlLWNvbXBvbmVudHMuY2xhc3MnO1xuaW1wb3J0IHsgQ29uc3RydWN0b3IgfSBmcm9tICcuL2NvbnN0cmF0Y3Rvcic7XG5cbmV4cG9ydCBmdW5jdGlvbiBfQ29sb3JMb29rQ29tcG9uZW50TWl4aW48VEJhc2UgZXh0ZW5kcyBDb25zdHJ1Y3RvcjxBWEJhc2VDb21wb25lbnQ+PihCYXNlOiBUQmFzZSkge1xuICByZXR1cm4gY2xhc3MgZXh0ZW5kcyBCYXNlIHtcbiAgICBjb25zdHJ1Y3RvciguLi5hcmdzOiBhbnlbXSkge1xuICAgICAgc3VwZXIoLi4uYXJncyk7XG4gICAgfVxuXG4gICAgY29sb3JDaGFuZ2U6IEV2ZW50RW1pdHRlcjxBWFN0eWxlQ29sb3JUeXBlPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgICBfY29sb3I6IEFYU3R5bGVDb2xvclR5cGUgPSAnZGVmYXVsdCc7XG4gICAgLyoqXG4gICAgICogIFByZWRlZmluZWQgY29sb3Igc2NoZW1lc1xuICAgICAqL1xuICAgIGdldCBjb2xvcigpOiBBWFN0eWxlQ29sb3JUeXBlIHtcbiAgICAgIHJldHVybiB0aGlzLl9jb2xvcjtcbiAgICB9XG4gICAgc2V0IGNvbG9yKHZhbHVlOiBBWFN0eWxlQ29sb3JUeXBlKSB7XG4gICAgICB0aGlzLl9zZXRPcHRpb24oe1xuICAgICAgICBuYW1lOiAnY29sb3InLFxuICAgICAgICB2YWx1ZSxcbiAgICAgICAgYWZ0ZXJDYWxsYmFjazogKCkgPT4ge1xuICAgICAgICAgIHRoaXMuX2Nkci5tYXJrRm9yQ2hlY2soKTtcbiAgICAgICAgfSxcbiAgICAgIH0pO1xuICAgIH1cblxuICAgIGxvb2tDaGFuZ2U6IEV2ZW50RW1pdHRlcjxBWFN0eWxlTG9va1R5cGU+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICAgIF9sb29rPzogQVhTdHlsZUxvb2tUeXBlID0gJ2RlZmF1bHQnO1xuICAgIC8qKlxuICAgICAqICBQcmVkZWZpbmVkIGxvb2sgc2NoZW1lc1xuICAgICAqL1xuICAgIGdldCBsb29rKCk6IEFYU3R5bGVMb29rVHlwZSB7XG4gICAgICByZXR1cm4gdGhpcy5fbG9vayE7XG4gICAgfVxuICAgIHNldCBsb29rKHZhbHVlOiBBWFN0eWxlTG9va1R5cGUpIHtcbiAgICAgIHRoaXMuX3NldE9wdGlvbih7XG4gICAgICAgIG5hbWU6ICdsb29rJyxcbiAgICAgICAgdmFsdWUsXG4gICAgICAgIGFmdGVyQ2FsbGJhY2s6ICgpID0+IHtcbiAgICAgICAgICB0aGlzLl9jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgICAgIH0sXG4gICAgICB9KTtcbiAgICB9XG4gIH07XG59XG5cbmV4cG9ydCBjb25zdCBDT0xPUl9MT09LX0lOUFVUUyA9IFsnY29sb3InLCAnbG9vayddO1xuZXhwb3J0IGNvbnN0IENPTE9SX0xPT0tfT1VUUFVUID0gWydsb29rQ2hhbmdlJywgJ2NvbG9yQ2hhbmdlJ107XG4iXX0=
|