@acorex/components 20.7.29 → 20.7.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-components-menu.mjs +39 -17
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +2 -2
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/menu/index.d.ts +31 -6
- package/package.json +50 -50
- package/side-menu/index.d.ts +2 -22
|
@@ -514,7 +514,7 @@ class AXSideMenuComponent extends NXComponent {
|
|
|
514
514
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSideMenuComponent, isStandalone: true, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
|
|
515
515
|
{ provide: AXComponent, useExisting: AXSideMenuComponent },
|
|
516
516
|
{ provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
|
|
517
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n @if (item.title) {\n <ax-title>{{ item.title }}</ax-title>\n }\n @if (item.routerLink) {\n <ax-side-menu-item\n [text]=\"item.text\"\n [target]=\"item.target\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [routerLink]=\"item.routerLink\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n [routerLinkActive]=\"item.routerLinkActive\"\n [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n } @else if (item.href) {\n <ax-side-menu-item\n [text]=\"item.text\"\n [href]=\"item.href\"\n [target]=\"item.target\"\n [active]=\"item.active\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n } @else {\n <ax-side-menu-item\n [text]=\"item.text\"\n [active]=\"item.active\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n }\n\n <ng-template #sideMenuItemContent>\n <ax-prefix>\n @if (item.icon) {\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n }\n </ax-prefix>\n @if (item.data) {\n <ax-text>{{ item.data }}</ax-text>\n }\n @if (item.suffixText) {\n <ax-suffix>\n <ax-text>{{ item.suffixText }}</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 </ng-template>\n</ng-template>\n", styles: [":root{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:.5rem;color:inherit;font-size:.875rem;line-height:1.25rem;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block:.5rem;margin-top:.5rem;padding-inline:.75rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{display:block;width:100%;height:1px;margin-block:.25rem;background-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;font-size:inherit;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{display:grid;grid-template-rows:1fr;padding-inline-start:1.25rem;opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0fr;opacity:0}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:.5rem}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{position:absolute;height:100%;background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before{position:absolute;width:var(--ax-comp-side-menu-indicator-size, 2px);height:100%;background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))));content:\"\"}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-side-menu.ax-look-default{gap:.25rem}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{padding:.5rem 1rem;border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.5)}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{position:relative;gap:.25rem;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;width:1px;height:100%;margin-inline-start:1.5rem;background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\"}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:fit-content}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface, var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:.125rem!important;display:flex;justify-content:center;width:100%}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:fit-content;gap:0;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}\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: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
517
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n @if (item.title) {\n <ax-title>{{ item.title }}</ax-title>\n }\n @if (item.routerLink) {\n <ax-side-menu-item\n [text]=\"item.text\"\n [target]=\"item.target\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [routerLink]=\"item.routerLink\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n [routerLinkActive]=\"item.routerLinkActive\"\n [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n } @else if (item.href) {\n <ax-side-menu-item\n [text]=\"item.text\"\n [href]=\"item.href\"\n [target]=\"item.target\"\n [active]=\"item.active\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n } @else {\n <ax-side-menu-item\n [text]=\"item.text\"\n [active]=\"item.active\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n }\n\n <ng-template #sideMenuItemContent>\n <ax-prefix>\n @if (item.icon) {\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n }\n </ax-prefix>\n @if (item.data) {\n <ax-text>{{ item.data }}</ax-text>\n }\n @if (item.suffixText || item.suffix?.text) {\n <ax-suffix>\n <ax-text>{{ item.suffixText ?? 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 </ng-template>\n</ng-template>\n", styles: [":root{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:.5rem;color:inherit;font-size:.875rem;line-height:1.25rem;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block:.5rem;margin-top:.5rem;padding-inline:.75rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{display:block;width:100%;height:1px;margin-block:.25rem;background-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;font-size:inherit;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{display:grid;grid-template-rows:1fr;padding-inline-start:1.25rem;opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0fr;opacity:0}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:.5rem}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{position:absolute;height:100%;background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before{position:absolute;width:var(--ax-comp-side-menu-indicator-size, 2px);height:100%;background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))));content:\"\"}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-side-menu.ax-look-default{gap:.25rem}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{padding:.5rem 1rem;border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.5)}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{position:relative;gap:.25rem;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;width:1px;height:100%;margin-inline-start:1.5rem;background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\"}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:fit-content}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface, var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:.125rem!important;display:flex;justify-content:center;width:100%}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:fit-content;gap:0;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}\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: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
518
518
|
}
|
|
519
519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuComponent, decorators: [{
|
|
520
520
|
type: Component,
|
|
@@ -528,7 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
528
528
|
], providers: [
|
|
529
529
|
{ provide: AXComponent, useExisting: AXSideMenuComponent },
|
|
530
530
|
{ provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
|
|
531
|
-
], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n @if (item.title) {\n <ax-title>{{ item.title }}</ax-title>\n }\n @if (item.routerLink) {\n <ax-side-menu-item\n [text]=\"item.text\"\n [target]=\"item.target\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [routerLink]=\"item.routerLink\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n [routerLinkActive]=\"item.routerLinkActive\"\n [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n } @else if (item.href) {\n <ax-side-menu-item\n [text]=\"item.text\"\n [href]=\"item.href\"\n [target]=\"item.target\"\n [active]=\"item.active\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n } @else {\n <ax-side-menu-item\n [text]=\"item.text\"\n [active]=\"item.active\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n }\n\n <ng-template #sideMenuItemContent>\n <ax-prefix>\n @if (item.icon) {\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n }\n </ax-prefix>\n @if (item.data) {\n <ax-text>{{ item.data }}</ax-text>\n }\n @if (item.suffixText) {\n <ax-suffix>\n <ax-text>{{ item.suffixText }}</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 </ng-template>\n</ng-template>\n", styles: [":root{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:.5rem;color:inherit;font-size:.875rem;line-height:1.25rem;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block:.5rem;margin-top:.5rem;padding-inline:.75rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{display:block;width:100%;height:1px;margin-block:.25rem;background-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;font-size:inherit;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{display:grid;grid-template-rows:1fr;padding-inline-start:1.25rem;opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0fr;opacity:0}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:.5rem}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{position:absolute;height:100%;background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before{position:absolute;width:var(--ax-comp-side-menu-indicator-size, 2px);height:100%;background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))));content:\"\"}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-side-menu.ax-look-default{gap:.25rem}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{padding:.5rem 1rem;border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.5)}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{position:relative;gap:.25rem;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;width:1px;height:100%;margin-inline-start:1.5rem;background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\"}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:fit-content}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface, var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:.125rem!important;display:flex;justify-content:center;width:100%}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:fit-content;gap:0;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}\n"] }]
|
|
531
|
+
], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n @if (item.title) {\n <ax-title>{{ item.title }}</ax-title>\n }\n @if (item.routerLink) {\n <ax-side-menu-item\n [text]=\"item.text\"\n [target]=\"item.target\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [routerLink]=\"item.routerLink\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n [routerLinkActive]=\"item.routerLinkActive\"\n [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n } @else if (item.href) {\n <ax-side-menu-item\n [text]=\"item.text\"\n [href]=\"item.href\"\n [target]=\"item.target\"\n [active]=\"item.active\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n } @else {\n <ax-side-menu-item\n [text]=\"item.text\"\n [active]=\"item.active\"\n [disabled]=\"item.disabled\"\n [isLoading]=\"item.isLoading\"\n [isCollapsed]=\"item.isCollapsed\"\n [toggleOnClick]=\"item.toggleOnClick\"\n >\n <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n </ax-side-menu-item>\n }\n\n <ng-template #sideMenuItemContent>\n <ax-prefix>\n @if (item.icon) {\n <ax-icon [icon]=\"item.icon\"> </ax-icon>\n }\n </ax-prefix>\n @if (item.data) {\n <ax-text>{{ item.data }}</ax-text>\n }\n @if (item.suffixText || item.suffix?.text) {\n <ax-suffix>\n <ax-text>{{ item.suffixText ?? 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 </ng-template>\n</ng-template>\n", styles: [":root{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:.5rem;color:inherit;font-size:.875rem;line-height:1.25rem;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block:.5rem;margin-top:.5rem;padding-inline:.75rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{display:block;width:100%;height:1px;margin-block:.25rem;background-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;font-size:inherit;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{display:grid;grid-template-rows:1fr;padding-inline-start:1.25rem;opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0fr;opacity:0}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:.5rem}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{position:absolute;height:100%;background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before{position:absolute;width:var(--ax-comp-side-menu-indicator-size, 2px);height:100%;background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))));content:\"\"}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-side-menu.ax-look-default{gap:.25rem}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{padding:.5rem 1rem;border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.5)}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{position:relative;gap:.25rem;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;width:1px;height:100%;margin-inline-start:1.5rem;background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\"}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:fit-content}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface, var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:.125rem!important;display:flex;justify-content:center;width:100%}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:fit-content;gap:0;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}\n"] }]
|
|
532
532
|
}], propDecorators: { __hostClass: [{
|
|
533
533
|
type: HostBinding,
|
|
534
534
|
args: ['class']
|