@smartbit4all/ng-client 4.5.53 → 4.5.54
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/smart-icon/smart-icon/ui-badge/ui-badge.component.mjs +10 -17
- package/esm2022/lib/smart-icon/smart-icon/ui-badge/ui-badge.directive.mjs +3 -3
- package/esm2022/lib/smart-tree/smarttree.component.mjs +4 -3
- package/esm2022/lib/smart-tree/smarttree.module.mjs +7 -3
- package/esm2022/lib/view-context/smart-ui-action/ui-action-button/ui-action-button.component.mjs +1 -3
- package/esm2022/lib/view-context/smart-view-context.service.mjs +2 -8
- package/fesm2022/smartbit4all-ng-client.mjs +19 -31
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/smart-icon/smart-icon/ui-badge/ui-badge.component.d.ts +5 -7
- package/lib/smart-tree/smarttree.module.d.ts +2 -1
- package/package.json +1 -1
- package/smartbit4all-ng-client-4.5.54.tgz +0 -0
- package/smartbit4all-ng-client-4.5.53.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, Component, EventEmitter, Output, signal,
|
|
2
|
+
import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, input, computed, Component, EventEmitter, Output, signal, ViewChildren, ViewChild, ElementRef, forwardRef, Pipe, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, output, effect, inject, ApplicationRef, viewChild, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common/http';
|
|
4
4
|
import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
|
|
5
5
|
import { Subject, lastValueFrom, take, tap, takeUntil, interval, startWith, map, distinctUntilChanged, catchError, throwError, from } from 'rxjs';
|
|
@@ -3226,16 +3226,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
3226
3226
|
}] } });
|
|
3227
3227
|
|
|
3228
3228
|
class UiBadgeComponent {
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
else if (this.inputValue) {
|
|
3234
|
-
this.effectiveValue = this.inputValue;
|
|
3235
|
-
}
|
|
3229
|
+
constructor() {
|
|
3230
|
+
this.descriptor = input();
|
|
3231
|
+
this.inputValue = input();
|
|
3232
|
+
this.effectiveValue = computed(() => this.descriptor()?.value || this.inputValue());
|
|
3236
3233
|
}
|
|
3237
3234
|
getBadgeClass() {
|
|
3238
|
-
switch (this.descriptor?.color?.toLowerCase()) {
|
|
3235
|
+
switch (this.descriptor()?.color?.toLowerCase()) {
|
|
3239
3236
|
case 'primary':
|
|
3240
3237
|
return 'badge-primary';
|
|
3241
3238
|
case 'secondary':
|
|
@@ -3251,16 +3248,12 @@ class UiBadgeComponent {
|
|
|
3251
3248
|
}
|
|
3252
3249
|
}
|
|
3253
3250
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3254
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiBadgeComponent, selector: "ui-badge", inputs: { descriptor: "descriptor", inputValue: "inputValue" }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n@if (effectiveValue) {\r\n<div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\r\n
|
|
3251
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiBadgeComponent, selector: "ui-badge", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n@if (effectiveValue()) {\r\n <div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\r\n {{ effectiveValue() }}\r\n </div>\r\n}\r\n", styles: [".ui-action-badge{position:absolute;top:.1rem;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0;padding:0 .5rem;border-radius:1rem;color:#fff;font-size:.75rem;font-weight:700;line-height:1rem;display:inline-block;text-align:center;white-space:nowrap;z-index:100}:host{display:flex;width:fit-content;height:fit-content;position:relative}.badge-primary{background-color:var(--primary-color)}.badge-secondary{background-color:var(--secondary-color)}.badge-accent{background-color:var(--accent-color)}.badge-error{background-color:var(--error-color)}.badge-warn{background-color:var(--warn-color)}.badge-default{background-color:#ef4444}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
3255
3252
|
}
|
|
3256
3253
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiBadgeComponent, decorators: [{
|
|
3257
3254
|
type: Component,
|
|
3258
|
-
args: [{ selector: 'ui-badge', template: "<ng-content></ng-content>\r\n\r\n@if (effectiveValue) {\r\n<div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\r\n
|
|
3259
|
-
}]
|
|
3260
|
-
type: Input
|
|
3261
|
-
}], inputValue: [{
|
|
3262
|
-
type: Input
|
|
3263
|
-
}] } });
|
|
3255
|
+
args: [{ selector: 'ui-badge', template: "<ng-content></ng-content>\r\n\r\n@if (effectiveValue()) {\r\n <div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\r\n {{ effectiveValue() }}\r\n </div>\r\n}\r\n", styles: [".ui-action-badge{position:absolute;top:.1rem;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0;padding:0 .5rem;border-radius:1rem;color:#fff;font-size:.75rem;font-weight:700;line-height:1rem;display:inline-block;text-align:center;white-space:nowrap;z-index:100}:host{display:flex;width:fit-content;height:fit-content;position:relative}.badge-primary{background-color:var(--primary-color)}.badge-secondary{background-color:var(--secondary-color)}.badge-accent{background-color:var(--accent-color)}.badge-error{background-color:var(--error-color)}.badge-warn{background-color:var(--warn-color)}.badge-default{background-color:#ef4444}\n"] }]
|
|
3256
|
+
}] });
|
|
3264
3257
|
|
|
3265
3258
|
class UiBadgeDirective {
|
|
3266
3259
|
constructor(vcr, el, renderer) {
|
|
@@ -3274,8 +3267,8 @@ class UiBadgeDirective {
|
|
|
3274
3267
|
const host = this.el.nativeElement;
|
|
3275
3268
|
const parent = host.parentNode;
|
|
3276
3269
|
const badgeComponent = this.vcr.createComponent(UiBadgeComponent);
|
|
3277
|
-
badgeComponent.
|
|
3278
|
-
badgeComponent.
|
|
3270
|
+
badgeComponent.setInput('descriptor', this.descriptor);
|
|
3271
|
+
badgeComponent.setInput('inputValue', this.inputValue);
|
|
3279
3272
|
this.renderer.insertBefore(parent, badgeComponent.location.nativeElement, host);
|
|
3280
3273
|
this.renderer.removeChild(parent, host);
|
|
3281
3274
|
this.renderer.appendChild(badgeComponent.location.nativeElement, host);
|
|
@@ -3426,7 +3419,6 @@ class UiActionButtonComponent {
|
|
|
3426
3419
|
this._destroy$.complete();
|
|
3427
3420
|
}
|
|
3428
3421
|
async onActionClicked(event, model) {
|
|
3429
|
-
event.stopPropagation();
|
|
3430
3422
|
this.actionClick.emit({
|
|
3431
3423
|
event,
|
|
3432
3424
|
code: model.uiAction.code,
|
|
@@ -3434,7 +3426,6 @@ class UiActionButtonComponent {
|
|
|
3434
3426
|
});
|
|
3435
3427
|
}
|
|
3436
3428
|
onActionDoubleClicked(event) {
|
|
3437
|
-
event.stopPropagation();
|
|
3438
3429
|
this.actionDoubleClick.emit({
|
|
3439
3430
|
event,
|
|
3440
3431
|
code: this.code,
|
|
@@ -4139,13 +4130,7 @@ class SmartViewContextService {
|
|
|
4139
4130
|
parameters: new Map(),
|
|
4140
4131
|
};
|
|
4141
4132
|
viewContextUpdate.deviceInfo.componentLibrary = this.componentLibrary;
|
|
4142
|
-
|
|
4143
|
-
var selectedTheme = await this.themeService.getSelectedTheme();
|
|
4144
|
-
viewContextUpdate.deviceInfo.themeName = selectedTheme.name;
|
|
4145
|
-
}
|
|
4146
|
-
catch (e) {
|
|
4147
|
-
// No themes are avalible
|
|
4148
|
-
}
|
|
4133
|
+
viewContextUpdate.deviceInfo.themeName = this.themeService.currentTheme();
|
|
4149
4134
|
this.viewContext = await this.view.updateViewContext(viewContextUpdate).toPromise();
|
|
4150
4135
|
return this.viewContext;
|
|
4151
4136
|
}
|
|
@@ -19215,11 +19200,11 @@ class SmartTreeComponent {
|
|
|
19215
19200
|
return `${cssClass}-${plusProperty}`;
|
|
19216
19201
|
}
|
|
19217
19202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartTreeComponent, selector: "smart-tree", inputs: { treeStyle: "treeStyle", treeService: "treeService" }, host: { properties: { "attr.data-testid": "this.testId" } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\r\n <smart-ui-action-toolbar\r\n *ngIf=\"uiActionModels.length\"\r\n [uiActionModels]=\"uiActionModels\"\r\n ></smart-ui-action-toolbar>\r\n <mat-tree\r\n #tree\r\n *ngIf=\"treeData\"\r\n [dataSource]=\"dataSource\"\r\n [treeControl]=\"treeControl\"\r\n class=\"sm-tree\"\r\n >\r\n <mat-nested-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n [ngClass]=\"getClassesForTreeNode(node)\"\r\n [ngStyle]=\"getNodeStyle(node)\"\r\n >\r\n <div\r\n [ngStyle]=\"getNodePadding(node)\"\r\n [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n class=\"mat-tree-node sm-tree-node\"\r\n (click)=\"onNodeClick($event, node)\"\r\n >\r\n <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onOpenNode($event, node)\">\r\n <div *ngIf=\"hasChild(node.level, node)\">\r\n {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </div>\r\n </mat-icon>\r\n </button>\r\n <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n <div class=\"sm-tree-row-caption\">\r\n {{ node.caption }}\r\n </div>\r\n <div class=\"sm-shortDescription-spacer\"></div>\r\n <div class=\"sm-tree-row-shortDescription\">\r\n {{ node.shortDescription }}\r\n </div>\r\n <div class=\"sm-shortDescription-button-spacer\"></div>\r\n <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n <button\r\n (click)=\"customButtonClicked($event, node.button)\"\r\n *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n mat-icon-button\r\n >\r\n <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n </button>\r\n <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n <button\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, node.button, true)\"\r\n >\r\n <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n >{{ node.button.label }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngFor=\"let button of node.button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, button, true)\"\r\n mat-menu-item\r\n [attr.data-testid]=\"button.code ?? null\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n >{{ button.label }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <button\r\n (click)=\"customButtonClicked($event, node.button)\"\r\n *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n mat-raised-button\r\n >\r\n <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n {{ node.button.icon }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n role=\"group\"\r\n >\r\n <ng-container matTreeNodeOutlet></ng-container>\r\n </div>\r\n </mat-nested-tree-node>\r\n </mat-tree>\r\n <div *ngIf=\"!treeData\">\r\n <div *ngIf=\"!treeData\" class=\"tree-skeleton\" aria-hidden=\"true\">\r\n <div class=\"skeleton-row\" style=\"--depth: 0; --w: 58%\">\r\n <span class=\"skeleton-caret\"></span>\r\n <span class=\"skeleton-label\"></span>\r\n </div>\r\n <div class=\"skeleton-row\" style=\"--depth: 1; --w: 72%\">\r\n <span class=\"skeleton-caret\"></span>\r\n <span class=\"skeleton-label\"></span>\r\n </div>\r\n <div class=\"skeleton-row\" style=\"--depth: 2; --w: 45%\">\r\n <span class=\"skeleton-label leaf\"></span>\r\n </div>\r\n <div class=\"skeleton-row\" style=\"--depth: 2; --w: 60%\">\r\n <span class=\"skeleton-label leaf\"></span>\r\n </div>\r\n <div class=\"skeleton-row\" style=\"--depth: 1; --w: 50%\">\r\n <span class=\"skeleton-caret\"></span>\r\n <span class=\"skeleton-label\"></span>\r\n </div>\r\n <div class=\"skeleton-row\" style=\"--depth: 2; --w: 65%\">\r\n <span class=\"skeleton-label leaf\"></span>\r\n </div>\r\n <div class=\"skeleton-row\" style=\"--depth: 0; --w: 40%\">\r\n <span class=\"skeleton-caret\"></span>\r\n <span class=\"skeleton-label\"></span>\r\n </div>\r\n <div class=\"skeleton-row\" style=\"--depth: 1; --w: 55%\">\r\n <span class=\"skeleton-label leaf\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.tree-skeleton{--skeleton-bg-color: #c7cbd1;display:flex;flex-direction:column;gap:.5rem;padding:1rem}.skeleton-row{display:flex;align-items:center;gap:.5rem;padding-left:calc(var(--depth, 0) * 1.25rem)}.skeleton-caret{width:.9rem;height:.9rem;border-radius:2px;background:var(--skeleton-bg-color);flex-shrink:0;animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label{height:1.2rem;width:var(--w);border-radius:4px;background:var(--skeleton-bg-color);animation:skeleton-pulse 2s ease-in-out infinite}.skeleton-label.leaf{margin-left:1.1rem}@keyframes skeleton-pulse{0%,to{opacity:.35}50%{opacity:1}}@media (prefers-reduced-motion: reduce){.skeleton-caret,.skeleton-label{animation:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i11$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i11$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }] }); }
|
|
19203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartTreeComponent, selector: "smart-tree", inputs: { treeStyle: "treeStyle", treeService: "treeService" }, host: { properties: { "attr.data-testid": "this.testId" } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\r\n <smart-ui-action-toolbar\r\n *ngIf=\"uiActionModels.length\"\r\n [uiActionModels]=\"uiActionModels\"\r\n ></smart-ui-action-toolbar>\r\n <mat-tree\r\n #tree\r\n *ngIf=\"treeData\"\r\n [dataSource]=\"dataSource\"\r\n [treeControl]=\"treeControl\"\r\n class=\"sm-tree\"\r\n >\r\n <mat-nested-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n [ngClass]=\"getClassesForTreeNode(node)\"\r\n [ngStyle]=\"getNodeStyle(node)\"\r\n >\r\n <div\r\n [ngStyle]=\"getNodePadding(node)\"\r\n [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n class=\"mat-tree-node sm-tree-node\"\r\n (click)=\"onNodeClick($event, node)\"\r\n >\r\n <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onOpenNode($event, node)\">\r\n <div *ngIf=\"hasChild(node.level, node)\">\r\n {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </div>\r\n </mat-icon>\r\n </button>\r\n <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n <div class=\"sm-tree-row-caption\">\r\n {{ node.caption }}\r\n </div>\r\n <div class=\"sm-shortDescription-spacer\"></div>\r\n <div class=\"sm-tree-row-shortDescription\">\r\n {{ node.shortDescription }}\r\n </div>\r\n <div class=\"sm-shortDescription-button-spacer\"></div>\r\n <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n <button\r\n (click)=\"customButtonClicked($event, node.button)\"\r\n *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n mat-icon-button\r\n >\r\n <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n </button>\r\n <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n <button\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, node.button, true)\"\r\n >\r\n <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n >{{ node.button.label }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngFor=\"let button of node.button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, button, true)\"\r\n mat-menu-item\r\n [attr.data-testid]=\"button.code ?? null\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n >{{ button.label }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <button\r\n (click)=\"customButtonClicked($event, node.button)\"\r\n *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n mat-raised-button\r\n >\r\n <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n {{ node.button.icon }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n role=\"group\"\r\n >\r\n <ng-container matTreeNodeOutlet></ng-container>\r\n </div>\r\n </mat-nested-tree-node>\r\n </mat-tree>\r\n <div *ngIf=\"!treeData\" class=\"tree-loading\">\r\n <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\r\n </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i11$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i11$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: i1$7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
19219
19204
|
}
|
|
19220
19205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartTreeComponent, decorators: [{
|
|
19221
19206
|
type: Component,
|
|
19222
|
-
args: [{ selector: 'smart-tree', template: "<div class=\"smartTreeContainer\">\r\n <smart-ui-action-toolbar\r\n *ngIf=\"uiActionModels.length\"\r\n [uiActionModels]=\"uiActionModels\"\r\n ></smart-ui-action-toolbar>\r\n <mat-tree\r\n #tree\r\n *ngIf=\"treeData\"\r\n [dataSource]=\"dataSource\"\r\n [treeControl]=\"treeControl\"\r\n class=\"sm-tree\"\r\n >\r\n <mat-nested-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n [ngClass]=\"getClassesForTreeNode(node)\"\r\n [ngStyle]=\"getNodeStyle(node)\"\r\n >\r\n <div\r\n [ngStyle]=\"getNodePadding(node)\"\r\n [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n class=\"mat-tree-node sm-tree-node\"\r\n (click)=\"onNodeClick($event, node)\"\r\n >\r\n <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onOpenNode($event, node)\">\r\n <div *ngIf=\"hasChild(node.level, node)\">\r\n {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </div>\r\n </mat-icon>\r\n </button>\r\n <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n <div class=\"sm-tree-row-caption\">\r\n {{ node.caption }}\r\n </div>\r\n <div class=\"sm-shortDescription-spacer\"></div>\r\n <div class=\"sm-tree-row-shortDescription\">\r\n {{ node.shortDescription }}\r\n </div>\r\n <div class=\"sm-shortDescription-button-spacer\"></div>\r\n <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n <button\r\n (click)=\"customButtonClicked($event, node.button)\"\r\n *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n mat-icon-button\r\n >\r\n <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n </button>\r\n <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n <button\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, node.button, true)\"\r\n >\r\n <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n >{{ node.button.label }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngFor=\"let button of node.button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, button, true)\"\r\n mat-menu-item\r\n [attr.data-testid]=\"button.code ?? null\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n >{{ button.label }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <button\r\n (click)=\"customButtonClicked($event, node.button)\"\r\n *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n mat-raised-button\r\n >\r\n <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n {{ node.button.icon }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n role=\"group\"\r\n >\r\n <ng-container matTreeNodeOutlet></ng-container>\r\n </div>\r\n </mat-nested-tree-node>\r\n </mat-tree>\r\n <div *ngIf=\"!treeData\"
|
|
19207
|
+
args: [{ selector: 'smart-tree', template: "<div class=\"smartTreeContainer\">\r\n <smart-ui-action-toolbar\r\n *ngIf=\"uiActionModels.length\"\r\n [uiActionModels]=\"uiActionModels\"\r\n ></smart-ui-action-toolbar>\r\n <mat-tree\r\n #tree\r\n *ngIf=\"treeData\"\r\n [dataSource]=\"dataSource\"\r\n [treeControl]=\"treeControl\"\r\n class=\"sm-tree\"\r\n >\r\n <mat-nested-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n [ngClass]=\"getClassesForTreeNode(node)\"\r\n [ngStyle]=\"getNodeStyle(node)\"\r\n >\r\n <div\r\n [ngStyle]=\"getNodePadding(node)\"\r\n [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n class=\"mat-tree-node sm-tree-node\"\r\n (click)=\"onNodeClick($event, node)\"\r\n >\r\n <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onOpenNode($event, node)\">\r\n <div *ngIf=\"hasChild(node.level, node)\">\r\n {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </div>\r\n </mat-icon>\r\n </button>\r\n <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n <div class=\"sm-tree-row-caption\">\r\n {{ node.caption }}\r\n </div>\r\n <div class=\"sm-shortDescription-spacer\"></div>\r\n <div class=\"sm-tree-row-shortDescription\">\r\n {{ node.shortDescription }}\r\n </div>\r\n <div class=\"sm-shortDescription-button-spacer\"></div>\r\n <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n <button\r\n (click)=\"customButtonClicked($event, node.button)\"\r\n *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n mat-icon-button\r\n >\r\n <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n </button>\r\n <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n <button\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, node.button, true)\"\r\n >\r\n <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n >{{ node.button.label }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n *ngFor=\"let button of node.button.menuItemButtons\"\r\n (click)=\"customButtonClicked($event, button, true)\"\r\n mat-menu-item\r\n [attr.data-testid]=\"button.code ?? null\"\r\n >\r\n <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n >{{ button.label }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <button\r\n (click)=\"customButtonClicked($event, node.button)\"\r\n *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n mat-raised-button\r\n >\r\n <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n {{ node.button.icon }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n role=\"group\"\r\n >\r\n <ng-container matTreeNodeOutlet></ng-container>\r\n </div>\r\n </mat-nested-tree-node>\r\n </mat-tree>\r\n <div *ngIf=\"!treeData\" class=\"tree-loading\">\r\n <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\r\n </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"] }]
|
|
19223
19208
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
|
|
19224
19209
|
type: ViewChildren,
|
|
19225
19210
|
args: [MatMenuTrigger]
|
|
@@ -19244,7 +19229,8 @@ class SmarttreeModule {
|
|
|
19244
19229
|
MatTreeModule,
|
|
19245
19230
|
MatMenuModule,
|
|
19246
19231
|
SmartIconModule,
|
|
19247
|
-
SmartViewContextModule
|
|
19232
|
+
SmartViewContextModule,
|
|
19233
|
+
MatProgressSpinnerModule], exports: [SmartTreeComponent] }); }
|
|
19248
19234
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, providers: [
|
|
19249
19235
|
SmarttreeService,
|
|
19250
19236
|
SmarttreeGenericService,
|
|
@@ -19256,7 +19242,8 @@ class SmarttreeModule {
|
|
|
19256
19242
|
MatTreeModule,
|
|
19257
19243
|
MatMenuModule,
|
|
19258
19244
|
SmartIconModule,
|
|
19259
|
-
SmartViewContextModule
|
|
19245
|
+
SmartViewContextModule,
|
|
19246
|
+
MatProgressSpinnerModule] }); }
|
|
19260
19247
|
}
|
|
19261
19248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, decorators: [{
|
|
19262
19249
|
type: NgModule,
|
|
@@ -19271,6 +19258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
19271
19258
|
MatMenuModule,
|
|
19272
19259
|
SmartIconModule,
|
|
19273
19260
|
SmartViewContextModule,
|
|
19261
|
+
MatProgressSpinnerModule,
|
|
19274
19262
|
],
|
|
19275
19263
|
exports: [SmartTreeComponent],
|
|
19276
19264
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|