@acorex/components 21.0.1-next.3 → 21.0.1-next.4
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/action-sheet/index.d.ts +41 -19
- package/datetime-picker/index.d.ts +1 -1
- package/dialog/index.d.ts +18 -14
- package/dropdown/index.d.ts +3 -4
- package/fesm2022/acorex-components-action-sheet.mjs +141 -93
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation2.mjs +2 -2
- package/fesm2022/acorex-components-conversation2.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +1 -0
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +25 -25
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +66 -45
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +5 -10
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +2 -2
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-loading-dialog.mjs +73 -36
- package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +26 -5
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/{acorex-components-modal-acorex-components-modal-CXXcFToK.mjs → acorex-components-modal-acorex-components-modal-Bmoz9DL5.mjs} +27 -3
- package/fesm2022/acorex-components-modal-acorex-components-modal-Bmoz9DL5.mjs.map +1 -0
- package/fesm2022/{acorex-components-modal-modal-content.component-B4rhHeEz.mjs → acorex-components-modal-modal-content.component-CSJU1vRi.mjs} +2 -2
- package/fesm2022/{acorex-components-modal-modal-content.component-B4rhHeEz.mjs.map → acorex-components-modal-modal-content.component-CSJU1vRi.mjs.map} +1 -1
- package/fesm2022/acorex-components-modal.mjs +1 -1
- package/fesm2022/acorex-components-notification.mjs +374 -257
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-popover.mjs +136 -175
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +308 -105
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-routing-progress.mjs +2 -2
- package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +231 -123
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +2 -3
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/loading-dialog/index.d.ts +31 -15
- package/menu/index.d.ts +4 -0
- package/modal/index.d.ts +7 -0
- package/notification/index.d.ts +47 -32
- package/package.json +3 -3
- package/popover/index.d.ts +20 -27
- package/popup/index.d.ts +103 -27
- package/toast/index.d.ts +24 -18
- package/tooltip/index.d.ts +1 -2
- package/fesm2022/acorex-components-modal-acorex-components-modal-CXXcFToK.mjs.map +0 -1
|
@@ -2,6 +2,7 @@ import { NXClickEvent, NXComponent, AXComponent, NXEvent } from '@acorex/cdk/com
|
|
|
2
2
|
import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
|
|
3
3
|
import { isBrowser } from '@acorex/core/platform';
|
|
4
4
|
import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
|
|
5
|
+
import { AXZIndexService } from '@acorex/core/z-index';
|
|
5
6
|
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
|
|
6
7
|
import * as i0 from '@angular/core';
|
|
7
8
|
import { Injectable, signal, inject, Renderer2, computed, output, input, afterNextRender, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, DOCUMENT, PLATFORM_ID, NgModule } from '@angular/core';
|
|
@@ -53,6 +54,8 @@ class AXMenuItemComponent extends NXComponent {
|
|
|
53
54
|
this.scrollableParents = [];
|
|
54
55
|
this.unsuscriber = inject(AXUnsubscriber);
|
|
55
56
|
this.renderer = inject(Renderer2);
|
|
57
|
+
this.zIndexService = inject(AXZIndexService);
|
|
58
|
+
this.zToken = null;
|
|
56
59
|
this.arrowIcon = computed(() => {
|
|
57
60
|
const isRtl = AXHtmlUtil.isRtl(this.nativeElement);
|
|
58
61
|
return this.root.orientation() == 'horizontal' && this.isFirstLevel()
|
|
@@ -148,6 +151,10 @@ class AXMenuItemComponent extends NXComponent {
|
|
|
148
151
|
open() {
|
|
149
152
|
this.service.closeExcept$.next(this);
|
|
150
153
|
if (!this.disabled() && this.hasSubItems()) {
|
|
154
|
+
// Acquire z-index token for this submenu
|
|
155
|
+
if (!this.zToken) {
|
|
156
|
+
this.zToken = this.zIndexService.acquire();
|
|
157
|
+
}
|
|
151
158
|
this.service.open$.next(this);
|
|
152
159
|
}
|
|
153
160
|
}
|
|
@@ -158,6 +165,9 @@ class AXMenuItemComponent extends NXComponent {
|
|
|
158
165
|
*/
|
|
159
166
|
close() {
|
|
160
167
|
this.service.close$.next(this);
|
|
168
|
+
// Release z-index token
|
|
169
|
+
this.zIndexService.release(this.zToken);
|
|
170
|
+
this.zToken = null;
|
|
161
171
|
}
|
|
162
172
|
/**
|
|
163
173
|
* Calculate the position of the submenu to avoid it going out of the viewport.
|
|
@@ -250,6 +260,10 @@ class AXMenuItemComponent extends NXComponent {
|
|
|
250
260
|
this.renderer.setStyle(submenu, 'position', 'fixed');
|
|
251
261
|
this.renderer.setStyle(submenu, 'top', `${finalTop}px`);
|
|
252
262
|
this.renderer.setStyle(submenu, 'left', `${finalLeft}px`);
|
|
263
|
+
// Apply z-index from token
|
|
264
|
+
if (this.zToken) {
|
|
265
|
+
this.renderer.setStyle(submenu, 'z-index', String(this.zToken.zIndex));
|
|
266
|
+
}
|
|
253
267
|
}
|
|
254
268
|
handleClick(e) {
|
|
255
269
|
e.stopPropagation();
|
|
@@ -422,6 +436,8 @@ class AXContextMenuComponent extends NXComponent {
|
|
|
422
436
|
this.renderer = inject(Renderer2);
|
|
423
437
|
this.document = inject(DOCUMENT);
|
|
424
438
|
this.platformID = inject(PLATFORM_ID);
|
|
439
|
+
this.zIndexService = inject(AXZIndexService);
|
|
440
|
+
this.zToken = null;
|
|
425
441
|
this.originalNextSibling = null;
|
|
426
442
|
this.originalParent = null;
|
|
427
443
|
this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -485,6 +501,9 @@ class AXContextMenuComponent extends NXComponent {
|
|
|
485
501
|
close() {
|
|
486
502
|
this.nativeElement.classList.remove('ax-state-open');
|
|
487
503
|
this.removeBackdrop();
|
|
504
|
+
// Release z-index token
|
|
505
|
+
this.zIndexService.release(this.zToken);
|
|
506
|
+
this.zToken = null;
|
|
488
507
|
}
|
|
489
508
|
// Private Methods (Internal Logic)
|
|
490
509
|
/** @ignore */
|
|
@@ -577,13 +596,15 @@ class AXContextMenuComponent extends NXComponent {
|
|
|
577
596
|
this.originalParent = this.nativeElement.parentElement;
|
|
578
597
|
this.originalNextSibling = this.nativeElement.nextSibling;
|
|
579
598
|
}
|
|
599
|
+
// Acquire z-index token
|
|
600
|
+
this.zToken = this.zIndexService.acquire();
|
|
580
601
|
this.backdropElement = this.renderer.createElement('div');
|
|
581
602
|
this.renderer.setStyle(this.backdropElement, 'position', 'fixed');
|
|
582
603
|
this.renderer.setStyle(this.backdropElement, 'top', '0');
|
|
583
604
|
this.renderer.setStyle(this.backdropElement, 'left', '0');
|
|
584
605
|
this.renderer.setStyle(this.backdropElement, 'width', '100%');
|
|
585
606
|
this.renderer.setStyle(this.backdropElement, 'height', '100%');
|
|
586
|
-
this.renderer.setStyle(this.backdropElement, 'z-index',
|
|
607
|
+
this.renderer.setStyle(this.backdropElement, 'z-index', String(this.zToken.zIndex));
|
|
587
608
|
this.renderer.setStyle(this.backdropElement, 'background', 'transparent');
|
|
588
609
|
this.createEventListeners(this.backdropElement);
|
|
589
610
|
this.document.body.appendChild(this.backdropElement);
|
|
@@ -648,7 +669,7 @@ class AXContextMenuComponent extends NXComponent {
|
|
|
648
669
|
provide: AXComponent,
|
|
649
670
|
useExisting: AXContextMenuComponent,
|
|
650
671
|
},
|
|
651
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n @if (item.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n </ax-prefix>\n }\n @if (item.text) {\n <ax-text>{{ item.text }}</ax-text>\n }\n @if (item.suffix) {\n <ax-suffix>\n <ax-text>{{ item.suffix.text }}</ax-text>\n </ax-suffix>\n }\n @for (child of item.items; track child) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-menu-item>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu ax-menu-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
672
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n @if (item.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n </ax-prefix>\n }\n @if (item.text) {\n <ax-text>{{ item.text }}</ax-text>\n }\n @if (item.suffix) {\n <ax-suffix>\n <ax-text>{{ item.suffix.text }}</ax-text>\n </ax-suffix>\n }\n @for (child of item.items; track child) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-menu-item>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu ax-menu-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
652
673
|
}
|
|
653
674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXContextMenuComponent, decorators: [{
|
|
654
675
|
type: Component,
|
|
@@ -662,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
662
683
|
provide: AXComponent,
|
|
663
684
|
useExisting: AXContextMenuComponent,
|
|
664
685
|
},
|
|
665
|
-
], imports: [NgTemplateOutlet, AXDecoratorGenericComponent, AXMenuItemComponent, AXDecoratorIconComponent], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n @if (item.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n </ax-prefix>\n }\n @if (item.text) {\n <ax-text>{{ item.text }}</ax-text>\n }\n @if (item.suffix) {\n <ax-suffix>\n <ax-text>{{ item.suffix.text }}</ax-text>\n </ax-suffix>\n }\n @for (child of item.items; track child) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-menu-item>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu ax-menu-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"] }]
|
|
686
|
+
], imports: [NgTemplateOutlet, AXDecoratorGenericComponent, AXMenuItemComponent, AXDecoratorIconComponent], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n @if (item.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n </ax-prefix>\n }\n @if (item.text) {\n <ax-text>{{ item.text }}</ax-text>\n }\n @if (item.suffix) {\n <ax-suffix>\n <ax-text>{{ item.suffix.text }}</ax-text>\n </ax-suffix>\n }\n @for (child of item.items; track child) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-menu-item>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu ax-menu-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"] }]
|
|
666
687
|
}], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], closeOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOn", required: false }] }], originalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onOpening: [{ type: i0.Output, args: ["onOpening"] }], onWindowEvent: [{
|
|
667
688
|
type: HostListener,
|
|
668
689
|
args: ['window:scroll', ['$event']]
|
|
@@ -717,7 +738,7 @@ class AXMenuComponent extends NXComponent {
|
|
|
717
738
|
provide: AXComponent,
|
|
718
739
|
useExisting: AXMenuComponent,
|
|
719
740
|
},
|
|
720
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n @if (item.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n </ax-prefix>\n }\n @if (item.text) {\n <ax-text>{{ item.text }}</ax-text>\n }\n @if (item.suffix) {\n <ax-suffix>\n <ax-text>{{ item.suffix.text }}</ax-text>\n </ax-suffix>\n }\n @for (child of item.items; track child) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-menu-item>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu ax-menu-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
741
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n @if (item.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n </ax-prefix>\n }\n @if (item.text) {\n <ax-text>{{ item.text }}</ax-text>\n }\n @if (item.suffix) {\n <ax-suffix>\n <ax-text>{{ item.suffix.text }}</ax-text>\n </ax-suffix>\n }\n @for (child of item.items; track child) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-menu-item>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu ax-menu-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
721
742
|
}
|
|
722
743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuComponent, decorators: [{
|
|
723
744
|
type: Component,
|
|
@@ -731,7 +752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
731
752
|
provide: AXComponent,
|
|
732
753
|
useExisting: AXMenuComponent,
|
|
733
754
|
},
|
|
734
|
-
], imports: [NgTemplateOutlet, AXDecoratorGenericComponent, AXMenuItemComponent, AXDecoratorIconComponent], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n @if (item.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n </ax-prefix>\n }\n @if (item.text) {\n <ax-text>{{ item.text }}</ax-text>\n }\n @if (item.suffix) {\n <ax-suffix>\n <ax-text>{{ item.suffix.text }}</ax-text>\n </ax-suffix>\n }\n @for (child of item.items; track child) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-menu-item>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu ax-menu-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"] }]
|
|
755
|
+
], imports: [NgTemplateOutlet, AXDecoratorGenericComponent, AXMenuItemComponent, AXDecoratorIconComponent], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n @if (item.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n </ax-prefix>\n }\n @if (item.text) {\n <ax-text>{{ item.text }}</ax-text>\n }\n @if (item.suffix) {\n <ax-suffix>\n <ax-text>{{ item.suffix.text }}</ax-text>\n </ax-suffix>\n }\n @for (child of item.items; track child) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ax-menu-item>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu ax-menu-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"] }]
|
|
735
756
|
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], closeOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOn", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], hasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasArrow", required: false }] }], __hostClass: [{
|
|
736
757
|
type: HostBinding,
|
|
737
758
|
args: ['class']
|