@smartbit4all/ng-client 6.0.15 → 6.0.16
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/esm2022/lib/view-context/smart-ui-action/components/menu/click/menu.component.mjs +3 -3
- package/esm2022/lib/view-context/smart-ui-action/components/menu/hover/hover-menu.component.mjs +3 -3
- package/esm2022/lib/view-context/smart-ui-action/ui-action-button/ui-action-button.component.mjs +9 -6
- package/fesm2022/smartbit4all-ng-client.mjs +12 -9
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/view-context/smart-ui-action/ui-action-button/ui-action-button.component.d.ts +1 -1
- package/package.json +1 -1
- package/smartbit4all-ng-client-6.0.16.tgz +0 -0
- package/smartbit4all-ng-client-6.0.15.tgz +0 -0
|
@@ -3573,26 +3573,29 @@ class UiActionButtonComponent {
|
|
|
3573
3573
|
this.iconPlaceholder === ButtonIconPlaceholder.BOTH);
|
|
3574
3574
|
}
|
|
3575
3575
|
getJustifyContent() {
|
|
3576
|
+
if (!this.iconPlaceholder) {
|
|
3577
|
+
return null;
|
|
3578
|
+
}
|
|
3576
3579
|
if (this.iconPlaceholder === ButtonIconPlaceholder.BOTH) {
|
|
3577
3580
|
return 'center';
|
|
3578
3581
|
}
|
|
3579
|
-
if (this.iconPlaceholder === ButtonIconPlaceholder.PRE
|
|
3582
|
+
if (this.iconPlaceholder === ButtonIconPlaceholder.PRE) {
|
|
3580
3583
|
return 'flex-start';
|
|
3581
3584
|
}
|
|
3582
|
-
if (this.iconPlaceholder === ButtonIconPlaceholder.POST
|
|
3585
|
+
if (this.iconPlaceholder === ButtonIconPlaceholder.POST) {
|
|
3583
3586
|
return 'flex-end';
|
|
3584
3587
|
}
|
|
3585
|
-
return
|
|
3588
|
+
return null;
|
|
3586
3589
|
}
|
|
3587
3590
|
getSeparatorColor() {
|
|
3588
3591
|
return 'rgb(from var(--' + this.getColor() + '-color) r g b / 0.8)';
|
|
3589
3592
|
}
|
|
3590
3593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3591
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionButtonComponent, selector: "ui-action-button", inputs: { disabled: "disabled", descriptor: "descriptor", code: "code", addedCssClass: "addedCssClass", addBasicClasses: "addBasicClasses", iconPlaceholder: "iconPlaceholder" }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, usesOnChanges: true, ngImport: i0, template: "@if (descriptor.type === 'SEPARATOR') {\r\n <div class=\"separator\">\r\n @if (descriptor.title) {\r\n <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\r\n {{ descriptor.title }}\r\n </span>\r\n }\r\n <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n}\r\n\r\n<ng-template #buttonWithBadge>\r\n @if (descriptor && descriptor.badge) {\r\n <ui-badge [descriptor]=\"descriptor.badge\">\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n </ui-badge>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n @if (compLib === componentLibrary.PRIMENG) {\r\n <button\r\n pButton\r\n pRipple\r\n [smartTooltip]=\"descriptor.tooltip\"\r\n [disabled]=\"!!disabled\"\r\n (click)=\"onActionClicked($event, mainActionModel)\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [autofocus]=\"false\"\r\n [ngStyle]=\"calcStyle(descriptor.style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n } @else {\r\n <button\r\n mat-button\r\n [smartTooltip]=\"descriptor.tooltip\"\r\n [color]=\"descriptor.color\"\r\n [disabled]=\"!!disabled\"\r\n (click)=\"onActionClicked($event, mainActionModel)\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [ngStyle]=\"calcStyle(descriptor.style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n @if (renderPre() || renderPlaceholderPre()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n {{ descriptor.title }}\r\n @if (renderPost() || renderPlaceholderPost()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\r\n <smart-icon></smart-icon>\r\n } @else if (descriptor.iconResource) {\r\n <smart-icon
|
|
3594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionButtonComponent, selector: "ui-action-button", inputs: { disabled: "disabled", descriptor: "descriptor", code: "code", addedCssClass: "addedCssClass", addBasicClasses: "addBasicClasses", iconPlaceholder: "iconPlaceholder" }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, usesOnChanges: true, ngImport: i0, template: "@if (descriptor.type === 'SEPARATOR') {\r\n <div class=\"separator\">\r\n @if (descriptor.title) {\r\n <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\r\n {{ descriptor.title }}\r\n </span>\r\n }\r\n <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n}\r\n\r\n<ng-template #buttonWithBadge>\r\n @if (descriptor && descriptor.badge) {\r\n <ui-badge [descriptor]=\"descriptor.badge\">\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n </ui-badge>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n @if (compLib === componentLibrary.PRIMENG) {\r\n <button\r\n pButton\r\n pRipple\r\n [smartTooltip]=\"descriptor.tooltip\"\r\n [disabled]=\"!!disabled\"\r\n (click)=\"onActionClicked($event, mainActionModel)\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [autofocus]=\"false\"\r\n [ngStyle]=\"calcStyle(descriptor.style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n } @else {\r\n <button\r\n mat-button\r\n [smartTooltip]=\"descriptor.tooltip\"\r\n [color]=\"descriptor.color\"\r\n [disabled]=\"!!disabled\"\r\n (click)=\"onActionClicked($event, mainActionModel)\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [ngStyle]=\"calcStyle(descriptor.style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n @if (renderPre() || renderPlaceholderPre()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n {{ descriptor.title }}\r\n @if (renderPost() || renderPlaceholderPost()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\r\n <smart-icon></smart-icon>\r\n } @else if (descriptor.iconResource) {\r\n <smart-icon\r\n [imageResource]=\"descriptor.iconResource\"\r\n [color]=\"descriptor.iconColor || descriptor.color\"\r\n ></smart-icon>\r\n } @else {\r\n <smart-icon\r\n [icon]=\"descriptor.icon\"\r\n [color]=\"descriptor.iconColor || descriptor.color\"\r\n ></smart-icon>\r\n }\r\n</ng-template>\r\n", styles: [":host{--text-color: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mdc-text-button-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiBadgeComponent, selector: "ui-badge", inputs: ["descriptor", "inputValue"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }] }); }
|
|
3592
3595
|
}
|
|
3593
3596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionButtonComponent, decorators: [{
|
|
3594
3597
|
type: Component,
|
|
3595
|
-
args: [{ selector: 'ui-action-button', template: "@if (descriptor.type === 'SEPARATOR') {\r\n <div class=\"separator\">\r\n @if (descriptor.title) {\r\n <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\r\n {{ descriptor.title }}\r\n </span>\r\n }\r\n <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n}\r\n\r\n<ng-template #buttonWithBadge>\r\n @if (descriptor && descriptor.badge) {\r\n <ui-badge [descriptor]=\"descriptor.badge\">\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n </ui-badge>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n @if (compLib === componentLibrary.PRIMENG) {\r\n <button\r\n pButton\r\n pRipple\r\n [smartTooltip]=\"descriptor.tooltip\"\r\n [disabled]=\"!!disabled\"\r\n (click)=\"onActionClicked($event, mainActionModel)\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [autofocus]=\"false\"\r\n [ngStyle]=\"calcStyle(descriptor.style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n } @else {\r\n <button\r\n mat-button\r\n [smartTooltip]=\"descriptor.tooltip\"\r\n [color]=\"descriptor.color\"\r\n [disabled]=\"!!disabled\"\r\n (click)=\"onActionClicked($event, mainActionModel)\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [ngStyle]=\"calcStyle(descriptor.style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n @if (renderPre() || renderPlaceholderPre()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n {{ descriptor.title }}\r\n @if (renderPost() || renderPlaceholderPost()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\r\n <smart-icon></smart-icon>\r\n } @else if (descriptor.iconResource) {\r\n <smart-icon
|
|
3598
|
+
args: [{ selector: 'ui-action-button', template: "@if (descriptor.type === 'SEPARATOR') {\r\n <div class=\"separator\">\r\n @if (descriptor.title) {\r\n <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\r\n {{ descriptor.title }}\r\n </span>\r\n }\r\n <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n}\r\n\r\n<ng-template #buttonWithBadge>\r\n @if (descriptor && descriptor.badge) {\r\n <ui-badge [descriptor]=\"descriptor.badge\">\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n </ui-badge>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n @if (compLib === componentLibrary.PRIMENG) {\r\n <button\r\n pButton\r\n pRipple\r\n [smartTooltip]=\"descriptor.tooltip\"\r\n [disabled]=\"!!disabled\"\r\n (click)=\"onActionClicked($event, mainActionModel)\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [autofocus]=\"false\"\r\n [ngStyle]=\"calcStyle(descriptor.style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n } @else {\r\n <button\r\n mat-button\r\n [smartTooltip]=\"descriptor.tooltip\"\r\n [color]=\"descriptor.color\"\r\n [disabled]=\"!!disabled\"\r\n (click)=\"onActionClicked($event, mainActionModel)\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [ngStyle]=\"calcStyle(descriptor.style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n @if (renderPre() || renderPlaceholderPre()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n {{ descriptor.title }}\r\n @if (renderPost() || renderPlaceholderPost()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\r\n <smart-icon></smart-icon>\r\n } @else if (descriptor.iconResource) {\r\n <smart-icon\r\n [imageResource]=\"descriptor.iconResource\"\r\n [color]=\"descriptor.iconColor || descriptor.color\"\r\n ></smart-icon>\r\n } @else {\r\n <smart-icon\r\n [icon]=\"descriptor.icon\"\r\n [color]=\"descriptor.iconColor || descriptor.color\"\r\n ></smart-icon>\r\n }\r\n</ng-template>\r\n", styles: [":host{--text-color: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mdc-text-button-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}\n"] }]
|
|
3596
3599
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
|
|
3597
3600
|
type: Inject,
|
|
3598
3601
|
args: [COMPONENT_LIBRARY]
|
|
@@ -6754,11 +6757,11 @@ class ClickMenuComponent {
|
|
|
6754
6757
|
});
|
|
6755
6758
|
}
|
|
6756
6759
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClickMenuComponent, deps: [{ token: UiMenuService }, { token: i2$2.Overlay }, { token: i0.ViewContainerRef }, { token: i2$2.OverlayPositionBuilder }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6757
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu", menuOpenDirection: "menuOpenDirection" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-tiered-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-tiered-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n (actionClick)=\"toggleMenu($event.event)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect:hover,.hoverEffect:hover ::ng-deep button{background-color:#f1f5f9}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
|
|
6760
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu", menuOpenDirection: "menuOpenDirection" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-tiered-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-tiered-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n (actionClick)=\"toggleMenu($event.event)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:#f1f5f9!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
|
|
6758
6761
|
}
|
|
6759
6762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClickMenuComponent, decorators: [{
|
|
6760
6763
|
type: Component,
|
|
6761
|
-
args: [{ selector: 'ui-tiered-menu', template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-tiered-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-tiered-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n (actionClick)=\"toggleMenu($event.event)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect:hover,.hoverEffect:hover ::ng-deep button{background-color:#f1f5f9}\n"] }]
|
|
6764
|
+
args: [{ selector: 'ui-tiered-menu', template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-tiered-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-tiered-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n (actionClick)=\"toggleMenu($event.event)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:#f1f5f9}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:#f1f5f9}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:#f1f5f9!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}\n"] }]
|
|
6762
6765
|
}], ctorParameters: () => [{ type: UiMenuService }, { type: i2$2.Overlay }, { type: i0.ViewContainerRef }, { type: i2$2.OverlayPositionBuilder }, { type: ComponentLibrary, decorators: [{
|
|
6763
6766
|
type: Inject,
|
|
6764
6767
|
args: [COMPONENT_LIBRARY]
|
|
@@ -6991,11 +6994,11 @@ class HoverMenuComponent {
|
|
|
6991
6994
|
});
|
|
6992
6995
|
}
|
|
6993
6996
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HoverMenuComponent, deps: [{ token: UiMenuService }, { token: i2$2.Overlay }, { token: i0.ViewContainerRef }, { token: i2$2.OverlayPositionBuilder }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6994
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu", menuOpenDirection: "menuOpenDirection" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-hover-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-hover-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n (mouseenter)=\"openMenu($event)\"\r\n (actionClick)=\"onActionClick(triggerAction)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect:hover,.hoverEffect:hover ::ng-deep button{background-color:#f1f5f9}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
|
|
6997
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu", menuOpenDirection: "menuOpenDirection" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-hover-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-hover-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n (mouseenter)=\"openMenu($event)\"\r\n (actionClick)=\"onActionClick(triggerAction)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:#f1f5f9!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
|
|
6995
6998
|
}
|
|
6996
6999
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HoverMenuComponent, decorators: [{
|
|
6997
7000
|
type: Component,
|
|
6998
|
-
args: [{ selector: 'ui-hover-menu', template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-hover-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-hover-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n (mouseenter)=\"openMenu($event)\"\r\n (actionClick)=\"onActionClick(triggerAction)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect:hover,.hoverEffect:hover ::ng-deep button{background-color:#f1f5f9}\n"] }]
|
|
7001
|
+
args: [{ selector: 'ui-hover-menu', template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-hover-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-hover-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n (mouseenter)=\"openMenu($event)\"\r\n (actionClick)=\"onActionClick(triggerAction)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:#fff;width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:#fff;box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:#f1f5f9!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}\n"] }]
|
|
6999
7002
|
}], ctorParameters: () => [{ type: UiMenuService }, { type: i2$2.Overlay }, { type: i0.ViewContainerRef }, { type: i2$2.OverlayPositionBuilder }, { type: ComponentLibrary, decorators: [{
|
|
7000
7003
|
type: Inject,
|
|
7001
7004
|
args: [COMPONENT_LIBRARY]
|