@acorex/components 22.2.15 → 22.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-components-calendar.mjs +4 -5
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-code-editor.mjs +34 -9
- package/fesm2022/acorex-components-code-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-combo-box.mjs +1 -1
- package/fesm2022/acorex-components-combo-box.mjs.map +1 -1
- package/fesm2022/{acorex-components-conversation-acorex-components-conversation-lk7dyqep.mjs → acorex-components-conversation-acorex-components-conversation-ck1BG3Hi.mjs} +6 -6
- package/fesm2022/{acorex-components-conversation-acorex-components-conversation-lk7dyqep.mjs.map → acorex-components-conversation-acorex-components-conversation-ck1BG3Hi.mjs.map} +1 -1
- package/fesm2022/{acorex-components-conversation-picker-rename-file-dialog.component-BZiT5TPq.mjs → acorex-components-conversation-picker-rename-file-dialog.component-CucWbe-K.mjs} +2 -2
- package/fesm2022/{acorex-components-conversation-picker-rename-file-dialog.component-BZiT5TPq.mjs.map → acorex-components-conversation-picker-rename-file-dialog.component-CucWbe-K.mjs.map} +1 -1
- package/fesm2022/acorex-components-conversation.mjs +1 -1
- package/fesm2022/acorex-components-data-table.mjs +3 -3
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +2 -2
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-editor.mjs +8 -7
- package/fesm2022/acorex-components-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-fab.mjs +1 -1
- package/fesm2022/acorex-components-fab.mjs.map +1 -1
- package/fesm2022/acorex-components-lookup.mjs +1 -1
- package/fesm2022/acorex-components-lookup.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +197 -200
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-password-box.mjs +1 -1
- package/fesm2022/acorex-components-password-box.mjs.map +1 -1
- package/fesm2022/acorex-components-popover.mjs +8 -1
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +2 -24
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-reaction.mjs +1 -1
- package/fesm2022/acorex-components-reaction.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +6 -6
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +43 -30
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/package.json +3 -3
- package/types/acorex-components-calendar.d.ts +0 -1
- package/types/acorex-components-code-editor.d.ts +3 -0
- package/types/acorex-components-media-viewer.d.ts +1 -0
- package/types/acorex-components-popover.d.ts +5 -1
- package/types/acorex-components-popup.d.ts +0 -9
- package/types/acorex-components-side-menu.d.ts +6 -8
|
@@ -7,12 +7,11 @@ import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation'
|
|
|
7
7
|
import { AXHtmlUtil, AXUnsubscriber } from '@acorex/core/utils';
|
|
8
8
|
import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
|
|
9
9
|
import * as i0 from '@angular/core';
|
|
10
|
-
import { model,
|
|
10
|
+
import { model, input, output, viewChild, signal, computed, inject, ElementRef, PLATFORM_ID, DestroyRef, contentChildren, effect, afterNextRender, ViewEncapsulation, Component, HostBinding, Directive, NgModule } from '@angular/core';
|
|
11
11
|
import { RouterLink, RouterLinkActive, Router } from '@angular/router';
|
|
12
12
|
import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
|
|
13
13
|
import { AXOutlineContainerDirective } from '@acorex/cdk/outline';
|
|
14
|
-
import {
|
|
15
|
-
import { map, distinctUntilChanged } from 'rxjs';
|
|
14
|
+
import { fromEvent, map, distinctUntilChanged } from 'rxjs';
|
|
16
15
|
|
|
17
16
|
/**
|
|
18
17
|
* DI token for the parent `ax-side-menu`. Child `ax-side-menu-item`s inject this
|
|
@@ -33,7 +32,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
|
|
|
33
32
|
super(...arguments);
|
|
34
33
|
this.text = model('', /* @ts-ignore */
|
|
35
34
|
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
36
|
-
this.active =
|
|
35
|
+
this.active = input(false, /* @ts-ignore */
|
|
37
36
|
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
38
37
|
this.isLoading = model(false, /* @ts-ignore */
|
|
39
38
|
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
@@ -397,7 +396,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
|
|
|
397
396
|
}
|
|
398
397
|
}
|
|
399
398
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange",
|
|
399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], queries: [{ propertyName: "childItems", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuItemTrigger", first: true, predicate: ["menuItemTrigger"], descendants: true, isSignal: true }, { propertyName: "childrenSlot", first: true, predicate: ["childrenSlot"], descendants: true, isSignal: true }, { propertyName: "childrenContextMenu", first: true, predicate: ["childrenContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n @if (!isCompactMode()) {\n <ng-content select=\"ax-title\"></ng-content>\n }\n @if (routerLink()) {\n <a\n #menuItemTrigger\n [axRipple]\n [target]=\"target()\"\n class=\"ax-side-item\"\n [routerLink]=\"routerLink()\"\n (click)=\"handleClickEvent($event)\"\n [class.ax-state-disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled || null\"\n [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n [attr.aria-label]=\"compactAriaLabel()\"\n [routerLinkActive]=\"routerLinkActive()\"\n [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n >\n <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n </a>\n } @else if (href()) {\n <a\n #menuItemTrigger\n [axRipple]\n [href]=\"href()\"\n [target]=\"target()\"\n class=\"ax-side-item\"\n [class.ax-state-active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled || null\"\n [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n [attr.aria-label]=\"compactAriaLabel()\"\n (click)=\"handleClickEvent($event)\"\n [class.ax-state-disabled]=\"disabled\"\n >\n <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n </a>\n } @else {\n <div\n #menuItemTrigger\n [axRipple]\n class=\"ax-side-item\"\n role=\"button\"\n tabindex=\"0\"\n [class.ax-state-active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled || null\"\n [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n [attr.aria-label]=\"compactAriaLabel()\"\n (click)=\"handleClickEvent($event)\"\n (keydown.enter)=\"handleClickEvent($event)\"\n (keydown.space)=\"handleClickEvent($event)\"\n [class.ax-state-disabled]=\"disabled\"\n >\n <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n </div>\n }\n\n <div\n class=\"ax-side-children\"\n [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (isCompactMode() && isFirstLevel())\"\n [class.ax-empty]=\"!hasChild() && !isLoading()\"\n >\n @if (isLoading()) {\n <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n }\n <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n </div>\n </div>\n\n @if (isCompactMode() && hasChild()) {\n <ax-context-menu\n #childrenContextMenu\n class=\"ax-side-menu-children-context-menu\"\n [openOn]=\"'hover'\"\n [closeOn]=\"'leave'\"\n [closeOnRouteChange]=\"true\"\n (onItemClick)=\"handleContextMenuItemClick($event)\"\n (onClose)=\"handleContextMenuClosed()\"\n />\n }\n\n <ng-content select=\"ax-divider\"></ng-content>\n <ng-template #menuItemContent>\n <div class=\"ax-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <div class=\"ax-inside-text\">\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"ax-end-side\">\n <ng-content select=\"ax-suffix\"></ng-content>\n @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n }\n @if (isLoading()) {\n <ax-loading></ax-loading>\n }\n </div>\n </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
401
400
|
}
|
|
402
401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
|
|
403
402
|
type: Component,
|
|
@@ -412,7 +411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
412
411
|
AXTooltipModule,
|
|
413
412
|
AXContextMenuComponent,
|
|
414
413
|
], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n @if (!isCompactMode()) {\n <ng-content select=\"ax-title\"></ng-content>\n }\n @if (routerLink()) {\n <a\n #menuItemTrigger\n [axRipple]\n [target]=\"target()\"\n class=\"ax-side-item\"\n [routerLink]=\"routerLink()\"\n (click)=\"handleClickEvent($event)\"\n [class.ax-state-disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled || null\"\n [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n [attr.aria-label]=\"compactAriaLabel()\"\n [routerLinkActive]=\"routerLinkActive()\"\n [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n >\n <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n </a>\n } @else if (href()) {\n <a\n #menuItemTrigger\n [axRipple]\n [href]=\"href()\"\n [target]=\"target()\"\n class=\"ax-side-item\"\n [class.ax-state-active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled || null\"\n [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n [attr.aria-label]=\"compactAriaLabel()\"\n (click)=\"handleClickEvent($event)\"\n [class.ax-state-disabled]=\"disabled\"\n >\n <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n </a>\n } @else {\n <div\n #menuItemTrigger\n [axRipple]\n class=\"ax-side-item\"\n role=\"button\"\n tabindex=\"0\"\n [class.ax-state-active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.aria-disabled]=\"disabled || null\"\n [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n [attr.aria-label]=\"compactAriaLabel()\"\n (click)=\"handleClickEvent($event)\"\n (keydown.enter)=\"handleClickEvent($event)\"\n (keydown.space)=\"handleClickEvent($event)\"\n [class.ax-state-disabled]=\"disabled\"\n >\n <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n </div>\n }\n\n <div\n class=\"ax-side-children\"\n [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (isCompactMode() && isFirstLevel())\"\n [class.ax-empty]=\"!hasChild() && !isLoading()\"\n >\n @if (isLoading()) {\n <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n }\n <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n </div>\n </div>\n\n @if (isCompactMode() && hasChild()) {\n <ax-context-menu\n #childrenContextMenu\n class=\"ax-side-menu-children-context-menu\"\n [openOn]=\"'hover'\"\n [closeOn]=\"'leave'\"\n [closeOnRouteChange]=\"true\"\n (onItemClick)=\"handleContextMenuItemClick($event)\"\n (onClose)=\"handleContextMenuClosed()\"\n />\n }\n\n <ng-content select=\"ax-divider\"></ng-content>\n <ng-template #menuItemContent>\n <div class=\"ax-start-side\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <div class=\"ax-inside-text\">\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"ax-end-side\">\n <ng-content select=\"ax-suffix\"></ng-content>\n @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n }\n @if (isLoading()) {\n <ax-loading></ax-loading>\n }\n </div>\n </ng-template>\n</div>\n" }]
|
|
415
|
-
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }
|
|
414
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], toggleOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnClick", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActive", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], menuItemTrigger: [{ type: i0.ViewChild, args: ['menuItemTrigger', { isSignal: true }] }], childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXSideMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], childrenSlot: [{ type: i0.ViewChild, args: ['childrenSlot', { isSignal: true }] }], childrenContextMenu: [{ type: i0.ViewChild, args: ['childrenContextMenu', { isSignal: true }] }] } });
|
|
416
415
|
|
|
417
416
|
/**
|
|
418
417
|
* @category
|
|
@@ -551,7 +550,7 @@ class AXSideMenuComponent extends NXComponent {
|
|
|
551
550
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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: [
|
|
552
551
|
{ provide: AXComponent, useExisting: AXSideMenuComponent },
|
|
553
552
|
{ provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
|
|
554
|
-
], 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: ["@layer properties;@layer components{ax-side-menu{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:inherit;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{margin-block:calc(var(--spacing, .25rem) * 4);display:block;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-transform:uppercase;opacity:70%}ax-side-menu>ax-title:first-child{margin-top:calc(var(--spacing, .25rem) * 0)}ax-side-menu ax-side-menu-item ax-divider{height:1px;width:100%;background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;box-sizing:border-box;display:flex;height:calc(var(--spacing, .25rem) * 10);max-height:calc(var(--spacing, .25rem) * 10);min-height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 0);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);transition-property:background-color,color,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);--tw-outline-style: none;outline-style:none;font-size:inherit}ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in srgb,#000 10%,transparent);background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}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.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-lightest-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-lightest-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;min-width:calc(var(--spacing, .25rem) * 0);align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:auto;gap:calc(var(--spacing, .25rem) * 3)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:calc(var(--spacing, .25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));transition-property:rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);line-height:initial}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-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:transparent;transition-property:background-color;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1;color:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in srgb,#000 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in oklab,var(--color-black, #000) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-children{margin-inline-start:calc(var(--spacing, .25rem) * 6);display:grid;grid-template-rows:repeat(1,minmax(0,1fr));opacity:100%;transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0;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 .ax-side-item{height:calc(var(--spacing, .25rem) * 9);max-height:calc(var(--spacing, .25rem) * 9);min-height:calc(var(--spacing, .25rem) * 9);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing, .25rem) * 1)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:calc(var(--spacing, .25rem) * 4)}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-look-with-line .ax-side-children{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children{border-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children .ax-side-children-content{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-side-menu.ax-mode-compact{align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;width:calc(var(--spacing, .25rem) * 14);flex-direction:column;align-items:center}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface) ))}:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 14);justify-content:center;padding:calc(var(--spacing, .25rem) * 0)!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);max-width:calc(var(--spacing, .25rem) * 10);min-width:calc(var(--spacing, .25rem) * 10);justify-content:center;gap:calc(var(--spacing, .25rem) * 0);padding-inline:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:none;justify-content:center;gap:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{--tw-scale-x: -100% ;scale:var(--tw-scale-x) var(--tw-scale-y)}[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}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition-property:none}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial;--tw-duration: initial;--tw-ease: initial;--tw-border-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\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", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
553
|
+
], 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.href ?? node.text ?? $index) {\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.href ?? child.text ?? $index) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ng-template>\n</ng-template>\n", styles: ["@layer properties;@layer components{ax-side-menu{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:inherit;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{margin-block:calc(var(--spacing, .25rem) * 4);display:block;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-transform:uppercase;opacity:70%}ax-side-menu>ax-title:first-child{margin-top:calc(var(--spacing, .25rem) * 0)}ax-side-menu ax-side-menu-item ax-divider{height:1px;width:100%;background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;box-sizing:border-box;display:flex;height:calc(var(--spacing, .25rem) * 10);max-height:calc(var(--spacing, .25rem) * 10);min-height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 0);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);transition-property:background-color,color,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);--tw-outline-style: none;outline-style:none;font-size:inherit}ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in srgb,#000 10%,transparent);background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}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.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-lightest-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-lightest-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;min-width:calc(var(--spacing, .25rem) * 0);align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:auto;gap:calc(var(--spacing, .25rem) * 3)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:calc(var(--spacing, .25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));transition-property:rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);line-height:initial}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-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:transparent;transition-property:background-color;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1;color:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in srgb,#000 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in oklab,var(--color-black, #000) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-children{margin-inline-start:calc(var(--spacing, .25rem) * 6);display:grid;grid-template-rows:repeat(1,minmax(0,1fr));opacity:100%;transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0;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 .ax-side-item{height:calc(var(--spacing, .25rem) * 9);max-height:calc(var(--spacing, .25rem) * 9);min-height:calc(var(--spacing, .25rem) * 9);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing, .25rem) * 1)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:calc(var(--spacing, .25rem) * 4)}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-look-with-line .ax-side-children{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children{border-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children .ax-side-children-content{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-side-menu.ax-mode-compact{align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;width:calc(var(--spacing, .25rem) * 14);flex-direction:column;align-items:center}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface) ))}:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 14);justify-content:center;padding:calc(var(--spacing, .25rem) * 0)!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);max-width:calc(var(--spacing, .25rem) * 10);min-width:calc(var(--spacing, .25rem) * 10);justify-content:center;gap:calc(var(--spacing, .25rem) * 0);padding-inline:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:none;justify-content:center;gap:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{--tw-scale-x: -100% ;scale:var(--tw-scale-x) var(--tw-scale-y)}[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}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition-property:none}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial;--tw-duration: initial;--tw-ease: initial;--tw-border-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\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", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
555
554
|
}
|
|
556
555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuComponent, decorators: [{
|
|
557
556
|
type: Component,
|
|
@@ -565,7 +564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
565
564
|
], providers: [
|
|
566
565
|
{ provide: AXComponent, useExisting: AXSideMenuComponent },
|
|
567
566
|
{ provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
|
|
568
|
-
], 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: ["@layer properties;@layer components{ax-side-menu{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:inherit;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{margin-block:calc(var(--spacing, .25rem) * 4);display:block;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-transform:uppercase;opacity:70%}ax-side-menu>ax-title:first-child{margin-top:calc(var(--spacing, .25rem) * 0)}ax-side-menu ax-side-menu-item ax-divider{height:1px;width:100%;background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;box-sizing:border-box;display:flex;height:calc(var(--spacing, .25rem) * 10);max-height:calc(var(--spacing, .25rem) * 10);min-height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 0);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);transition-property:background-color,color,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);--tw-outline-style: none;outline-style:none;font-size:inherit}ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in srgb,#000 10%,transparent);background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}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.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-lightest-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-lightest-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;min-width:calc(var(--spacing, .25rem) * 0);align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:auto;gap:calc(var(--spacing, .25rem) * 3)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:calc(var(--spacing, .25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));transition-property:rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);line-height:initial}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-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:transparent;transition-property:background-color;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1;color:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in srgb,#000 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in oklab,var(--color-black, #000) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-children{margin-inline-start:calc(var(--spacing, .25rem) * 6);display:grid;grid-template-rows:repeat(1,minmax(0,1fr));opacity:100%;transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0;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 .ax-side-item{height:calc(var(--spacing, .25rem) * 9);max-height:calc(var(--spacing, .25rem) * 9);min-height:calc(var(--spacing, .25rem) * 9);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing, .25rem) * 1)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:calc(var(--spacing, .25rem) * 4)}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-look-with-line .ax-side-children{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children{border-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children .ax-side-children-content{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-side-menu.ax-mode-compact{align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;width:calc(var(--spacing, .25rem) * 14);flex-direction:column;align-items:center}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface) ))}:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 14);justify-content:center;padding:calc(var(--spacing, .25rem) * 0)!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);max-width:calc(var(--spacing, .25rem) * 10);min-width:calc(var(--spacing, .25rem) * 10);justify-content:center;gap:calc(var(--spacing, .25rem) * 0);padding-inline:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:none;justify-content:center;gap:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{--tw-scale-x: -100% ;scale:var(--tw-scale-x) var(--tw-scale-y)}[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}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition-property:none}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial;--tw-duration: initial;--tw-ease: initial;--tw-border-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
567
|
+
], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node.href ?? node.text ?? $index) {\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.href ?? child.text ?? $index) {\n <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n }\n </ng-template>\n</ng-template>\n", styles: ["@layer properties;@layer components{ax-side-menu{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:inherit;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{margin-block:calc(var(--spacing, .25rem) * 4);display:block;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-transform:uppercase;opacity:70%}ax-side-menu>ax-title:first-child{margin-top:calc(var(--spacing, .25rem) * 0)}ax-side-menu ax-side-menu-item ax-divider{height:1px;width:100%;background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;box-sizing:border-box;display:flex;height:calc(var(--spacing, .25rem) * 10);max-height:calc(var(--spacing, .25rem) * 10);min-height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 0);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);transition-property:background-color,color,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);--tw-outline-style: none;outline-style:none;font-size:inherit}ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in srgb,#000 10%,transparent);background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}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.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-lightest-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-lightest-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;min-width:calc(var(--spacing, .25rem) * 0);align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:auto;gap:calc(var(--spacing, .25rem) * 3)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:calc(var(--spacing, .25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));transition-property:rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);line-height:initial}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-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:transparent;transition-property:background-color;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1;color:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in srgb,#000 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in oklab,var(--color-black, #000) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-children{margin-inline-start:calc(var(--spacing, .25rem) * 6);display:grid;grid-template-rows:repeat(1,minmax(0,1fr));opacity:100%;transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0;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 .ax-side-item{height:calc(var(--spacing, .25rem) * 9);max-height:calc(var(--spacing, .25rem) * 9);min-height:calc(var(--spacing, .25rem) * 9);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing, .25rem) * 1)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:calc(var(--spacing, .25rem) * 4)}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-look-with-line .ax-side-children{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children{border-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children .ax-side-children-content{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-side-menu.ax-mode-compact{align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;width:calc(var(--spacing, .25rem) * 14);flex-direction:column;align-items:center}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface) ))}:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 14);justify-content:center;padding:calc(var(--spacing, .25rem) * 0)!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);max-width:calc(var(--spacing, .25rem) * 10);min-width:calc(var(--spacing, .25rem) * 10);justify-content:center;gap:calc(var(--spacing, .25rem) * 0);padding-inline:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:none;justify-content:center;gap:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{--tw-scale-x: -100% ;scale:var(--tw-scale-x) var(--tw-scale-y)}[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}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition-property:none}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial;--tw-duration: initial;--tw-ease: initial;--tw-border-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
569
568
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], __hostClass: [{
|
|
570
569
|
type: HostBinding,
|
|
571
570
|
args: ['class']
|
|
@@ -574,47 +573,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
574
573
|
class AXOutlineSideMenuDirective {
|
|
575
574
|
constructor() {
|
|
576
575
|
this.router = inject(Router);
|
|
576
|
+
this.host = inject((ElementRef));
|
|
577
577
|
this.unsubscriber = inject(AXUnsubscriber);
|
|
578
578
|
this.sideMenu = inject(AXSideMenuComponent);
|
|
579
579
|
this.container = inject(AXOutlineContainerDirective);
|
|
580
580
|
this.#anr = afterNextRender(() => {
|
|
581
|
+
fromEvent(this.host.nativeElement, 'click', { capture: true })
|
|
582
|
+
.pipe(this.unsubscriber.takeUntilDestroy)
|
|
583
|
+
.subscribe((event) => this.handleSideMenuLinkClick(event));
|
|
581
584
|
this.container.outlineItems$
|
|
582
585
|
.pipe(this.unsubscriber.takeUntilDestroy, map((items) => {
|
|
583
586
|
if (!items || items.length === 0)
|
|
584
587
|
return [];
|
|
585
588
|
return this.buildNestedMenuItems(items);
|
|
586
|
-
}), distinctUntilChanged(
|
|
589
|
+
}), distinctUntilChanged((previous, next) => this.getStructuralSignature(previous) === this.getStructuralSignature(next) &&
|
|
590
|
+
this.getActiveSignature(previous) === this.getActiveSignature(next)))
|
|
587
591
|
.subscribe((menuItems) => {
|
|
588
|
-
this.
|
|
592
|
+
this.sideMenu.items.set(this.cloneMenuTree(menuItems));
|
|
589
593
|
});
|
|
590
594
|
});
|
|
591
595
|
}
|
|
592
596
|
#anr;
|
|
593
|
-
|
|
594
|
-
const
|
|
595
|
-
|
|
596
|
-
const currentSignature = this.getStructuralSignature(currentMenuItems || []);
|
|
597
|
-
if (newSignature !== currentSignature) {
|
|
598
|
-
this.sideMenu.items.set(newMenuItems);
|
|
597
|
+
handleSideMenuLinkClick(event) {
|
|
598
|
+
const target = event.target;
|
|
599
|
+
if (!(target instanceof Element)) {
|
|
599
600
|
return;
|
|
600
601
|
}
|
|
601
|
-
const
|
|
602
|
-
|
|
603
|
-
const currentActiveComponent = currentComponents.find((c) => c.active());
|
|
604
|
-
if (newActiveItem?.href === currentActiveComponent?.href()) {
|
|
602
|
+
const anchor = target.closest('a[href]');
|
|
603
|
+
if (!anchor || !this.host.nativeElement.contains(anchor)) {
|
|
605
604
|
return;
|
|
606
605
|
}
|
|
607
|
-
|
|
608
|
-
if (
|
|
609
|
-
|
|
610
|
-
|
|
606
|
+
const href = anchor.getAttribute('href');
|
|
607
|
+
if (!href?.includes('#')) {
|
|
608
|
+
return;
|
|
609
|
+
}
|
|
610
|
+
const id = decodeURIComponent(href.split('#')[1] ?? '');
|
|
611
|
+
if (!id || !this.container.outlineItems$.value.some((item) => item.id === id)) {
|
|
612
|
+
return;
|
|
611
613
|
}
|
|
614
|
+
event.preventDefault();
|
|
615
|
+
event.stopImmediatePropagation();
|
|
616
|
+
this.container.scrollToItem(id);
|
|
617
|
+
}
|
|
618
|
+
cloneMenuTree(items) {
|
|
619
|
+
return items.map((item) => ({
|
|
620
|
+
...item,
|
|
621
|
+
active: !!item.active,
|
|
622
|
+
items: item.items?.length ? this.cloneMenuTree(item.items) : [],
|
|
623
|
+
}));
|
|
624
|
+
}
|
|
625
|
+
getActiveSignature(items) {
|
|
626
|
+
return this.flattenMenuItems(items)
|
|
627
|
+
.map((item) => `${item.href ?? ''}:${item.active ? '1' : '0'}`)
|
|
628
|
+
.join('|');
|
|
612
629
|
}
|
|
613
|
-
/**
|
|
614
|
-
* Creates a string signature that represents the tree structure of the menu.
|
|
615
|
-
* Example: "href1(href1.1,href1.2),href2,href3"
|
|
616
|
-
* This will be different for a flat list vs. a nested list.
|
|
617
|
-
*/
|
|
618
630
|
getStructuralSignature(items) {
|
|
619
631
|
return items
|
|
620
632
|
.map((item) => {
|
|
@@ -646,6 +658,7 @@ class AXOutlineSideMenuDirective {
|
|
|
646
658
|
buildNestedMenuItems(items) {
|
|
647
659
|
const menuItemsMap = new Map();
|
|
648
660
|
const rootItems = [];
|
|
661
|
+
const baseUrl = this.router.url.split('#')[0];
|
|
649
662
|
items.forEach((item) => {
|
|
650
663
|
const menuItem = {
|
|
651
664
|
items: [],
|
|
@@ -653,7 +666,7 @@ class AXOutlineSideMenuDirective {
|
|
|
653
666
|
active: item.active,
|
|
654
667
|
toggleOnClick: false,
|
|
655
668
|
text: this.textReplace(item),
|
|
656
|
-
href: `${
|
|
669
|
+
href: `${baseUrl}#${item.id}`,
|
|
657
670
|
};
|
|
658
671
|
menuItemsMap.set(item.id, menuItem);
|
|
659
672
|
});
|