@acorex/components 20.7.25 → 20.7.27
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-data-pager.mjs +3 -2
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +5 -0
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +27 -16
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-step-wizard.mjs +4 -4
- package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +11 -2
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/package.json +15 -15
- package/side-menu/index.d.ts +4 -1
- package/step-wizard/index.d.ts +1 -1
|
@@ -7,7 +7,7 @@ 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, output,
|
|
10
|
+
import { model, output, input, viewChild, signal, computed, inject, ElementRef, PLATFORM_ID, DestroyRef, contentChildren, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, 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';
|
|
@@ -36,7 +36,6 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
|
|
|
36
36
|
this.isLoading = model(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
37
37
|
this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
|
|
38
38
|
this.onClick = output();
|
|
39
|
-
this.tooltipStatus = signal(false, ...(ngDevMode ? [{ debugName: "tooltipStatus" }] : []));
|
|
40
39
|
this.tooltipText = input('', ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
|
|
41
40
|
this.toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : []));
|
|
42
41
|
this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
|
|
@@ -52,13 +51,20 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
|
|
|
52
51
|
if (!this.isCompactMode()) {
|
|
53
52
|
return false;
|
|
54
53
|
}
|
|
55
|
-
|
|
56
|
-
return !host.parentElement?.closest('.ax-side-children-content');
|
|
54
|
+
return !this.hostElement.parentElement?.closest('.ax-side-children-content');
|
|
57
55
|
}, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : []));
|
|
56
|
+
/** Tooltip text for first-level items in compact mode only. */
|
|
57
|
+
this.tooltipContent = computed(() => {
|
|
58
|
+
if (!this.isFirstLevel()) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
return this.tooltipText().trim() || this.text().trim() || this.contentLabel().trim() || null;
|
|
62
|
+
}, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
|
|
58
63
|
this.elem = inject((ElementRef));
|
|
59
64
|
this.platformId = inject(PLATFORM_ID);
|
|
60
65
|
this.destroyRef = inject(DestroyRef);
|
|
61
66
|
this.menuMode = signal('full', ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
|
|
67
|
+
this.contentLabel = signal('', ...(ngDevMode ? [{ debugName: "contentLabel" }] : []));
|
|
62
68
|
this.childObserver = null;
|
|
63
69
|
this.childRefreshScheduled = false;
|
|
64
70
|
this.childItems = contentChildren(AXSideMenuItemComponent, ...(ngDevMode ? [{ debugName: "childItems", descendants: true }] : [{ descendants: true }]));
|
|
@@ -75,6 +81,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
|
|
|
75
81
|
}
|
|
76
82
|
this.reparentOrphanedChildren();
|
|
77
83
|
this.updateHasChild();
|
|
84
|
+
this.updateContentLabel();
|
|
78
85
|
this.childObserver = new MutationObserver((records) => {
|
|
79
86
|
if (!this.hasRelevantChildMutation(records)) {
|
|
80
87
|
return;
|
|
@@ -279,11 +286,13 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
|
|
|
279
286
|
this.childRefreshScheduled = false;
|
|
280
287
|
this.reparentOrphanedChildren();
|
|
281
288
|
this.updateHasChild();
|
|
289
|
+
this.updateContentLabel();
|
|
282
290
|
});
|
|
283
291
|
}
|
|
284
292
|
hasRelevantChildMutation(records) {
|
|
285
293
|
for (const record of records) {
|
|
286
|
-
if (this.nodeListContainsMenuStructuralNode(record.addedNodes) ||
|
|
294
|
+
if (this.nodeListContainsMenuStructuralNode(record.addedNodes) ||
|
|
295
|
+
this.nodeListContainsMenuStructuralNode(record.removedNodes)) {
|
|
287
296
|
return true;
|
|
288
297
|
}
|
|
289
298
|
}
|
|
@@ -346,8 +355,18 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
|
|
|
346
355
|
updateHasChild() {
|
|
347
356
|
this.hasChild.set(this.childItems().length > 0 || this.getDirectChildElements().length > 0);
|
|
348
357
|
}
|
|
358
|
+
updateContentLabel() {
|
|
359
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
360
|
+
return;
|
|
361
|
+
}
|
|
362
|
+
const span = this.hostElement.querySelector('.ax-start-side span, .ax-inside-text span');
|
|
363
|
+
const label = span?.textContent?.trim() || this.hostElement.querySelector('ax-text')?.textContent?.trim() || '';
|
|
364
|
+
if (label !== this.contentLabel()) {
|
|
365
|
+
this.contentLabel.set(label);
|
|
366
|
+
}
|
|
367
|
+
}
|
|
349
368
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
350
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", 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", active: "activeChange", 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]=\"
|
|
369
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", 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", active: "activeChange", 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 [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 (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 [class.ax-state-active]=\"active()\"\n (click)=\"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 (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 @if (text()) {\n <span>{{ text() }}</span>\n }\n <div class=\"ax-inside-text\">\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", "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", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
351
370
|
}
|
|
352
371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
|
|
353
372
|
type: Component,
|
|
@@ -361,7 +380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
361
380
|
AXTranslatorPipe,
|
|
362
381
|
AXTooltipModule,
|
|
363
382
|
AXContextMenuComponent,
|
|
364
|
-
], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], template: "<div [axTooltip]=\"
|
|
383
|
+
], 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 [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 (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 [class.ax-state-active]=\"active()\"\n (click)=\"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 (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 @if (text()) {\n <span>{{ text() }}</span>\n }\n <div class=\"ax-inside-text\">\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" }]
|
|
365
384
|
}] });
|
|
366
385
|
|
|
367
386
|
/**
|
|
@@ -408,13 +427,6 @@ class AXSideMenuComponent extends NXComponent {
|
|
|
408
427
|
this.domRefreshObserver.observe(this.elementRef.nativeElement, { childList: true, subtree: true });
|
|
409
428
|
this.destroyRef.onDestroy(() => this.domRefreshObserver?.disconnect());
|
|
410
429
|
});
|
|
411
|
-
this.#syncTooltips = effect(() => {
|
|
412
|
-
const isCompact = this.mode() === 'compact';
|
|
413
|
-
this._items().forEach((item) => {
|
|
414
|
-
const isFirstLevel = !item.getHostElement().parentElement?.closest('.ax-side-children-content');
|
|
415
|
-
item.tooltipStatus.set(isCompact && isFirstLevel);
|
|
416
|
-
});
|
|
417
|
-
}, ...(ngDevMode ? [{ debugName: "#syncTooltips" }] : []));
|
|
418
430
|
/** Push full/compact mode to every menu item whenever mode changes. */
|
|
419
431
|
this.#syncItemMode = effect(() => {
|
|
420
432
|
const mode = this.mode();
|
|
@@ -422,7 +434,6 @@ class AXSideMenuComponent extends NXComponent {
|
|
|
422
434
|
}, ...(ngDevMode ? [{ debugName: "#syncItemMode" }] : []));
|
|
423
435
|
}
|
|
424
436
|
#init;
|
|
425
|
-
#syncTooltips;
|
|
426
437
|
/** Push full/compact mode to every menu item whenever mode changes. */
|
|
427
438
|
#syncItemMode;
|
|
428
439
|
/**
|
|
@@ -491,7 +502,7 @@ class AXSideMenuComponent extends NXComponent {
|
|
|
491
502
|
allChildren
|
|
492
503
|
.filter((item) => {
|
|
493
504
|
const itemElement = item.getHostElement();
|
|
494
|
-
return this.hostElement.contains(itemElement) && !itemElement.parentElement?.closest('.ax-side-children-content');
|
|
505
|
+
return (this.hostElement.contains(itemElement) && !itemElement.parentElement?.closest('.ax-side-children-content'));
|
|
495
506
|
})
|
|
496
507
|
.forEach((item) => item.getHostElement().querySelector('.ax-side-item')?.classList.add('first-level'));
|
|
497
508
|
}
|