@smartbit4all/ng-client 7.3.35 → 7.3.37
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/HTML-WIDGET.md +743 -743
- package/MIGRATION-7.0.md +2280 -2280
- package/README.md +206 -206
- package/WIDGETS.md +254 -254
- package/fesm2022/smartbit4all-ng-client.mjs +233 -189
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/package.json +1 -1
- package/smartbit4all-ng-client-7.3.37.tgz +0 -0
- package/src/styles/_ng-client-styles.scss +188 -188
- package/types/smartbit4all-ng-client.d.ts +17 -0
- package/smartbit4all-ng-client-7.3.35.tgz +0 -0
|
@@ -3460,11 +3460,11 @@ class UiBadgeComponent {
|
|
|
3460
3460
|
}
|
|
3461
3461
|
}
|
|
3462
3462
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3463
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiBadgeComponent, isStandalone: true, 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>\
|
|
3463
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiBadgeComponent, isStandalone: true, 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>\n\n@if (effectiveValue()) {\n <div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\n {{ effectiveValue() }}\n </div>\n}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
3464
3464
|
}
|
|
3465
3465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiBadgeComponent, decorators: [{
|
|
3466
3466
|
type: Component,
|
|
3467
|
-
args: [{ selector: 'ui-badge', imports: [NgClass], template: "<ng-content></ng-content>\
|
|
3467
|
+
args: [{ selector: 'ui-badge', imports: [NgClass], template: "<ng-content></ng-content>\n\n@if (effectiveValue()) {\n <div class=\"ui-action-badge\" [ngClass]=\"getBadgeClass()\">\n {{ effectiveValue() }}\n </div>\n}\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"] }]
|
|
3468
3468
|
}], propDecorators: { descriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: false }] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }] } });
|
|
3469
3469
|
|
|
3470
3470
|
class SmartTooltipDirective {
|
|
@@ -3722,11 +3722,11 @@ class SmartIconComponent {
|
|
|
3722
3722
|
return SmartStyleUtility.getNgStyles(resource.style);
|
|
3723
3723
|
}
|
|
3724
3724
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3725
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartIconComponent, isStandalone: true, selector: "smart-icon", inputs: { iconWithoutNamespace: { classPropertyName: "iconWithoutNamespace", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, imageResource: { classPropertyName: "imageResource", publicName: "imageResource", isSignal: false, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "@if (imageResource) {\
|
|
3725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartIconComponent, isStandalone: true, selector: "smart-icon", inputs: { iconWithoutNamespace: { classPropertyName: "iconWithoutNamespace", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, imageResource: { classPropertyName: "imageResource", publicName: "imageResource", isSignal: false, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "@if (imageResource) {\n <ng-container *ngTemplateOutlet=\"imageResourceIcon\" />\n} @else if (iconWithoutNamespace()) {\n <ng-container *ngTemplateOutlet=\"normalIcon\" />\n} @else {\n <ng-container *ngTemplateOutlet=\"emptyIcon\" />\n}\n\n<ng-template #emptyIcon>\n <mat-icon class=\"sb4-empty-icon mat-icon\"> </mat-icon>\n</ng-template>\n\n<ng-template #imageResourceIcon>\n @if (imageResource) {\n <div\n class=\"imageResourceIcon\"\n [smartTooltip]=\"imageResource.tooltip\"\n [uiBadge]=\"imageResource.badge\"\n >\n @if (imageResource.kind === imageResourceKind.URL) {\n <img\n [ngStyle]=\"getImageResourceStyle(imageResource)\"\n class=\"imageIcon\"\n [src]=\"imageResource.source\"\n [alt]=\"imageResource.identifier\"\n />\n } @else if (imageResource.identifier) {\n <ng-container *ngTemplateOutlet=\"normalIcon\"></ng-container>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #normalIcon>\n <ng-container *ngTemplateOutlet=\"materialIcon\" />\n</ng-template>\n\n<ng-template #materialIcon>\n @if (isCustom) {\n <mat-icon\n fontSet=\"material-symbols-outlined\"\n [ngStyle]=\"getImageResourceStyle(imageResource)\"\n [color]=\"color ?? 'primary'\"\n svgIcon=\"{{ icon }}\"\n ></mat-icon>\n } @else if (icon) {\n <mat-icon\n fontSet=\"material-symbols-outlined\"\n [ngStyle]=\"getImageResourceStyle(imageResource)\"\n [color]=\"color ?? 'primary'\"\n >\n {{ icon }}\n </mat-icon>\n }\n</ng-template>\n", styles: [":host{display:inline-flex}.imageIcon{height:1rem;max-width:1rem;border-radius:.3rem}.sb4-empty-icon{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: UiBadgeDirective, selector: "[uiBadge], [uiBadgeValue]", inputs: ["uiBadge", "uiBadgeValue"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3726
3726
|
}
|
|
3727
3727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartIconComponent, decorators: [{
|
|
3728
3728
|
type: Component,
|
|
3729
|
-
args: [{ selector: 'smart-icon', imports: [NgTemplateOutlet, MatIcon, SmartTooltipDirective, UiBadgeDirective, NgStyle], template: "@if (imageResource) {\
|
|
3729
|
+
args: [{ selector: 'smart-icon', imports: [NgTemplateOutlet, MatIcon, SmartTooltipDirective, UiBadgeDirective, NgStyle], template: "@if (imageResource) {\n <ng-container *ngTemplateOutlet=\"imageResourceIcon\" />\n} @else if (iconWithoutNamespace()) {\n <ng-container *ngTemplateOutlet=\"normalIcon\" />\n} @else {\n <ng-container *ngTemplateOutlet=\"emptyIcon\" />\n}\n\n<ng-template #emptyIcon>\n <mat-icon class=\"sb4-empty-icon mat-icon\"> </mat-icon>\n</ng-template>\n\n<ng-template #imageResourceIcon>\n @if (imageResource) {\n <div\n class=\"imageResourceIcon\"\n [smartTooltip]=\"imageResource.tooltip\"\n [uiBadge]=\"imageResource.badge\"\n >\n @if (imageResource.kind === imageResourceKind.URL) {\n <img\n [ngStyle]=\"getImageResourceStyle(imageResource)\"\n class=\"imageIcon\"\n [src]=\"imageResource.source\"\n [alt]=\"imageResource.identifier\"\n />\n } @else if (imageResource.identifier) {\n <ng-container *ngTemplateOutlet=\"normalIcon\"></ng-container>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #normalIcon>\n <ng-container *ngTemplateOutlet=\"materialIcon\" />\n</ng-template>\n\n<ng-template #materialIcon>\n @if (isCustom) {\n <mat-icon\n fontSet=\"material-symbols-outlined\"\n [ngStyle]=\"getImageResourceStyle(imageResource)\"\n [color]=\"color ?? 'primary'\"\n svgIcon=\"{{ icon }}\"\n ></mat-icon>\n } @else if (icon) {\n <mat-icon\n fontSet=\"material-symbols-outlined\"\n [ngStyle]=\"getImageResourceStyle(imageResource)\"\n [color]=\"color ?? 'primary'\"\n >\n {{ icon }}\n </mat-icon>\n }\n</ng-template>\n", styles: [":host{display:inline-flex}.imageIcon{height:1rem;max-width:1rem;border-radius:.3rem}.sb4-empty-icon{visibility:hidden}\n"] }]
|
|
3730
3730
|
}], propDecorators: { iconWithoutNamespace: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{
|
|
3731
3731
|
type: Input
|
|
3732
3732
|
}], imageResource: [{
|
|
@@ -4125,11 +4125,11 @@ class UiActionButtonComponent {
|
|
|
4125
4125
|
return null;
|
|
4126
4126
|
}
|
|
4127
4127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, viewActivated: { classPropertyName: "viewActivated", publicName: "viewActivated", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, rowState: { classPropertyName: "rowState", publicName: "rowState", isSignal: true, isRequired: false, transformFunction: null }, addedCssClass: { classPropertyName: "addedCssClass", publicName: "addedCssClass", isSignal: true, isRequired: false, transformFunction: null }, addBasicClasses: { classPropertyName: "addBasicClasses", publicName: "addBasicClasses", isSignal: true, isRequired: false, transformFunction: null }, iconPlaceholder: { classPropertyName: "iconPlaceholder", publicName: "iconPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, chords: { classPropertyName: "chords", publicName: "chords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, ngImport: i0, template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\
|
|
4128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, viewActivated: { classPropertyName: "viewActivated", publicName: "viewActivated", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, rowState: { classPropertyName: "rowState", publicName: "rowState", isSignal: true, isRequired: false, transformFunction: null }, addedCssClass: { classPropertyName: "addedCssClass", publicName: "addedCssClass", isSignal: true, isRequired: false, transformFunction: null }, addBasicClasses: { classPropertyName: "addBasicClasses", publicName: "addBasicClasses", isSignal: true, isRequired: false, transformFunction: null }, iconPlaceholder: { classPropertyName: "iconPlaceholder", publicName: "iconPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, chords: { classPropertyName: "chords", publicName: "chords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, ngImport: i0, template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\n <div class=\"separator\">\n @if (effectiveDescriptor().title) {\n <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\n {{ effectiveDescriptor().title }}\n </span>\n }\n <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\n}\n\n<ng-template #buttonWithBadge>\n @if (effectiveDescriptor() && effectiveDescriptor().badge) {\n <ui-badge [descriptor]=\"effectiveDescriptor().badge\">\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n </ui-badge>\n } @else {\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n }\n</ng-template>\n\n<ng-template #buttonTemplate>\n <button\n mat-button\n [smartTooltip]=\"tooltip()\"\n [color]=\"effectiveDescriptor().color\"\n [disabled]=\"!!disabled()\"\n (click)=\"onActionClicked($event, mainActionModel())\"\n (dblclick)=\"onActionDoubleClicked($event)\"\n [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\n [ngClass]=\"getCombinedClasses()\"\n [style.justify-content]=\"getJustifyContent()\"\n class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\n type=\"button\"\n [attr.data-testid]=\"code() ?? null\"\n [attr.data-testid2]=\"getDataTestId()\"\n [attr.aria-label]=\"getAriaLabel()\"\n [attr.aria-keyshortcuts]=\"getAriaKeyShortcuts()\"\n [attr.role]=\"tab() ? 'tab' : null\"\n [attr.aria-selected]=\"tab() ? viewActivated() === true : null\"\n >\n @if (isOnlyIcon()) {\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n <smart-icon></smart-icon>\n } @else if (effectiveDescriptor().iconResource) {\n <smart-icon\n [imageResource]=\"effectiveDescriptor().iconResource\"\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n ></smart-icon>\n } @else {\n <smart-icon\n [icon]=\"effectiveDescriptor().icon\"\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n ></smart-icon>\n }\n } @else {\n @if (renderPre() || renderPlaceholderPre()) {\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n }\n {{ effectiveDescriptor().title }}\n @if (renderPost() || renderPlaceholderPost()) {\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n }\n }\n </button>\n</ng-template>\n\n\n<ng-template #buttonIcon>\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n <smart-icon></smart-icon>\n } @else if (effectiveDescriptor().iconResource) {\n <smart-icon\n [imageResource]=\"effectiveDescriptor().iconResource\"\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n ></smart-icon>\n } @else {\n <smart-icon\n [icon]=\"effectiveDescriptor().icon\"\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n ></smart-icon>\n }\n</ng-template>\n", styles: [":host{--text-color: var(--color-text, #132033)}: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;white-space:nowrap}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mat-button-text-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:var(--color-text-muted, #68778e);padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid var(--color-border, #e4eaf2);margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #384372));border-color:var(--sb4-view-activated-border-color, transparent);font-weight:var(--sb4-view-activated-font-weight, 600)}:host ::ng-deep button.sb4-view-activated,:host ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-color, var(--primary-color-text, var(--primary-text-color, #ffffff)) )!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #384372))!important;box-shadow:var( --sb4-view-activated-hover-shadow, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) )}:host ::ng-deep button.sm-crumb-ahead{opacity:.6}:host ::ng-deep button.sm-crumb-current{opacity:1;font-weight:600;color:var(--color-text, #132033)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiBadgeComponent, selector: "ui-badge", inputs: ["descriptor", "inputValue"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
|
|
4129
4129
|
}
|
|
4130
4130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionButtonComponent, decorators: [{
|
|
4131
4131
|
type: Component,
|
|
4132
|
-
args: [{ selector: 'ui-action-button', imports: [NgTemplateOutlet, UiBadgeComponent, MatButton, SmartTooltipDirective, NgStyle, NgClass, SmartIconComponent], template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\
|
|
4132
|
+
args: [{ selector: 'ui-action-button', imports: [NgTemplateOutlet, UiBadgeComponent, MatButton, SmartTooltipDirective, NgStyle, NgClass, SmartIconComponent], template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\n <div class=\"separator\">\n @if (effectiveDescriptor().title) {\n <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\n {{ effectiveDescriptor().title }}\n </span>\n }\n <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\n}\n\n<ng-template #buttonWithBadge>\n @if (effectiveDescriptor() && effectiveDescriptor().badge) {\n <ui-badge [descriptor]=\"effectiveDescriptor().badge\">\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n </ui-badge>\n } @else {\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n }\n</ng-template>\n\n<ng-template #buttonTemplate>\n <button\n mat-button\n [smartTooltip]=\"tooltip()\"\n [color]=\"effectiveDescriptor().color\"\n [disabled]=\"!!disabled()\"\n (click)=\"onActionClicked($event, mainActionModel())\"\n (dblclick)=\"onActionDoubleClicked($event)\"\n [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\n [ngClass]=\"getCombinedClasses()\"\n [style.justify-content]=\"getJustifyContent()\"\n class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\n type=\"button\"\n [attr.data-testid]=\"code() ?? null\"\n [attr.data-testid2]=\"getDataTestId()\"\n [attr.aria-label]=\"getAriaLabel()\"\n [attr.aria-keyshortcuts]=\"getAriaKeyShortcuts()\"\n [attr.role]=\"tab() ? 'tab' : null\"\n [attr.aria-selected]=\"tab() ? viewActivated() === true : null\"\n >\n @if (isOnlyIcon()) {\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n <smart-icon></smart-icon>\n } @else if (effectiveDescriptor().iconResource) {\n <smart-icon\n [imageResource]=\"effectiveDescriptor().iconResource\"\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n ></smart-icon>\n } @else {\n <smart-icon\n [icon]=\"effectiveDescriptor().icon\"\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n ></smart-icon>\n }\n } @else {\n @if (renderPre() || renderPlaceholderPre()) {\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n }\n {{ effectiveDescriptor().title }}\n @if (renderPost() || renderPlaceholderPost()) {\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n }\n }\n </button>\n</ng-template>\n\n\n<ng-template #buttonIcon>\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n <smart-icon></smart-icon>\n } @else if (effectiveDescriptor().iconResource) {\n <smart-icon\n [imageResource]=\"effectiveDescriptor().iconResource\"\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n ></smart-icon>\n } @else {\n <smart-icon\n [icon]=\"effectiveDescriptor().icon\"\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n ></smart-icon>\n }\n</ng-template>\n", styles: [":host{--text-color: var(--color-text, #132033)}: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;white-space:nowrap}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mat-button-text-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:var(--color-text-muted, #68778e);padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid var(--color-border, #e4eaf2);margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #384372));border-color:var(--sb4-view-activated-border-color, transparent);font-weight:var(--sb4-view-activated-font-weight, 600)}:host ::ng-deep button.sb4-view-activated,:host ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-color, var(--primary-color-text, var(--primary-text-color, #ffffff)) )!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #384372))!important;box-shadow:var( --sb4-view-activated-hover-shadow, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) )}:host ::ng-deep button.sm-crumb-ahead{opacity:.6}:host ::ng-deep button.sm-crumb-current{opacity:1;font-weight:600;color:var(--color-text, #132033)}\n"] }]
|
|
4133
4133
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], descriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: false }] }], viewActivated: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActivated", required: false }] }], tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }], rowState: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowState", required: false }] }], addedCssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedCssClass", required: false }] }], addBasicClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "addBasicClasses", required: false }] }], iconPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPlaceholder", required: false }] }], chords: [{ type: i0.Input, args: [{ isSignal: true, alias: "chords", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], actionDoubleClick: [{ type: i0.Output, args: ["actionDoubleClick"] }] } });
|
|
4134
4134
|
|
|
4135
4135
|
class MessageDialogComponent {
|
|
@@ -4261,11 +4261,11 @@ class MessageDialogComponent {
|
|
|
4261
4261
|
return this.messageData.textType === MessageTextType.HTML;
|
|
4262
4262
|
}
|
|
4263
4263
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MessageDialogComponent, isStandalone: true, selector: "app-message-dialog", ngImport: i0, template: "@if (messageData) {\
|
|
4264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MessageDialogComponent, isStandalone: true, selector: "app-message-dialog", ngImport: i0, template: "@if (messageData) {\n <div class=\"taskDialogContainer\">\n <h2 class=\"{{ messageData.type }}\">\n {{ messageData.header }}\n </h2>\n @if (!isHtmlText()) {\n <p class=\"{{ messageData.type }}\">{{ messageData.text }}</p>\n }\n @if (isHtmlText()) {\n <div [innerHTML]=\"messageData.text\"></div>\n }\n <div class=\"buttonsContainer\">\n @for (button of buttons; track button) {\n <ui-action-button\n class=\"taskDialogButton\"\n [descriptor]=\"button\"\n [code]=\"button.code\"\n [attr.cdkFocusInitial]=\"button.code === initialFocusCode ? '' : null\"\n (actionClick)=\"button.action()\"\n />\n }\n </div>\n </div>\n}\n", styles: [".taskDialogContainer{min-width:30vw;display:flex;flex-direction:column;gap:.5rem}.spacer{flex:1}.buttonsContainer{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}h2,p{margin:0!important}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
4265
4265
|
}
|
|
4266
4266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageDialogComponent, decorators: [{
|
|
4267
4267
|
type: Component,
|
|
4268
|
-
args: [{ selector: 'app-message-dialog', imports: [UiActionButtonComponent], template: "@if (messageData) {\
|
|
4268
|
+
args: [{ selector: 'app-message-dialog', imports: [UiActionButtonComponent], template: "@if (messageData) {\n <div class=\"taskDialogContainer\">\n <h2 class=\"{{ messageData.type }}\">\n {{ messageData.header }}\n </h2>\n @if (!isHtmlText()) {\n <p class=\"{{ messageData.type }}\">{{ messageData.text }}</p>\n }\n @if (isHtmlText()) {\n <div [innerHTML]=\"messageData.text\"></div>\n }\n <div class=\"buttonsContainer\">\n @for (button of buttons; track button) {\n <ui-action-button\n class=\"taskDialogButton\"\n [descriptor]=\"button\"\n [code]=\"button.code\"\n [attr.cdkFocusInitial]=\"button.code === initialFocusCode ? '' : null\"\n (actionClick)=\"button.action()\"\n />\n }\n </div>\n </div>\n}\n", styles: [".taskDialogContainer{min-width:30vw;display:flex;flex-direction:column;gap:.5rem}.spacer{flex:1}.buttonsContainer{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}h2,p{margin:0!important}\n"] }]
|
|
4269
4269
|
}], ctorParameters: () => [] });
|
|
4270
4270
|
|
|
4271
4271
|
class SmartEmbeddedSlotDirective {
|
|
@@ -5317,11 +5317,11 @@ class SuccessSnackBarComponent {
|
|
|
5317
5317
|
"A mentés sikeres volt!";
|
|
5318
5318
|
}
|
|
5319
5319
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SuccessSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5320
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SuccessSnackBarComponent, isStandalone: true, selector: "app-success-snack-bar", ngImport: i0, template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\
|
|
5320
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SuccessSnackBarComponent, isStandalone: true, selector: "app-success-snack-bar", ngImport: i0, template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\n", styles: ["::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.successSnakBarContainer{color:#fff}\n"] }); }
|
|
5321
5321
|
}
|
|
5322
5322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SuccessSnackBarComponent, decorators: [{
|
|
5323
5323
|
type: Component,
|
|
5324
|
-
args: [{ selector: "app-success-snack-bar", template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\
|
|
5324
|
+
args: [{ selector: "app-success-snack-bar", template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\n", styles: ["::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.successSnakBarContainer{color:#fff}\n"] }]
|
|
5325
5325
|
}], ctorParameters: () => [] });
|
|
5326
5326
|
|
|
5327
5327
|
class InvalidFieldsSnackBarComponent {
|
|
@@ -5330,11 +5330,11 @@ class InvalidFieldsSnackBarComponent {
|
|
|
5330
5330
|
}
|
|
5331
5331
|
ngOnInit() { }
|
|
5332
5332
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InvalidFieldsSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: InvalidFieldsSnackBarComponent, isStandalone: true, selector: "app-invalid-fields-snack-bar", ngImport: i0, template: "<div class=\"invalidFieldsSnackBar\">\
|
|
5333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: InvalidFieldsSnackBarComponent, isStandalone: true, selector: "app-invalid-fields-snack-bar", ngImport: i0, template: "<div class=\"invalidFieldsSnackBar\">\n <!-- <div class=\"invalidFieldsSnackBarContainer\" *ngIf=\"data.message\">\n <span class=\"successSnakBarContainer\" matSnackBarLabel>\n {{ data.message }}\n </span>\n </div> -->\n <div class=\"invalidFieldsSnackBarContainer\">\n <span class=\"invalidFieldsMessage\" matSnackBarLabel> Hi\u00E1nyos vagy hib\u00E1s adatok! </span>\n </div>\n</div>\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"], dependencies: [{ kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }] }); }
|
|
5334
5334
|
}
|
|
5335
5335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InvalidFieldsSnackBarComponent, decorators: [{
|
|
5336
5336
|
type: Component,
|
|
5337
|
-
args: [{ selector: 'app-invalid-fields-snack-bar', imports: [MatSnackBarLabel], template: "<div class=\"invalidFieldsSnackBar\">\
|
|
5337
|
+
args: [{ selector: 'app-invalid-fields-snack-bar', imports: [MatSnackBarLabel], template: "<div class=\"invalidFieldsSnackBar\">\n <!-- <div class=\"invalidFieldsSnackBarContainer\" *ngIf=\"data.message\">\n <span class=\"successSnakBarContainer\" matSnackBarLabel>\n {{ data.message }}\n </span>\n </div> -->\n <div class=\"invalidFieldsSnackBarContainer\">\n <span class=\"invalidFieldsMessage\" matSnackBarLabel> Hi\u00E1nyos vagy hib\u00E1s adatok! </span>\n </div>\n</div>\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"] }]
|
|
5338
5338
|
}] });
|
|
5339
5339
|
|
|
5340
5340
|
/**
|
|
@@ -6047,46 +6047,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
6047
6047
|
* derived from another one (`--tree-active-background` from `--accent-color`) is not declared
|
|
6048
6048
|
* here but resolved where it is read, so a host that sets only the base token on `body` moves it.
|
|
6049
6049
|
*/
|
|
6050
|
-
const THEME_DEFAULTS_CSS = `
|
|
6051
|
-
:root {
|
|
6052
|
-
--color-surface: #ffffff;
|
|
6053
|
-
--color-surface-alt: #f4f6fb;
|
|
6054
|
-
--color-text: #132033;
|
|
6055
|
-
--color-text-muted: #68778e;
|
|
6056
|
-
--color-border: #e4eaf2;
|
|
6057
|
-
|
|
6058
|
-
--primary-color: #384372;
|
|
6059
|
-
--secondary-color: #a6aabd60;
|
|
6060
|
-
--accent-color: #20b6a8;
|
|
6061
|
-
--warn-color: #d51d1d;
|
|
6062
|
-
--success-color: #16a34a;
|
|
6063
|
-
--primary-text-color: #ffffff;
|
|
6064
|
-
--warning-color: #d97706;
|
|
6065
|
-
--info-color: #64748b;
|
|
6066
|
-
|
|
6067
|
-
--tree-active-color: #ffffff;
|
|
6068
|
-
}
|
|
6069
|
-
|
|
6070
|
-
.theme-dark {
|
|
6071
|
-
color-scheme: dark;
|
|
6072
|
-
|
|
6073
|
-
--color-surface: #1e293b;
|
|
6074
|
-
--color-surface-alt: #273449;
|
|
6075
|
-
--color-text: #e2e8f0;
|
|
6076
|
-
--color-text-muted: #94a3b8;
|
|
6077
|
-
--color-border: #334155;
|
|
6078
|
-
|
|
6079
|
-
--primary-color: #818cf8;
|
|
6080
|
-
--secondary-color: #a6aabd40;
|
|
6081
|
-
--accent-color: #2dd4bf;
|
|
6082
|
-
--warn-color: #f87171;
|
|
6083
|
-
--success-color: #4ade80;
|
|
6084
|
-
--primary-text-color: #0f172a;
|
|
6085
|
-
--warning-color: #fbbf24;
|
|
6086
|
-
--info-color: #7dd3fc;
|
|
6087
|
-
|
|
6088
|
-
--tree-active-color: #0f172a;
|
|
6089
|
-
}
|
|
6050
|
+
const THEME_DEFAULTS_CSS = `
|
|
6051
|
+
:root {
|
|
6052
|
+
--color-surface: #ffffff;
|
|
6053
|
+
--color-surface-alt: #f4f6fb;
|
|
6054
|
+
--color-text: #132033;
|
|
6055
|
+
--color-text-muted: #68778e;
|
|
6056
|
+
--color-border: #e4eaf2;
|
|
6057
|
+
|
|
6058
|
+
--primary-color: #384372;
|
|
6059
|
+
--secondary-color: #a6aabd60;
|
|
6060
|
+
--accent-color: #20b6a8;
|
|
6061
|
+
--warn-color: #d51d1d;
|
|
6062
|
+
--success-color: #16a34a;
|
|
6063
|
+
--primary-text-color: #ffffff;
|
|
6064
|
+
--warning-color: #d97706;
|
|
6065
|
+
--info-color: #64748b;
|
|
6066
|
+
|
|
6067
|
+
--tree-active-color: #ffffff;
|
|
6068
|
+
}
|
|
6069
|
+
|
|
6070
|
+
.theme-dark {
|
|
6071
|
+
color-scheme: dark;
|
|
6072
|
+
|
|
6073
|
+
--color-surface: #1e293b;
|
|
6074
|
+
--color-surface-alt: #273449;
|
|
6075
|
+
--color-text: #e2e8f0;
|
|
6076
|
+
--color-text-muted: #94a3b8;
|
|
6077
|
+
--color-border: #334155;
|
|
6078
|
+
|
|
6079
|
+
--primary-color: #818cf8;
|
|
6080
|
+
--secondary-color: #a6aabd40;
|
|
6081
|
+
--accent-color: #2dd4bf;
|
|
6082
|
+
--warn-color: #f87171;
|
|
6083
|
+
--success-color: #4ade80;
|
|
6084
|
+
--primary-text-color: #0f172a;
|
|
6085
|
+
--warning-color: #fbbf24;
|
|
6086
|
+
--info-color: #7dd3fc;
|
|
6087
|
+
|
|
6088
|
+
--tree-active-color: #0f172a;
|
|
6089
|
+
}
|
|
6090
6090
|
`;
|
|
6091
6091
|
|
|
6092
6092
|
const THEME_CACHE_KEY = 'themeCache';
|
|
@@ -6198,11 +6198,11 @@ class ThemeSelectorComponent {
|
|
|
6198
6198
|
}
|
|
6199
6199
|
}
|
|
6200
6200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ThemeSelectorComponent, isStandalone: true, selector: "theme-selector", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (themeDescriptor) {\
|
|
6201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ThemeSelectorComponent, isStandalone: true, selector: "theme-selector", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (themeDescriptor) {\n <ui-action-button\n [descriptor]=\"themeDescriptor.descriptor!\"\n [code]=\"themeDescriptor.name\"\n (actionClick)=\"onActionClicked($event, themeDescriptor)\"\n >\n </ui-action-button>\n} @else if (action()) {\n <!-- <ui-tiered-menu\n #menu\n [triggerAction]=\"action()!\"\n [subActions]=\"action()?.subActions ?? []\"\n (actionClick)=\"onActionClicked($event, model())\"\n ></ui-tiered-menu> -->\n}\n", styles: [""], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
6202
6202
|
}
|
|
6203
6203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
|
|
6204
6204
|
type: Component,
|
|
6205
|
-
args: [{ selector: 'theme-selector', imports: [UiActionButtonComponent], template: "@if (themeDescriptor) {\
|
|
6205
|
+
args: [{ selector: 'theme-selector', imports: [UiActionButtonComponent], template: "@if (themeDescriptor) {\n <ui-action-button\n [descriptor]=\"themeDescriptor.descriptor!\"\n [code]=\"themeDescriptor.name\"\n (actionClick)=\"onActionClicked($event, themeDescriptor)\"\n >\n </ui-action-button>\n} @else if (action()) {\n <!-- <ui-tiered-menu\n #menu\n [triggerAction]=\"action()!\"\n [subActions]=\"action()?.subActions ?? []\"\n (actionClick)=\"onActionClicked($event, model())\"\n ></ui-tiered-menu> -->\n}\n" }]
|
|
6206
6206
|
}], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }] } });
|
|
6207
6207
|
|
|
6208
6208
|
const SUBMENU_POSITIONS = [
|
|
@@ -6520,11 +6520,11 @@ class HoverMenuComponent {
|
|
|
6520
6520
|
return IconPosition;
|
|
6521
6521
|
}
|
|
6522
6522
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HoverMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6523
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HoverMenuComponent, isStandalone: true, selector: "ui-hover-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: true, isRequired: true, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: true, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: true, isRequired: false, transformFunction: null }, toolbarId: { classPropertyName: "toolbarId", publicName: "toolbarId", isSignal: true, isRequired: false, transformFunction: null } }, 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()) {\
|
|
6523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HoverMenuComponent, isStandalone: true, selector: "ui-hover-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: true, isRequired: true, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: true, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: true, isRequired: false, transformFunction: null }, toolbarId: { classPropertyName: "toolbarId", publicName: "toolbarId", isSignal: true, isRequired: false, transformFunction: null } }, 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()) {\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n}\n\n<ng-template #menuTemplate>\n <ul class=\"ui-hover-menu sb4-menu-panel\">\n @for (action of subActions; track action) {\n <li\n class=\"hoverEffect\"\n [class.disabled]=\"action.disabled\"\n [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\n (mouseenter)=\"closeSiblingSubmenus(action)\"\n >\n @if (action.subActions && action.subActions.length > 0) {\n <ui-hover-menu\n #submenu\n [triggerAction]=\"action\"\n [isSubmenu]=\"true\"\n [menuOpenDirection]=\"$safeNavigationMigration(triggerAction().descriptor?.menu?.openDirection)\"\n (actionClick)=\"actionClick.emit($event)\"\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\n ></ui-hover-menu>\n } @else {\n <ui-action-button\n [descriptor]=\"action.descriptor!\"\n [code]=\"action.code\"\n [identifier]=\"action.identifier\"\n [disabled]=\"!!action.disabled\"\n [viewActivated]=\"action.viewActivated\"\n [iconPlaceholder]=\"\n action.descriptor?.icon || action.descriptor?.iconResource\n ? undefined\n : computedIconPlaceholder\n \"\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\n ></ui-action-button>\n @if (hasSubActionSiblings) {\n <smart-icon\n class=\"sb4-menu-placeholder\"\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\n ></smart-icon>\n }\n }\n </li>\n }\n </ul>\n</ng-template>\n\n<ng-template #triggerTempalte>\n <ui-action-button\n [descriptor]=\"triggerAction().descriptor!\"\n [code]=\"triggerAction().code\"\n [identifier]=\"triggerAction().identifier\"\n [disabled]=\"!!triggerAction().disabled\"\n [viewActivated]=\"triggerAction().viewActivated\"\n (mouseenter)=\"openMenu($event)\"\n (actionClick)=\"onActionClick(triggerAction())\"\n [class.submenuTrigger]=\"isSubmenu()\"\n >\n </ui-action-button>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}li{display:flex}.sb4-menu-panel{--sb4-panel-bg-color-internal: var(--sb4-panel-bg-color, var(--color-bg));--sb4-panel-hover-bg-color-internal: var(--sb4-panel-hover-bg-color, var(--color-surfice));--sb4-panel-text-color-internal: var(--sb4-panel-text-color, var(--color-text))}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);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:transparent;box-shadow:unset;border:unset;border-radius:unset;color:var(--sb4-panel-text-color-internal)!important;width:100%;justify-content:flex-start}.sb4-menu-panel ::ng-deep .mdc-button__label,.sb4-menu-panel ::ng-deep button ::ng-deep .mat-icon.material-symbols-outlined{color:var(--sb4-panel-text-color-internal)!important}.ui-hover-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.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:var(--color-text-muted, #68778e);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{background-color:var(--sb4-panel-hover-bg-color)!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}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #384372)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #384372) r g b / .12) )!important}\n"], dependencies: [{ kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "directive", type: 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", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
6524
6524
|
}
|
|
6525
6525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HoverMenuComponent, decorators: [{
|
|
6526
6526
|
type: Component,
|
|
6527
|
-
args: [{ selector: 'ui-hover-menu', imports: [NgTemplateOutlet, SmartIconComponent, UiActionButtonComponent], template: "@if (isSubmenu()) {\
|
|
6527
|
+
args: [{ selector: 'ui-hover-menu', imports: [NgTemplateOutlet, SmartIconComponent, UiActionButtonComponent], template: "@if (isSubmenu()) {\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n}\n\n<ng-template #menuTemplate>\n <ul class=\"ui-hover-menu sb4-menu-panel\">\n @for (action of subActions; track action) {\n <li\n class=\"hoverEffect\"\n [class.disabled]=\"action.disabled\"\n [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\n (mouseenter)=\"closeSiblingSubmenus(action)\"\n >\n @if (action.subActions && action.subActions.length > 0) {\n <ui-hover-menu\n #submenu\n [triggerAction]=\"action\"\n [isSubmenu]=\"true\"\n [menuOpenDirection]=\"$safeNavigationMigration(triggerAction().descriptor?.menu?.openDirection)\"\n (actionClick)=\"actionClick.emit($event)\"\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\n ></ui-hover-menu>\n } @else {\n <ui-action-button\n [descriptor]=\"action.descriptor!\"\n [code]=\"action.code\"\n [identifier]=\"action.identifier\"\n [disabled]=\"!!action.disabled\"\n [viewActivated]=\"action.viewActivated\"\n [iconPlaceholder]=\"\n action.descriptor?.icon || action.descriptor?.iconResource\n ? undefined\n : computedIconPlaceholder\n \"\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\n ></ui-action-button>\n @if (hasSubActionSiblings) {\n <smart-icon\n class=\"sb4-menu-placeholder\"\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\n ></smart-icon>\n }\n }\n </li>\n }\n </ul>\n</ng-template>\n\n<ng-template #triggerTempalte>\n <ui-action-button\n [descriptor]=\"triggerAction().descriptor!\"\n [code]=\"triggerAction().code\"\n [identifier]=\"triggerAction().identifier\"\n [disabled]=\"!!triggerAction().disabled\"\n [viewActivated]=\"triggerAction().viewActivated\"\n (mouseenter)=\"openMenu($event)\"\n (actionClick)=\"onActionClick(triggerAction())\"\n [class.submenuTrigger]=\"isSubmenu()\"\n >\n </ui-action-button>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}li{display:flex}.sb4-menu-panel{--sb4-panel-bg-color-internal: var(--sb4-panel-bg-color, var(--color-bg));--sb4-panel-hover-bg-color-internal: var(--sb4-panel-hover-bg-color, var(--color-surfice));--sb4-panel-text-color-internal: var(--sb4-panel-text-color, var(--color-text))}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);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:transparent;box-shadow:unset;border:unset;border-radius:unset;color:var(--sb4-panel-text-color-internal)!important;width:100%;justify-content:flex-start}.sb4-menu-panel ::ng-deep .mdc-button__label,.sb4-menu-panel ::ng-deep button ::ng-deep .mat-icon.material-symbols-outlined{color:var(--sb4-panel-text-color-internal)!important}.ui-hover-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.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:var(--color-text-muted, #68778e);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{background-color:var(--sb4-panel-hover-bg-color)!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}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #384372)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #384372) r g b / .12) )!important}\n"] }]
|
|
6528
6528
|
}], ctorParameters: () => [], propDecorators: { submenuComponents: [{
|
|
6529
6529
|
type: ViewChildren,
|
|
6530
6530
|
args: ['submenu']
|
|
@@ -6790,11 +6790,11 @@ class ClickMenuComponent {
|
|
|
6790
6790
|
return IconPosition;
|
|
6791
6791
|
}
|
|
6792
6792
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ClickMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6793
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ClickMenuComponent, isStandalone: true, selector: "ui-tiered-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: true, isRequired: true, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: true, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: true, isRequired: false, transformFunction: null } }, 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()) {\
|
|
6793
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ClickMenuComponent, isStandalone: true, selector: "ui-tiered-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: true, isRequired: true, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: true, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: true, isRequired: false, transformFunction: null } }, 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()) {\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n}\n\n<ng-template #menuTemplate>\n <ul class=\"ui-tiered-menu sb4-menu-panel\">\n @for (action of subActions; track action) {\n <li\n class=\"hoverEffect\"\n [class.disabled]=\"action.disabled\"\n [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\n (mouseenter)=\"closeSiblingSubmenus(action)\"\n >\n @if (action.subActions && action.subActions.length > 0) {\n <ui-tiered-menu\n #submenu\n [triggerAction]=\"action\"\n [isSubmenu]=\"true\"\n [menuOpenDirection]=\"$safeNavigationMigration(triggerAction().descriptor?.menu?.openDirection)\"\n (actionClick)=\"actionClick.emit($event)\"\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\n ></ui-tiered-menu>\n } @else {\n <ui-action-button\n [descriptor]=\"action.descriptor!\"\n [code]=\"action.code\"\n [identifier]=\"action.identifier\"\n [disabled]=\"!!action.disabled\"\n [viewActivated]=\"action.viewActivated\"\n [iconPlaceholder]=\"\n action.descriptor?.icon || action.descriptor?.iconResource\n ? undefined\n : computedIconPlaceholder\n \"\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\n ></ui-action-button>\n @if (hasSubActionSiblings) {\n <smart-icon\n class=\"sb4-menu-placeholder\"\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\n ></smart-icon>\n }\n }\n </li>\n }\n </ul>\n</ng-template>\n\n<ng-template #triggerTempalte>\n <ui-action-button\n [descriptor]=\"triggerAction().descriptor!\"\n [code]=\"triggerAction().code\"\n [identifier]=\"triggerAction().identifier\"\n [disabled]=\"!!triggerAction().disabled\"\n [viewActivated]=\"triggerAction().viewActivated\"\n (actionClick)=\"toggleMenu($event.event)\"\n [class.submenuTrigger]=\"isSubmenu()\"\n >\n </ui-action-button>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.sb4-menu-panel{--sb4-panel-bg-color-internal: var(--sb4-panel-bg-color, var(--color-bg));--sb4-panel-hover-bg-color-internal: var(--sb4-panel-hover-bg-color, var(--color-surfice));--sb4-panel-text-color-internal: var(--sb4-panel-text-color, var(--color-text))}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color-internal);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:transparent;box-shadow:unset;border:unset;border-radius:unset;color:var(--sb4-panel-text-color-internal)!important;width:100%;justify-content:flex-start}.sb4-menu-panel ::ng-deep .mdc-button__label,.sb4-menu-panel ::ng-deep button ::ng-deep .mat-icon.material-symbols-outlined{color:var(--sb4-panel-text-color-internal)!important}.submenuTrigger:hover,.ui-tiered-menu ::ng-deep button:hover{background-color:transparent!important}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover{background-color:var(--sb4-panel-hover-bg-color-internal)!important}.hoverEffect.activeSubmenu{background-color:var(--sb4-panel-hover-bg-color)!important}.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:var(--color-text-muted, #68778e);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{background-color:var(--sb4-panel-hover-bg-color)!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}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #384372)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #384372) r g b / .12) )!important}\n"], dependencies: [{ kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }, { kind: "directive", type: 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", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
6794
6794
|
}
|
|
6795
6795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ClickMenuComponent, decorators: [{
|
|
6796
6796
|
type: Component,
|
|
6797
|
-
args: [{ selector: 'ui-tiered-menu', imports: [NgTemplateOutlet, SmartIconComponent, UiActionButtonComponent], template: "@if (isSubmenu()) {\
|
|
6797
|
+
args: [{ selector: 'ui-tiered-menu', imports: [NgTemplateOutlet, SmartIconComponent, UiActionButtonComponent], template: "@if (isSubmenu()) {\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n}\n\n<ng-template #menuTemplate>\n <ul class=\"ui-tiered-menu sb4-menu-panel\">\n @for (action of subActions; track action) {\n <li\n class=\"hoverEffect\"\n [class.disabled]=\"action.disabled\"\n [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\n (mouseenter)=\"closeSiblingSubmenus(action)\"\n >\n @if (action.subActions && action.subActions.length > 0) {\n <ui-tiered-menu\n #submenu\n [triggerAction]=\"action\"\n [isSubmenu]=\"true\"\n [menuOpenDirection]=\"$safeNavigationMigration(triggerAction().descriptor?.menu?.openDirection)\"\n (actionClick)=\"actionClick.emit($event)\"\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\n ></ui-tiered-menu>\n } @else {\n <ui-action-button\n [descriptor]=\"action.descriptor!\"\n [code]=\"action.code\"\n [identifier]=\"action.identifier\"\n [disabled]=\"!!action.disabled\"\n [viewActivated]=\"action.viewActivated\"\n [iconPlaceholder]=\"\n action.descriptor?.icon || action.descriptor?.iconResource\n ? undefined\n : computedIconPlaceholder\n \"\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\n ></ui-action-button>\n @if (hasSubActionSiblings) {\n <smart-icon\n class=\"sb4-menu-placeholder\"\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\n ></smart-icon>\n }\n }\n </li>\n }\n </ul>\n</ng-template>\n\n<ng-template #triggerTempalte>\n <ui-action-button\n [descriptor]=\"triggerAction().descriptor!\"\n [code]=\"triggerAction().code\"\n [identifier]=\"triggerAction().identifier\"\n [disabled]=\"!!triggerAction().disabled\"\n [viewActivated]=\"triggerAction().viewActivated\"\n (actionClick)=\"toggleMenu($event.event)\"\n [class.submenuTrigger]=\"isSubmenu()\"\n >\n </ui-action-button>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.sb4-menu-panel{--sb4-panel-bg-color-internal: var(--sb4-panel-bg-color, var(--color-bg));--sb4-panel-hover-bg-color-internal: var(--sb4-panel-hover-bg-color, var(--color-surfice));--sb4-panel-text-color-internal: var(--sb4-panel-text-color, var(--color-text))}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color-internal);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:transparent;box-shadow:unset;border:unset;border-radius:unset;color:var(--sb4-panel-text-color-internal)!important;width:100%;justify-content:flex-start}.sb4-menu-panel ::ng-deep .mdc-button__label,.sb4-menu-panel ::ng-deep button ::ng-deep .mat-icon.material-symbols-outlined{color:var(--sb4-panel-text-color-internal)!important}.submenuTrigger:hover,.ui-tiered-menu ::ng-deep button:hover{background-color:transparent!important}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover{background-color:var(--sb4-panel-hover-bg-color-internal)!important}.hoverEffect.activeSubmenu{background-color:var(--sb4-panel-hover-bg-color)!important}.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:var(--color-text-muted, #68778e);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{background-color:var(--sb4-panel-hover-bg-color)!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}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #384372)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #384372) r g b / .12) )!important}\n"] }]
|
|
6798
6798
|
}], ctorParameters: () => [], propDecorators: { submenuComponents: [{
|
|
6799
6799
|
type: ViewChildren,
|
|
6800
6800
|
args: ['submenu']
|
|
@@ -7155,11 +7155,11 @@ class UiActionToolbarComponent {
|
|
|
7155
7155
|
return MenuTriggerType;
|
|
7156
7156
|
}
|
|
7157
7157
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionToolbarComponent, isStandalone: true, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: { classPropertyName: "uiActionModels", publicName: "uiActionModels", isSignal: false, isRequired: false, transformFunction: null }, uiActionDescriptorService: { classPropertyName: "uiActionDescriptorService", publicName: "uiActionDescriptorService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, executor: { classPropertyName: "executor", publicName: "executor", isSignal: true, isRequired: false, transformFunction: null }, widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: false, transformFunction: null }, nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: false, transformFunction: null }, actionParams: { classPropertyName: "actionParams", publicName: "actionParams", isSignal: true, isRequired: false, transformFunction: null }, scrollOnWrap: { classPropertyName: "scrollOnWrap", publicName: "scrollOnWrap", isSignal: false, isRequired: false, transformFunction: null }, toolbarPropertes: { classPropertyName: "toolbarPropertes", publicName: "toolbarPropertes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionFired: "actionFired" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\r\n <ui-action-button\r\n [disabled]=\"!isScrollable\"\r\n [descriptor]=\"buttonLeft\"\r\n (actionClick)=\"scrollLeft()\"\r\n (mousedown)=\"scrollStart('left')\"\r\n (mouseup)=\"stopScroll()\"\r\n (mouseleave)=\"stopScroll()\"\r\n (touchstart)=\"scrollStart('left')\"\r\n (touchend)=\"stopScroll()\"\r\n />\r\n}\r\n\r\n<div\r\n #container\r\n class=\"uiActionButtonsContainer\"\r\n (click)=\"$event.stopPropagation()\"\r\n (dblclick)=\"$event.stopPropagation()\"\r\n [ngClass]=\"{\r\n scrollableContent: scrollOnWrap,\r\n verticalToolbar: isVertical,\r\n horizontalToolbar: isHorizontal,\r\n alignedStart: isAlignedStart,\r\n alignedEnd: isAlignedEnd,\r\n 'sb4-tabs': isTabs,\r\n }\"\r\n [attr.role]=\"isTabs ? 'tablist' : null\"\r\n [attr.aria-orientation]=\"isTabs ? (isVertical ? 'vertical' : 'horizontal') : null\"\r\n >\r\n <!--\r\n Tracked by a synthesized key \u2014 the action code plus its ordinal among the entries with\r\n the same code \u2014 because a code is not unique inside a toolbar. Unique by construction,\r\n and a button's DOM node follows its action across reordering and insertion. See A14.\r\n -->\r\n @for (entry of entries(); track entry.key) {\r\n @if (entry.model.uiAction.code === 'themeSelector') {\r\n <theme-selector [model]=\"entry.model\"></theme-selector>\r\n } @else if (entry.model.uiAction.subActions && entry.model.uiAction.subActions.length > 0) {\r\n <ng-container *ngTemplateOutlet=\"menuTypes; context: { entry: entry }\"></ng-container>\r\n } @else {\r\n <ui-action-button\r\n (mouseenter)=\"onHover()\"\r\n [descriptor]=\"entry.descriptor!\"\r\n [code]=\"entry.model.uiAction.code\"\r\n [identifier]=\"entry.model.uiAction.identifier\"\r\n [disabled]=\"!!entry.model.uiAction.disabled\"\r\n [addedCssClass]=\"entry.model.cssClass\"\r\n [viewActivated]=\"entry.model.uiAction.viewActivated\"\r\n [tab]=\"isTabs && entry.model.uiAction.viewActivated != null\"\r\n [rowState]=\"entry.model.uiAction.rowState\"\r\n [chords]=\"entry.chords\"\r\n (actionClick)=\"onActionClicked($event, entry)\"\r\n (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\r\n >\r\n </ui-action-button>\r\n }\r\n }\r\n</div>\r\n\r\n@if (isScrollable && scrollOnWrap) {\r\n <ui-action-button\r\n [disabled]=\"!isScrollable\"\r\n [descriptor]=\"buttonRight\"\r\n (actionClick)=\"scrollRight()\"\r\n (mousedown)=\"scrollStart('right')\"\r\n (mouseup)=\"stopScroll()\"\r\n (mouseleave)=\"stopScroll()\"\r\n (touchstart)=\"scrollStart('right')\"\r\n (touchend)=\"stopScroll()\"\r\n />\r\n}\r\n\r\n<ng-template #menuTypes let-entry=\"entry\">\r\n @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\r\n @case (triggerType.HOVER) {\r\n <ui-hover-menu\r\n #menu\r\n [toolbarId]=\"id\"\r\n (mouseenter)=\"onHover()\"\r\n [triggerAction]=\"entry.model.uiAction\"\r\n (actionClick)=\"onActionClicked($event, entry)\"\r\n ></ui-hover-menu>\r\n }\r\n @case (triggerType.CLICK) {\r\n <ui-tiered-menu\r\n #menu\r\n (mouseenter)=\"onHover()\"\r\n [triggerAction]=\"entry.model.uiAction\"\r\n (actionClick)=\"onActionClicked($event, entry)\"\r\n ></ui-tiered-menu>\r\n }\r\n @default {\r\n <ui-tiered-menu\r\n #menu\r\n (mouseenter)=\"onHover()\"\r\n [triggerAction]=\"entry.model.uiAction\"\r\n (actionClick)=\"onActionClicked($event, entry)\"\r\n ></ui-tiered-menu>\r\n }\r\n }\r\n</ng-template>\r\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}.sb4-tabs{gap:var(--sb4-tab-gap, .25rem);align-items:flex-end;border-bottom:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs.scrollableContent{padding:0}.sb4-tabs.verticalToolbar{flex-wrap:nowrap;align-items:stretch;overflow-y:auto;border-bottom:none;border-inline-end:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs ::ng-deep button.sb4-tab{background:var(--sb4-tab-bg, transparent);border:0 solid transparent;border-bottom-width:var(--sb4-tab-indicator-width, 2px);border-radius:0;box-shadow:none;font-weight:var(--sb4-tab-font-weight, 400)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab{border-bottom-width:0;border-inline-end-width:var(--sb4-tab-indicator-width, 2px);justify-content:flex-start}.sb4-tabs ::ng-deep button.sb4-tab,.sb4-tabs ::ng-deep button.sb4-tab *{color:var(--sb4-tab-color, var(--color-text-muted, #68778e))!important}.sb4-tabs ::ng-deep button.sb4-tab:hover{background:var( --sb4-tab-hover-bg, rgb(from var(--primary-color, #384372) r g b / .08) )!important;box-shadow:none}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated{background:var(--sb4-tab-selected-bg, var(--sb4-tab-bg, transparent));border-color:transparent;border-bottom-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) );font-weight:var(--sb4-tab-selected-font-weight, 600)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab.sb4-view-activated{border-bottom-color:transparent;border-inline-end-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) )}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated,.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated *{color:var(--sb4-tab-selected-color, var(--primary-color, #384372))!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new *{color:var(--success-color, #16a34a)!important;font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified *{color:var(--accent-color, #20b6a8)!important;font-weight:600}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted *{color:var(--color-text-muted, #68778e)!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted .mdc-button__label{text-decoration:line-through}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-moved{font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change *{color:var(--accent-color, #20b6a8)!important}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
|
|
7158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionToolbarComponent, isStandalone: true, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: { classPropertyName: "uiActionModels", publicName: "uiActionModels", isSignal: false, isRequired: false, transformFunction: null }, uiActionDescriptorService: { classPropertyName: "uiActionDescriptorService", publicName: "uiActionDescriptorService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, executor: { classPropertyName: "executor", publicName: "executor", isSignal: true, isRequired: false, transformFunction: null }, widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: false, transformFunction: null }, nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: false, transformFunction: null }, actionParams: { classPropertyName: "actionParams", publicName: "actionParams", isSignal: true, isRequired: false, transformFunction: null }, scrollOnWrap: { classPropertyName: "scrollOnWrap", publicName: "scrollOnWrap", isSignal: false, isRequired: false, transformFunction: null }, toolbarPropertes: { classPropertyName: "toolbarPropertes", publicName: "toolbarPropertes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionFired: "actionFired" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\n <ui-action-button\n [disabled]=\"!isScrollable\"\n [descriptor]=\"buttonLeft\"\n (actionClick)=\"scrollLeft()\"\n (mousedown)=\"scrollStart('left')\"\n (mouseup)=\"stopScroll()\"\n (mouseleave)=\"stopScroll()\"\n (touchstart)=\"scrollStart('left')\"\n (touchend)=\"stopScroll()\"\n />\n}\n\n<div\n #container\n class=\"uiActionButtonsContainer\"\n (click)=\"$event.stopPropagation()\"\n (dblclick)=\"$event.stopPropagation()\"\n [ngClass]=\"{\n scrollableContent: scrollOnWrap,\n verticalToolbar: isVertical,\n horizontalToolbar: isHorizontal,\n alignedStart: isAlignedStart,\n alignedEnd: isAlignedEnd,\n 'sb4-tabs': isTabs,\n }\"\n [attr.role]=\"isTabs ? 'tablist' : null\"\n [attr.aria-orientation]=\"isTabs ? (isVertical ? 'vertical' : 'horizontal') : null\"\n >\n <!--\n Tracked by a synthesized key \u2014 the action code plus its ordinal among the entries with\n the same code \u2014 because a code is not unique inside a toolbar. Unique by construction,\n and a button's DOM node follows its action across reordering and insertion. See A14.\n -->\n @for (entry of entries(); track entry.key) {\n @if (entry.model.uiAction.code === 'themeSelector') {\n <theme-selector [model]=\"entry.model\"></theme-selector>\n } @else if (entry.model.uiAction.subActions && entry.model.uiAction.subActions.length > 0) {\n <ng-container *ngTemplateOutlet=\"menuTypes; context: { entry: entry }\"></ng-container>\n } @else {\n <ui-action-button\n (mouseenter)=\"onHover()\"\n [descriptor]=\"entry.descriptor!\"\n [code]=\"entry.model.uiAction.code\"\n [identifier]=\"entry.model.uiAction.identifier\"\n [disabled]=\"!!entry.model.uiAction.disabled\"\n [addedCssClass]=\"entry.model.cssClass\"\n [viewActivated]=\"entry.model.uiAction.viewActivated\"\n [tab]=\"isTabs && entry.model.uiAction.viewActivated != null\"\n [rowState]=\"entry.model.uiAction.rowState\"\n [chords]=\"entry.chords\"\n (actionClick)=\"onActionClicked($event, entry)\"\n (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n >\n </ui-action-button>\n }\n }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n <ui-action-button\n [disabled]=\"!isScrollable\"\n [descriptor]=\"buttonRight\"\n (actionClick)=\"scrollRight()\"\n (mousedown)=\"scrollStart('right')\"\n (mouseup)=\"stopScroll()\"\n (mouseleave)=\"stopScroll()\"\n (touchstart)=\"scrollStart('right')\"\n (touchend)=\"stopScroll()\"\n />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n @case (triggerType.HOVER) {\n <ui-hover-menu\n #menu\n [toolbarId]=\"id\"\n (mouseenter)=\"onHover()\"\n [triggerAction]=\"entry.model.uiAction\"\n (actionClick)=\"onActionClicked($event, entry)\"\n ></ui-hover-menu>\n }\n @case (triggerType.CLICK) {\n <ui-tiered-menu\n #menu\n (mouseenter)=\"onHover()\"\n [triggerAction]=\"entry.model.uiAction\"\n (actionClick)=\"onActionClicked($event, entry)\"\n ></ui-tiered-menu>\n }\n @default {\n <ui-tiered-menu\n #menu\n (mouseenter)=\"onHover()\"\n [triggerAction]=\"entry.model.uiAction\"\n (actionClick)=\"onActionClicked($event, entry)\"\n ></ui-tiered-menu>\n }\n }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}.sb4-tabs{gap:var(--sb4-tab-gap, .25rem);align-items:flex-end;border-bottom:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs.scrollableContent{padding:0}.sb4-tabs.verticalToolbar{flex-wrap:nowrap;align-items:stretch;overflow-y:auto;border-bottom:none;border-inline-end:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs ::ng-deep button.sb4-tab{background:var(--sb4-tab-bg, transparent);border:0 solid transparent;border-bottom-width:var(--sb4-tab-indicator-width, 2px);border-radius:0;box-shadow:none;font-weight:var(--sb4-tab-font-weight, 400)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab{border-bottom-width:0;border-inline-end-width:var(--sb4-tab-indicator-width, 2px);justify-content:flex-start}.sb4-tabs ::ng-deep button.sb4-tab,.sb4-tabs ::ng-deep button.sb4-tab *{color:var(--sb4-tab-color, var(--color-text-muted, #68778e))!important}.sb4-tabs ::ng-deep button.sb4-tab:hover{background:var( --sb4-tab-hover-bg, rgb(from var(--primary-color, #384372) r g b / .08) )!important;box-shadow:none}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated{background:var(--sb4-tab-selected-bg, var(--sb4-tab-bg, transparent));border-color:transparent;border-bottom-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) );font-weight:var(--sb4-tab-selected-font-weight, 600)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab.sb4-view-activated{border-bottom-color:transparent;border-inline-end-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) )}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated,.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated *{color:var(--sb4-tab-selected-color, var(--primary-color, #384372))!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new *{color:var(--success-color, #16a34a)!important;font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified *{color:var(--accent-color, #20b6a8)!important;font-weight:600}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted *{color:var(--color-text-muted, #68778e)!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted .mdc-button__label{text-decoration:line-through}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-moved{font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change *{color:var(--accent-color, #20b6a8)!important}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
|
|
7159
7159
|
}
|
|
7160
7160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionToolbarComponent, decorators: [{
|
|
7161
7161
|
type: Component,
|
|
7162
|
-
args: [{ selector: 'smart-ui-action-toolbar', imports: [UiActionButtonComponent, NgClass, ThemeSelectorComponent, NgTemplateOutlet, HoverMenuComponent, ClickMenuComponent], template: "@if (isScrollable && scrollOnWrap) {\
|
|
7162
|
+
args: [{ selector: 'smart-ui-action-toolbar', imports: [UiActionButtonComponent, NgClass, ThemeSelectorComponent, NgTemplateOutlet, HoverMenuComponent, ClickMenuComponent], template: "@if (isScrollable && scrollOnWrap) {\n <ui-action-button\n [disabled]=\"!isScrollable\"\n [descriptor]=\"buttonLeft\"\n (actionClick)=\"scrollLeft()\"\n (mousedown)=\"scrollStart('left')\"\n (mouseup)=\"stopScroll()\"\n (mouseleave)=\"stopScroll()\"\n (touchstart)=\"scrollStart('left')\"\n (touchend)=\"stopScroll()\"\n />\n}\n\n<div\n #container\n class=\"uiActionButtonsContainer\"\n (click)=\"$event.stopPropagation()\"\n (dblclick)=\"$event.stopPropagation()\"\n [ngClass]=\"{\n scrollableContent: scrollOnWrap,\n verticalToolbar: isVertical,\n horizontalToolbar: isHorizontal,\n alignedStart: isAlignedStart,\n alignedEnd: isAlignedEnd,\n 'sb4-tabs': isTabs,\n }\"\n [attr.role]=\"isTabs ? 'tablist' : null\"\n [attr.aria-orientation]=\"isTabs ? (isVertical ? 'vertical' : 'horizontal') : null\"\n >\n <!--\n Tracked by a synthesized key \u2014 the action code plus its ordinal among the entries with\n the same code \u2014 because a code is not unique inside a toolbar. Unique by construction,\n and a button's DOM node follows its action across reordering and insertion. See A14.\n -->\n @for (entry of entries(); track entry.key) {\n @if (entry.model.uiAction.code === 'themeSelector') {\n <theme-selector [model]=\"entry.model\"></theme-selector>\n } @else if (entry.model.uiAction.subActions && entry.model.uiAction.subActions.length > 0) {\n <ng-container *ngTemplateOutlet=\"menuTypes; context: { entry: entry }\"></ng-container>\n } @else {\n <ui-action-button\n (mouseenter)=\"onHover()\"\n [descriptor]=\"entry.descriptor!\"\n [code]=\"entry.model.uiAction.code\"\n [identifier]=\"entry.model.uiAction.identifier\"\n [disabled]=\"!!entry.model.uiAction.disabled\"\n [addedCssClass]=\"entry.model.cssClass\"\n [viewActivated]=\"entry.model.uiAction.viewActivated\"\n [tab]=\"isTabs && entry.model.uiAction.viewActivated != null\"\n [rowState]=\"entry.model.uiAction.rowState\"\n [chords]=\"entry.chords\"\n (actionClick)=\"onActionClicked($event, entry)\"\n (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n >\n </ui-action-button>\n }\n }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n <ui-action-button\n [disabled]=\"!isScrollable\"\n [descriptor]=\"buttonRight\"\n (actionClick)=\"scrollRight()\"\n (mousedown)=\"scrollStart('right')\"\n (mouseup)=\"stopScroll()\"\n (mouseleave)=\"stopScroll()\"\n (touchstart)=\"scrollStart('right')\"\n (touchend)=\"stopScroll()\"\n />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n @case (triggerType.HOVER) {\n <ui-hover-menu\n #menu\n [toolbarId]=\"id\"\n (mouseenter)=\"onHover()\"\n [triggerAction]=\"entry.model.uiAction\"\n (actionClick)=\"onActionClicked($event, entry)\"\n ></ui-hover-menu>\n }\n @case (triggerType.CLICK) {\n <ui-tiered-menu\n #menu\n (mouseenter)=\"onHover()\"\n [triggerAction]=\"entry.model.uiAction\"\n (actionClick)=\"onActionClicked($event, entry)\"\n ></ui-tiered-menu>\n }\n @default {\n <ui-tiered-menu\n #menu\n (mouseenter)=\"onHover()\"\n [triggerAction]=\"entry.model.uiAction\"\n (actionClick)=\"onActionClicked($event, entry)\"\n ></ui-tiered-menu>\n }\n }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}.sb4-tabs{gap:var(--sb4-tab-gap, .25rem);align-items:flex-end;border-bottom:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs.scrollableContent{padding:0}.sb4-tabs.verticalToolbar{flex-wrap:nowrap;align-items:stretch;overflow-y:auto;border-bottom:none;border-inline-end:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs ::ng-deep button.sb4-tab{background:var(--sb4-tab-bg, transparent);border:0 solid transparent;border-bottom-width:var(--sb4-tab-indicator-width, 2px);border-radius:0;box-shadow:none;font-weight:var(--sb4-tab-font-weight, 400)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab{border-bottom-width:0;border-inline-end-width:var(--sb4-tab-indicator-width, 2px);justify-content:flex-start}.sb4-tabs ::ng-deep button.sb4-tab,.sb4-tabs ::ng-deep button.sb4-tab *{color:var(--sb4-tab-color, var(--color-text-muted, #68778e))!important}.sb4-tabs ::ng-deep button.sb4-tab:hover{background:var( --sb4-tab-hover-bg, rgb(from var(--primary-color, #384372) r g b / .08) )!important;box-shadow:none}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated{background:var(--sb4-tab-selected-bg, var(--sb4-tab-bg, transparent));border-color:transparent;border-bottom-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) );font-weight:var(--sb4-tab-selected-font-weight, 600)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab.sb4-view-activated{border-bottom-color:transparent;border-inline-end-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) )}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated,.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated *{color:var(--sb4-tab-selected-color, var(--primary-color, #384372))!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new *{color:var(--success-color, #16a34a)!important;font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified *{color:var(--accent-color, #20b6a8)!important;font-weight:600}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted *{color:var(--color-text-muted, #68778e)!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted .mdc-button__label{text-decoration:line-through}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-moved{font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change *{color:var(--accent-color, #20b6a8)!important}\n"] }]
|
|
7163
7163
|
}], ctorParameters: () => [], propDecorators: { containerRef: [{
|
|
7164
7164
|
type: ViewChild,
|
|
7165
7165
|
args: ['container', { static: false }]
|
|
@@ -7232,11 +7232,11 @@ class UiActionConfirmDialogComponent {
|
|
|
7232
7232
|
this.service.cancel();
|
|
7233
7233
|
}
|
|
7234
7234
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7235
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionConfirmDialogComponent, isStandalone: true, selector: "app-ui-action-confirm-dialog", ngImport: i0, template: "@if(descriptor){\
|
|
7235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionConfirmDialogComponent, isStandalone: true, selector: "app-ui-action-confirm-dialog", ngImport: i0, template: "@if(descriptor){\n<div class=\"folderNameDialogContainer\">\n <div class=\"headerContainer\">\n <h3 class=\"color-accent-700\">\n {{ getTitle() }}\n </h3>\n <button mat-icon-button (click)=\"cancel()\">\n <smart-icon [color]=\"'primary'\" [icon]=\"'close'\"></smart-icon>\n </button>\n </div>\n <p>\n {{ getText() }}\n </p>\n <div class=\"folderNameDialogButtonsContainer\">\n <ui-action-button\n [descriptor]=\"getCancelButton()\"\n [addedCssClass]=\"getCancelCssClass()\"\n [code]=\"'confirm-cancel'\"\n (actionClick)=\"cancel()\"\n ></ui-action-button>\n <ui-action-button\n [descriptor]=\"getActionButton()\"\n [addedCssClass]=\"getActionCssClass()\"\n [code]=\"'confirm-action'\"\n (actionClick)=\"doAction()\"\n >\n </ui-action-button>\n </div>\n</div>\n}\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem;padding:.5rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7236
7236
|
}
|
|
7237
7237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionConfirmDialogComponent, decorators: [{
|
|
7238
7238
|
type: Component,
|
|
7239
|
-
args: [{ selector: 'app-ui-action-confirm-dialog', imports: [MatIconButton, SmartIconComponent, UiActionButtonComponent], template: "@if(descriptor){\
|
|
7239
|
+
args: [{ selector: 'app-ui-action-confirm-dialog', imports: [MatIconButton, SmartIconComponent, UiActionButtonComponent], template: "@if(descriptor){\n<div class=\"folderNameDialogContainer\">\n <div class=\"headerContainer\">\n <h3 class=\"color-accent-700\">\n {{ getTitle() }}\n </h3>\n <button mat-icon-button (click)=\"cancel()\">\n <smart-icon [color]=\"'primary'\" [icon]=\"'close'\"></smart-icon>\n </button>\n </div>\n <p>\n {{ getText() }}\n </p>\n <div class=\"folderNameDialogButtonsContainer\">\n <ui-action-button\n [descriptor]=\"getCancelButton()\"\n [addedCssClass]=\"getCancelCssClass()\"\n [code]=\"'confirm-cancel'\"\n (actionClick)=\"cancel()\"\n ></ui-action-button>\n <ui-action-button\n [descriptor]=\"getActionButton()\"\n [addedCssClass]=\"getActionCssClass()\"\n [code]=\"'confirm-action'\"\n (actionClick)=\"doAction()\"\n >\n </ui-action-button>\n </div>\n</div>\n}\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem;padding:.5rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"] }]
|
|
7240
7240
|
}], ctorParameters: () => [] });
|
|
7241
7241
|
|
|
7242
7242
|
class SmartdialogService {
|
|
@@ -9075,11 +9075,11 @@ class SmartfileuploaderComponent {
|
|
|
9075
9075
|
};
|
|
9076
9076
|
}
|
|
9077
9077
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9078
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\
|
|
9078
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"container\"\n [ngClass]=\"{ disabledWidget: isDisabled() }\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [class.dragover]=\"isDragOver\"\n>\n <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n <input\n #fileInput\n id=\"addFile\"\n placeholder=\"fileInput\"\n type=\"file\"\n (change)=\"getFile($event)\"\n class=\"file\"\n accept=\"{{ fileFormats()?.join(', ') }}\"\n [size]=\"maxSizeMb()\"\n [multiple]=\"isMultiple()\"\n [disabled]=\"isDisabled()\"\n style=\"display: none\"\n />\n <div class=\"fileUploadContentContainer\">\n <div class=\"icon\">\n @if (useIconButton()) {\n <mat-label class=\"addFileButton\">\n <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n >add_circle</mat-icon\n >\n </mat-label>\n }\n @if (!useIconButton()) {\n <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n {{ i18n!.addFile }}\n </button>\n }\n </div>\n <div class=\"labels\">\n @if (useIconButton()) {\n <mat-label class=\"label primary title\">\n {{ i18n!.addFile }}\n </mat-label>\n }\n <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n </div>\n @if (files.length) {\n <div class=\"uploadButton\">\n <ui-action-button\n (actionClick)=\"uploadFile($event)\"\n [code]=\"'default-upload'\"\n [descriptor]=\"uploadButton\"\n >\n </ui-action-button>\n </div>\n }\n </div>\n </div>\n\n @if (errors.length) {\n <div class=\"errorMessage\">\n <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n <div class=\"errors\">\n @for (error of errors; track error) {\n <span>{{ error }}</span>\n }\n </div>\n </div>\n }\n\n @if (files.length) {\n <div class=\"uploadedFilesContainer\">\n @for (file of files; track file; let i = $index) {\n <div class=\"uploadedFile\">\n @if (filePreviewUrl(file)) {\n <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n } @else {\n <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n }\n <div class=\"fileData\">\n <div class=\"fileDataContainer\">\n <span class=\"fileName\">{{ file.name }}</span>\n <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n </div>\n </div>\n <div class=\"fileActions\">\n <smart-icon\n class=\"downloadIcon\"\n icon=\"download\"\n (click)=\"downloadFile(file)\"\n [attr.data-testid]=\"'default_download'\"\n ></smart-icon>\n <smart-icon\n class=\"removeIcon\"\n icon=\"delete\"\n [attr.data-testid]=\"'default_remove'\"\n (click)=\"remove(i)\"\n ></smart-icon>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
|
|
9079
9079
|
}
|
|
9080
9080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
|
|
9081
9081
|
type: Component,
|
|
9082
|
-
args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\
|
|
9082
|
+
args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n class=\"container\"\n [ngClass]=\"{ disabledWidget: isDisabled() }\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [class.dragover]=\"isDragOver\"\n>\n <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n <input\n #fileInput\n id=\"addFile\"\n placeholder=\"fileInput\"\n type=\"file\"\n (change)=\"getFile($event)\"\n class=\"file\"\n accept=\"{{ fileFormats()?.join(', ') }}\"\n [size]=\"maxSizeMb()\"\n [multiple]=\"isMultiple()\"\n [disabled]=\"isDisabled()\"\n style=\"display: none\"\n />\n <div class=\"fileUploadContentContainer\">\n <div class=\"icon\">\n @if (useIconButton()) {\n <mat-label class=\"addFileButton\">\n <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n >add_circle</mat-icon\n >\n </mat-label>\n }\n @if (!useIconButton()) {\n <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n {{ i18n!.addFile }}\n </button>\n }\n </div>\n <div class=\"labels\">\n @if (useIconButton()) {\n <mat-label class=\"label primary title\">\n {{ i18n!.addFile }}\n </mat-label>\n }\n <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n </div>\n @if (files.length) {\n <div class=\"uploadButton\">\n <ui-action-button\n (actionClick)=\"uploadFile($event)\"\n [code]=\"'default-upload'\"\n [descriptor]=\"uploadButton\"\n >\n </ui-action-button>\n </div>\n }\n </div>\n </div>\n\n @if (errors.length) {\n <div class=\"errorMessage\">\n <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n <div class=\"errors\">\n @for (error of errors; track error) {\n <span>{{ error }}</span>\n }\n </div>\n </div>\n }\n\n @if (files.length) {\n <div class=\"uploadedFilesContainer\">\n @for (file of files; track file; let i = $index) {\n <div class=\"uploadedFile\">\n @if (filePreviewUrl(file)) {\n <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n } @else {\n <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n }\n <div class=\"fileData\">\n <div class=\"fileDataContainer\">\n <span class=\"fileName\">{{ file.name }}</span>\n <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n </div>\n </div>\n <div class=\"fileActions\">\n <smart-icon\n class=\"downloadIcon\"\n icon=\"download\"\n (click)=\"downloadFile(file)\"\n [attr.data-testid]=\"'default_download'\"\n ></smart-icon>\n <smart-icon\n class=\"removeIcon\"\n icon=\"delete\"\n [attr.data-testid]=\"'default_remove'\"\n (click)=\"remove(i)\"\n ></smart-icon>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
|
|
9083
9083
|
}], propDecorators: { fileInput: [{
|
|
9084
9084
|
type: ViewChild,
|
|
9085
9085
|
args: ['fileInput']
|
|
@@ -9271,11 +9271,11 @@ class PhotoCaptureWidgetComponent {
|
|
|
9271
9271
|
}
|
|
9272
9272
|
}
|
|
9273
9273
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9274
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhotoCaptureWidgetComponent, isStandalone: true, selector: "photo-capture-widget", inputs: { maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { photoCaptured: "photoCaptured" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"photoWidgetContainer\">\
|
|
9274
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhotoCaptureWidgetComponent, isStandalone: true, selector: "photo-capture-widget", inputs: { maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { photoCaptured: "photoCaptured" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"photoWidgetContainer\">\n @if (!isMobile()) {\n <video #video autoplay [hidden]=\"isCaptured || !cameraActive\"></video>\n <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n @if (!cameraActive && !isCaptured) {\n <p class=\"message\">Kapcsolja be a kamer\u00E1t a k\u00E9p k\u00E9sz\u00EDt\u00E9s\u00E9hez!</p>\n }\n <div class=\"controls\">\n <!-- START CAMERA -->\n <ui-action-button [descriptor]=\"toggleCameraButton\" (actionClick)=\"toggleCamera()\">\n </ui-action-button>\n <!-- CAPTURE CAMERA -->\n <ui-action-button\n [disabled]=\"!cameraActive\"\n [descriptor]=\"captureButton\"\n (actionClick)=\"capturePhoto()\"\n >\n </ui-action-button>\n </div>\n }\n\n @if (isMobile()) {\n <div class=\"controls\">\n <input\n #fileInput\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none\"\n />\n <ui-action-button [descriptor]=\"captureButton\" (actionClick)=\"fileInput.click()\">\n </ui-action-button>\n </div>\n }\n</div>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
9275
9275
|
}
|
|
9276
9276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, decorators: [{
|
|
9277
9277
|
type: Component,
|
|
9278
|
-
args: [{ selector: 'photo-capture-widget', imports: [UiActionButtonComponent], template: "<div class=\"photoWidgetContainer\">\
|
|
9278
|
+
args: [{ selector: 'photo-capture-widget', imports: [UiActionButtonComponent], template: "<div class=\"photoWidgetContainer\">\n @if (!isMobile()) {\n <video #video autoplay [hidden]=\"isCaptured || !cameraActive\"></video>\n <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n @if (!cameraActive && !isCaptured) {\n <p class=\"message\">Kapcsolja be a kamer\u00E1t a k\u00E9p k\u00E9sz\u00EDt\u00E9s\u00E9hez!</p>\n }\n <div class=\"controls\">\n <!-- START CAMERA -->\n <ui-action-button [descriptor]=\"toggleCameraButton\" (actionClick)=\"toggleCamera()\">\n </ui-action-button>\n <!-- CAPTURE CAMERA -->\n <ui-action-button\n [disabled]=\"!cameraActive\"\n [descriptor]=\"captureButton\"\n (actionClick)=\"capturePhoto()\"\n >\n </ui-action-button>\n </div>\n }\n\n @if (isMobile()) {\n <div class=\"controls\">\n <input\n #fileInput\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none\"\n />\n <ui-action-button [descriptor]=\"captureButton\" (actionClick)=\"fileInput.click()\">\n </ui-action-button>\n </div>\n }\n</div>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}\n"] }]
|
|
9279
9279
|
}], ctorParameters: () => [], propDecorators: { videoRef: [{
|
|
9280
9280
|
type: ViewChild,
|
|
9281
9281
|
args: ['video']
|
|
@@ -9517,11 +9517,11 @@ class VoiceRecordWidgetComponent {
|
|
|
9517
9517
|
});
|
|
9518
9518
|
}
|
|
9519
9519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecordWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VoiceRecordWidgetComponent, isStandalone: true, selector: "voice-record-widget", inputs: { openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingSaved: "recordingSaved" }, viewQueries: [{ propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\
|
|
9520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VoiceRecordWidgetComponent, isStandalone: true, selector: "voice-record-widget", inputs: { openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingSaved: "recordingSaved" }, viewQueries: [{ propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"recorderContainer\"\n [class.direction-left]=\"isLeftDirection\"\n [class.direction-right]=\"!isLeftDirection\"\n [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\n [class.isRecording]=\"isRecording\"\n [class.hasRecording]=\"recordedBlob\"\n >\n <div class=\"recorderMain\">\n <div class=\"recorderToolbar\">\n <!-- Start Recording -->\n @if (!isRecording) {\n <ui-action-button\n class=\"mainButton\"\n #mainButton\n [descriptor]=\"micButton\"\n (actionClick)=\"startRecording()\"\n >\n </ui-action-button>\n }\n\n <!-- Stop Recording -->\n @if (isRecording) {\n <ui-action-button\n class=\"mainButton\"\n #mainButton\n [descriptor]=\"stopButton\"\n (actionClick)=\"stopRecording()\"\n >\n </ui-action-button>\n }\n\n <!-- Save Recording -->\n @if (recordedBlob) {\n <ui-action-button\n class=\"mainButton\"\n [descriptor]=\"saveButton\"\n (actionClick)=\"saveRecording()\"\n >\n </ui-action-button>\n }\n\n <!-- Start Play -->\n @if (recordedBlob && !isPlaying) {\n <ui-action-button\n class=\"mainButton\"\n [descriptor]=\"playButton\"\n (actionClick)=\"replayRecording()\"\n ></ui-action-button>\n }\n\n <!-- Stop Play -->\n @if (recordedBlob && isPlaying) {\n <ui-action-button\n class=\"mainButton\"\n [descriptor]=\"stopPlaybackButton\"\n (actionClick)=\"replayRecording()\"\n ></ui-action-button>\n }\n\n @if (isRecording) {\n <div class=\"progress\">{{ time }}</div>\n }\n </div>\n\n <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\n <div class=\"waveformGrid\"></div>\n <div class=\"waveform\" #waveform></div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
9521
9521
|
}
|
|
9522
9522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecordWidgetComponent, decorators: [{
|
|
9523
9523
|
type: Component,
|
|
9524
|
-
args: [{ selector: 'voice-record-widget', imports: [UiActionButtonComponent], template: "<div\
|
|
9524
|
+
args: [{ selector: 'voice-record-widget', imports: [UiActionButtonComponent], template: "<div\n class=\"recorderContainer\"\n [class.direction-left]=\"isLeftDirection\"\n [class.direction-right]=\"!isLeftDirection\"\n [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\n [class.isRecording]=\"isRecording\"\n [class.hasRecording]=\"recordedBlob\"\n >\n <div class=\"recorderMain\">\n <div class=\"recorderToolbar\">\n <!-- Start Recording -->\n @if (!isRecording) {\n <ui-action-button\n class=\"mainButton\"\n #mainButton\n [descriptor]=\"micButton\"\n (actionClick)=\"startRecording()\"\n >\n </ui-action-button>\n }\n\n <!-- Stop Recording -->\n @if (isRecording) {\n <ui-action-button\n class=\"mainButton\"\n #mainButton\n [descriptor]=\"stopButton\"\n (actionClick)=\"stopRecording()\"\n >\n </ui-action-button>\n }\n\n <!-- Save Recording -->\n @if (recordedBlob) {\n <ui-action-button\n class=\"mainButton\"\n [descriptor]=\"saveButton\"\n (actionClick)=\"saveRecording()\"\n >\n </ui-action-button>\n }\n\n <!-- Start Play -->\n @if (recordedBlob && !isPlaying) {\n <ui-action-button\n class=\"mainButton\"\n [descriptor]=\"playButton\"\n (actionClick)=\"replayRecording()\"\n ></ui-action-button>\n }\n\n <!-- Stop Play -->\n @if (recordedBlob && isPlaying) {\n <ui-action-button\n class=\"mainButton\"\n [descriptor]=\"stopPlaybackButton\"\n (actionClick)=\"replayRecording()\"\n ></ui-action-button>\n }\n\n @if (isRecording) {\n <div class=\"progress\">{{ time }}</div>\n }\n </div>\n\n <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\n <div class=\"waveformGrid\"></div>\n <div class=\"waveform\" #waveform></div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"] }]
|
|
9525
9525
|
}], propDecorators: { waveformRef: [{
|
|
9526
9526
|
type: ViewChild,
|
|
9527
9527
|
args: ['waveform']
|
|
@@ -9603,11 +9603,11 @@ class UploadWidgetComponent {
|
|
|
9603
9603
|
};
|
|
9604
9604
|
}
|
|
9605
9605
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UploadWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9606
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UploadWidgetComponent, isStandalone: true, selector: "smart-upload-widget", inputs: { uploadDescriptor: { classPropertyName: "uploadDescriptor", publicName: "uploadDescriptor", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }], ngImport: i0, template: "<div class=\"sb4UploadWidget\">\
|
|
9606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UploadWidgetComponent, isStandalone: true, selector: "smart-upload-widget", inputs: { uploadDescriptor: { classPropertyName: "uploadDescriptor", publicName: "uploadDescriptor", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }], ngImport: i0, template: "<div class=\"sb4UploadWidget\">\n <!-- IMAGE TYPE WIDGET -->\n @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n <photo-capture-widget\n [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\n (photoCaptured)=\"uploadImage($event)\"\n >\n </photo-capture-widget>\n }\n\n <!-- SOUND TYPE WIDGET -->\n @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n <voice-record-widget (recordingSaved)=\"uploadRecording($event)\"> </voice-record-widget>\n }\n <smartfileuploader\n #fileUploadMaterial\n [i18n]=\"i18n\"\n [fileFormats]=\"fileFormats\"\n [maxSizeMb]=\"maxSizeMb\"\n [uploadCallback]=\"upload.bind(this)\"\n [isMultiple]=\"isMultiple()\"\n [autoUpload]=\"autoUpload\"\n [isDisabled]=\"isDisabled()\"\n ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}\n"], dependencies: [{ kind: "component", type: PhotoCaptureWidgetComponent, selector: "photo-capture-widget", inputs: ["maxFileSize"], outputs: ["photoCaptured"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection"], outputs: ["recordingSaved"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple", "autoUpload", "isDisabled"] }] }); }
|
|
9607
9607
|
}
|
|
9608
9608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UploadWidgetComponent, decorators: [{
|
|
9609
9609
|
type: Component,
|
|
9610
|
-
args: [{ selector: 'smart-upload-widget', imports: [PhotoCaptureWidgetComponent, VoiceRecordWidgetComponent, SmartfileuploaderComponent], template: "<div class=\"sb4UploadWidget\">\
|
|
9610
|
+
args: [{ selector: 'smart-upload-widget', imports: [PhotoCaptureWidgetComponent, VoiceRecordWidgetComponent, SmartfileuploaderComponent], template: "<div class=\"sb4UploadWidget\">\n <!-- IMAGE TYPE WIDGET -->\n @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n <photo-capture-widget\n [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\n (photoCaptured)=\"uploadImage($event)\"\n >\n </photo-capture-widget>\n }\n\n <!-- SOUND TYPE WIDGET -->\n @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n <voice-record-widget (recordingSaved)=\"uploadRecording($event)\"> </voice-record-widget>\n }\n <smartfileuploader\n #fileUploadMaterial\n [i18n]=\"i18n\"\n [fileFormats]=\"fileFormats\"\n [maxSizeMb]=\"maxSizeMb\"\n [uploadCallback]=\"upload.bind(this)\"\n [isMultiple]=\"isMultiple()\"\n [autoUpload]=\"autoUpload\"\n [isDisabled]=\"isDisabled()\"\n ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}\n"] }]
|
|
9611
9611
|
}], propDecorators: { fileUploadMaterial: [{
|
|
9612
9612
|
type: ViewChild,
|
|
9613
9613
|
args: ['fileUploadMaterial']
|
|
@@ -9620,6 +9620,7 @@ class SmartFileEditorComponent {
|
|
|
9620
9620
|
// ---- ControlValueAccessor implementation ----
|
|
9621
9621
|
this.onChange = (value) => { };
|
|
9622
9622
|
this.onTouched = () => { };
|
|
9623
|
+
/** The editor's disabled state: the widget's at creation, then the form control's. */
|
|
9623
9624
|
this.isDisabled = false;
|
|
9624
9625
|
}
|
|
9625
9626
|
get widgetInstance() {
|
|
@@ -9635,6 +9636,7 @@ class SmartFileEditorComponent {
|
|
|
9635
9636
|
typeof structuredClone === 'function'
|
|
9636
9637
|
? structuredClone(value)
|
|
9637
9638
|
: JSON.parse(JSON.stringify(value));
|
|
9639
|
+
this.isDisabled = !!value.isDisabled;
|
|
9638
9640
|
if (!this._widgetInstance.fileUploaderProperties?.undoIcon) {
|
|
9639
9641
|
this._widgetInstance.fileUploaderProperties = {
|
|
9640
9642
|
...(this._widgetInstance.fileUploaderProperties ?? {}),
|
|
@@ -9658,6 +9660,17 @@ class SmartFileEditorComponent {
|
|
|
9658
9660
|
});
|
|
9659
9661
|
this.onChange(this._widgetInstance.value);
|
|
9660
9662
|
this.fileToChange = undefined;
|
|
9663
|
+
this.clearedFile = undefined;
|
|
9664
|
+
}
|
|
9665
|
+
clear() {
|
|
9666
|
+
this.clearedFile = this._widgetInstance.value;
|
|
9667
|
+
this._widgetInstance.value = null;
|
|
9668
|
+
this.onChange(null);
|
|
9669
|
+
}
|
|
9670
|
+
undoClear() {
|
|
9671
|
+
this._widgetInstance.value = this.clearedFile;
|
|
9672
|
+
this.onChange(this.clearedFile);
|
|
9673
|
+
this.clearedFile = undefined;
|
|
9661
9674
|
}
|
|
9662
9675
|
change(file) {
|
|
9663
9676
|
this.fileToChange = file;
|
|
@@ -9701,6 +9714,10 @@ class SmartFileEditorComponent {
|
|
|
9701
9714
|
writeValue(value) {
|
|
9702
9715
|
if (value !== undefined && this._widgetInstance) {
|
|
9703
9716
|
this._widgetInstance.value = value;
|
|
9717
|
+
// A file written over a clear makes the undo obsolete; a written null or '' is the clear itself.
|
|
9718
|
+
if (value) {
|
|
9719
|
+
this.clearedFile = undefined;
|
|
9720
|
+
}
|
|
9704
9721
|
this.cdr.markForCheck();
|
|
9705
9722
|
}
|
|
9706
9723
|
}
|
|
@@ -9712,8 +9729,17 @@ class SmartFileEditorComponent {
|
|
|
9712
9729
|
}
|
|
9713
9730
|
setDisabledState(isDisabled) {
|
|
9714
9731
|
this.isDisabled = isDisabled;
|
|
9732
|
+
// A disable ends the editing (Save or Discard), so a clear is no longer undoable.
|
|
9733
|
+
if (isDisabled) {
|
|
9734
|
+
this.clearedFile = undefined;
|
|
9735
|
+
}
|
|
9736
|
+
this.cdr.markForCheck();
|
|
9715
9737
|
}
|
|
9716
9738
|
// ---- UI getters ----
|
|
9739
|
+
/** An absent clearEnabled offers the clear, as its default in the form definition. */
|
|
9740
|
+
get isClearEnabled() {
|
|
9741
|
+
return this._widgetInstance.fileUploaderProperties?.clearEnabled !== false;
|
|
9742
|
+
}
|
|
9717
9743
|
get fileIcon() {
|
|
9718
9744
|
return 'insert_drive_file';
|
|
9719
9745
|
}
|
|
@@ -9730,6 +9756,17 @@ class SmartFileEditorComponent {
|
|
|
9730
9756
|
};
|
|
9731
9757
|
return changeDescriptor;
|
|
9732
9758
|
}
|
|
9759
|
+
/** The delete icon's own descriptor: nothing of the change or upload action, so no tooltip. */
|
|
9760
|
+
get deleteButton() {
|
|
9761
|
+
var changeButton = this.changeButton;
|
|
9762
|
+
return {
|
|
9763
|
+
title: '',
|
|
9764
|
+
color: 'warn',
|
|
9765
|
+
type: changeButton.type,
|
|
9766
|
+
icon: 'delete',
|
|
9767
|
+
iconPosition: changeButton.iconPosition,
|
|
9768
|
+
};
|
|
9769
|
+
}
|
|
9733
9770
|
get removeButton() {
|
|
9734
9771
|
var changeButton = this.changeButton;
|
|
9735
9772
|
return {
|
|
@@ -9750,7 +9787,7 @@ class SmartFileEditorComponent {
|
|
|
9750
9787
|
useExisting: forwardRef(() => SmartFileEditorComponent),
|
|
9751
9788
|
multi: true,
|
|
9752
9789
|
},
|
|
9753
|
-
], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\
|
|
9790
|
+
], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n @if (widgetInstance.showLabel) {\n <h4\n class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ widgetInstance.label }}\n </h4>\n }\n\n <div class=\"fileEditorComponent\">\n @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n <div class=\"errorMessage\">\n <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n <span> Unsupported widgetInstance.value type for this widget.</span>\n </div>\n } @else if (!widgetInstance.value || fileToChange) {\n <smart-upload-widget\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n [isMultiple]=\"false\"\n [isDisabled]=\"isDisabled\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n @if (clearedFile && !isDisabled) {\n <div class=\"undoClearContainer\">\n <ui-action-button\n class=\"removeIcon undoClearButton\"\n (actionClick)=\"undoClear()\"\n [descriptor]=\"removeButton\"\n ></ui-action-button>\n </div>\n }\n }\n\n <div\n [ngClass]=\"{ disabledWidget: isDisabled }\"\n class=\"uploadedFileContainer\"\n [style.display]=\"\n widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n \"\n >\n <div class=\"uploadedFile\">\n <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n <div class=\"fileData\">\n <div class=\"fileDataContainer\">\n <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n </div>\n </div>\n\n <div class=\"fileActions\">\n <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n @if (!fileToChange) {\n <ui-action-button\n class=\"changeButton\"\n (actionClick)=\"change(widgetInstance.value)\"\n [disabled]=\"isDisabled\"\n [descriptor]=\"changeButton\"\n >\n </ui-action-button>\n @if (!isDisabled && isClearEnabled) {\n <ui-action-button\n class=\"deleteButton\"\n (actionClick)=\"clear()\"\n [descriptor]=\"deleteButton\"\n ></ui-action-button>\n }\n } @else {\n <ui-action-button\n class=\"removeIcon\"\n (actionClick)=\"cancelChange()\"\n [descriptor]=\"removeButton\"\n ></ui-action-button>\n }\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
9754
9791
|
}
|
|
9755
9792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
|
|
9756
9793
|
type: Component,
|
|
@@ -9760,7 +9797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9760
9797
|
useExisting: forwardRef(() => SmartFileEditorComponent),
|
|
9761
9798
|
multi: true,
|
|
9762
9799
|
},
|
|
9763
|
-
], imports: [NgClass, NgStyle, SmartIconComponent, UploadWidgetComponent, UiActionToolbarComponent, UiActionButtonComponent], template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\
|
|
9800
|
+
], imports: [NgClass, NgStyle, SmartIconComponent, UploadWidgetComponent, UiActionToolbarComponent, UiActionButtonComponent], template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n @if (widgetInstance.showLabel) {\n <h4\n class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ widgetInstance.label }}\n </h4>\n }\n\n <div class=\"fileEditorComponent\">\n @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n <div class=\"errorMessage\">\n <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n <span> Unsupported widgetInstance.value type for this widget.</span>\n </div>\n } @else if (!widgetInstance.value || fileToChange) {\n <smart-upload-widget\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n [isMultiple]=\"false\"\n [isDisabled]=\"isDisabled\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n @if (clearedFile && !isDisabled) {\n <div class=\"undoClearContainer\">\n <ui-action-button\n class=\"removeIcon undoClearButton\"\n (actionClick)=\"undoClear()\"\n [descriptor]=\"removeButton\"\n ></ui-action-button>\n </div>\n }\n }\n\n <div\n [ngClass]=\"{ disabledWidget: isDisabled }\"\n class=\"uploadedFileContainer\"\n [style.display]=\"\n widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n \"\n >\n <div class=\"uploadedFile\">\n <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n <div class=\"fileData\">\n <div class=\"fileDataContainer\">\n <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n </div>\n </div>\n\n <div class=\"fileActions\">\n <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n @if (!fileToChange) {\n <ui-action-button\n class=\"changeButton\"\n (actionClick)=\"change(widgetInstance.value)\"\n [disabled]=\"isDisabled\"\n [descriptor]=\"changeButton\"\n >\n </ui-action-button>\n @if (!isDisabled && isClearEnabled) {\n <ui-action-button\n class=\"deleteButton\"\n (actionClick)=\"clear()\"\n [descriptor]=\"deleteButton\"\n ></ui-action-button>\n }\n } @else {\n <ui-action-button\n class=\"removeIcon\"\n (actionClick)=\"cancelChange()\"\n [descriptor]=\"removeButton\"\n ></ui-action-button>\n }\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"] }]
|
|
9764
9801
|
}], propDecorators: { widgetInstance: [{
|
|
9765
9802
|
type: Input
|
|
9766
9803
|
}], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
|
|
@@ -10672,6 +10709,7 @@ class SmartMultiFileEditorComponent {
|
|
|
10672
10709
|
// ---- ControlValueAccessor implementation ----
|
|
10673
10710
|
this.onChange = (value) => { };
|
|
10674
10711
|
this.onTouched = () => { };
|
|
10712
|
+
/** The editor's disabled state: the widget's at creation, then the form control's. */
|
|
10675
10713
|
this.isDisabled = false;
|
|
10676
10714
|
}
|
|
10677
10715
|
get widgetInstance() {
|
|
@@ -10687,6 +10725,7 @@ class SmartMultiFileEditorComponent {
|
|
|
10687
10725
|
typeof structuredClone === 'function'
|
|
10688
10726
|
? structuredClone(value)
|
|
10689
10727
|
: JSON.parse(JSON.stringify(value));
|
|
10728
|
+
this.isDisabled = !!value.isDisabled;
|
|
10690
10729
|
this.cdr.markForCheck();
|
|
10691
10730
|
}
|
|
10692
10731
|
upload(event) {
|
|
@@ -10773,6 +10812,7 @@ class SmartMultiFileEditorComponent {
|
|
|
10773
10812
|
}
|
|
10774
10813
|
setDisabledState(isDisabled) {
|
|
10775
10814
|
this.isDisabled = isDisabled;
|
|
10815
|
+
this.cdr.markForCheck();
|
|
10776
10816
|
}
|
|
10777
10817
|
// ---- UI getters ----
|
|
10778
10818
|
get removeIcon() {
|
|
@@ -10791,7 +10831,7 @@ class SmartMultiFileEditorComponent {
|
|
|
10791
10831
|
useExisting: forwardRef(() => SmartMultiFileEditorComponent),
|
|
10792
10832
|
multi: true,
|
|
10793
10833
|
},
|
|
10794
|
-
], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\
|
|
10834
|
+
], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n @if (widgetInstance.showLabel) {\n <h4\n class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ widgetInstance.label }}\n </h4>\n }\n <div class=\"fileEditorComponent\">\n @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n <div class=\"errorMessage\">\n <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n <span> Unsupported widgetInstance.value type for this widget.</span>\n </div>\n } @else {\n <smart-upload-widget\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n [isMultiple]=\"true\"\n [isDisabled]=\"isDisabled\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n }\n\n <div\n [ngClass]=\"{ disabledWidget: isDisabled }\"\n class=\"uploadedFileContainer\"\n [style.display]=\"\n widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n \"\n >\n <div class=\"scrollable\">\n @for (file of widgetInstance.value; track file; let i = $index) {\n <div class=\"uploadedFile\">\n <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n <div class=\"fileData\">\n <div class=\"fileDataContainer\">\n <span class=\"fileName\">{{ file?.fileName }}</span>\n <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n </div>\n </div>\n <div class=\"fileActions\">\n <!--\n One toolbar per file, each resolving the widget's actions for itself and\n carrying its own file. The hidden sibling whose list these used to read is\n gone with the collection machinery (ADR-0006).\n -->\n <smart-ui-action-toolbar\n [id]=\"widgetInstance.toolbarId\"\n [actionParams]=\"{ _dataUri: file.dataUri }\"\n ></smart-ui-action-toolbar>\n <smart-icon\n class=\"downloadIcon\"\n icon=\"download\"\n (click)=\"downloadFile(file.dataUri)\"\n ></smart-icon>\n @if (!file.readOnly && !isDisabled) {\n <smart-icon\n class=\"removeIcon\"\n [icon]=\"removeIcon\"\n (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n ></smart-icon>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }] }); }
|
|
10795
10835
|
}
|
|
10796
10836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMultiFileEditorComponent, decorators: [{
|
|
10797
10837
|
type: Component,
|
|
@@ -10801,7 +10841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
10801
10841
|
useExisting: forwardRef(() => SmartMultiFileEditorComponent),
|
|
10802
10842
|
multi: true,
|
|
10803
10843
|
},
|
|
10804
|
-
], imports: [NgClass, NgStyle, UiActionToolbarComponent, SmartIconComponent, UploadWidgetComponent], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\
|
|
10844
|
+
], imports: [NgClass, NgStyle, UiActionToolbarComponent, SmartIconComponent, UploadWidgetComponent], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n @if (widgetInstance.showLabel) {\n <h4\n class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ widgetInstance.label }}\n </h4>\n }\n <div class=\"fileEditorComponent\">\n @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n <div class=\"errorMessage\">\n <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n <span> Unsupported widgetInstance.value type for this widget.</span>\n </div>\n } @else {\n <smart-upload-widget\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n [isMultiple]=\"true\"\n [isDisabled]=\"isDisabled\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n }\n\n <div\n [ngClass]=\"{ disabledWidget: isDisabled }\"\n class=\"uploadedFileContainer\"\n [style.display]=\"\n widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n \"\n >\n <div class=\"scrollable\">\n @for (file of widgetInstance.value; track file; let i = $index) {\n <div class=\"uploadedFile\">\n <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n <div class=\"fileData\">\n <div class=\"fileDataContainer\">\n <span class=\"fileName\">{{ file?.fileName }}</span>\n <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n </div>\n </div>\n <div class=\"fileActions\">\n <!--\n One toolbar per file, each resolving the widget's actions for itself and\n carrying its own file. The hidden sibling whose list these used to read is\n gone with the collection machinery (ADR-0006).\n -->\n <smart-ui-action-toolbar\n [id]=\"widgetInstance.toolbarId\"\n [actionParams]=\"{ _dataUri: file.dataUri }\"\n ></smart-ui-action-toolbar>\n <smart-icon\n class=\"downloadIcon\"\n icon=\"download\"\n (click)=\"downloadFile(file.dataUri)\"\n ></smart-icon>\n @if (!file.readOnly && !isDisabled) {\n <smart-icon\n class=\"removeIcon\"\n [icon]=\"removeIcon\"\n (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n ></smart-icon>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"] }]
|
|
10805
10845
|
}], propDecorators: { widgetInstance: [{
|
|
10806
10846
|
type: Input
|
|
10807
10847
|
}], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }], fileEvent: [{ type: i0.Output, args: ["fileEvent"] }] } });
|
|
@@ -10892,7 +10932,7 @@ class SmartMonthPickerComponent {
|
|
|
10892
10932
|
// SmartDateFnsAdapter resolves MAT_DATE_LOCALE with `inject()`.
|
|
10893
10933
|
{ provide: DateAdapter, useClass: SmartDateFnsAdapter },
|
|
10894
10934
|
{ provide: MAT_DATE_FORMATS, useValue: YEARH_MONTH_FORMAT },
|
|
10895
|
-
], ngImport: i0, template: "<div class=\"smart-month-picker-container\">\
|
|
10935
|
+
], ngImport: i0, template: "<div class=\"smart-month-picker-container\">\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n [matDatepicker]=\"dp\"\n [formControl]=\"date\"\n [errorStateMatcher]=\"errorMatcher\"\n (input)=\"handleChange($event)\"\n (blur)=\"onBlur()\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\n <mat-datepicker\n #dp\n startView=\"multi-year\"\n (monthSelected)=\"chosenMonthHandler($event, dp)\"\n panelClass=\"example-month-picker\"\n >\n </mat-datepicker>\n </mat-form-field>\n @if (widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT) {\n <div class=\"smart-month-picker-hint\">\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n </div>\n }\n</div>\n", styles: [".smart-month-picker-container{display:flex}.smart-month-picker-container mat-form-field{flex:1}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] }); }
|
|
10896
10936
|
}
|
|
10897
10937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMonthPickerComponent, decorators: [{
|
|
10898
10938
|
type: Component,
|
|
@@ -10911,7 +10951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
10911
10951
|
MatSuffix,
|
|
10912
10952
|
MatDatepicker,
|
|
10913
10953
|
MatHint,
|
|
10914
|
-
], template: "<div class=\"smart-month-picker-container\">\
|
|
10954
|
+
], template: "<div class=\"smart-month-picker-container\">\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n [matDatepicker]=\"dp\"\n [formControl]=\"date\"\n [errorStateMatcher]=\"errorMatcher\"\n (input)=\"handleChange($event)\"\n (blur)=\"onBlur()\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\n <mat-datepicker\n #dp\n startView=\"multi-year\"\n (monthSelected)=\"chosenMonthHandler($event, dp)\"\n panelClass=\"example-month-picker\"\n >\n </mat-datepicker>\n </mat-form-field>\n @if (widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT) {\n <div class=\"smart-month-picker-hint\">\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n </div>\n }\n</div>\n", styles: [".smart-month-picker-container{display:flex}.smart-month-picker-container mat-form-field{flex:1}\n"] }]
|
|
10915
10955
|
}], propDecorators: { widgetInstance: [{
|
|
10916
10956
|
type: Input
|
|
10917
10957
|
}], control: [{
|
|
@@ -11031,7 +11071,7 @@ class SmartVoiceRecorderComponent {
|
|
|
11031
11071
|
useExisting: forwardRef(() => SmartVoiceRecorderComponent),
|
|
11032
11072
|
multi: true,
|
|
11033
11073
|
},
|
|
11034
|
-
], ngImport: i0, template: "<voice-record-widget [openDirection]=\"openDirection\" (recordingSaved)=\"uploadRecording($event)\">\
|
|
11074
|
+
], ngImport: i0, template: "<voice-record-widget [openDirection]=\"openDirection\" (recordingSaved)=\"uploadRecording($event)\">\n</voice-record-widget>\n", styles: [":host{display:block;width:100%;min-width:0}\n"], dependencies: [{ kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection"], outputs: ["recordingSaved"] }] }); }
|
|
11035
11075
|
}
|
|
11036
11076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartVoiceRecorderComponent, decorators: [{
|
|
11037
11077
|
type: Component,
|
|
@@ -11041,7 +11081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11041
11081
|
useExisting: forwardRef(() => SmartVoiceRecorderComponent),
|
|
11042
11082
|
multi: true,
|
|
11043
11083
|
},
|
|
11044
|
-
], imports: [VoiceRecordWidgetComponent], template: "<voice-record-widget [openDirection]=\"openDirection\" (recordingSaved)=\"uploadRecording($event)\">\
|
|
11084
|
+
], imports: [VoiceRecordWidgetComponent], template: "<voice-record-widget [openDirection]=\"openDirection\" (recordingSaved)=\"uploadRecording($event)\">\n</voice-record-widget>\n", styles: [":host{display:block;width:100%;min-width:0}\n"] }]
|
|
11045
11085
|
}], propDecorators: { widgetInstance: [{
|
|
11046
11086
|
type: Input
|
|
11047
11087
|
}], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
|
|
@@ -11098,7 +11138,7 @@ class SortableWidgetComponent {
|
|
|
11098
11138
|
useExisting: forwardRef(() => SortableWidgetComponent),
|
|
11099
11139
|
multi: true,
|
|
11100
11140
|
},
|
|
11101
|
-
], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\
|
|
11141
|
+
], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\n @for (item of widgetInstance().valueList!; track item; let i = $index) {\n <div\n cdkDrag\n [cdkDragDisabled]=\"isDisabled\"\n class=\"draggableItem\"\n >\n <smart-icon\n class=\"cdkDragHandle\"\n cdkDragHandle\n color=\"drag-indicator\"\n icon=\"drag_indicator\"\n ></smart-icon>\n <div class=\"indexCircle\">\n {{ i + 1 }}\n </div>\n <span class=\"valueLabel\"> {{ item.label }} </span>\n </div>\n }\n</div>\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:grab;margin-top:auto;margin-bottom:auto}.cdkDragHandle:active,.draggableItem:active,.cdk-drop-list-dragging{cursor:grabbing}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
|
|
11102
11142
|
}
|
|
11103
11143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SortableWidgetComponent, decorators: [{
|
|
11104
11144
|
type: Component,
|
|
@@ -11108,7 +11148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11108
11148
|
useExisting: forwardRef(() => SortableWidgetComponent),
|
|
11109
11149
|
multi: true,
|
|
11110
11150
|
},
|
|
11111
|
-
], imports: [CdkDropList, CdkDrag, SmartIconComponent, CdkDragHandle], template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\
|
|
11151
|
+
], imports: [CdkDropList, CdkDrag, SmartIconComponent, CdkDragHandle], template: "<div cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"dropList\">\n @for (item of widgetInstance().valueList!; track item; let i = $index) {\n <div\n cdkDrag\n [cdkDragDisabled]=\"isDisabled\"\n class=\"draggableItem\"\n >\n <smart-icon\n class=\"cdkDragHandle\"\n cdkDragHandle\n color=\"drag-indicator\"\n icon=\"drag_indicator\"\n ></smart-icon>\n <div class=\"indexCircle\">\n {{ i + 1 }}\n </div>\n <span class=\"valueLabel\"> {{ item.label }} </span>\n </div>\n }\n</div>\n", styles: [".dropList{display:flex;flex-direction:column;gap:.25rem}.draggableItem{display:flex;flex-direction:row;gap:.5rem;background-color:#f1f1f1;border-radius:.5rem;padding:.75rem 1rem}.draggableItem .indexCircle{margin:auto 0;padding:.25rem .5rem;border-radius:100%;background-color:#3b3b3b;color:#f1f1f1}.draggableItem .valueLabel{margin:auto 0}.cdkDragHandle{cursor:grab;margin-top:auto;margin-bottom:auto}.cdkDragHandle:active,.draggableItem:active,.cdk-drop-list-dragging{cursor:grabbing}\n"] }]
|
|
11112
11152
|
}], ctorParameters: () => [], propDecorators: { widgetInstance: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetInstance", required: true }] }] } });
|
|
11113
11153
|
|
|
11114
11154
|
class HighlightPipe {
|
|
@@ -12166,7 +12206,7 @@ class SmartformwidgetComponent {
|
|
|
12166
12206
|
this.handleBlurEvent(this.widgetInstance);
|
|
12167
12207
|
}
|
|
12168
12208
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12169
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartformwidgetComponent, isStandalone: true, selector: "smartformwidget", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, widgetInstance: { classPropertyName: "widgetInstance", publicName: "widgetInstance", isSignal: false, isRequired: false, transformFunction: null }, onBlur: { classPropertyName: "onBlur", publicName: "onBlur", isSignal: true, isRequired: false, transformFunction: null }, onValueChange: { classPropertyName: "onValueChange", publicName: "onValueChange", isSignal: false, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, sophisticatedValueChange: { classPropertyName: "sophisticatedValueChange", publicName: "sophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null }, blurSophisticatedValueChange: { classPropertyName: "blurSophisticatedValueChange", publicName: "blurSophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueCleared: "valueCleared" }, viewQueries: [{ propertyName: "chipInputChild", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "customComponentVcRef", first: true, predicate: ["customComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "quill", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "sb4Textarea", first: true, predicate: ["sb4Textarea"], descendants: true }, { propertyName: "dateInputChild", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInputChild", first: true, predicate: ["timeInput"], descendants: true }], ngImport: i0, template: "<div class=\"container material\" [formGroup]=\"form()\">\r\n @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\r\n <div\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [class.sb4-widget-required]=\"isRequired()\"\r\n class=\"container\"\r\n >\r\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\r\n @for (widget of visibleChildren; track widget) {\r\n <smartformwidget\r\n [form]=\"form()\"\r\n [widgetInstance]=\"widget\"\r\n class=\"container-item\"\r\n [ngClass]=\"widget.cssClass ?? ''\"\r\n [onBlur]=\"onBlur()\"\r\n [onValueChange]=\"onValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange()\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"labelColor()\"\r\n ></smartformwidget>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\r\n <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n @if (!widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [attr.inputmode]=\"\r\n widgetInstance.inputMode ? widgetInstance.inputMode.toLocaleLowerCase() : 'text'\r\n \"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\r\n (keydown.enter)=\"onKeydown()\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n [mask]=\"widgetInstance.mask\"\r\n />\r\n }\r\n <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\r\n @if (widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n (click)=\"onValueChange?.next($event)\"\r\n type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n [matAutocomplete]=\"textFieldAuto\"\r\n (keydown.enter)=\"onKeydown()\"\r\n />\r\n }\r\n @if (widgetInstance.isPassword) {\r\n <button mat-icon-button matSuffix (click)=\"togglePasswordVisibility($event)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{\r\n hidePassword ? 'visibility_off' : 'visibility'\r\n }}</mat-icon>\r\n </button>\r\n }\r\n <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n @for (option of filteredOptions | async; track option) {\r\n <mat-option [value]=\"option.label\">\r\n <span [innerHTML]=\"option.label | highlight: toHighlight\"></span>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.capsLockWarning }}\r\n </span>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\r\n color=\"warn\"\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.icon && widgetInstance.iconPosition === 'PRE') {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <div class=\"textFieldButtons\">\r\n @if (widgetInstance.textFieldProperties?.clearable) {\r\n <ui-action-button\r\n class=\"clearButton\"\r\n [addBasicClasses]=\"false\"\r\n [descriptor]=\"clearButtonDescriptor\"\r\n (actionClick)=\"clearField(widgetInstance.key)\"\r\n />\r\n }\r\n </div>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.textFieldButton.icon\"\r\n [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n >\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\r\n }\r\n </button>\r\n }\r\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [type]=\"'number'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [min]=\"widgetInstance.minValues ?? null\"\r\n [max]=\"widgetInstance.maxValues ?? null\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (widgetInstance.icon) {\r\n <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\r\n }\r\n </button>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip-row [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\r\n {{ value }}\r\n <button matChipRemove>\r\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n <input\r\n #chipInput\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [matAutocomplete]=\"chipAuto\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n <mat-autocomplete\r\n #chipAuto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event, widgetInstance)\"\r\n >\r\n @for (item of widgetInstance.valueList; track item) {\r\n <mat-option [disabled]=\"widgetInstance.isDisabled\" [value]=\"item.value\">\r\n {{ item.label }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n </mat-chip-grid>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid #chipListLookup aria-label=\"{{ widgetInstance.label }}\">\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\r\n {{ getChipsValue(value) }}\r\n <button matChipRemove>\r\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <input\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipListLookup\"\r\n [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"false\"\r\n [readonly]=\"true\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n </mat-chip-grid>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <textarea\r\n class=\"sb4-textarea\"\r\n #sb4Textarea\r\n cols=\"30\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"widgetInstance.textBoxProperties?.minRows ?? 1\"\r\n [cdkAutosizeMaxRows]=\"widgetInstance.textBoxProperties?.maxRows ?? undefined\"\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n ></textarea>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n <div class=\"checkbox-item-container\">\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n (change)=\"onValueChange?.next(widgetInstance)\"\r\n (change)=\"onBlur()?.next(widgetInstance)\"\r\n >\r\n {{ widgetInstance.label }}\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n @for (checkbox of widgetInstance.valueList; track checkbox; let i = $index) {\r\n <div class=\"checkbox-item-container\">\r\n @if (checkbox.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"checkbox-item-image\"\r\n [src]=\"checkbox.imageUrl\"\r\n />\r\n }\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\r\n [value]=\"checkbox.value\"\r\n (change)=\"onValueChange?.next(checkbox)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n >\r\n {{ checkbox.label }}\r\n </mat-checkbox>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-radio-group\r\n class=\"input radio-section widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n appearance=\"outline\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <div [ngClass]=\"getDirection()\">\r\n @for (radio of widgetInstance.valueList; track radio) {\r\n <div class=\"radio-item-container\">\r\n @if (radio.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"radio-item-image\"\r\n [src]=\"radio.imageUrl\"\r\n />\r\n }\r\n <mat-radio-button\r\n class=\"selecatbleObject\"\r\n value=\"{{ radio.value }}\"\r\n [ngClass]=\"getDirection()\"\r\n (change)=\"onValueChange?.next(radio.value)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n >\r\n {{ radio.label }}\r\n </mat-radio-button>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n <div class=\"radio-icon\">\r\n @if (widgetInstance.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n >\r\n </smart-icon>\r\n }\r\n </div>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\r\n <div class=\"datePicker widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\r\n <input\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\r\n [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div class=\"{{ labelColor() }} smart-form-widget-label\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <lib-smart-month-picker\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n [control]=\"form().controls[widgetInstance.key]\"\r\n (valueChange)=\"handleYearMonthPicked($event)\"\r\n ></lib-smart-month-picker>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div class=\"dateTimePickerContainer\">\r\n <mat-form-field\r\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\r\n <input\r\n #dateInput\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\r\n [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\r\n [id]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (blur)=\"onDatePickerBlur($event)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n @if (hasCreated) {\r\n <mat-form-field\r\n class=\"input widgetContent time\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n appearance=\"outline\"\r\n >\r\n <input\r\n #timeInput\r\n [formControlName]=\"widgetInstance.key + '-time'\"\r\n [attr.data-testid]=\"widgetInstance.key + '-time'\"\r\n [id]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n (blur)=\"onTimePickerBlur($event)\"\r\n matInput\r\n />\r\n </mat-form-field>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{ selectionPlaceholder }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\r\n @for (innerOption of option.valueList; track innerOption) {\r\n <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}\r\n </mat-option>\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\r\n @if (option.icon) {\r\n <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.selectProperties?.clearable) {\r\n <span matSuffix class=\"textFieldButtons\" (click)=\"$event.stopPropagation()\">\r\n <ui-action-button\r\n class=\"clearButton\"\r\n [addBasicClasses]=\"false\"\r\n [descriptor]=\"clearButtonDescriptor\"\r\n (actionClick)=\"clearSelect(widgetInstance.key)\"\r\n />\r\n </span>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n multiple\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{ selectionPlaceholder }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\r\n @for (innerOption of option.valueList; track innerOption) {\r\n <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}</mat-option\r\n >\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\r\n @if (option.icon) {\r\n <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\r\n <div class=\"label widgetContainer\" [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\">\r\n <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance.widgetDescription) {\r\n <p>{{ widgetInstance.widgetDescription }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TIME) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <mat-slide-toggle\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (change)=\"onValueChange?.next($event)\"\r\n [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\r\n ><span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"smartIndicator widgetContent\">\r\n <div\r\n class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n >\r\n @for (item of indicatorItems; track item; let i = $index) {\r\n <div class=\"indicatorItem\" [ngClass]=\"getIndicatorItemClass(i)\"></div>\r\n }\r\n </div>\r\n <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n {{ getIndicatorStatusLabel() }}\r\n </p>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"widgetItemContainer\">\r\n <smart-voice-recorder\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-multi-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n (fileEvent)=\"executeUiAction($event.uiAction)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\r\n <div class=\"widgetContainer imageContainer\">\r\n @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance.imageProperties?.image) {\r\n <smart-icon\r\n [imageResource]=\"$safeNavigationMigration(widgetInstance.imageProperties?.image)\"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n } @else if (widgetInstance.value) {\r\n <smart-icon\r\n [(ngModel)]=\"widgetInstance.value\"\r\n [imageResource]=\"widgetInstance.value\"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIV) {\r\n <div\r\n class=\"smartDiv\"\r\n [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\r\n [ngClass]=\"getNgClass()\"\r\n [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\r\n [ngStyle]=\"getStyle()\"\r\n (click)=\"onDivClick()\"\r\n ></div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.HTML) {\r\n <smart-html-widget\r\n [widgetInstance]=\"widgetInstance\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-html-widget>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SVG) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\r\n <div class=\"widgetContainer\">\r\n <hr\r\n class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <button\r\n mat-button\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n [color]=\"$safeNavigationMigration(widgetInstance.uiActionDescriptor?.color)\"\r\n (click)=\"onButtonClicked(widgetInstance)\"\r\n >\r\n @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\r\n @if (widgetInstance.uiActionDescriptor?.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n } @else {\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.uiActionDescriptor?.title }}\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"labelContainer {{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"widgetContent\">\r\n <ng-template #customComponent></ng-template>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <quill-editor\r\n #quillEditor\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [modules]=\"\r\n widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\r\n \"\r\n [placeholder]=\"widgetInstance.placeholder ?? ''\"\r\n [readOnly]=\"widgetInstance.isReadonly ?? false\"\r\n [maxLength]=\"widgetInstance.maxLength ?? 0\"\r\n (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\r\n ></quill-editor>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\r\n <mat-hint matSuffix align=\"end\" class=\"rich-text-editor-leeway-counter\">{{\r\n getRichTextEditorLengthLeeway()\r\n }}</mat-hint>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <lib-sortable-widget\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n ></lib-sortable-widget>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <table class=\"matrixTable widgetContent\">\r\n <tr>\r\n <th></th>\r\n @for (option of widgetInstance.value.columns; track option) {\r\n <th class=\"optionLabel\">\r\n {{ option.displayValue }}\r\n </th>\r\n }\r\n </tr>\r\n @for (question of widgetInstance.value.rows; track question; let i = $index) {\r\n <tr>\r\n <th class=\"questionLabel\">\r\n <label>{{ question.displayValue }}</label>\r\n </th>\r\n @for (option of widgetInstance.value.columns; track option; let j = $index) {\r\n <td class=\"selectTd\">\r\n @if (!widgetInstance.isMultiple) {\r\n <mat-radio-group\r\n [formControlName]=\"widgetInstance.key + '.' + question.code\"\r\n [name]=\"'q' + i\"\r\n >\r\n <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n @if (widgetInstance.isMultiple) {\r\n <div>\r\n <mat-checkbox\r\n [formControlName]=\"\r\n widgetInstance.key + '.data.' + question.code + '.' + option.code\r\n \"\r\n [value]=\"widgetInstance.value['data'][question.code][option.code]\"\r\n [checked]=\"true\"\r\n ></mat-checkbox>\r\n </div>\r\n }\r\n </td>\r\n }\r\n <br />\r\n @if (widgetInstance.button) {\r\n <button mat-icon-button (click)=\"removeMatrixRow(question)\">\r\n <smart-icon icon=\"close\"></smart-icon>\r\n </button>\r\n }\r\n </tr>\r\n }\r\n </table>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <youtube-player\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n videoId=\"{{ widgetInstance.videoId }}\"\r\n [width]=\"widgetInstance.width\"\r\n [height]=\"widgetInstance.height\"\r\n [startSeconds]=\"widgetInstance.startSeconds\"\r\n [endSeconds]=\"widgetInstance.endSeconds\"\r\n ></youtube-player>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"], dependencies: [{ kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance", "control"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12209
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartformwidgetComponent, isStandalone: true, selector: "smartformwidget", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, widgetInstance: { classPropertyName: "widgetInstance", publicName: "widgetInstance", isSignal: false, isRequired: false, transformFunction: null }, onBlur: { classPropertyName: "onBlur", publicName: "onBlur", isSignal: true, isRequired: false, transformFunction: null }, onValueChange: { classPropertyName: "onValueChange", publicName: "onValueChange", isSignal: false, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, sophisticatedValueChange: { classPropertyName: "sophisticatedValueChange", publicName: "sophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null }, blurSophisticatedValueChange: { classPropertyName: "blurSophisticatedValueChange", publicName: "blurSophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueCleared: "valueCleared" }, viewQueries: [{ propertyName: "chipInputChild", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "customComponentVcRef", first: true, predicate: ["customComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "quill", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "sb4Textarea", first: true, predicate: ["sb4Textarea"], descendants: true }, { propertyName: "dateInputChild", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInputChild", first: true, predicate: ["timeInput"], descendants: true }], ngImport: i0, template: "<div class=\"container material\" [formGroup]=\"form()\">\n @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n <div\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\n [class.sb4-widget-required]=\"isRequired()\"\n class=\"container\"\n >\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\n @for (widget of visibleChildren; track widget) {\n <smartformwidget\n [form]=\"form()\"\n [widgetInstance]=\"widget\"\n class=\"container-item\"\n [ngClass]=\"widget.cssClass ?? ''\"\n [onBlur]=\"onBlur()\"\n [onValueChange]=\"onValueChange\"\n [sophisticatedValueChange]=\"sophisticatedValueChange()\"\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\n class=\"{{ widget.key }}\"\n [labelColor]=\"labelColor()\"\n ></smartformwidget>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\n <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n @if (!widgetInstance.selection) {\n <input\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [attr.inputmode]=\"\n widgetInstance.inputMode ? widgetInstance.inputMode.toLocaleLowerCase() : 'text'\n \"\n [type]=\"'string'\"\n [value]=\"widgetInstance.value\"\n [readonly]=\"widgetInstance.isReadonly\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n matInput\n (change)=\"handleBlurEvent($event)\"\n (input)=\"onValueChange?.next($event)\"\n type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\n (keydown.enter)=\"onKeydown()\"\n maxlength=\"{{ widgetInstance.maxLength }}\"\n [mask]=\"widgetInstance.mask\"\n />\n }\n <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\n @if (widgetInstance.selection) {\n <input\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [type]=\"'string'\"\n [value]=\"widgetInstance.value\"\n [readonly]=\"widgetInstance.isReadonly\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n matInput\n (change)=\"handleBlurEvent($event)\"\n (input)=\"onValueChange?.next($event)\"\n (click)=\"onValueChange?.next($event)\"\n type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\n [matAutocomplete]=\"textFieldAuto\"\n (keydown.enter)=\"onKeydown()\"\n />\n }\n @if (widgetInstance.isPassword) {\n <button mat-icon-button matSuffix (click)=\"togglePasswordVisibility($event)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{\n hidePassword ? 'visibility_off' : 'visibility'\n }}</mat-icon>\n </button>\n }\n <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\n @for (option of filteredOptions | async; track option) {\n <mat-option [value]=\"option.label\">\n <span [innerHTML]=\"option.label | highlight: toHighlight\"></span>\n </mat-option>\n }\n </mat-autocomplete>\n @if (capsOn && widgetInstance.isPassword) {\n <span class=\"mat-error\">\n {{ widgetInstance.capsLockWarning }}\n </span>\n }\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n <span matPrefix>\n @if (capsOn && widgetInstance.isPassword) {\n <smart-icon\n [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\n color=\"warn\"\n ></smart-icon>\n }\n @if (widgetInstance.icon && widgetInstance.iconPosition === 'PRE') {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n ></smart-icon>\n }\n {{ widgetInstance.prefix }}\n </span>\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (\n widgetInstance.icon &&\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n ) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n matSuffix\n ></smart-icon>\n }\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n <div class=\"textFieldButtons\">\n @if (widgetInstance.textFieldProperties?.clearable) {\n <ui-action-button\n class=\"clearButton\"\n [addBasicClasses]=\"false\"\n [descriptor]=\"clearButtonDescriptor\"\n (actionClick)=\"clearField(widgetInstance.key)\"\n />\n }\n </div>\n @if (isToolbarPresent()) {\n <smart-ui-action-toolbar\n class=\"textFieldToolbar\"\n matSuffix\n [id]=\"widgetInstance.toolbarId\"\n ></smart-ui-action-toolbar>\n }\n @if (widgetInstance.textFieldButton) {\n <button\n matSuffix\n mat-button\n color=\"{{ widgetInstance.textFieldButton.color }}\"\n (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n >\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().PRE &&\n widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n [color]=\"widgetInstance.textFieldButton.iconColor\"\n >\n </smart-icon>\n }\n {{ widgetInstance.textFieldButton.label }}\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().POST &&\n widgetInstance.textFieldButton.icon\n ) {\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n }\n </button>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint matSuffix align=\"end\">{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint>\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <input\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [value]=\"widgetInstance.value\"\n [readonly]=\"widgetInstance.isReadonly\"\n [type]=\"'number'\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [min]=\"widgetInstance.minValues ?? null\"\n [max]=\"widgetInstance.maxValues ?? null\"\n matInput\n (change)=\"handleBlurEvent($event)\"\n (input)=\"onValueChange?.next($event)\"\n />\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n <span matPrefix>\n {{ widgetInstance.prefix }}\n </span>\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (widgetInstance.icon) {\n <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\n }\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n @if (widgetInstance.textFieldButton) {\n <button\n matSuffix\n mat-button\n color=\"{{ widgetInstance.textFieldButton.color }}\"\n (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n >\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().PRE &&\n widgetInstance.textFieldButton.icon\n ) {\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n }\n {{ widgetInstance.textFieldButton.label }}\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().POST &&\n widgetInstance.textFieldButton.icon\n ) {\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n }\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\n @for (value of widgetInstance.value; track value) {\n <mat-chip-row [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n {{ value }}\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n #chipInput\n [attr.data-testid]=\"widgetInstance.key\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n [readonly]=\"widgetInstance.isReadonly\"\n [matAutocomplete]=\"chipAuto\"\n (matChipInputTokenEnd)=\"add($event)\"\n (change)=\"handleBlurEvent($event)\"\n (input)=\"onValueChange?.next($event)\"\n [disabled]=\"widgetInstance.isDisabled\"\n />\n <mat-autocomplete\n #chipAuto=\"matAutocomplete\"\n (optionSelected)=\"selected($event, widgetInstance)\"\n >\n @for (item of widgetInstance.valueList; track item) {\n <mat-option [disabled]=\"widgetInstance.isDisabled\" [value]=\"item.value\">\n {{ item.label }}\n </mat-option>\n }\n </mat-autocomplete>\n </mat-chip-grid>\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-chip-grid #chipListLookup aria-label=\"{{ widgetInstance.label }}\">\n @for (value of widgetInstance.value; track value) {\n <mat-chip [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n {{ getChipsValue(value) }}\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip>\n }\n <input\n [attr.data-testid]=\"widgetInstance.key\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [matChipInputFor]=\"chipListLookup\"\n [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\n [matChipInputAddOnBlur]=\"false\"\n [readonly]=\"true\"\n [disabled]=\"widgetInstance.isDisabled\"\n />\n </mat-chip-grid>\n @if (isToolbarPresent()) {\n <smart-ui-action-toolbar\n matSuffix\n [id]=\"widgetInstance.toolbarId\"\n ></smart-ui-action-toolbar>\n }\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <textarea\n class=\"sb4-textarea\"\n #sb4Textarea\n cols=\"30\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"widgetInstance.textBoxProperties?.minRows ?? 1\"\n [cdkAutosizeMaxRows]=\"widgetInstance.textBoxProperties?.maxRows ?? undefined\"\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [type]=\"'string'\"\n [value]=\"widgetInstance.value\"\n [readonly]=\"widgetInstance.isReadonly\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n matInput\n (change)=\"handleBlurEvent($event)\"\n maxlength=\"{{ widgetInstance.maxLength }}\"\n ></textarea>\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint matSuffix align=\"end\">{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint>\n }\n </mat-form-field>\n @if (\n !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <div\n class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"radioLabel\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n <div class=\"checkbox-item-container\">\n <mat-checkbox\n class=\"selecatbleObject\"\n formControlName=\"{{ widgetInstance.key }}\"\n (change)=\"onValueChange?.next(widgetInstance)\"\n (change)=\"onBlur()?.next(widgetInstance)\"\n >\n {{ widgetInstance.label }}\n </mat-checkbox>\n </div>\n <div class=\"radio-error\">\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n ></smart-icon>\n }\n </div>\n </section>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <div\n class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"radioLabel\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n @for (checkbox of widgetInstance.valueList; track checkbox; let i = $index) {\n <div class=\"checkbox-item-container\">\n @if (checkbox.imageUrl) {\n <img\n title=\"{{ widgetInstance.key }}\"\n class=\"checkbox-item-image\"\n [src]=\"checkbox.imageUrl\"\n />\n }\n <mat-checkbox\n class=\"selecatbleObject\"\n formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\n [value]=\"checkbox.value\"\n (change)=\"onValueChange?.next(checkbox)\"\n [disabled]=\"widgetInstance.isDisabled!\"\n >\n {{ checkbox.label }}\n </mat-checkbox>\n </div>\n }\n <div class=\"radio-error\">\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n ></smart-icon>\n }\n </div>\n </section>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-radio-group\n class=\"input radio-section widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n [attr.data-testid]=\"widgetInstance.key\"\n aria-label=\"{{ widgetInstance.label }}\"\n appearance=\"outline\"\n formControlName=\"{{ widgetInstance.key }}\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"radioLabel\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <div [ngClass]=\"getDirection()\">\n @for (radio of widgetInstance.valueList; track radio) {\n <div class=\"radio-item-container\">\n @if (radio.imageUrl) {\n <img\n title=\"{{ widgetInstance.key }}\"\n class=\"radio-item-image\"\n [src]=\"radio.imageUrl\"\n />\n }\n <mat-radio-button\n class=\"selecatbleObject\"\n value=\"{{ radio.value }}\"\n [ngClass]=\"getDirection()\"\n (change)=\"onValueChange?.next(radio.value)\"\n [disabled]=\"widgetInstance.isDisabled\"\n >\n {{ radio.label }}\n </mat-radio-button>\n </div>\n }\n <div class=\"radio-error\">\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n ></smart-icon>\n }\n </div>\n <div class=\"radio-icon\">\n @if (widgetInstance.icon) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n >\n </smart-icon>\n }\n </div>\n </div>\n </mat-radio-group>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\n <div class=\"datePicker widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n <input\n matInput\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [value]=\"widgetInstance.value\"\n [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [matDatepicker]=\"picker\"\n (change)=\"handleBlurEvent(widgetInstance)\"\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n />\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (\n widgetInstance.icon &&\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n ) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n matSuffix\n ></smart-icon>\n }\n <mat-hint>\n {{ widgetInstance.dateFormatHint }}\n </mat-hint>\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <div class=\"{{ labelColor() }} smart-form-widget-label\">\n {{ getWidgetLabel(widgetInstance) }}\n </div>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <lib-smart-month-picker\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n [control]=\"form().controls[widgetInstance.key]\"\n (valueChange)=\"handleYearMonthPicked($event)\"\n ></lib-smart-month-picker>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <div\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </div>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <div class=\"dateTimePickerContainer\">\n <mat-form-field\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n <input\n #dateInput\n matInput\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n [id]=\"widgetInstance.key\"\n [value]=\"widgetInstance.value\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [matDatepicker]=\"picker\"\n (blur)=\"onDatePickerBlur($event)\"\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n />\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (\n widgetInstance.icon &&\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n ) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n matSuffix\n ></smart-icon>\n }\n <mat-hint>\n {{ widgetInstance.dateFormatHint }}\n </mat-hint>\n </mat-form-field>\n @if (hasCreated) {\n <mat-form-field\n class=\"input widgetContent time\"\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n appearance=\"outline\"\n >\n <input\n #timeInput\n [formControlName]=\"widgetInstance.key + '-time'\"\n [attr.data-testid]=\"widgetInstance.key + '-time'\"\n [id]=\"widgetInstance.key\"\n [type]=\"'time'\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n (blur)=\"onTimePickerBlur($event)\"\n matInput\n />\n </mat-form-field>\n }\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SELECT) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <div\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </div>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-select\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n (selectionChange)=\"onValueChange?.next($event.value)\"\n (closed)=\"handleBlurEvent(widgetInstance)\"\n [disabled]=\"widgetInstance.isDisabled!\"\n [compareWith]=\"\n widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n \"\n placeholder=\"{{ selectionPlaceholder }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n @if (innerOption.icon) {\n <smart-icon\n [icon]=\"innerOption.icon\"\n [color]=\"innerOption.iconColor\"\n ></smart-icon>\n }\n {{ innerOption.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (option.type === getType().ITEM) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n @if (option.icon) {\n <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n }\n {{ option.label }}</mat-option\n >\n }\n </div>\n }\n </mat-select>\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (\n widgetInstance.icon &&\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n ) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n matSuffix\n ></smart-icon>\n }\n @if (widgetInstance.selectProperties?.clearable) {\n <span matSuffix class=\"textFieldButtons\" (click)=\"$event.stopPropagation()\">\n <ui-action-button\n class=\"clearButton\"\n [addBasicClasses]=\"false\"\n [descriptor]=\"clearButtonDescriptor\"\n (actionClick)=\"clearSelect(widgetInstance.key)\"\n />\n </span>\n }\n @if (isToolbarPresent()) {\n <smart-ui-action-toolbar\n class=\"textFieldToolbar\"\n matSuffix\n [id]=\"widgetInstance.toolbarId\"\n ></smart-ui-action-toolbar>\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-select\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n multiple\n (selectionChange)=\"onValueChange?.next($event.value)\"\n (closed)=\"handleBlurEvent(widgetInstance)\"\n [disabled]=\"widgetInstance.isDisabled!\"\n [compareWith]=\"\n widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n \"\n placeholder=\"{{ selectionPlaceholder }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n @if (innerOption.icon) {\n <smart-icon\n [icon]=\"innerOption.icon\"\n [color]=\"innerOption.iconColor\"\n ></smart-icon>\n }\n {{ innerOption.label }}</mat-option\n >\n }\n </mat-optgroup>\n }\n @if (option.type === getType().ITEM) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n @if (option.icon) {\n <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n }\n {{ option.label }}</mat-option\n >\n }\n </div>\n }\n </mat-select>\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n @if (isToolbarPresent()) {\n <smart-ui-action-toolbar\n class=\"textFieldToolbar\"\n matSuffix\n [id]=\"widgetInstance.toolbarId\"\n ></smart-ui-action-toolbar>\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n <div class=\"label widgetContainer\" [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\">\n <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance.widgetDescription) {\n <p>{{ widgetInstance.widgetDescription }}</p>\n }\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TIME) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <input\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [type]=\"'time'\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n matInput\n (change)=\"handleBlurEvent(widgetInstance)\"\n />\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <div\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n >\n <mat-slide-toggle\n formControlName=\"{{ widgetInstance.key }}\"\n [attr.data-testid]=\"widgetInstance.key\"\n (change)=\"onValueChange?.next($event)\"\n [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\n >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\n ><span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n ></smart-icon>\n }\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <h4\n class=\"{{ labelColor() }} labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n <div class=\"smartIndicator widgetContent\">\n <div\n class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n >\n @for (item of indicatorItems; track item; let i = $index) {\n <div class=\"indicatorItem\" [ngClass]=\"getIndicatorItemClass(i)\"></div>\n }\n </div>\n <p [ngClass]=\"getIndicatorStatusLabelColor()\">\n {{ getIndicatorStatusLabel() }}\n </p>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\n <div class=\"widgetContainer\">\n <div class=\"widgetItemContainer\">\n <smart-voice-recorder\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\n <div class=\"widgetContainer\">\n <smart-file-editor\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\n <div class=\"widgetContainer\">\n <smart-multi-file-editor\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (uploadFilesEvent)=\"upload($event)\"\n (fileEvent)=\"executeUiAction($event.uiAction)\"\n />\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\n <div class=\"widgetContainer imageContainer\">\n @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\n <h4\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance.imageProperties?.image) {\n <smart-icon\n [imageResource]=\"$safeNavigationMigration(widgetInstance.imageProperties?.image)\"\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n alt=\"Image\"\n title=\"{{ widgetInstance.key }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n ></smart-icon>\n } @else if (widgetInstance.value) {\n <smart-icon\n [(ngModel)]=\"widgetInstance.value\"\n [imageResource]=\"widgetInstance.value\"\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n alt=\"Image\"\n title=\"{{ widgetInstance.key }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n ></smart-icon>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DIV) {\n <div\n class=\"smartDiv\"\n [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\n [ngClass]=\"getNgClass()\"\n [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\n [ngStyle]=\"getStyle()\"\n (click)=\"onDivClick()\"\n ></div>\n }\n @if (widgetInstance.type === smartFormWidgetType.HTML) {\n <smart-html-widget\n [widgetInstance]=\"widgetInstance\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n ></smart-html-widget>\n }\n @if (widgetInstance.type === smartFormWidgetType.SVG) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <h4\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n <div\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n ></div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\n <div class=\"widgetContainer\">\n <hr\n class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n />\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <h4\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n <div\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n >\n <button\n mat-button\n [attr.data-testid]=\"widgetInstance.key\"\n [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\n [color]=\"$safeNavigationMigration(widgetInstance.uiActionDescriptor?.color)\"\n (click)=\"onButtonClicked(widgetInstance)\"\n >\n @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\n @if (widgetInstance.uiActionDescriptor?.icon) {\n <smart-icon\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n [color]=\"\n widgetInstance.uiActionDescriptor?.iconColor ??\n widgetInstance.uiActionDescriptor?.color\n \"\n ></smart-icon>\n }\n } @else {\n @if (\n widgetInstance.uiActionDescriptor?.icon &&\n widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\n ) {\n <smart-icon\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n [color]=\"\n widgetInstance.uiActionDescriptor?.iconColor ??\n widgetInstance.uiActionDescriptor?.color\n \"\n ></smart-icon>\n }\n {{ widgetInstance.uiActionDescriptor?.title }}\n @if (\n widgetInstance.uiActionDescriptor?.icon &&\n widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\n ) {\n <smart-icon\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n [color]=\"\n widgetInstance.uiActionDescriptor?.iconColor ??\n widgetInstance.uiActionDescriptor?.color\n \"\n ></smart-icon>\n }\n }\n </button>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <h4 class=\"labelContainer {{ labelColor() }}\">\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n <div class=\"widgetContent\">\n <ng-template #customComponent></ng-template>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\n <div class=\"widgetContainer\">\n <div class=\"labelContainer\">\n @if (widgetInstance.showLabel) {\n <h4 class=\"{{ labelColor() }}\">\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n <div class=\"widgetContent\">\n <quill-editor\n #quillEditor\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [modules]=\"\n widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\n \"\n [placeholder]=\"widgetInstance.placeholder ?? ''\"\n [readOnly]=\"widgetInstance.isReadonly ?? false\"\n [maxLength]=\"widgetInstance.maxLength ?? 0\"\n (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\n ></quill-editor>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint matSuffix align=\"end\" class=\"rich-text-editor-leeway-counter\">{{\n getRichTextEditorLengthLeeway()\n }}</mat-hint>\n }\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\n <div class=\"widgetContainer\">\n <div class=\"labelContainer\">\n @if (widgetInstance.showLabel) {\n <h4 class=\"{{ labelColor() }}\">\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n <div class=\"widgetContent\">\n <lib-sortable-widget\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n ></lib-sortable-widget>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\n <div class=\"widgetContainer\">\n <div class=\"labelContainer\">\n @if (widgetInstance.showLabel) {\n <h4 class=\"{{ labelColor() }}\">\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n <table class=\"matrixTable widgetContent\">\n <tr>\n <th></th>\n @for (option of widgetInstance.value.columns; track option) {\n <th class=\"optionLabel\">\n {{ option.displayValue }}\n </th>\n }\n </tr>\n @for (question of widgetInstance.value.rows; track question; let i = $index) {\n <tr>\n <th class=\"questionLabel\">\n <label>{{ question.displayValue }}</label>\n </th>\n @for (option of widgetInstance.value.columns; track option; let j = $index) {\n <td class=\"selectTd\">\n @if (!widgetInstance.isMultiple) {\n <mat-radio-group\n [formControlName]=\"widgetInstance.key + '.' + question.code\"\n [name]=\"'q' + i\"\n >\n <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\n </mat-radio-group>\n }\n @if (widgetInstance.isMultiple) {\n <div>\n <mat-checkbox\n [formControlName]=\"\n widgetInstance.key + '.data.' + question.code + '.' + option.code\n \"\n [value]=\"widgetInstance.value['data'][question.code][option.code]\"\n [checked]=\"true\"\n ></mat-checkbox>\n </div>\n }\n </td>\n }\n <br />\n @if (widgetInstance.button) {\n <button mat-icon-button (click)=\"removeMatrixRow(question)\">\n <smart-icon icon=\"close\"></smart-icon>\n </button>\n }\n </tr>\n }\n </table>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\n <div class=\"widgetContainer\">\n <div class=\"labelContainer\">\n @if (widgetInstance.showLabel) {\n <h4\n class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n <youtube-player\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n videoId=\"{{ widgetInstance.videoId }}\"\n [width]=\"widgetInstance.width\"\n [height]=\"widgetInstance.height\"\n [startSeconds]=\"widgetInstance.startSeconds\"\n [endSeconds]=\"widgetInstance.endSeconds\"\n ></youtube-player>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"], dependencies: [{ kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance", "control"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12170
12210
|
}
|
|
12171
12211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, decorators: [{
|
|
12172
12212
|
type: Component,
|
|
@@ -12217,7 +12257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12217
12257
|
YouTubePlayer,
|
|
12218
12258
|
AsyncPipe,
|
|
12219
12259
|
HighlightPipe,
|
|
12220
|
-
], template: "<div class=\"container material\" [formGroup]=\"form()\">\r\n @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\r\n <div\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [class.sb4-widget-required]=\"isRequired()\"\r\n class=\"container\"\r\n >\r\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\r\n @for (widget of visibleChildren; track widget) {\r\n <smartformwidget\r\n [form]=\"form()\"\r\n [widgetInstance]=\"widget\"\r\n class=\"container-item\"\r\n [ngClass]=\"widget.cssClass ?? ''\"\r\n [onBlur]=\"onBlur()\"\r\n [onValueChange]=\"onValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange()\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"labelColor()\"\r\n ></smartformwidget>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\r\n <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n @if (!widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [attr.inputmode]=\"\r\n widgetInstance.inputMode ? widgetInstance.inputMode.toLocaleLowerCase() : 'text'\r\n \"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\r\n (keydown.enter)=\"onKeydown()\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n [mask]=\"widgetInstance.mask\"\r\n />\r\n }\r\n <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\r\n @if (widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n (click)=\"onValueChange?.next($event)\"\r\n type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n [matAutocomplete]=\"textFieldAuto\"\r\n (keydown.enter)=\"onKeydown()\"\r\n />\r\n }\r\n @if (widgetInstance.isPassword) {\r\n <button mat-icon-button matSuffix (click)=\"togglePasswordVisibility($event)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{\r\n hidePassword ? 'visibility_off' : 'visibility'\r\n }}</mat-icon>\r\n </button>\r\n }\r\n <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n @for (option of filteredOptions | async; track option) {\r\n <mat-option [value]=\"option.label\">\r\n <span [innerHTML]=\"option.label | highlight: toHighlight\"></span>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.capsLockWarning }}\r\n </span>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\r\n color=\"warn\"\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.icon && widgetInstance.iconPosition === 'PRE') {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <div class=\"textFieldButtons\">\r\n @if (widgetInstance.textFieldProperties?.clearable) {\r\n <ui-action-button\r\n class=\"clearButton\"\r\n [addBasicClasses]=\"false\"\r\n [descriptor]=\"clearButtonDescriptor\"\r\n (actionClick)=\"clearField(widgetInstance.key)\"\r\n />\r\n }\r\n </div>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.textFieldButton.icon\"\r\n [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n >\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\r\n }\r\n </button>\r\n }\r\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [type]=\"'number'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [min]=\"widgetInstance.minValues ?? null\"\r\n [max]=\"widgetInstance.maxValues ?? null\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (widgetInstance.icon) {\r\n <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\r\n }\r\n </button>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip-row [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\r\n {{ value }}\r\n <button matChipRemove>\r\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n <input\r\n #chipInput\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [matAutocomplete]=\"chipAuto\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n <mat-autocomplete\r\n #chipAuto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event, widgetInstance)\"\r\n >\r\n @for (item of widgetInstance.valueList; track item) {\r\n <mat-option [disabled]=\"widgetInstance.isDisabled\" [value]=\"item.value\">\r\n {{ item.label }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n </mat-chip-grid>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid #chipListLookup aria-label=\"{{ widgetInstance.label }}\">\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\r\n {{ getChipsValue(value) }}\r\n <button matChipRemove>\r\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <input\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipListLookup\"\r\n [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"false\"\r\n [readonly]=\"true\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n </mat-chip-grid>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <textarea\r\n class=\"sb4-textarea\"\r\n #sb4Textarea\r\n cols=\"30\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"widgetInstance.textBoxProperties?.minRows ?? 1\"\r\n [cdkAutosizeMaxRows]=\"widgetInstance.textBoxProperties?.maxRows ?? undefined\"\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n ></textarea>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n <div class=\"checkbox-item-container\">\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n (change)=\"onValueChange?.next(widgetInstance)\"\r\n (change)=\"onBlur()?.next(widgetInstance)\"\r\n >\r\n {{ widgetInstance.label }}\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n @for (checkbox of widgetInstance.valueList; track checkbox; let i = $index) {\r\n <div class=\"checkbox-item-container\">\r\n @if (checkbox.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"checkbox-item-image\"\r\n [src]=\"checkbox.imageUrl\"\r\n />\r\n }\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\r\n [value]=\"checkbox.value\"\r\n (change)=\"onValueChange?.next(checkbox)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n >\r\n {{ checkbox.label }}\r\n </mat-checkbox>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-radio-group\r\n class=\"input radio-section widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n appearance=\"outline\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <div [ngClass]=\"getDirection()\">\r\n @for (radio of widgetInstance.valueList; track radio) {\r\n <div class=\"radio-item-container\">\r\n @if (radio.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"radio-item-image\"\r\n [src]=\"radio.imageUrl\"\r\n />\r\n }\r\n <mat-radio-button\r\n class=\"selecatbleObject\"\r\n value=\"{{ radio.value }}\"\r\n [ngClass]=\"getDirection()\"\r\n (change)=\"onValueChange?.next(radio.value)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n >\r\n {{ radio.label }}\r\n </mat-radio-button>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n <div class=\"radio-icon\">\r\n @if (widgetInstance.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n >\r\n </smart-icon>\r\n }\r\n </div>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\r\n <div class=\"datePicker widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\r\n <input\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\r\n [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div class=\"{{ labelColor() }} smart-form-widget-label\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <lib-smart-month-picker\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n [control]=\"form().controls[widgetInstance.key]\"\r\n (valueChange)=\"handleYearMonthPicked($event)\"\r\n ></lib-smart-month-picker>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div class=\"dateTimePickerContainer\">\r\n <mat-form-field\r\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\r\n <input\r\n #dateInput\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\r\n [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\r\n [id]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (blur)=\"onDatePickerBlur($event)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n @if (hasCreated) {\r\n <mat-form-field\r\n class=\"input widgetContent time\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n appearance=\"outline\"\r\n >\r\n <input\r\n #timeInput\r\n [formControlName]=\"widgetInstance.key + '-time'\"\r\n [attr.data-testid]=\"widgetInstance.key + '-time'\"\r\n [id]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n (blur)=\"onTimePickerBlur($event)\"\r\n matInput\r\n />\r\n </mat-form-field>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{ selectionPlaceholder }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\r\n @for (innerOption of option.valueList; track innerOption) {\r\n <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}\r\n </mat-option>\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\r\n @if (option.icon) {\r\n <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.selectProperties?.clearable) {\r\n <span matSuffix class=\"textFieldButtons\" (click)=\"$event.stopPropagation()\">\r\n <ui-action-button\r\n class=\"clearButton\"\r\n [addBasicClasses]=\"false\"\r\n [descriptor]=\"clearButtonDescriptor\"\r\n (actionClick)=\"clearSelect(widgetInstance.key)\"\r\n />\r\n </span>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n multiple\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{ selectionPlaceholder }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\r\n @for (innerOption of option.valueList; track innerOption) {\r\n <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}</mat-option\r\n >\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\r\n @if (option.icon) {\r\n <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\r\n <div class=\"label widgetContainer\" [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\">\r\n <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance.widgetDescription) {\r\n <p>{{ widgetInstance.widgetDescription }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TIME) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <mat-slide-toggle\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (change)=\"onValueChange?.next($event)\"\r\n [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\r\n ><span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"smartIndicator widgetContent\">\r\n <div\r\n class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n >\r\n @for (item of indicatorItems; track item; let i = $index) {\r\n <div class=\"indicatorItem\" [ngClass]=\"getIndicatorItemClass(i)\"></div>\r\n }\r\n </div>\r\n <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n {{ getIndicatorStatusLabel() }}\r\n </p>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"widgetItemContainer\">\r\n <smart-voice-recorder\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-multi-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n (fileEvent)=\"executeUiAction($event.uiAction)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\r\n <div class=\"widgetContainer imageContainer\">\r\n @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance.imageProperties?.image) {\r\n <smart-icon\r\n [imageResource]=\"$safeNavigationMigration(widgetInstance.imageProperties?.image)\"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n } @else if (widgetInstance.value) {\r\n <smart-icon\r\n [(ngModel)]=\"widgetInstance.value\"\r\n [imageResource]=\"widgetInstance.value\"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIV) {\r\n <div\r\n class=\"smartDiv\"\r\n [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\r\n [ngClass]=\"getNgClass()\"\r\n [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\r\n [ngStyle]=\"getStyle()\"\r\n (click)=\"onDivClick()\"\r\n ></div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.HTML) {\r\n <smart-html-widget\r\n [widgetInstance]=\"widgetInstance\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-html-widget>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SVG) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\r\n <div class=\"widgetContainer\">\r\n <hr\r\n class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <button\r\n mat-button\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n [color]=\"$safeNavigationMigration(widgetInstance.uiActionDescriptor?.color)\"\r\n (click)=\"onButtonClicked(widgetInstance)\"\r\n >\r\n @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\r\n @if (widgetInstance.uiActionDescriptor?.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n } @else {\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.uiActionDescriptor?.title }}\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"labelContainer {{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"widgetContent\">\r\n <ng-template #customComponent></ng-template>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <quill-editor\r\n #quillEditor\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [modules]=\"\r\n widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\r\n \"\r\n [placeholder]=\"widgetInstance.placeholder ?? ''\"\r\n [readOnly]=\"widgetInstance.isReadonly ?? false\"\r\n [maxLength]=\"widgetInstance.maxLength ?? 0\"\r\n (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\r\n ></quill-editor>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\r\n <mat-hint matSuffix align=\"end\" class=\"rich-text-editor-leeway-counter\">{{\r\n getRichTextEditorLengthLeeway()\r\n }}</mat-hint>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <lib-sortable-widget\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n ></lib-sortable-widget>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <table class=\"matrixTable widgetContent\">\r\n <tr>\r\n <th></th>\r\n @for (option of widgetInstance.value.columns; track option) {\r\n <th class=\"optionLabel\">\r\n {{ option.displayValue }}\r\n </th>\r\n }\r\n </tr>\r\n @for (question of widgetInstance.value.rows; track question; let i = $index) {\r\n <tr>\r\n <th class=\"questionLabel\">\r\n <label>{{ question.displayValue }}</label>\r\n </th>\r\n @for (option of widgetInstance.value.columns; track option; let j = $index) {\r\n <td class=\"selectTd\">\r\n @if (!widgetInstance.isMultiple) {\r\n <mat-radio-group\r\n [formControlName]=\"widgetInstance.key + '.' + question.code\"\r\n [name]=\"'q' + i\"\r\n >\r\n <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n @if (widgetInstance.isMultiple) {\r\n <div>\r\n <mat-checkbox\r\n [formControlName]=\"\r\n widgetInstance.key + '.data.' + question.code + '.' + option.code\r\n \"\r\n [value]=\"widgetInstance.value['data'][question.code][option.code]\"\r\n [checked]=\"true\"\r\n ></mat-checkbox>\r\n </div>\r\n }\r\n </td>\r\n }\r\n <br />\r\n @if (widgetInstance.button) {\r\n <button mat-icon-button (click)=\"removeMatrixRow(question)\">\r\n <smart-icon icon=\"close\"></smart-icon>\r\n </button>\r\n }\r\n </tr>\r\n }\r\n </table>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <youtube-player\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n videoId=\"{{ widgetInstance.videoId }}\"\r\n [width]=\"widgetInstance.width\"\r\n [height]=\"widgetInstance.height\"\r\n [startSeconds]=\"widgetInstance.startSeconds\"\r\n [endSeconds]=\"widgetInstance.endSeconds\"\r\n ></youtube-player>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"] }]
|
|
12260
|
+
], template: "<div class=\"container material\" [formGroup]=\"form()\">\n @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n <div\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\n [class.sb4-widget-required]=\"isRequired()\"\n class=\"container\"\n >\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\n @for (widget of visibleChildren; track widget) {\n <smartformwidget\n [form]=\"form()\"\n [widgetInstance]=\"widget\"\n class=\"container-item\"\n [ngClass]=\"widget.cssClass ?? ''\"\n [onBlur]=\"onBlur()\"\n [onValueChange]=\"onValueChange\"\n [sophisticatedValueChange]=\"sophisticatedValueChange()\"\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\n class=\"{{ widget.key }}\"\n [labelColor]=\"labelColor()\"\n ></smartformwidget>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\n <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n @if (!widgetInstance.selection) {\n <input\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [attr.inputmode]=\"\n widgetInstance.inputMode ? widgetInstance.inputMode.toLocaleLowerCase() : 'text'\n \"\n [type]=\"'string'\"\n [value]=\"widgetInstance.value\"\n [readonly]=\"widgetInstance.isReadonly\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n matInput\n (change)=\"handleBlurEvent($event)\"\n (input)=\"onValueChange?.next($event)\"\n type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\n (keydown.enter)=\"onKeydown()\"\n maxlength=\"{{ widgetInstance.maxLength }}\"\n [mask]=\"widgetInstance.mask\"\n />\n }\n <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\n @if (widgetInstance.selection) {\n <input\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [type]=\"'string'\"\n [value]=\"widgetInstance.value\"\n [readonly]=\"widgetInstance.isReadonly\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n matInput\n (change)=\"handleBlurEvent($event)\"\n (input)=\"onValueChange?.next($event)\"\n (click)=\"onValueChange?.next($event)\"\n type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\n [matAutocomplete]=\"textFieldAuto\"\n (keydown.enter)=\"onKeydown()\"\n />\n }\n @if (widgetInstance.isPassword) {\n <button mat-icon-button matSuffix (click)=\"togglePasswordVisibility($event)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{\n hidePassword ? 'visibility_off' : 'visibility'\n }}</mat-icon>\n </button>\n }\n <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\n @for (option of filteredOptions | async; track option) {\n <mat-option [value]=\"option.label\">\n <span [innerHTML]=\"option.label | highlight: toHighlight\"></span>\n </mat-option>\n }\n </mat-autocomplete>\n @if (capsOn && widgetInstance.isPassword) {\n <span class=\"mat-error\">\n {{ widgetInstance.capsLockWarning }}\n </span>\n }\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n <span matPrefix>\n @if (capsOn && widgetInstance.isPassword) {\n <smart-icon\n [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\n color=\"warn\"\n ></smart-icon>\n }\n @if (widgetInstance.icon && widgetInstance.iconPosition === 'PRE') {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n ></smart-icon>\n }\n {{ widgetInstance.prefix }}\n </span>\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (\n widgetInstance.icon &&\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n ) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n matSuffix\n ></smart-icon>\n }\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n <div class=\"textFieldButtons\">\n @if (widgetInstance.textFieldProperties?.clearable) {\n <ui-action-button\n class=\"clearButton\"\n [addBasicClasses]=\"false\"\n [descriptor]=\"clearButtonDescriptor\"\n (actionClick)=\"clearField(widgetInstance.key)\"\n />\n }\n </div>\n @if (isToolbarPresent()) {\n <smart-ui-action-toolbar\n class=\"textFieldToolbar\"\n matSuffix\n [id]=\"widgetInstance.toolbarId\"\n ></smart-ui-action-toolbar>\n }\n @if (widgetInstance.textFieldButton) {\n <button\n matSuffix\n mat-button\n color=\"{{ widgetInstance.textFieldButton.color }}\"\n (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n >\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().PRE &&\n widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n [color]=\"widgetInstance.textFieldButton.iconColor\"\n >\n </smart-icon>\n }\n {{ widgetInstance.textFieldButton.label }}\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().POST &&\n widgetInstance.textFieldButton.icon\n ) {\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n }\n </button>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint matSuffix align=\"end\">{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint>\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <input\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [value]=\"widgetInstance.value\"\n [readonly]=\"widgetInstance.isReadonly\"\n [type]=\"'number'\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [min]=\"widgetInstance.minValues ?? null\"\n [max]=\"widgetInstance.maxValues ?? null\"\n matInput\n (change)=\"handleBlurEvent($event)\"\n (input)=\"onValueChange?.next($event)\"\n />\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n <span matPrefix>\n {{ widgetInstance.prefix }}\n </span>\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (widgetInstance.icon) {\n <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\n }\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n @if (widgetInstance.textFieldButton) {\n <button\n matSuffix\n mat-button\n color=\"{{ widgetInstance.textFieldButton.color }}\"\n (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n >\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().PRE &&\n widgetInstance.textFieldButton.icon\n ) {\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n }\n {{ widgetInstance.textFieldButton.label }}\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().POST &&\n widgetInstance.textFieldButton.icon\n ) {\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n }\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\n @for (value of widgetInstance.value; track value) {\n <mat-chip-row [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n {{ value }}\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n #chipInput\n [attr.data-testid]=\"widgetInstance.key\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n [readonly]=\"widgetInstance.isReadonly\"\n [matAutocomplete]=\"chipAuto\"\n (matChipInputTokenEnd)=\"add($event)\"\n (change)=\"handleBlurEvent($event)\"\n (input)=\"onValueChange?.next($event)\"\n [disabled]=\"widgetInstance.isDisabled\"\n />\n <mat-autocomplete\n #chipAuto=\"matAutocomplete\"\n (optionSelected)=\"selected($event, widgetInstance)\"\n >\n @for (item of widgetInstance.valueList; track item) {\n <mat-option [disabled]=\"widgetInstance.isDisabled\" [value]=\"item.value\">\n {{ item.label }}\n </mat-option>\n }\n </mat-autocomplete>\n </mat-chip-grid>\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-chip-grid #chipListLookup aria-label=\"{{ widgetInstance.label }}\">\n @for (value of widgetInstance.value; track value) {\n <mat-chip [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n {{ getChipsValue(value) }}\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip>\n }\n <input\n [attr.data-testid]=\"widgetInstance.key\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [matChipInputFor]=\"chipListLookup\"\n [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\n [matChipInputAddOnBlur]=\"false\"\n [readonly]=\"true\"\n [disabled]=\"widgetInstance.isDisabled\"\n />\n </mat-chip-grid>\n @if (isToolbarPresent()) {\n <smart-ui-action-toolbar\n matSuffix\n [id]=\"widgetInstance.toolbarId\"\n ></smart-ui-action-toolbar>\n }\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <textarea\n class=\"sb4-textarea\"\n #sb4Textarea\n cols=\"30\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"widgetInstance.textBoxProperties?.minRows ?? 1\"\n [cdkAutosizeMaxRows]=\"widgetInstance.textBoxProperties?.maxRows ?? undefined\"\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [type]=\"'string'\"\n [value]=\"widgetInstance.value\"\n [readonly]=\"widgetInstance.isReadonly\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n matInput\n (change)=\"handleBlurEvent($event)\"\n maxlength=\"{{ widgetInstance.maxLength }}\"\n ></textarea>\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint matSuffix align=\"end\">{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint>\n }\n </mat-form-field>\n @if (\n !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <div\n class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"radioLabel\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n <div class=\"checkbox-item-container\">\n <mat-checkbox\n class=\"selecatbleObject\"\n formControlName=\"{{ widgetInstance.key }}\"\n (change)=\"onValueChange?.next(widgetInstance)\"\n (change)=\"onBlur()?.next(widgetInstance)\"\n >\n {{ widgetInstance.label }}\n </mat-checkbox>\n </div>\n <div class=\"radio-error\">\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n ></smart-icon>\n }\n </div>\n </section>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <div\n class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"radioLabel\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n @for (checkbox of widgetInstance.valueList; track checkbox; let i = $index) {\n <div class=\"checkbox-item-container\">\n @if (checkbox.imageUrl) {\n <img\n title=\"{{ widgetInstance.key }}\"\n class=\"checkbox-item-image\"\n [src]=\"checkbox.imageUrl\"\n />\n }\n <mat-checkbox\n class=\"selecatbleObject\"\n formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\n [value]=\"checkbox.value\"\n (change)=\"onValueChange?.next(checkbox)\"\n [disabled]=\"widgetInstance.isDisabled!\"\n >\n {{ checkbox.label }}\n </mat-checkbox>\n </div>\n }\n <div class=\"radio-error\">\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n ></smart-icon>\n }\n </div>\n </section>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-radio-group\n class=\"input radio-section widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n [attr.data-testid]=\"widgetInstance.key\"\n aria-label=\"{{ widgetInstance.label }}\"\n appearance=\"outline\"\n formControlName=\"{{ widgetInstance.key }}\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"radioLabel\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <div [ngClass]=\"getDirection()\">\n @for (radio of widgetInstance.valueList; track radio) {\n <div class=\"radio-item-container\">\n @if (radio.imageUrl) {\n <img\n title=\"{{ widgetInstance.key }}\"\n class=\"radio-item-image\"\n [src]=\"radio.imageUrl\"\n />\n }\n <mat-radio-button\n class=\"selecatbleObject\"\n value=\"{{ radio.value }}\"\n [ngClass]=\"getDirection()\"\n (change)=\"onValueChange?.next(radio.value)\"\n [disabled]=\"widgetInstance.isDisabled\"\n >\n {{ radio.label }}\n </mat-radio-button>\n </div>\n }\n <div class=\"radio-error\">\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n ></smart-icon>\n }\n </div>\n <div class=\"radio-icon\">\n @if (widgetInstance.icon) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n >\n </smart-icon>\n }\n </div>\n </div>\n </mat-radio-group>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\n <div class=\"datePicker widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n <input\n matInput\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [value]=\"widgetInstance.value\"\n [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [matDatepicker]=\"picker\"\n (change)=\"handleBlurEvent(widgetInstance)\"\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n />\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (\n widgetInstance.icon &&\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n ) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n matSuffix\n ></smart-icon>\n }\n <mat-hint>\n {{ widgetInstance.dateFormatHint }}\n </mat-hint>\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <div class=\"{{ labelColor() }} smart-form-widget-label\">\n {{ getWidgetLabel(widgetInstance) }}\n </div>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <lib-smart-month-picker\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n [control]=\"form().controls[widgetInstance.key]\"\n (valueChange)=\"handleYearMonthPicked($event)\"\n ></lib-smart-month-picker>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <div\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </div>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <div class=\"dateTimePickerContainer\">\n <mat-form-field\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n <input\n #dateInput\n matInput\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n [id]=\"widgetInstance.key\"\n [value]=\"widgetInstance.value\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n [matDatepicker]=\"picker\"\n (blur)=\"onDatePickerBlur($event)\"\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n />\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (\n widgetInstance.icon &&\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n ) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n matSuffix\n ></smart-icon>\n }\n <mat-hint>\n {{ widgetInstance.dateFormatHint }}\n </mat-hint>\n </mat-form-field>\n @if (hasCreated) {\n <mat-form-field\n class=\"input widgetContent time\"\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n appearance=\"outline\"\n >\n <input\n #timeInput\n [formControlName]=\"widgetInstance.key + '-time'\"\n [attr.data-testid]=\"widgetInstance.key + '-time'\"\n [id]=\"widgetInstance.key\"\n [type]=\"'time'\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n (blur)=\"onTimePickerBlur($event)\"\n matInput\n />\n </mat-form-field>\n }\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SELECT) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <div\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </div>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-select\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n (selectionChange)=\"onValueChange?.next($event.value)\"\n (closed)=\"handleBlurEvent(widgetInstance)\"\n [disabled]=\"widgetInstance.isDisabled!\"\n [compareWith]=\"\n widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n \"\n placeholder=\"{{ selectionPlaceholder }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n @if (innerOption.icon) {\n <smart-icon\n [icon]=\"innerOption.icon\"\n [color]=\"innerOption.iconColor\"\n ></smart-icon>\n }\n {{ innerOption.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (option.type === getType().ITEM) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n @if (option.icon) {\n <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n }\n {{ option.label }}</mat-option\n >\n }\n </div>\n }\n </mat-select>\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n <span matSuffix>\n {{ widgetInstance.suffix }}\n </span>\n @if (\n widgetInstance.icon &&\n (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n ) {\n <smart-icon\n [icon]=\"widgetInstance.icon\"\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\n matSuffix\n ></smart-icon>\n }\n @if (widgetInstance.selectProperties?.clearable) {\n <span matSuffix class=\"textFieldButtons\" (click)=\"$event.stopPropagation()\">\n <ui-action-button\n class=\"clearButton\"\n [addBasicClasses]=\"false\"\n [descriptor]=\"clearButtonDescriptor\"\n (actionClick)=\"clearSelect(widgetInstance.key)\"\n />\n </span>\n }\n @if (isToolbarPresent()) {\n <smart-ui-action-toolbar\n class=\"textFieldToolbar\"\n matSuffix\n [id]=\"widgetInstance.toolbarId\"\n ></smart-ui-action-toolbar>\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <mat-select\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n multiple\n (selectionChange)=\"onValueChange?.next($event.value)\"\n (closed)=\"handleBlurEvent(widgetInstance)\"\n [disabled]=\"widgetInstance.isDisabled!\"\n [compareWith]=\"\n widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n \"\n placeholder=\"{{ selectionPlaceholder }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n @if (innerOption.icon) {\n <smart-icon\n [icon]=\"innerOption.icon\"\n [color]=\"innerOption.iconColor\"\n ></smart-icon>\n }\n {{ innerOption.label }}</mat-option\n >\n }\n </mat-optgroup>\n }\n @if (option.type === getType().ITEM) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n @if (option.icon) {\n <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n }\n {{ option.label }}</mat-option\n >\n }\n </div>\n }\n </mat-select>\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n @if (isToolbarPresent()) {\n <smart-ui-action-toolbar\n class=\"textFieldToolbar\"\n matSuffix\n [id]=\"widgetInstance.toolbarId\"\n ></smart-ui-action-toolbar>\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n <div class=\"label widgetContainer\" [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\">\n <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance.widgetDescription) {\n <p>{{ widgetInstance.widgetDescription }}</p>\n }\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TIME) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <mat-form-field\n class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n appearance=\"outline\"\n >\n @if (!widgetInstance.showLabel) {\n <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n {{ getWidgetLabel(widgetInstance) }}\n </mat-label>\n }\n <input\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [type]=\"'time'\"\n placeholder=\"{{ widgetInstance.placeholder }}\"\n matInput\n (change)=\"handleBlurEvent(widgetInstance)\"\n />\n <span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n matSuffix\n ></smart-icon>\n }\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{\n widgetInstance.cssLabelClass ?? ''\n }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n <div\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n >\n <mat-slide-toggle\n formControlName=\"{{ widgetInstance.key }}\"\n [attr.data-testid]=\"widgetInstance.key\"\n (change)=\"onValueChange?.next($event)\"\n [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\n >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\n ><span class=\"mat-error\">\n {{ widgetInstance.error }}\n </span>\n @if (widgetInstance.error && widgetInstance.errorIcon) {\n <smart-icon\n [icon]=\"widgetInstance.errorIcon\"\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n ></smart-icon>\n }\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <h4\n class=\"{{ labelColor() }} labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n <div class=\"smartIndicator widgetContent\">\n <div\n class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n >\n @for (item of indicatorItems; track item; let i = $index) {\n <div class=\"indicatorItem\" [ngClass]=\"getIndicatorItemClass(i)\"></div>\n }\n </div>\n <p [ngClass]=\"getIndicatorStatusLabelColor()\">\n {{ getIndicatorStatusLabel() }}\n </p>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\n <div class=\"widgetContainer\">\n <div class=\"widgetItemContainer\">\n <smart-voice-recorder\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\n <div class=\"widgetContainer\">\n <smart-file-editor\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\n <div class=\"widgetContainer\">\n <smart-multi-file-editor\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (uploadFilesEvent)=\"upload($event)\"\n (fileEvent)=\"executeUiAction($event.uiAction)\"\n />\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\n <div class=\"widgetContainer imageContainer\">\n @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\n <h4\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance.imageProperties?.image) {\n <smart-icon\n [imageResource]=\"$safeNavigationMigration(widgetInstance.imageProperties?.image)\"\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n alt=\"Image\"\n title=\"{{ widgetInstance.key }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n ></smart-icon>\n } @else if (widgetInstance.value) {\n <smart-icon\n [(ngModel)]=\"widgetInstance.value\"\n [imageResource]=\"widgetInstance.value\"\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n alt=\"Image\"\n title=\"{{ widgetInstance.key }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n ></smart-icon>\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DIV) {\n <div\n class=\"smartDiv\"\n [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\n [ngClass]=\"getNgClass()\"\n [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\n [ngStyle]=\"getStyle()\"\n (click)=\"onDivClick()\"\n ></div>\n }\n @if (widgetInstance.type === smartFormWidgetType.HTML) {\n <smart-html-widget\n [widgetInstance]=\"widgetInstance\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n ></smart-html-widget>\n }\n @if (widgetInstance.type === smartFormWidgetType.SVG) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <h4\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n <div\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n ></div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\n <div class=\"widgetContainer\">\n <hr\n class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n />\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <h4\n class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n <div\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n >\n <button\n mat-button\n [attr.data-testid]=\"widgetInstance.key\"\n [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\n [color]=\"$safeNavigationMigration(widgetInstance.uiActionDescriptor?.color)\"\n (click)=\"onButtonClicked(widgetInstance)\"\n >\n @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\n @if (widgetInstance.uiActionDescriptor?.icon) {\n <smart-icon\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n [color]=\"\n widgetInstance.uiActionDescriptor?.iconColor ??\n widgetInstance.uiActionDescriptor?.color\n \"\n ></smart-icon>\n }\n } @else {\n @if (\n widgetInstance.uiActionDescriptor?.icon &&\n widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\n ) {\n <smart-icon\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n [color]=\"\n widgetInstance.uiActionDescriptor?.iconColor ??\n widgetInstance.uiActionDescriptor?.color\n \"\n ></smart-icon>\n }\n {{ widgetInstance.uiActionDescriptor?.title }}\n @if (\n widgetInstance.uiActionDescriptor?.icon &&\n widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\n ) {\n <smart-icon\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n [color]=\"\n widgetInstance.uiActionDescriptor?.iconColor ??\n widgetInstance.uiActionDescriptor?.color\n \"\n ></smart-icon>\n }\n }\n </button>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\n <div class=\"widgetContainer\">\n @if (widgetInstance.showLabel) {\n <h4 class=\"labelContainer {{ labelColor() }}\">\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n <div class=\"widgetContent\">\n <ng-template #customComponent></ng-template>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\n <div class=\"widgetContainer\">\n <div class=\"labelContainer\">\n @if (widgetInstance.showLabel) {\n <h4 class=\"{{ labelColor() }}\">\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n <div class=\"widgetContent\">\n <quill-editor\n #quillEditor\n [formControlName]=\"widgetInstance.key\"\n [id]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [modules]=\"\n widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\n \"\n [placeholder]=\"widgetInstance.placeholder ?? ''\"\n [readOnly]=\"widgetInstance.isReadonly ?? false\"\n [maxLength]=\"widgetInstance.maxLength ?? 0\"\n (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\n ></quill-editor>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint matSuffix align=\"end\" class=\"rich-text-editor-leeway-counter\">{{\n getRichTextEditorLengthLeeway()\n }}</mat-hint>\n }\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\n <div class=\"widgetContainer\">\n <div class=\"labelContainer\">\n @if (widgetInstance.showLabel) {\n <h4 class=\"{{ labelColor() }}\">\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n <div class=\"widgetContent\">\n <lib-sortable-widget\n [formControlName]=\"widgetInstance.key\"\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n ></lib-sortable-widget>\n </div>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\n <div class=\"widgetContainer\">\n <div class=\"labelContainer\">\n @if (widgetInstance.showLabel) {\n <h4 class=\"{{ labelColor() }}\">\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n <table class=\"matrixTable widgetContent\">\n <tr>\n <th></th>\n @for (option of widgetInstance.value.columns; track option) {\n <th class=\"optionLabel\">\n {{ option.displayValue }}\n </th>\n }\n </tr>\n @for (question of widgetInstance.value.rows; track question; let i = $index) {\n <tr>\n <th class=\"questionLabel\">\n <label>{{ question.displayValue }}</label>\n </th>\n @for (option of widgetInstance.value.columns; track option; let j = $index) {\n <td class=\"selectTd\">\n @if (!widgetInstance.isMultiple) {\n <mat-radio-group\n [formControlName]=\"widgetInstance.key + '.' + question.code\"\n [name]=\"'q' + i\"\n >\n <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\n </mat-radio-group>\n }\n @if (widgetInstance.isMultiple) {\n <div>\n <mat-checkbox\n [formControlName]=\"\n widgetInstance.key + '.data.' + question.code + '.' + option.code\n \"\n [value]=\"widgetInstance.value['data'][question.code][option.code]\"\n [checked]=\"true\"\n ></mat-checkbox>\n </div>\n }\n </td>\n }\n <br />\n @if (widgetInstance.button) {\n <button mat-icon-button (click)=\"removeMatrixRow(question)\">\n <smart-icon icon=\"close\"></smart-icon>\n </button>\n }\n </tr>\n }\n </table>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\n <div class=\"widgetContainer\">\n <div class=\"labelContainer\">\n @if (widgetInstance.showLabel) {\n <h4\n class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n }\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n <youtube-player\n [ngClass]=\"getNgClass()\"\n [ngStyle]=\"getStyle()\"\n videoId=\"{{ widgetInstance.videoId }}\"\n [width]=\"widgetInstance.width\"\n [height]=\"widgetInstance.height\"\n [startSeconds]=\"widgetInstance.startSeconds\"\n [endSeconds]=\"widgetInstance.endSeconds\"\n ></youtube-player>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"] }]
|
|
12221
12261
|
}], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], widgetInstance: [{
|
|
12222
12262
|
type: Input
|
|
12223
12263
|
}], onBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBlur", required: false }] }], onValueChange: [{
|
|
@@ -12320,7 +12360,11 @@ class SmartformComponent {
|
|
|
12320
12360
|
return;
|
|
12321
12361
|
}
|
|
12322
12362
|
const componentModel = this.smartForm.componentModel;
|
|
12323
|
-
|
|
12363
|
+
// A host may wrap the client's data in a component model of its own; the data is what counts.
|
|
12364
|
+
this.followsClient =
|
|
12365
|
+
!componentModel ||
|
|
12366
|
+
componentModel === client.model ||
|
|
12367
|
+
(!!componentModel.data && componentModel.data === client.data);
|
|
12324
12368
|
if (!this.followsClient) {
|
|
12325
12369
|
return;
|
|
12326
12370
|
}
|
|
@@ -12442,11 +12486,11 @@ class SmartformComponent {
|
|
|
12442
12486
|
return this.service.getModel(this.form);
|
|
12443
12487
|
}
|
|
12444
12488
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartformComponent, isStandalone: true, selector: "smartform", inputs: { smartForm: "smartForm" }, providers: [SmartFormService], usesOnChanges: true, ngImport: i0, template: "@if (smartForm) {\
|
|
12489
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartformComponent, isStandalone: true, selector: "smartform", inputs: { smartForm: "smartForm" }, providers: [SmartFormService], usesOnChanges: true, ngImport: i0, template: "@if (smartForm) {\n <form (keydown)=\"keyDownFunction($event)\" [formGroup]=\"form\" class=\"flex form\">\n @if (smartForm.name) {\n <h2>\n {{ smartForm.name }}\n </h2>\n }\n <div [ngClass]=\"smartForm.direction === direction.ROW ? 'row' : 'col'\">\n @for (widget of smartForm.widgets; track widget) {\n <div class=\"item\">\n @if (widget.isVisible === undefined ? true : widget.isVisible) {\n <smartformwidget\n [widgetInstance]=\"widget\"\n [form]=\"form\"\n class=\"grid-item\"\n [onBlur]=\"onBlurSubject\"\n [onValueChange]=\"onValueChangeSubject\"\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange\"\n [sophisticatedValueChange]=\"sophisticatedValueChange\"\n class=\"{{ widget.key }}\"\n [labelColor]=\"smartForm.labelTheme\"\n (valueCleared)=\"submitForm(true)\"\n ></smartformwidget>\n }\n </div>\n }\n </div>\n </form>\n}\n", styles: [":host{display:flex}form{display:flex;flex:1}.col{flex:1;display:flex;flex-direction:column;gap:.25em}.row{flex:1;display:flex;flex-wrap:wrap;gap:.25em}.grid-item{text-align:left}.item{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }] }); }
|
|
12446
12490
|
}
|
|
12447
12491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformComponent, decorators: [{
|
|
12448
12492
|
type: Component,
|
|
12449
|
-
args: [{ selector: 'smartform', providers: [SmartFormService], imports: [FormsModule, ReactiveFormsModule, NgClass, SmartformwidgetComponent], template: "@if (smartForm) {\
|
|
12493
|
+
args: [{ selector: 'smartform', providers: [SmartFormService], imports: [FormsModule, ReactiveFormsModule, NgClass, SmartformwidgetComponent], template: "@if (smartForm) {\n <form (keydown)=\"keyDownFunction($event)\" [formGroup]=\"form\" class=\"flex form\">\n @if (smartForm.name) {\n <h2>\n {{ smartForm.name }}\n </h2>\n }\n <div [ngClass]=\"smartForm.direction === direction.ROW ? 'row' : 'col'\">\n @for (widget of smartForm.widgets; track widget) {\n <div class=\"item\">\n @if (widget.isVisible === undefined ? true : widget.isVisible) {\n <smartformwidget\n [widgetInstance]=\"widget\"\n [form]=\"form\"\n class=\"grid-item\"\n [onBlur]=\"onBlurSubject\"\n [onValueChange]=\"onValueChangeSubject\"\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange\"\n [sophisticatedValueChange]=\"sophisticatedValueChange\"\n class=\"{{ widget.key }}\"\n [labelColor]=\"smartForm.labelTheme\"\n (valueCleared)=\"submitForm(true)\"\n ></smartformwidget>\n }\n </div>\n }\n </div>\n </form>\n}\n", styles: [":host{display:flex}form{display:flex;flex:1}.col{flex:1;display:flex;flex-direction:column;gap:.25em}.row{flex:1;display:flex;flex-wrap:wrap;gap:.25em}.grid-item{text-align:left}.item{flex:1}\n"] }]
|
|
12450
12494
|
}], ctorParameters: () => [], propDecorators: { smartForm: [{
|
|
12451
12495
|
type: Input
|
|
12452
12496
|
}] } });
|
|
@@ -12494,11 +12538,11 @@ class UiActionDialogButtonComponent {
|
|
|
12494
12538
|
buttonType === UiActionButtonType.FAB);
|
|
12495
12539
|
}
|
|
12496
12540
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionDialogButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12497
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionDialogButtonComponent, isStandalone: true, selector: "ui-action-dialog-button", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: false, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\
|
|
12541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionDialogButtonComponent, isStandalone: true, selector: "ui-action-dialog-button", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: false, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n mat-button\n [smartTooltip]=\"descriptor.tooltip\"\n [ngClass]=\"getButtonClass()\"\n color=\"accent\"\n [color]=\"descriptor.color\"\n class=\"{{ descriptor.cssClass }}\"\n (click)=\"onButtonClicked()\"\n >\n @if (isOnlyIcon()) {\n @if (descriptor.icon) {\n <smart-icon\n [icon]=\"descriptor.icon\"\n [color]=\"descriptor.iconColor ?? descriptor.color\"\n ></smart-icon>\n }\n } @else {\n @if (descriptor.icon && descriptor.iconPosition === iconPosition().PRE) {\n <smart-icon\n [icon]=\"descriptor.icon\"\n [color]=\"descriptor.iconColor ?? descriptor.color\"\n ></smart-icon>\n }\n {{ descriptor.caption }}\n @if (descriptor.icon && descriptor.iconPosition === iconPosition().POST) {\n <smart-icon\n [icon]=\"descriptor.icon!\"\n [color]=\"descriptor.iconColor ?? descriptor.color\"\n ></smart-icon>\n }\n }\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
|
|
12498
12542
|
}
|
|
12499
12543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionDialogButtonComponent, decorators: [{
|
|
12500
12544
|
type: Component,
|
|
12501
|
-
args: [{ selector: 'ui-action-dialog-button', imports: [MatButton, SmartTooltipDirective, NgClass, SmartIconComponent], template: "<button\
|
|
12545
|
+
args: [{ selector: 'ui-action-dialog-button', imports: [MatButton, SmartTooltipDirective, NgClass, SmartIconComponent], template: "<button\n mat-button\n [smartTooltip]=\"descriptor.tooltip\"\n [ngClass]=\"getButtonClass()\"\n color=\"accent\"\n [color]=\"descriptor.color\"\n class=\"{{ descriptor.cssClass }}\"\n (click)=\"onButtonClicked()\"\n >\n @if (isOnlyIcon()) {\n @if (descriptor.icon) {\n <smart-icon\n [icon]=\"descriptor.icon\"\n [color]=\"descriptor.iconColor ?? descriptor.color\"\n ></smart-icon>\n }\n } @else {\n @if (descriptor.icon && descriptor.iconPosition === iconPosition().PRE) {\n <smart-icon\n [icon]=\"descriptor.icon\"\n [color]=\"descriptor.iconColor ?? descriptor.color\"\n ></smart-icon>\n }\n {{ descriptor.caption }}\n @if (descriptor.icon && descriptor.iconPosition === iconPosition().POST) {\n <smart-icon\n [icon]=\"descriptor.icon!\"\n [color]=\"descriptor.iconColor ?? descriptor.color\"\n ></smart-icon>\n }\n }\n</button>\n" }]
|
|
12502
12546
|
}], ctorParameters: () => [], propDecorators: { descriptor: [{
|
|
12503
12547
|
type: Input
|
|
12504
12548
|
}], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], click: [{ type: i0.Output, args: ["click"] }] } });
|
|
@@ -12601,11 +12645,11 @@ class UiActionInputDialogComponent {
|
|
|
12601
12645
|
return UiActionButtonType;
|
|
12602
12646
|
}
|
|
12603
12647
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionInputDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12604
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: UiActionInputDialogComponent, isStandalone: true, selector: "smart-ui-action-input-dialog", viewQueries: [{ propertyName: "folderFormChild", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\
|
|
12648
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: UiActionInputDialogComponent, isStandalone: true, selector: "smart-ui-action-input-dialog", viewQueries: [{ propertyName: "folderFormChild", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n <div class=\"headerContainer\">\n <h3 class=\"color-accent-700\">\n {{ getTitle() }}\n </h3>\n <button mat-icon-button (click)=\"cancel()\">\n <smart-icon [color]=\"'primary'\" [icon]=\"'close'\"></smart-icon>\n </button>\n </div>\n <p>\n {{ getText() }}\n </p>\n <smartform #form [smartForm]=\"folderForm\"></smartform>\n <div class=\"folderNameDialogButtonsContainer\">\n <ui-action-dialog-button\n [descriptor]=\"getCancelButton()\"\n (click)=\"cancel()\"\n ></ui-action-dialog-button>\n <ui-action-dialog-button\n [descriptor]=\"getActionButton()\"\n [buttonType]=\"UiActionButtonType().RAISED\"\n (click)=\"save()\"\n ></ui-action-dialog-button>\n </div>\n</div>\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: UiActionDialogButtonComponent, selector: "ui-action-dialog-button", inputs: ["descriptor", "buttonType"], outputs: ["click"] }] }); }
|
|
12605
12649
|
}
|
|
12606
12650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionInputDialogComponent, decorators: [{
|
|
12607
12651
|
type: Component,
|
|
12608
|
-
args: [{ selector: 'smart-ui-action-input-dialog', imports: [MatIconButton, SmartIconComponent, SmartformComponent, UiActionDialogButtonComponent], template: "<div class=\"folderNameDialogContainer\">\
|
|
12652
|
+
args: [{ selector: 'smart-ui-action-input-dialog', imports: [MatIconButton, SmartIconComponent, SmartformComponent, UiActionDialogButtonComponent], template: "<div class=\"folderNameDialogContainer\">\n <div class=\"headerContainer\">\n <h3 class=\"color-accent-700\">\n {{ getTitle() }}\n </h3>\n <button mat-icon-button (click)=\"cancel()\">\n <smart-icon [color]=\"'primary'\" [icon]=\"'close'\"></smart-icon>\n </button>\n </div>\n <p>\n {{ getText() }}\n </p>\n <smartform #form [smartForm]=\"folderForm\"></smartform>\n <div class=\"folderNameDialogButtonsContainer\">\n <ui-action-dialog-button\n [descriptor]=\"getCancelButton()\"\n (click)=\"cancel()\"\n ></ui-action-dialog-button>\n <ui-action-dialog-button\n [descriptor]=\"getActionButton()\"\n [buttonType]=\"UiActionButtonType().RAISED\"\n (click)=\"save()\"\n ></ui-action-dialog-button>\n </div>\n</div>\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"] }]
|
|
12609
12653
|
}], ctorParameters: () => [], propDecorators: { folderFormChild: [{
|
|
12610
12654
|
type: ViewChild,
|
|
12611
12655
|
args: ['form']
|
|
@@ -13061,11 +13105,11 @@ class SmartContainerDialog {
|
|
|
13061
13105
|
}
|
|
13062
13106
|
}
|
|
13063
13107
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartContainerDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13064
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartContainerDialog, isStandalone: true, selector: "smart-container-dialog", viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponentHere"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"dialog-container\">\
|
|
13108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartContainerDialog, isStandalone: true, selector: "smart-container-dialog", viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponentHere"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"dialog-container\">\n <div class=\"dialog-header\">\n @if (headerLayout() && pageInjector() && layoutComponent()) {\n <div class=\"dialog-header-layout\">\n <ng-container\n *ngComponentOutlet=\"\n layoutComponent()!;\n inputs: { smartComponentLayout: headerLayout() };\n injector: pageInjector()\n \"\n />\n </div>\n } @else {\n <h2 class=\"dialog-title\">{{ title() }}</h2>\n }\n\n @if (headerModels().length && executor()) {\n <smart-ui-action-toolbar\n class=\"dialog-header-toolbar\"\n [id]=\"TOOLBAR_DIALOG_HEADER\"\n [uiActionModels]=\"headerModels()\"\n [executor]=\"executor()\"\n ></smart-ui-action-toolbar>\n }\n </div>\n\n <mat-dialog-content class=\"dialog-content\">\n <ng-template #renderComponentHere></ng-template>\n </mat-dialog-content>\n\n @if (footerModels().length && executor()) {\n <div class=\"dialog-footer\">\n <smart-ui-action-toolbar\n class=\"dialog-footer-toolbar\"\n [id]=\"TOOLBAR_DIALOG_FOOTER\"\n [uiActionModels]=\"footerModels()\"\n [executor]=\"executor()\"\n ></smart-ui-action-toolbar>\n </div>\n }\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".dialog-header-toolbar ::ng-deep button{min-width:unset}.dialog-header-layout{flex:1}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] }); }
|
|
13065
13109
|
}
|
|
13066
13110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartContainerDialog, decorators: [{
|
|
13067
13111
|
type: Component,
|
|
13068
|
-
args: [{ selector: 'smart-container-dialog', imports: [MatDialogContent, UiActionToolbarComponent, NgComponentOutlet], template: "<div class=\"dialog-container\">\
|
|
13112
|
+
args: [{ selector: 'smart-container-dialog', imports: [MatDialogContent, UiActionToolbarComponent, NgComponentOutlet], template: "<div class=\"dialog-container\">\n <div class=\"dialog-header\">\n @if (headerLayout() && pageInjector() && layoutComponent()) {\n <div class=\"dialog-header-layout\">\n <ng-container\n *ngComponentOutlet=\"\n layoutComponent()!;\n inputs: { smartComponentLayout: headerLayout() };\n injector: pageInjector()\n \"\n />\n </div>\n } @else {\n <h2 class=\"dialog-title\">{{ title() }}</h2>\n }\n\n @if (headerModels().length && executor()) {\n <smart-ui-action-toolbar\n class=\"dialog-header-toolbar\"\n [id]=\"TOOLBAR_DIALOG_HEADER\"\n [uiActionModels]=\"headerModels()\"\n [executor]=\"executor()\"\n ></smart-ui-action-toolbar>\n }\n </div>\n\n <mat-dialog-content class=\"dialog-content\">\n <ng-template #renderComponentHere></ng-template>\n </mat-dialog-content>\n\n @if (footerModels().length && executor()) {\n <div class=\"dialog-footer\">\n <smart-ui-action-toolbar\n class=\"dialog-footer-toolbar\"\n [id]=\"TOOLBAR_DIALOG_FOOTER\"\n [uiActionModels]=\"footerModels()\"\n [executor]=\"executor()\"\n ></smart-ui-action-toolbar>\n </div>\n }\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".dialog-header-toolbar ::ng-deep button{min-width:unset}.dialog-header-layout{flex:1}\n"] }]
|
|
13069
13113
|
}], propDecorators: { vcRef: [{
|
|
13070
13114
|
type: ViewChild,
|
|
13071
13115
|
args: ['renderComponentHere', { read: ViewContainerRef, static: true }]
|
|
@@ -15248,11 +15292,11 @@ class DefaultActionsPopupComponent {
|
|
|
15248
15292
|
}
|
|
15249
15293
|
}
|
|
15250
15294
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DefaultActionsPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DefaultActionsPopupComponent, isStandalone: true, selector: "lib-default-actions-popup", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, colIdx: { classPropertyName: "colIdx", publicName: "colIdx", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["defaultActionsMenuTrigger"], descendants: true, read: MatContextMenuTriggerForDirective }], ngImport: i0, template: "<div #defaultActionsMenuTrigger [matContextMenuTriggerFor]=\"defaultActionsMenu\"></div>\
|
|
15295
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DefaultActionsPopupComponent, isStandalone: true, selector: "lib-default-actions-popup", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, colIdx: { classPropertyName: "colIdx", publicName: "colIdx", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["defaultActionsMenuTrigger"], descendants: true, read: MatContextMenuTriggerForDirective }], ngImport: i0, template: "<div #defaultActionsMenuTrigger [matContextMenuTriggerFor]=\"defaultActionsMenu\"></div>\n<mat-menu #defaultActionsMenu=\"matMenu\">\n @for (button of buttons() | keyvalue; track button) {\n <div>\n @if (button.key.type !== ACTION_SEPERATOR) {\n <button\n (click)=\"defaultActionButtonClicked(button)\"\n mat-menu-item\n [attr.data-testid]=\"button.value.code ?? null\"\n [disabled]=\"button.value.disabled\"\n [smartTooltip]=\"\n button.value.descriptor?.tooltip\n ? $safeNavigationMigration(button.value.descriptor?.tooltip)\n : button.key.translator!(button.value).tooltip\n \"\n >\n <div\n class=\"smart-table-icon-container\"\n [ngClass]=\"button.key.translator!(button.value).iconPosition === 'POST' ? 'reversed' : ''\"\n >@if (button.key.translator!(button.value).icon) {\n <smart-icon\n [icon]=\"button.key.translator!(button.value).icon!\"\n ></smart-icon>\n }\n {{ button.key.translator!(button.value).title }}</div\n >\n </button>\n }\n @if (button.key.type === ACTION_SEPERATOR) {\n <mat-divider></mat-divider>\n }\n </div>\n }\n</mat-menu>\n", styles: [".smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}\n"], dependencies: [{ kind: "directive", type: MatContextMenuTrigger, selector: "[matContextMenuTriggerFor]", inputs: ["matContextMenuTriggerFor", "matContextMenuTriggerData", "matContextMenuTriggerRestoreFocus", "matContextMenuTriggerDisabled"], outputs: ["menuOpened", "menuClosed"], exportAs: ["matContextMenuTrigger"] }, { kind: "directive", type: MatContextMenuTriggerForDirective, selector: "[matContextMenuTriggerFor]", inputs: ["matContextMenuTriggerFor"], exportAs: ["matContextMenuTriggerDirective"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
|
|
15252
15296
|
}
|
|
15253
15297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DefaultActionsPopupComponent, decorators: [{
|
|
15254
15298
|
type: Component,
|
|
15255
|
-
args: [{ selector: 'lib-default-actions-popup', imports: [MatContextMenuTrigger, MatContextMenuTriggerForDirective, MatMenu, MatMenuItem, SmartTooltipDirective, NgClass, SmartIconComponent, MatDivider, KeyValuePipe], template: "<div #defaultActionsMenuTrigger [matContextMenuTriggerFor]=\"defaultActionsMenu\"></div>\
|
|
15299
|
+
args: [{ selector: 'lib-default-actions-popup', imports: [MatContextMenuTrigger, MatContextMenuTriggerForDirective, MatMenu, MatMenuItem, SmartTooltipDirective, NgClass, SmartIconComponent, MatDivider, KeyValuePipe], template: "<div #defaultActionsMenuTrigger [matContextMenuTriggerFor]=\"defaultActionsMenu\"></div>\n<mat-menu #defaultActionsMenu=\"matMenu\">\n @for (button of buttons() | keyvalue; track button) {\n <div>\n @if (button.key.type !== ACTION_SEPERATOR) {\n <button\n (click)=\"defaultActionButtonClicked(button)\"\n mat-menu-item\n [attr.data-testid]=\"button.value.code ?? null\"\n [disabled]=\"button.value.disabled\"\n [smartTooltip]=\"\n button.value.descriptor?.tooltip\n ? $safeNavigationMigration(button.value.descriptor?.tooltip)\n : button.key.translator!(button.value).tooltip\n \"\n >\n <div\n class=\"smart-table-icon-container\"\n [ngClass]=\"button.key.translator!(button.value).iconPosition === 'POST' ? 'reversed' : ''\"\n >@if (button.key.translator!(button.value).icon) {\n <smart-icon\n [icon]=\"button.key.translator!(button.value).icon!\"\n ></smart-icon>\n }\n {{ button.key.translator!(button.value).title }}</div\n >\n </button>\n }\n @if (button.key.type === ACTION_SEPERATOR) {\n <mat-divider></mat-divider>\n }\n </div>\n }\n</mat-menu>\n", styles: [".smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}\n"] }]
|
|
15256
15300
|
}], ctorParameters: () => [], propDecorators: { trigger: [{
|
|
15257
15301
|
type: ViewChild,
|
|
15258
15302
|
args: ['defaultActionsMenuTrigger', { read: MatContextMenuTriggerForDirective }]
|
|
@@ -15263,11 +15307,11 @@ class LoadingComponent {
|
|
|
15263
15307
|
ngOnInit() {
|
|
15264
15308
|
}
|
|
15265
15309
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15266
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: LoadingComponent, isStandalone: true, selector: "lib-loading", ngImport: i0, template: "<div class=\"spinnerContainer\">\
|
|
15310
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: LoadingComponent, isStandalone: true, selector: "lib-loading", ngImport: i0, template: "<div class=\"spinnerContainer\">\n <div class=\"spinner\">\n <mat-spinner color=\"accent\" #mainSpinner></mat-spinner>\n </div>\n</div>\n", styles: [".spinnerContainer{width:100%;display:flex;flex-direction:row;justify-content:center}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
15267
15311
|
}
|
|
15268
15312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
15269
15313
|
type: Component,
|
|
15270
|
-
args: [{ selector: 'lib-loading', imports: [MatProgressSpinner], template: "<div class=\"spinnerContainer\">\
|
|
15314
|
+
args: [{ selector: 'lib-loading', imports: [MatProgressSpinner], template: "<div class=\"spinnerContainer\">\n <div class=\"spinner\">\n <mat-spinner color=\"accent\" #mainSpinner></mat-spinner>\n </div>\n</div>\n", styles: [".spinnerContainer{width:100%;display:flex;flex-direction:row;justify-content:center}\n"] }]
|
|
15271
15315
|
}], ctorParameters: () => [] });
|
|
15272
15316
|
|
|
15273
15317
|
class SmartObjectUtility {
|
|
@@ -16388,20 +16432,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
16388
16432
|
|
|
16389
16433
|
class MaterialTableComponent extends Table {
|
|
16390
16434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaterialTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
16391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MaterialTableComponent, isStandalone: true, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\r\n multiTemplateDataRows [trackBy]=\"trackRow\">\r\n <!-- Column Descriptor -->\r\n @if (smartTable.title) {\r\n <caption class=\"captionTitle\">\r\n {{ smartTable.title }}\r\n </caption>\r\n }\r\n\r\n <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\r\n <ng-container [matColumnDef]=\"rowStateColumn\">\r\n <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\r\n [attr.data-testid]=\"rowStateColumn\"></th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\r\n @if (rowStateIcon(element); as icon) {\r\n <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\r\n role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (header of smartTable.tableHeaders; track header; let i = $index) {\r\n\r\n <ng-container matColumnDef=\"{{ header }}\">\r\n <!-- my_menu is the implicit action column present on all tables: -->\r\n @if ('my_menu' === header) {\r\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\r\n\r\n <!-- ==================== TREE ACTIONS ==================== -->\r\n @if ( isTreeGrid) {\r\n <div class=\"tree-grid-actions\">\r\n @for (control of treeGridControls; track control) {\r\n <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\r\n [descriptor]=\"treeGridControlDescriptor(control)\"\r\n [disabled]=\"isTreeGridControlDisabled(control)\"\r\n [attr.data-testid]=\"'tree-grid-' + control\">\r\n </ui-action-button>\r\n }\r\n </div>\r\n }\r\n <!-- ==================== TREE ACTIONS ==================== -->\r\n\r\n <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\r\n </th>\r\n } @else {\r\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\r\n @if (\r\n header === 'icon' || header === 'img' || header === 'options' || header === 'button'\r\n ) {\r\n <div></div>\r\n }\r\n @if (header === 'select') {\r\n <div>\r\n @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\r\n <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\r\n </mat-checkbox>\r\n }\r\n @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\r\n <div>\r\n {{ smartTable.customTableHeaders[i] }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'options' &&\r\n header !== 'button' &&\r\n header !== 'select' &&\r\n header !== 'expand' &&\r\n header !== 'actions'\r\n ) {\r\n <div>\r\n @if (smartTable.sortable) {\r\n @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\r\n <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\r\n class=\"sortableHeaderButton\">\r\n {{ smartTable.customTableHeaders[i] }}\r\n @if (getSortIcon(header)) {\r\n <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\r\n }\r\n @if (hasSortNumIcon(header)) {\r\n <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\r\n }\r\n </button>\r\n }\r\n } @else {\r\n {{ smartTable.customTableHeaders[i] }}\r\n }\r\n </div>\r\n }\r\n </th>\r\n }\r\n\r\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n <div class=\"mat-cell-content\">\r\n\r\n\r\n <!-- ==================== TREE TOGGLE ==================== -->\r\n @if (isTreeGrid && i === 0) {\r\n <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\r\n @if (hasChildren(element)) {\r\n <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\r\n <smart-icon [icon]=\"\r\n isRowExpanded(element)\r\n ? 'keyboard_arrow_down'\r\n : 'keyboard_arrow_right'\r\n \"></smart-icon>\r\n </button>\r\n } @else {\r\n <span class=\"tree-grid-spacer\"></span>\r\n }\r\n\r\n </div>\r\n }\r\n <!-- ==================== TREE TOGGLE ==================== -->\r\n\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n !isDisabled(element)\r\n ) {\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\r\n $event\r\n ? setSelection(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n : null\r\n \" [disabled]=\"isDisabled(element)\" [checked]=\"\r\n smartTable.selection!.isSelected(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \" [aria-label]=\"\r\n checkboxLabel(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \">\r\n </mat-checkbox>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\r\n !columnTemplate(i)\r\n ) {\r\n <div>\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(element, header)\r\n | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(element, header)\r\n | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(element, header)\r\n | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\r\n <div>\r\n <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n ) {\r\n <div>\r\n <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\r\n [color]=\"getColor(getValue(element, header), i)\">\r\n </smart-icon>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"smart-table-icon-container\">\r\n @for (ir of getImageResourceIcons(element, header); track ir) {\r\n <div>\r\n <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n </div>\r\n }\r\n </div>\r\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\r\n <div class=\"smart-table-buttons-col\">\r\n @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\r\n <div>\r\n @if (showButton(button, element)) {\r\n <div>\r\n @switch (button.type) {\r\n @case (smartTableButtonType.ICON) {\r\n <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\r\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n </button>\r\n }\r\n @case (smartTableButtonType.NORMAL) {\r\n <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n }\r\n @case (smartTableButtonType.RAISED) {\r\n <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\r\n color=\"{{ button.color }}\">\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n }\r\n <!------ MENU ------>\r\n @case (smartTableButtonType.MENU) {\r\n <div class=\"menu-button\">\r\n <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\r\n [actionParams]=\"{ model: element }\"\r\n (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\r\n <!------ GENERIC HAMBURGER ------>\r\n <!------ TOOLBAR ------>\r\n @if (shouldShowMenuButton(element)) {\r\n <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\r\n [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"\r\n (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\r\n }\r\n </div>\r\n }\r\n <!------ MENU ------>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\r\n <div>\r\n @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\r\n <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\r\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\r\n </smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].translator !== undefined\r\n ) {\r\n <div class=\"smart-table-cell-text\">\r\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n ) {\r\n <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\r\n @if (expandedElement !== element) {\r\n <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n }\r\n @if (expandedElement === element) {\r\n <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n }\r\n </button>\r\n }\r\n @if (\r\n !smartTable.customSmartTableHeaders ||\r\n (smartTable.customSmartTableHeaders &&\r\n (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\r\n !smartTable.customSmartTableHeaders[i].icon &&\r\n !smartTable.customSmartTableHeaders[i].buttons &&\r\n !smartTable.customSmartTableHeaders[i].translator &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n ) {\r\n <div>\r\n @if (header === 'icon') {\r\n <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n }\r\n @if (header === 'img') {\r\n <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\r\n }\r\n <!------ TOOLBAR ------>\r\n @if (showCellToolbar(element, header)) {\r\n <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\r\n [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\r\n }\r\n <!------ TOOLBAR ------>\r\n @if (columnTemplate(i); as template) {\r\n <smart-html-cell [row]=\"element\" [template]=\"template\"\r\n [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\r\n } @else if (\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'option' &&\r\n header !== 'button' &&\r\n !isImageResource(element, header)\r\n ) {\r\n @if (isTextContent(i)) {\r\n <div class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\r\n } @else {\r\n <div class=\"smart-table-cell-text\" [innerHtml]=\"getValue(element, header)\"></div>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n @if (smartTable.expandable) {\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\r\n <div class=\"smart-table-detail-content\">\r\n <ng-template #expandedArea></ng-template>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <ng-container *matRowDef=\"let element; columns: displayedColumns\">\r\n <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\r\n [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, element)\"\r\n (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\r\n\r\n @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\r\n <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\r\n [row]=\"element\"></lib-default-actions-popup>\r\n }\r\n </ng-container>\r\n <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\r\n @if (smartTable.expandable) {\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\r\n (animate.leave)=\"onDetailRowLeave($event)\"></tr>\r\n }\r\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled, var(--color-text-muted, #68778e))}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.mat-column-my_menu,.tree-grid-column{width:0}.mat-column-my_menu{position:sticky;right:0}td.mat-column-my_menu{z-index:1}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
|
|
16435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MaterialTableComponent, isStandalone: true, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n multiTemplateDataRows [trackBy]=\"trackRow\">\n <!-- Column Descriptor -->\n @if (smartTable.title) {\n <caption class=\"captionTitle\">\n {{ smartTable.title }}\n </caption>\n }\n\n <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\n <ng-container [matColumnDef]=\"rowStateColumn\">\n <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\n [attr.data-testid]=\"rowStateColumn\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\n @if (rowStateIcon(element); as icon) {\n <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\n role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\n }\n </td>\n </ng-container>\n\n @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n <ng-container matColumnDef=\"{{ header }}\">\n <!-- my_menu is the implicit action column present on all tables: -->\n @if ('my_menu' === header) {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n <!-- ==================== TREE ACTIONS ==================== -->\n @if ( isTreeGrid) {\n <div class=\"tree-grid-actions\">\n @for (control of treeGridControls; track control) {\n <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\n [descriptor]=\"treeGridControlDescriptor(control)\"\n [disabled]=\"isTreeGridControlDisabled(control)\"\n [attr.data-testid]=\"'tree-grid-' + control\">\n </ui-action-button>\n }\n </div>\n }\n <!-- ==================== TREE ACTIONS ==================== -->\n\n <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n @if (\n header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n ) {\n <div></div>\n }\n @if (header === 'select') {\n <div>\n @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n </mat-checkbox>\n }\n @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n <div>\n {{ smartTable.customTableHeaders[i] }}\n </div>\n }\n </div>\n }\n @if (\n header !== 'icon' &&\n header !== 'img' &&\n header !== 'options' &&\n header !== 'button' &&\n header !== 'select' &&\n header !== 'expand' &&\n header !== 'actions'\n ) {\n <div>\n @if (smartTable.sortable) {\n @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n class=\"sortableHeaderButton\">\n {{ smartTable.customTableHeaders[i] }}\n @if (getSortIcon(header)) {\n <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n }\n @if (hasSortNumIcon(header)) {\n <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n }\n </button>\n }\n } @else {\n {{ smartTable.customTableHeaders[i] }}\n }\n </div>\n }\n </th>\n }\n\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n <div class=\"mat-cell-content\">\n\n\n <!-- ==================== TREE TOGGLE ==================== -->\n @if (isTreeGrid && i === 0) {\n <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n @if (hasChildren(element)) {\n <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n <smart-icon [icon]=\"\n isRowExpanded(element)\n ? 'keyboard_arrow_down'\n : 'keyboard_arrow_right'\n \"></smart-icon>\n </button>\n } @else {\n <span class=\"tree-grid-spacer\"></span>\n }\n\n </div>\n }\n <!-- ==================== TREE TOGGLE ==================== -->\n\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n !isDisabled(element)\n ) {\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n $event\n ? setSelection(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n : element\n )\n : null\n \" [disabled]=\"isDisabled(element)\" [checked]=\"\n smartTable.selection!.isSelected(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n : element\n )\n \" [aria-label]=\"\n checkboxLabel(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n : element\n )\n \">\n </mat-checkbox>\n }\n @if (\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n !columnTemplate(i)\n ) {\n <div>\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(element, header)\n | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(element, header)\n | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(element, header)\n | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n <div>\n <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\n ) {\n <div>\n <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n [color]=\"getColor(getValue(element, header), i)\">\n </smart-icon>\n </div>\n }\n </div>\n }\n <div class=\"smart-table-icon-container\">\n @for (ir of getImageResourceIcons(element, header); track ir) {\n <div>\n <smart-icon [imageResource]=\"ir\"> </smart-icon>\n </div>\n }\n </div>\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n <div class=\"smart-table-buttons-col\">\n @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n <div>\n @if (showButton(button, element)) {\n <div>\n @switch (button.type) {\n @case (smartTableButtonType.ICON) {\n <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n </button>\n }\n @case (smartTableButtonType.NORMAL) {\n <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n </button>\n }\n @case (smartTableButtonType.RAISED) {\n <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n color=\"{{ button.color }}\">\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n </button>\n }\n <!------ MENU ------>\n @case (smartTableButtonType.MENU) {\n <div class=\"menu-button\">\n <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n [actionParams]=\"{ model: element }\"\n (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\n <!------ GENERIC HAMBURGER ------>\n <!------ TOOLBAR ------>\n @if (shouldShowMenuButton(element)) {\n <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"\n (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\n }\n </div>\n }\n <!------ MENU ------>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n <div>\n @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n </smart-icon>\n }\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].translator !== undefined\n ) {\n <div class=\"smart-table-cell-text\">\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n ) {\n <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\n @if (expandedElement !== element) {\n <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n }\n @if (expandedElement === element) {\n <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n }\n </button>\n }\n @if (\n !smartTable.customSmartTableHeaders ||\n (smartTable.customSmartTableHeaders &&\n (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n !smartTable.customSmartTableHeaders[i].icon &&\n !smartTable.customSmartTableHeaders[i].buttons &&\n !smartTable.customSmartTableHeaders[i].translator &&\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n ) {\n <div>\n @if (header === 'icon') {\n <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n }\n @if (header === 'img') {\n <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n }\n <!------ TOOLBAR ------>\n @if (showCellToolbar(element, header)) {\n <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n }\n <!------ TOOLBAR ------>\n @if (columnTemplate(i); as template) {\n <smart-html-cell [row]=\"element\" [template]=\"template\"\n [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\n } @else if (\n header !== 'icon' &&\n header !== 'img' &&\n header !== 'option' &&\n header !== 'button' &&\n !isImageResource(element, header)\n ) {\n @if (isTextContent(i)) {\n <div class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\n } @else {\n <div class=\"smart-table-cell-text\" [innerHtml]=\"getValue(element, header)\"></div>\n }\n }\n </div>\n }\n\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (smartTable.expandable) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n <div class=\"smart-table-detail-content\">\n <ng-template #expandedArea></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n <ng-container *matRowDef=\"let element; columns: displayedColumns\">\n <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, element)\"\n (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n [row]=\"element\"></lib-default-actions-popup>\n }\n </ng-container>\n <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n @if (smartTable.expandable) {\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled, var(--color-text-muted, #68778e))}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.mat-column-my_menu,.tree-grid-column{width:0}.mat-column-my_menu{position:sticky;right:0}td.mat-column-my_menu{z-index:1}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
|
|
16392
16436
|
}
|
|
16393
16437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaterialTableComponent, decorators: [{
|
|
16394
16438
|
type: Component,
|
|
16395
|
-
args: [{ selector: 'lib-material-table', imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, UiActionButtonComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatTooltip, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\r\n multiTemplateDataRows [trackBy]=\"trackRow\">\r\n <!-- Column Descriptor -->\r\n @if (smartTable.title) {\r\n <caption class=\"captionTitle\">\r\n {{ smartTable.title }}\r\n </caption>\r\n }\r\n\r\n <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\r\n <ng-container [matColumnDef]=\"rowStateColumn\">\r\n <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\r\n [attr.data-testid]=\"rowStateColumn\"></th>\r\n <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\r\n @if (rowStateIcon(element); as icon) {\r\n <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\r\n role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (header of smartTable.tableHeaders; track header; let i = $index) {\r\n\r\n <ng-container matColumnDef=\"{{ header }}\">\r\n <!-- my_menu is the implicit action column present on all tables: -->\r\n @if ('my_menu' === header) {\r\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\r\n\r\n <!-- ==================== TREE ACTIONS ==================== -->\r\n @if ( isTreeGrid) {\r\n <div class=\"tree-grid-actions\">\r\n @for (control of treeGridControls; track control) {\r\n <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\r\n [descriptor]=\"treeGridControlDescriptor(control)\"\r\n [disabled]=\"isTreeGridControlDisabled(control)\"\r\n [attr.data-testid]=\"'tree-grid-' + control\">\r\n </ui-action-button>\r\n }\r\n </div>\r\n }\r\n <!-- ==================== TREE ACTIONS ==================== -->\r\n\r\n <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\r\n </th>\r\n } @else {\r\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\r\n @if (\r\n header === 'icon' || header === 'img' || header === 'options' || header === 'button'\r\n ) {\r\n <div></div>\r\n }\r\n @if (header === 'select') {\r\n <div>\r\n @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\r\n <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\r\n </mat-checkbox>\r\n }\r\n @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\r\n <div>\r\n {{ smartTable.customTableHeaders[i] }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'options' &&\r\n header !== 'button' &&\r\n header !== 'select' &&\r\n header !== 'expand' &&\r\n header !== 'actions'\r\n ) {\r\n <div>\r\n @if (smartTable.sortable) {\r\n @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\r\n <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\r\n class=\"sortableHeaderButton\">\r\n {{ smartTable.customTableHeaders[i] }}\r\n @if (getSortIcon(header)) {\r\n <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\r\n }\r\n @if (hasSortNumIcon(header)) {\r\n <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\r\n }\r\n </button>\r\n }\r\n } @else {\r\n {{ smartTable.customTableHeaders[i] }}\r\n }\r\n </div>\r\n }\r\n </th>\r\n }\r\n\r\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n <div class=\"mat-cell-content\">\r\n\r\n\r\n <!-- ==================== TREE TOGGLE ==================== -->\r\n @if (isTreeGrid && i === 0) {\r\n <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\r\n @if (hasChildren(element)) {\r\n <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\r\n <smart-icon [icon]=\"\r\n isRowExpanded(element)\r\n ? 'keyboard_arrow_down'\r\n : 'keyboard_arrow_right'\r\n \"></smart-icon>\r\n </button>\r\n } @else {\r\n <span class=\"tree-grid-spacer\"></span>\r\n }\r\n\r\n </div>\r\n }\r\n <!-- ==================== TREE TOGGLE ==================== -->\r\n\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n !isDisabled(element)\r\n ) {\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\r\n $event\r\n ? setSelection(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n : null\r\n \" [disabled]=\"isDisabled(element)\" [checked]=\"\r\n smartTable.selection!.isSelected(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \" [aria-label]=\"\r\n checkboxLabel(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n : element\r\n )\r\n \">\r\n </mat-checkbox>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\r\n !columnTemplate(i)\r\n ) {\r\n <div>\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(element, header)\r\n | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(element, header)\r\n | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(element, header)\r\n | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\r\n <div>\r\n <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n ) {\r\n <div>\r\n <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\r\n [color]=\"getColor(getValue(element, header), i)\">\r\n </smart-icon>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"smart-table-icon-container\">\r\n @for (ir of getImageResourceIcons(element, header); track ir) {\r\n <div>\r\n <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n </div>\r\n }\r\n </div>\r\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\r\n <div class=\"smart-table-buttons-col\">\r\n @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\r\n <div>\r\n @if (showButton(button, element)) {\r\n <div>\r\n @switch (button.type) {\r\n @case (smartTableButtonType.ICON) {\r\n <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\r\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n </button>\r\n }\r\n @case (smartTableButtonType.NORMAL) {\r\n <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n }\r\n @case (smartTableButtonType.RAISED) {\r\n <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\r\n color=\"{{ button.color }}\">\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n </button>\r\n }\r\n <!------ MENU ------>\r\n @case (smartTableButtonType.MENU) {\r\n <div class=\"menu-button\">\r\n <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\r\n [actionParams]=\"{ model: element }\"\r\n (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\r\n <!------ GENERIC HAMBURGER ------>\r\n <!------ TOOLBAR ------>\r\n @if (shouldShowMenuButton(element)) {\r\n <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\r\n [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"\r\n (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\r\n }\r\n </div>\r\n }\r\n <!------ MENU ------>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\r\n <div>\r\n @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\r\n <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\r\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\r\n </smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].translator !== undefined\r\n ) {\r\n <div class=\"smart-table-cell-text\">\r\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n ) {\r\n <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\r\n @if (expandedElement !== element) {\r\n <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n }\r\n @if (expandedElement === element) {\r\n <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n }\r\n </button>\r\n }\r\n @if (\r\n !smartTable.customSmartTableHeaders ||\r\n (smartTable.customSmartTableHeaders &&\r\n (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\r\n !smartTable.customSmartTableHeaders[i].icon &&\r\n !smartTable.customSmartTableHeaders[i].buttons &&\r\n !smartTable.customSmartTableHeaders[i].translator &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n ) {\r\n <div>\r\n @if (header === 'icon') {\r\n <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n }\r\n @if (header === 'img') {\r\n <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\r\n }\r\n <!------ TOOLBAR ------>\r\n @if (showCellToolbar(element, header)) {\r\n <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\r\n [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\r\n }\r\n <!------ TOOLBAR ------>\r\n @if (columnTemplate(i); as template) {\r\n <smart-html-cell [row]=\"element\" [template]=\"template\"\r\n [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\r\n } @else if (\r\n header !== 'icon' &&\r\n header !== 'img' &&\r\n header !== 'option' &&\r\n header !== 'button' &&\r\n !isImageResource(element, header)\r\n ) {\r\n @if (isTextContent(i)) {\r\n <div class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\r\n } @else {\r\n <div class=\"smart-table-cell-text\" [innerHtml]=\"getValue(element, header)\"></div>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n @if (smartTable.expandable) {\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\r\n <div class=\"smart-table-detail-content\">\r\n <ng-template #expandedArea></ng-template>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <ng-container *matRowDef=\"let element; columns: displayedColumns\">\r\n <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\r\n [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, element)\"\r\n (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\r\n\r\n @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\r\n <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\r\n [row]=\"element\"></lib-default-actions-popup>\r\n }\r\n </ng-container>\r\n <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\r\n @if (smartTable.expandable) {\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\r\n (animate.leave)=\"onDetailRowLeave($event)\"></tr>\r\n }\r\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled, var(--color-text-muted, #68778e))}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.mat-column-my_menu,.tree-grid-column{width:0}.mat-column-my_menu{position:sticky;right:0}td.mat-column-my_menu{z-index:1}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"] }]
|
|
16439
|
+
args: [{ selector: 'lib-material-table', imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, UiActionButtonComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatTooltip, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n multiTemplateDataRows [trackBy]=\"trackRow\">\n <!-- Column Descriptor -->\n @if (smartTable.title) {\n <caption class=\"captionTitle\">\n {{ smartTable.title }}\n </caption>\n }\n\n <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\n <ng-container [matColumnDef]=\"rowStateColumn\">\n <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\n [attr.data-testid]=\"rowStateColumn\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\n @if (rowStateIcon(element); as icon) {\n <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\n role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\n }\n </td>\n </ng-container>\n\n @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n <ng-container matColumnDef=\"{{ header }}\">\n <!-- my_menu is the implicit action column present on all tables: -->\n @if ('my_menu' === header) {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n <!-- ==================== TREE ACTIONS ==================== -->\n @if ( isTreeGrid) {\n <div class=\"tree-grid-actions\">\n @for (control of treeGridControls; track control) {\n <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\n [descriptor]=\"treeGridControlDescriptor(control)\"\n [disabled]=\"isTreeGridControlDisabled(control)\"\n [attr.data-testid]=\"'tree-grid-' + control\">\n </ui-action-button>\n }\n </div>\n }\n <!-- ==================== TREE ACTIONS ==================== -->\n\n <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n @if (\n header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n ) {\n <div></div>\n }\n @if (header === 'select') {\n <div>\n @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n </mat-checkbox>\n }\n @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n <div>\n {{ smartTable.customTableHeaders[i] }}\n </div>\n }\n </div>\n }\n @if (\n header !== 'icon' &&\n header !== 'img' &&\n header !== 'options' &&\n header !== 'button' &&\n header !== 'select' &&\n header !== 'expand' &&\n header !== 'actions'\n ) {\n <div>\n @if (smartTable.sortable) {\n @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n class=\"sortableHeaderButton\">\n {{ smartTable.customTableHeaders[i] }}\n @if (getSortIcon(header)) {\n <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n }\n @if (hasSortNumIcon(header)) {\n <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n }\n </button>\n }\n } @else {\n {{ smartTable.customTableHeaders[i] }}\n }\n </div>\n }\n </th>\n }\n\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n <div class=\"mat-cell-content\">\n\n\n <!-- ==================== TREE TOGGLE ==================== -->\n @if (isTreeGrid && i === 0) {\n <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n @if (hasChildren(element)) {\n <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n <smart-icon [icon]=\"\n isRowExpanded(element)\n ? 'keyboard_arrow_down'\n : 'keyboard_arrow_right'\n \"></smart-icon>\n </button>\n } @else {\n <span class=\"tree-grid-spacer\"></span>\n }\n\n </div>\n }\n <!-- ==================== TREE TOGGLE ==================== -->\n\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n !isDisabled(element)\n ) {\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n $event\n ? setSelection(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n : element\n )\n : null\n \" [disabled]=\"isDisabled(element)\" [checked]=\"\n smartTable.selection!.isSelected(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n : element\n )\n \" [aria-label]=\"\n checkboxLabel(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n : element\n )\n \">\n </mat-checkbox>\n }\n @if (\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n !columnTemplate(i)\n ) {\n <div>\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(element, header)\n | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(element, header)\n | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(element, header)\n | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n <div>\n <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\n ) {\n <div>\n <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n [color]=\"getColor(getValue(element, header), i)\">\n </smart-icon>\n </div>\n }\n </div>\n }\n <div class=\"smart-table-icon-container\">\n @for (ir of getImageResourceIcons(element, header); track ir) {\n <div>\n <smart-icon [imageResource]=\"ir\"> </smart-icon>\n </div>\n }\n </div>\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n <div class=\"smart-table-buttons-col\">\n @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n <div>\n @if (showButton(button, element)) {\n <div>\n @switch (button.type) {\n @case (smartTableButtonType.ICON) {\n <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n </button>\n }\n @case (smartTableButtonType.NORMAL) {\n <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n </button>\n }\n @case (smartTableButtonType.RAISED) {\n <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n color=\"{{ button.color }}\">\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n </button>\n }\n <!------ MENU ------>\n @case (smartTableButtonType.MENU) {\n <div class=\"menu-button\">\n <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n [actionParams]=\"{ model: element }\"\n (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\n <!------ GENERIC HAMBURGER ------>\n <!------ TOOLBAR ------>\n @if (shouldShowMenuButton(element)) {\n <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"\n (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\n }\n </div>\n }\n <!------ MENU ------>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n <div>\n @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n </smart-icon>\n }\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].translator !== undefined\n ) {\n <div class=\"smart-table-cell-text\">\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n ) {\n <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\n @if (expandedElement !== element) {\n <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n }\n @if (expandedElement === element) {\n <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n }\n </button>\n }\n @if (\n !smartTable.customSmartTableHeaders ||\n (smartTable.customSmartTableHeaders &&\n (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n !smartTable.customSmartTableHeaders[i].icon &&\n !smartTable.customSmartTableHeaders[i].buttons &&\n !smartTable.customSmartTableHeaders[i].translator &&\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n ) {\n <div>\n @if (header === 'icon') {\n <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n }\n @if (header === 'img') {\n <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n }\n <!------ TOOLBAR ------>\n @if (showCellToolbar(element, header)) {\n <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n }\n <!------ TOOLBAR ------>\n @if (columnTemplate(i); as template) {\n <smart-html-cell [row]=\"element\" [template]=\"template\"\n [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\n } @else if (\n header !== 'icon' &&\n header !== 'img' &&\n header !== 'option' &&\n header !== 'button' &&\n !isImageResource(element, header)\n ) {\n @if (isTextContent(i)) {\n <div class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\n } @else {\n <div class=\"smart-table-cell-text\" [innerHtml]=\"getValue(element, header)\"></div>\n }\n }\n </div>\n }\n\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (smartTable.expandable) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n <div class=\"smart-table-detail-content\">\n <ng-template #expandedArea></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n <ng-container *matRowDef=\"let element; columns: displayedColumns\">\n <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, element)\"\n (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n [row]=\"element\"></lib-default-actions-popup>\n }\n </ng-container>\n <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n @if (smartTable.expandable) {\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled, var(--color-text-muted, #68778e))}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.mat-column-my_menu,.tree-grid-column{width:0}.mat-column-my_menu{position:sticky;right:0}td.mat-column-my_menu{z-index:1}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"] }]
|
|
16396
16440
|
}] });
|
|
16397
16441
|
|
|
16398
16442
|
class MobileTableComponent extends Table {
|
|
16399
16443
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MobileTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
16400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MobileTableComponent, isStandalone: true, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\r\n @for (row of smartTable.tableRows; track trackRow($index, row)) {\r\n <div\r\n class=\"mobileTableRow\"\r\n [ngClass]=\"getRowClasses(row)\"\r\n [ngStyle]=\"getRowStyles(row)\"\r\n [attr.data-testid]=\"row?.id ?? null\"\r\n >\r\n @if (showRowStateColumn) {\r\n <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\r\n @if (rowStateIcon(row); as icon) {\r\n <smart-icon\r\n class=\"sm-grid-row-state-icon\"\r\n [ngClass]=\"rowStateIconClass(row) ?? ''\"\r\n [icon]=\"icon\"\r\n color=\"\"\r\n role=\"img\"\r\n [attr.aria-label]=\"rowStateLabel(row)\"\r\n [matTooltip]=\"rowStateLabel(row) ?? ''\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n }\r\n @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\r\n <div\r\n class=\"mobileTableCell\"\r\n (click)=\"handleOnRowClick($event, row)\"\r\n (dblclick)=\"handleOnRowDoubleClick($event, row)\"\r\n >\r\n <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\r\n {{ header.label }}\r\n </div>\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'select'\r\n ) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"\r\n $event\r\n ? setSelection(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n : row\r\n )\r\n : null\r\n \"\r\n [disabled]=\"isDisabled(row)\"\r\n [checked]=\"\r\n smartTable.selection!.isSelected(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n : row\r\n )\r\n \"\r\n [aria-label]=\"\r\n checkboxLabel(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n : row\r\n )\r\n \"\r\n >\r\n </mat-checkbox>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\r\n !columnTemplate(i)\r\n ) {\r\n <div\r\n >\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(row, header.propertyName)\r\n | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(row, header.propertyName)\r\n | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(row, header.propertyName)\r\n | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\r\n <div>\r\n <mat-checkbox\r\n [disabled]=\"true\"\r\n [checked]=\"getValue(row, header.propertyName)\"\r\n ></mat-checkbox>\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n ) {\r\n <div\r\n >\r\n <smart-icon\r\n [smartTooltip]=\"getToolTip(row, i)\"\r\n [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\r\n [color]=\"getColor(getValue(row, header.propertyName), i)\"\r\n >\r\n </smart-icon>\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (isImageResource(row, header.propertyName)) {\r\n <div>\r\n <smart-icon\r\n [icon]=\"getImageResourceIcon(row, header.propertyName)\"\r\n [color]=\"getImageResourceColor(row, header.propertyName)\"\r\n >\r\n </smart-icon>\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\r\n <div\r\n class=\"smart-table-buttons-col\"\r\n >\r\n @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\r\n <div>\r\n @if (showButton(button, row)) {\r\n <div>\r\n @switch (button.type) {\r\n @case (smartTableButtonType.ICON) {\r\n <button\r\n (click)=\"customButtonClicked($event, button, row)\"\r\n mat-icon-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n </button>\r\n }\r\n @case (smartTableButtonType.NORMAL) {\r\n <button\r\n (click)=\"customButtonClicked($event, button, row)\"\r\n mat-button\r\n color=\"{{ button.color }}\"\r\n >\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n }\r\n @case (smartTableButtonType.RAISED) {\r\n <button\r\n (click)=\"customButtonClicked($event, button, row)\"\r\n mat-raised-button\r\n color=\"{{ button.color }}\"\r\n >\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n }\r\n <!------ MENU ------>\r\n @case (smartTableButtonType.MENU) {\r\n <div class=\"menu-button\">\r\n <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n <smart-ui-action-toolbar\r\n [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n [widgetId]=\"smartTable.getGridId()\"\r\n [nodeId]=\"element.id\"\r\n [actionParams]=\"{ model: element }\"\r\n (actionFired)=\"onRowActionFired(element, $event)\"\r\n ></smart-ui-action-toolbar>\r\n <!------ GENERIC HAMBURGER ------>\r\n @if (shouldShowMenuButton(element)) {\r\n <smart-ui-action-toolbar\r\n [uiActionModels]=\"getMenuActions(element)\"\r\n [widgetId]=\"smartTable.getGridId()\"\r\n [nodeId]=\"element.id\"\r\n [actionParams]=\"{ model: element }\"\r\n (actionFired)=\"onRowActionFired(element, $event)\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n <!------ MENU ------>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\r\n <div>\r\n @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\r\n <smart-icon\r\n [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\r\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n >\r\n </smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].translator !== undefined\r\n ) {\r\n <div\r\n class=\"smart-table-cell-text\"\r\n >\r\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\r\n </div>\r\n }\r\n @if (\r\n !smartTable.customSmartTableHeaders ||\r\n (smartTable.customSmartTableHeaders &&\r\n (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\r\n !smartTable.customSmartTableHeaders[i].icon &&\r\n !smartTable.customSmartTableHeaders[i].buttons &&\r\n !smartTable.customSmartTableHeaders[i].translator &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n ) {\r\n <div\r\n >\r\n @if (header.propertyName === 'icon') {\r\n <smart-icon\r\n [icon]=\"getValue(row, header.propertyName)!\"\r\n >\r\n </smart-icon>\r\n }\r\n @if (header.propertyName === 'img') {\r\n <img\r\n [src]=\"getValue(row, header.propertyName)\"\r\n alt=\"\"\r\n class=\"smarttableImg\"\r\n />\r\n }\r\n @if (\r\n header.propertyName !== 'icon' &&\r\n header.propertyName !== 'img' &&\r\n header.propertyName !== 'option' &&\r\n header.propertyName !== 'button'\r\n ) {\r\n @if (columnTemplate(i); as template) {\r\n <smart-html-cell\r\n [row]=\"row\"\r\n [template]=\"template\"\r\n [gridIdentifier]=\"smartTable.getGridId()\"\r\n ></smart-html-cell>\r\n } @else if (isTextContent(i)) {\r\n <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\r\n } @else {\r\n <div\r\n class=\"smart-table-cell-text\"\r\n [innerHtml]=\"getValue(row, header.propertyName)\"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
|
|
16444
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MobileTableComponent, isStandalone: true, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n @for (row of smartTable.tableRows; track trackRow($index, row)) {\n <div\n class=\"mobileTableRow\"\n [ngClass]=\"getRowClasses(row)\"\n [ngStyle]=\"getRowStyles(row)\"\n [attr.data-testid]=\"row?.id ?? null\"\n >\n @if (showRowStateColumn) {\n <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n @if (rowStateIcon(row); as icon) {\n <smart-icon\n class=\"sm-grid-row-state-icon\"\n [ngClass]=\"rowStateIconClass(row) ?? ''\"\n [icon]=\"icon\"\n color=\"\"\n role=\"img\"\n [attr.aria-label]=\"rowStateLabel(row)\"\n [matTooltip]=\"rowStateLabel(row) ?? ''\"\n ></smart-icon>\n }\n </div>\n }\n @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n <div\n class=\"mobileTableCell\"\n (click)=\"handleOnRowClick($event, row)\"\n (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n >\n <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n {{ header.label }}\n </div>\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].propertyName === 'select'\n ) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"\n $event\n ? setSelection(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n : row\n )\n : null\n \"\n [disabled]=\"isDisabled(row)\"\n [checked]=\"\n smartTable.selection!.isSelected(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n : row\n )\n \"\n [aria-label]=\"\n checkboxLabel(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n : row\n )\n \"\n >\n </mat-checkbox>\n }\n @if (\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n !columnTemplate(i)\n ) {\n <div\n >\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(row, header.propertyName)\n | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(row, header.propertyName)\n | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(row, header.propertyName)\n | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n <div>\n <mat-checkbox\n [disabled]=\"true\"\n [checked]=\"getValue(row, header.propertyName)\"\n ></mat-checkbox>\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\n ) {\n <div\n >\n <smart-icon\n [smartTooltip]=\"getToolTip(row, i)\"\n [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n [color]=\"getColor(getValue(row, header.propertyName), i)\"\n >\n </smart-icon>\n </div>\n }\n </div>\n }\n @if (isImageResource(row, header.propertyName)) {\n <div>\n <smart-icon\n [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n [color]=\"getImageResourceColor(row, header.propertyName)\"\n >\n </smart-icon>\n </div>\n }\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n <div\n class=\"smart-table-buttons-col\"\n >\n @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n <div>\n @if (showButton(button, row)) {\n <div>\n @switch (button.type) {\n @case (smartTableButtonType.ICON) {\n <button\n (click)=\"customButtonClicked($event, button, row)\"\n mat-icon-button\n color=\"{{ button.color }}\"\n >\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n </button>\n }\n @case (smartTableButtonType.NORMAL) {\n <button\n (click)=\"customButtonClicked($event, button, row)\"\n mat-button\n color=\"{{ button.color }}\"\n >\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label }}\n </button>\n }\n @case (smartTableButtonType.RAISED) {\n <button\n (click)=\"customButtonClicked($event, button, row)\"\n mat-raised-button\n color=\"{{ button.color }}\"\n >\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label }}\n </button>\n }\n <!------ MENU ------>\n @case (smartTableButtonType.MENU) {\n <div class=\"menu-button\">\n <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n <smart-ui-action-toolbar\n [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n [widgetId]=\"smartTable.getGridId()\"\n [nodeId]=\"element.id\"\n [actionParams]=\"{ model: element }\"\n (actionFired)=\"onRowActionFired(element, $event)\"\n ></smart-ui-action-toolbar>\n <!------ GENERIC HAMBURGER ------>\n @if (shouldShowMenuButton(element)) {\n <smart-ui-action-toolbar\n [uiActionModels]=\"getMenuActions(element)\"\n [widgetId]=\"smartTable.getGridId()\"\n [nodeId]=\"element.id\"\n [actionParams]=\"{ model: element }\"\n (actionFired)=\"onRowActionFired(element, $event)\"\n ></smart-ui-action-toolbar>\n }\n <!------ MENU ------>\n </div>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n }\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n <div>\n @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n <smart-icon\n [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n >\n </smart-icon>\n }\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].translator !== undefined\n ) {\n <div\n class=\"smart-table-cell-text\"\n >\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n </div>\n }\n @if (\n !smartTable.customSmartTableHeaders ||\n (smartTable.customSmartTableHeaders &&\n (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n !smartTable.customSmartTableHeaders[i].icon &&\n !smartTable.customSmartTableHeaders[i].buttons &&\n !smartTable.customSmartTableHeaders[i].translator &&\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n ) {\n <div\n >\n @if (header.propertyName === 'icon') {\n <smart-icon\n [icon]=\"getValue(row, header.propertyName)!\"\n >\n </smart-icon>\n }\n @if (header.propertyName === 'img') {\n <img\n [src]=\"getValue(row, header.propertyName)\"\n alt=\"\"\n class=\"smarttableImg\"\n />\n }\n @if (\n header.propertyName !== 'icon' &&\n header.propertyName !== 'img' &&\n header.propertyName !== 'option' &&\n header.propertyName !== 'button'\n ) {\n @if (columnTemplate(i); as template) {\n <smart-html-cell\n [row]=\"row\"\n [template]=\"template\"\n [gridIdentifier]=\"smartTable.getGridId()\"\n ></smart-html-cell>\n } @else if (isTextContent(i)) {\n <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n } @else {\n <div\n class=\"smart-table-cell-text\"\n [innerHtml]=\"getValue(row, header.propertyName)\"\n ></div>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
|
|
16401
16445
|
}
|
|
16402
16446
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MobileTableComponent, decorators: [{
|
|
16403
16447
|
type: Component,
|
|
16404
|
-
args: [{ selector: 'lib-mobile-table', imports: [NgClass, NgStyle, MatCheckbox, SmartIconComponent, SmartTooltipDirective, MatTooltip, MatIconButton, MatButton, UiActionToolbarComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<div class=\"mobileTable\">\r\n @for (row of smartTable.tableRows; track trackRow($index, row)) {\r\n <div\r\n class=\"mobileTableRow\"\r\n [ngClass]=\"getRowClasses(row)\"\r\n [ngStyle]=\"getRowStyles(row)\"\r\n [attr.data-testid]=\"row?.id ?? null\"\r\n >\r\n @if (showRowStateColumn) {\r\n <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\r\n @if (rowStateIcon(row); as icon) {\r\n <smart-icon\r\n class=\"sm-grid-row-state-icon\"\r\n [ngClass]=\"rowStateIconClass(row) ?? ''\"\r\n [icon]=\"icon\"\r\n color=\"\"\r\n role=\"img\"\r\n [attr.aria-label]=\"rowStateLabel(row)\"\r\n [matTooltip]=\"rowStateLabel(row) ?? ''\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n }\r\n @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\r\n <div\r\n class=\"mobileTableCell\"\r\n (click)=\"handleOnRowClick($event, row)\"\r\n (dblclick)=\"handleOnRowDoubleClick($event, row)\"\r\n >\r\n <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\r\n {{ header.label }}\r\n </div>\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].propertyName === 'select'\r\n ) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"\r\n $event\r\n ? setSelection(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n : row\r\n )\r\n : null\r\n \"\r\n [disabled]=\"isDisabled(row)\"\r\n [checked]=\"\r\n smartTable.selection!.isSelected(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n : row\r\n )\r\n \"\r\n [aria-label]=\"\r\n checkboxLabel(\r\n smartTable.selectionProperty\r\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\r\n : row\r\n )\r\n \"\r\n >\r\n </mat-checkbox>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\r\n !columnTemplate(i)\r\n ) {\r\n <div\r\n >\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(row, header.propertyName)\r\n | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(row, header.propertyName)\r\n | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\r\n <div class=\"smart-table-cell-text\">\r\n {{\r\n getValue(row, header.propertyName)\r\n | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\r\n }}\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\r\n <div>\r\n <mat-checkbox\r\n [disabled]=\"true\"\r\n [checked]=\"getValue(row, header.propertyName)\"\r\n ></mat-checkbox>\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n ) {\r\n <div\r\n >\r\n <smart-icon\r\n [smartTooltip]=\"getToolTip(row, i)\"\r\n [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\r\n [color]=\"getColor(getValue(row, header.propertyName), i)\"\r\n >\r\n </smart-icon>\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (isImageResource(row, header.propertyName)) {\r\n <div>\r\n <smart-icon\r\n [icon]=\"getImageResourceIcon(row, header.propertyName)\"\r\n [color]=\"getImageResourceColor(row, header.propertyName)\"\r\n >\r\n </smart-icon>\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\r\n <div\r\n class=\"smart-table-buttons-col\"\r\n >\r\n @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\r\n <div>\r\n @if (showButton(button, row)) {\r\n <div>\r\n @switch (button.type) {\r\n @case (smartTableButtonType.ICON) {\r\n <button\r\n (click)=\"customButtonClicked($event, button, row)\"\r\n mat-icon-button\r\n color=\"{{ button.color }}\"\r\n >\r\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n </button>\r\n }\r\n @case (smartTableButtonType.NORMAL) {\r\n <button\r\n (click)=\"customButtonClicked($event, button, row)\"\r\n mat-button\r\n color=\"{{ button.color }}\"\r\n >\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n }\r\n @case (smartTableButtonType.RAISED) {\r\n <button\r\n (click)=\"customButtonClicked($event, button, row)\"\r\n mat-raised-button\r\n color=\"{{ button.color }}\"\r\n >\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n }\r\n <!------ MENU ------>\r\n @case (smartTableButtonType.MENU) {\r\n <div class=\"menu-button\">\r\n <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n <smart-ui-action-toolbar\r\n [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n [widgetId]=\"smartTable.getGridId()\"\r\n [nodeId]=\"element.id\"\r\n [actionParams]=\"{ model: element }\"\r\n (actionFired)=\"onRowActionFired(element, $event)\"\r\n ></smart-ui-action-toolbar>\r\n <!------ GENERIC HAMBURGER ------>\r\n @if (shouldShowMenuButton(element)) {\r\n <smart-ui-action-toolbar\r\n [uiActionModels]=\"getMenuActions(element)\"\r\n [widgetId]=\"smartTable.getGridId()\"\r\n [nodeId]=\"element.id\"\r\n [actionParams]=\"{ model: element }\"\r\n (actionFired)=\"onRowActionFired(element, $event)\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n <!------ MENU ------>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\r\n <div>\r\n @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\r\n <smart-icon\r\n [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\r\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n >\r\n </smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (\r\n smartTable.customSmartTableHeaders &&\r\n smartTable.customSmartTableHeaders[i].translator !== undefined\r\n ) {\r\n <div\r\n class=\"smart-table-cell-text\"\r\n >\r\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\r\n </div>\r\n }\r\n @if (\r\n !smartTable.customSmartTableHeaders ||\r\n (smartTable.customSmartTableHeaders &&\r\n (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\r\n !smartTable.customSmartTableHeaders[i].icon &&\r\n !smartTable.customSmartTableHeaders[i].buttons &&\r\n !smartTable.customSmartTableHeaders[i].translator &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n ) {\r\n <div\r\n >\r\n @if (header.propertyName === 'icon') {\r\n <smart-icon\r\n [icon]=\"getValue(row, header.propertyName)!\"\r\n >\r\n </smart-icon>\r\n }\r\n @if (header.propertyName === 'img') {\r\n <img\r\n [src]=\"getValue(row, header.propertyName)\"\r\n alt=\"\"\r\n class=\"smarttableImg\"\r\n />\r\n }\r\n @if (\r\n header.propertyName !== 'icon' &&\r\n header.propertyName !== 'img' &&\r\n header.propertyName !== 'option' &&\r\n header.propertyName !== 'button'\r\n ) {\r\n @if (columnTemplate(i); as template) {\r\n <smart-html-cell\r\n [row]=\"row\"\r\n [template]=\"template\"\r\n [gridIdentifier]=\"smartTable.getGridId()\"\r\n ></smart-html-cell>\r\n } @else if (isTextContent(i)) {\r\n <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\r\n } @else {\r\n <div\r\n class=\"smart-table-cell-text\"\r\n [innerHtml]=\"getValue(row, header.propertyName)\"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
|
|
16448
|
+
args: [{ selector: 'lib-mobile-table', imports: [NgClass, NgStyle, MatCheckbox, SmartIconComponent, SmartTooltipDirective, MatTooltip, MatIconButton, MatButton, UiActionToolbarComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<div class=\"mobileTable\">\n @for (row of smartTable.tableRows; track trackRow($index, row)) {\n <div\n class=\"mobileTableRow\"\n [ngClass]=\"getRowClasses(row)\"\n [ngStyle]=\"getRowStyles(row)\"\n [attr.data-testid]=\"row?.id ?? null\"\n >\n @if (showRowStateColumn) {\n <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n @if (rowStateIcon(row); as icon) {\n <smart-icon\n class=\"sm-grid-row-state-icon\"\n [ngClass]=\"rowStateIconClass(row) ?? ''\"\n [icon]=\"icon\"\n color=\"\"\n role=\"img\"\n [attr.aria-label]=\"rowStateLabel(row)\"\n [matTooltip]=\"rowStateLabel(row) ?? ''\"\n ></smart-icon>\n }\n </div>\n }\n @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n <div\n class=\"mobileTableCell\"\n (click)=\"handleOnRowClick($event, row)\"\n (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n >\n <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n {{ header.label }}\n </div>\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].propertyName === 'select'\n ) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"\n $event\n ? setSelection(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n : row\n )\n : null\n \"\n [disabled]=\"isDisabled(row)\"\n [checked]=\"\n smartTable.selection!.isSelected(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n : row\n )\n \"\n [aria-label]=\"\n checkboxLabel(\n smartTable.selectionProperty\n ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n : row\n )\n \"\n >\n </mat-checkbox>\n }\n @if (\n smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n !columnTemplate(i)\n ) {\n <div\n >\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(row, header.propertyName)\n | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(row, header.propertyName)\n | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n <div class=\"smart-table-cell-text\">\n {{\n getValue(row, header.propertyName)\n | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n }}\n </div>\n }\n @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n <div>\n <mat-checkbox\n [disabled]=\"true\"\n [checked]=\"getValue(row, header.propertyName)\"\n ></mat-checkbox>\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n smartTable.customSmartTableHeaders[i].properties?.icons?.length\n ) {\n <div\n >\n <smart-icon\n [smartTooltip]=\"getToolTip(row, i)\"\n [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n [color]=\"getColor(getValue(row, header.propertyName), i)\"\n >\n </smart-icon>\n </div>\n }\n </div>\n }\n @if (isImageResource(row, header.propertyName)) {\n <div>\n <smart-icon\n [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n [color]=\"getImageResourceColor(row, header.propertyName)\"\n >\n </smart-icon>\n </div>\n }\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n <div\n class=\"smart-table-buttons-col\"\n >\n @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n <div>\n @if (showButton(button, row)) {\n <div>\n @switch (button.type) {\n @case (smartTableButtonType.ICON) {\n <button\n (click)=\"customButtonClicked($event, button, row)\"\n mat-icon-button\n color=\"{{ button.color }}\"\n >\n <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n </button>\n }\n @case (smartTableButtonType.NORMAL) {\n <button\n (click)=\"customButtonClicked($event, button, row)\"\n mat-button\n color=\"{{ button.color }}\"\n >\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label }}\n </button>\n }\n @case (smartTableButtonType.RAISED) {\n <button\n (click)=\"customButtonClicked($event, button, row)\"\n mat-raised-button\n color=\"{{ button.color }}\"\n >\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label }}\n </button>\n }\n <!------ MENU ------>\n @case (smartTableButtonType.MENU) {\n <div class=\"menu-button\">\n <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n <smart-ui-action-toolbar\n [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n [widgetId]=\"smartTable.getGridId()\"\n [nodeId]=\"element.id\"\n [actionParams]=\"{ model: element }\"\n (actionFired)=\"onRowActionFired(element, $event)\"\n ></smart-ui-action-toolbar>\n <!------ GENERIC HAMBURGER ------>\n @if (shouldShowMenuButton(element)) {\n <smart-ui-action-toolbar\n [uiActionModels]=\"getMenuActions(element)\"\n [widgetId]=\"smartTable.getGridId()\"\n [nodeId]=\"element.id\"\n [actionParams]=\"{ model: element }\"\n (actionFired)=\"onRowActionFired(element, $event)\"\n ></smart-ui-action-toolbar>\n }\n <!------ MENU ------>\n </div>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n }\n @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n <div>\n @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n <smart-icon\n [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n >\n </smart-icon>\n }\n </div>\n }\n @if (\n smartTable.customSmartTableHeaders &&\n smartTable.customSmartTableHeaders[i].translator !== undefined\n ) {\n <div\n class=\"smart-table-cell-text\"\n >\n {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n </div>\n }\n @if (\n !smartTable.customSmartTableHeaders ||\n (smartTable.customSmartTableHeaders &&\n (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n !smartTable.customSmartTableHeaders[i].icon &&\n !smartTable.customSmartTableHeaders[i].buttons &&\n !smartTable.customSmartTableHeaders[i].translator &&\n !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n ) {\n <div\n >\n @if (header.propertyName === 'icon') {\n <smart-icon\n [icon]=\"getValue(row, header.propertyName)!\"\n >\n </smart-icon>\n }\n @if (header.propertyName === 'img') {\n <img\n [src]=\"getValue(row, header.propertyName)\"\n alt=\"\"\n class=\"smarttableImg\"\n />\n }\n @if (\n header.propertyName !== 'icon' &&\n header.propertyName !== 'img' &&\n header.propertyName !== 'option' &&\n header.propertyName !== 'button'\n ) {\n @if (columnTemplate(i); as template) {\n <smart-html-cell\n [row]=\"row\"\n [template]=\"template\"\n [gridIdentifier]=\"smartTable.getGridId()\"\n ></smart-html-cell>\n } @else if (isTextContent(i)) {\n <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n } @else {\n <div\n class=\"smart-table-cell-text\"\n [innerHtml]=\"getValue(row, header.propertyName)\"\n ></div>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
|
|
16405
16449
|
}] });
|
|
16406
16450
|
|
|
16407
16451
|
class SmarttableComponent {
|
|
@@ -16479,11 +16523,11 @@ class SmarttableComponent {
|
|
|
16479
16523
|
this.componentRefTable?.instance.toggleAllRows();
|
|
16480
16524
|
}
|
|
16481
16525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmarttableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SmarttableComponent, isStandalone: true, selector: "smarttable", inputs: { maxWidthForMobile: "maxWidthForMobile", smartTable: "smartTable" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template #table></ng-template>\
|
|
16526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SmarttableComponent, isStandalone: true, selector: "smarttable", inputs: { maxWidthForMobile: "maxWidthForMobile", smartTable: "smartTable" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template #table></ng-template>\n", styles: [""] }); }
|
|
16483
16527
|
}
|
|
16484
16528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmarttableComponent, decorators: [{
|
|
16485
16529
|
type: Component,
|
|
16486
|
-
args: [{ selector: 'smarttable', imports: [], template: "<ng-template #table></ng-template>\
|
|
16530
|
+
args: [{ selector: 'smarttable', imports: [], template: "<ng-template #table></ng-template>\n" }]
|
|
16487
16531
|
}], propDecorators: { maxWidthForMobile: [{
|
|
16488
16532
|
type: Input
|
|
16489
16533
|
}], onResize: [{
|
|
@@ -16523,11 +16567,11 @@ class SmartDialog {
|
|
|
16523
16567
|
this.dialogRef.close();
|
|
16524
16568
|
}
|
|
16525
16569
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16526
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartDialog, isStandalone: true, selector: "smartdialog", viewQueries: [{ propertyName: "smartFormComponent", first: true, predicate: SmartformComponent, descendants: true }, { propertyName: "vcRef", first: true, predicate: ["renderComponentHere"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\
|
|
16570
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartDialog, isStandalone: true, selector: "smartdialog", viewQueries: [{ propertyName: "smartFormComponent", first: true, predicate: SmartformComponent, descendants: true }, { propertyName: "vcRef", first: true, predicate: ["renderComponentHere"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\n class=\"dialog-container\"\n [ngClass]=\"data.size.fullScreen ? 'fullScreen' : ''\"\n [ngStyle]=\"{ width: data.size.width + 'px', height: data.size.height + 'px' }\"\n>\n <div class=\"dialog-title-container\" mat-dialog-title>\n <h1 class=\"dialog-title\">\n {{ data.content.title }}\n </h1>\n <button mat-icon-button [mat-dialog-close]=\"\" fontSet=\"material-symbols-outlined\">\n <smart-icon aria-hidden=\"false\" aria-label=\"Close\" [icon]=\"'close'\"></smart-icon>\n </button>\n </div>\n @if (!data.customComponent) {\n <div mat-dialog-content class=\"content\">\n <p>\n {{ data.content.description }}\n </p>\n @if (data.form) {\n <smartform [smartForm]=\"data.form!\"></smartform>\n }\n @if (data.table) {\n <smarttable [smartTable]=\"data.table!\"></smarttable>\n }\n </div>\n }\n @if (!data.customComponent) {\n <div class=\"action-container\" mat-dialog-actions>\n @if (data.actionCallback) {\n <button class=\"action-button\" mat-raised-button (click)=\"onActionClick()\">\n {{ data.actionLabel }}\n </button>\n }\n </div>\n }\n <mat-dialog-content>\n <ng-template #renderComponentHere></ng-template>\n </mat-dialog-content>\n @if (data.customComponent) {\n <div></div>\n }\n</div>\n", styles: [".dialog-container{position:relative}.dialog-title-container{display:flex;flex-direction:row;width:100%}.dialog-title-container button{text-align:right!important}.dialog-title{flex:20}.action-container{position:absolute;bottom:0;width:100%;display:flex;flex-direction:row}.action-button{flex:1;max-width:200px;margin-left:auto;margin-right:auto}.content{height:calc(100% - 116px)}.fullScreen{width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmarttableComponent, selector: "smarttable", inputs: ["maxWidthForMobile", "smartTable"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] }); }
|
|
16527
16571
|
}
|
|
16528
16572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartDialog, decorators: [{
|
|
16529
16573
|
type: Component,
|
|
16530
|
-
args: [{ selector: 'smartdialog', imports: [NgClass, NgStyle, MatDialogTitle, MatDialogClose, SmartIconComponent, CdkScrollable, MatDialogContent, SmartformComponent, SmarttableComponent, MatDialogActions], template: "<div\
|
|
16574
|
+
args: [{ selector: 'smartdialog', imports: [NgClass, NgStyle, MatDialogTitle, MatDialogClose, SmartIconComponent, CdkScrollable, MatDialogContent, SmartformComponent, SmarttableComponent, MatDialogActions], template: "<div\n class=\"dialog-container\"\n [ngClass]=\"data.size.fullScreen ? 'fullScreen' : ''\"\n [ngStyle]=\"{ width: data.size.width + 'px', height: data.size.height + 'px' }\"\n>\n <div class=\"dialog-title-container\" mat-dialog-title>\n <h1 class=\"dialog-title\">\n {{ data.content.title }}\n </h1>\n <button mat-icon-button [mat-dialog-close]=\"\" fontSet=\"material-symbols-outlined\">\n <smart-icon aria-hidden=\"false\" aria-label=\"Close\" [icon]=\"'close'\"></smart-icon>\n </button>\n </div>\n @if (!data.customComponent) {\n <div mat-dialog-content class=\"content\">\n <p>\n {{ data.content.description }}\n </p>\n @if (data.form) {\n <smartform [smartForm]=\"data.form!\"></smartform>\n }\n @if (data.table) {\n <smarttable [smartTable]=\"data.table!\"></smarttable>\n }\n </div>\n }\n @if (!data.customComponent) {\n <div class=\"action-container\" mat-dialog-actions>\n @if (data.actionCallback) {\n <button class=\"action-button\" mat-raised-button (click)=\"onActionClick()\">\n {{ data.actionLabel }}\n </button>\n }\n </div>\n }\n <mat-dialog-content>\n <ng-template #renderComponentHere></ng-template>\n </mat-dialog-content>\n @if (data.customComponent) {\n <div></div>\n }\n</div>\n", styles: [".dialog-container{position:relative}.dialog-title-container{display:flex;flex-direction:row;width:100%}.dialog-title-container button{text-align:right!important}.dialog-title{flex:20}.action-container{position:absolute;bottom:0;width:100%;display:flex;flex-direction:row}.action-button{flex:1;max-width:200px;margin-left:auto;margin-right:auto}.content{height:calc(100% - 116px)}.fullScreen{width:100%}\n"] }]
|
|
16531
16575
|
}], propDecorators: { smartFormComponent: [{
|
|
16532
16576
|
type: ViewChild,
|
|
16533
16577
|
args: [SmartformComponent]
|
|
@@ -16574,11 +16618,11 @@ class SmartViewContextErrorDialogComponent {
|
|
|
16574
16618
|
this.service.closeDialog();
|
|
16575
16619
|
}
|
|
16576
16620
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartViewContextErrorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16577
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartViewContextErrorDialogComponent, isStandalone: true, selector: "lib-smart-view-context-error-dialog", ngImport: i0, template: "@if (smartViewContextApiError) {\
|
|
16621
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartViewContextErrorDialogComponent, isStandalone: true, selector: "lib-smart-view-context-error-dialog", ngImport: i0, template: "@if (smartViewContextApiError) {\n <div class=\"dialog-container error-dialog\">\n <div class=\"dialog-header\">\n <h2 class=\"dialog-title\">{{ smartViewContextApiError.dialogTitle }}</h2>\n </div>\n\n <mat-dialog-content class=\"dialog-content\">\n <p>{{ smartViewContextApiError.message }}</p>\n </mat-dialog-content>\n\n <div class=\"dialog-footer\">\n <ui-action-button [descriptor]=\"buttonDescriptor\" (actionClick)=\"onActionClick()\">\n </ui-action-button>\n </div>\n </div>\n}", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".error-dialog{--sb4-dialog-default-min-width: 25vw;--sb4-dialog-default-max-width: 75vw}.error-dialog .dialog-footer{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
|
|
16578
16622
|
}
|
|
16579
16623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartViewContextErrorDialogComponent, decorators: [{
|
|
16580
16624
|
type: Component,
|
|
16581
|
-
args: [{ selector: 'lib-smart-view-context-error-dialog', imports: [UiActionButtonComponent, MatDialogContent], template: "@if (smartViewContextApiError) {\
|
|
16625
|
+
args: [{ selector: 'lib-smart-view-context-error-dialog', imports: [UiActionButtonComponent, MatDialogContent], template: "@if (smartViewContextApiError) {\n <div class=\"dialog-container error-dialog\">\n <div class=\"dialog-header\">\n <h2 class=\"dialog-title\">{{ smartViewContextApiError.dialogTitle }}</h2>\n </div>\n\n <mat-dialog-content class=\"dialog-content\">\n <p>{{ smartViewContextApiError.message }}</p>\n </mat-dialog-content>\n\n <div class=\"dialog-footer\">\n <ui-action-button [descriptor]=\"buttonDescriptor\" (actionClick)=\"onActionClick()\">\n </ui-action-button>\n </div>\n </div>\n}", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".error-dialog{--sb4-dialog-default-min-width: 25vw;--sb4-dialog-default-max-width: 75vw}.error-dialog .dialog-footer{display:flex;justify-content:flex-end}\n"] }]
|
|
16582
16626
|
}], ctorParameters: () => [] });
|
|
16583
16627
|
|
|
16584
16628
|
class SmartViewContextErrorDialogService extends SmartdialogService {
|
|
@@ -18165,11 +18209,11 @@ class SmartTreeComponent {
|
|
|
18165
18209
|
return `${cssClass}-${plusProperty}`;
|
|
18166
18210
|
}
|
|
18167
18211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartTreeComponent, isStandalone: true, selector: "smart-tree", inputs: { treeStyle: { classPropertyName: "treeStyle", publicName: "treeStyle", isSignal: true, isRequired: false, transformFunction: null }, treeService: { classPropertyName: "treeService", publicName: "treeService", isSignal: true, isRequired: true, transformFunction: null } }, 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 @if (uiActionModels.length) {\r\n <smart-ui-action-toolbar\r\n [uiActionModels]=\"uiActionModels\"\r\n [executor]=\"executor\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (treeData) {\r\n <mat-tree\r\n #tree\r\n [dataSource]=\"dataSource\"\r\n [treeControl]=\"treeControl\"\r\n [trackBy]=\"trackByIdentifier\"\r\n class=\"sm-tree\"\r\n >\r\n <mat-nested-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodeToggle\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\r\n fontSet=\"material-symbols-outlined\"\r\n class=\"mat-icon-rtl-mirror\"\r\n (click)=\"onOpenNode($event, node)\"\r\n >\r\n @if (hasChild(node.level, node)) {\r\n <div>\r\n {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </div>\r\n }\r\n </mat-icon>\r\n </button>\r\n @if (node.tooltip) {\r\n <smart-icon\r\n [icon]=\"node.icon\"\r\n [smartTooltip]=\"createTooltip(node.tooltip)\"\r\n smartTooltipClass=\"sm-tree-tooltip\"\r\n ></smart-icon>\r\n } @else {\r\n <smart-icon [icon]=\"node.icon\"></smart-icon>\r\n }\r\n <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n @let captionTooltipText = getCaptionTooltipText(node);\r\n @if (captionTooltipText) {\r\n <div\r\n class=\"sm-tree-row-caption\"\r\n [smartTooltip]=\"createTooltip(captionTooltipText)\"\r\n smartTooltipClass=\"sm-tree-tooltip\"\r\n >\r\n {{ node.caption }}\r\n </div>\r\n } @else {\r\n <div class=\"sm-tree-row-caption\">{{ node.caption }}</div>\r\n }\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 @if (node.button) {\r\n <div class=\"sm-tree-node-button\">\r\n @switch (node.button.type) {\r\n @case (smartTreeNodeButtonType.ICON) {\r\n <button (click)=\"customButtonClicked($event, node.button)\" mat-icon-button>\r\n <smart-icon\r\n title=\"{{ node.button.icon }}\"\r\n [icon]=\"node.button.icon\"\r\n ></smart-icon>\r\n </button>\r\n }\r\n @case (smartTreeNodeButtonType.MENU) {\r\n <div>\r\n <button\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"customButtonClicked($event, node.button, true)\"\r\n >\r\n @if (node.button.icon) {\r\n <smart-icon [icon]=\"node.button.icon\"></smart-icon>\r\n }\r\n {{ node.button.label }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (button of node.button.menuItemButtons; track button.code ?? $index) {\r\n <button\r\n (click)=\"customButtonClicked($event, button, true)\"\r\n mat-menu-item\r\n [attr.data-testid]=\"button.code ?? null\"\r\n >\r\n @if (button.icon) {\r\n <smart-icon [icon]=\"button.icon\"></smart-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n @case (smartTreeNodeButtonType.NORMAL) {\r\n <button (click)=\"customButtonClicked($event, node.button)\" mat-raised-button>\r\n @if (node.button.icon) {\r\n <smart-icon [icon]=\"node.button.icon\"></smart-icon>\r\n }\r\n {{ node.button.icon }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\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 }\r\n @if (!treeData) {\r\n <div class=\"tree-loading\">\r\n <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\r\n </div>\r\n }\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}.sm-tree-node-selected{background-color:var(--tree-active-background, var(--accent-color, #20b6a8));color:var(--tree-active-color, #ffffff)}::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}.sm-tree-row.sm-tree-branch-new,.sm-tree-row.sm-tree-branch-new *{color:var(--success-color, #16a34a)}.sm-tree-row.sm-tree-branch-new .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-modified,.sm-tree-row.sm-tree-branch-modified *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-modified .sm-tree-row-caption{font-weight:600}.sm-tree-row.sm-tree-branch-deleted,.sm-tree-row.sm-tree-branch-deleted *{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-branch-deleted .sm-tree-row-caption{text-decoration:line-through}.sm-tree-row.sm-tree-branch-contains-change,.sm-tree-row.sm-tree-branch-contains-change *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-foreign,.sm-tree-row.sm-tree-branch-own-other-view-context{border-left:3px solid;padding-left:6px}.sm-tree-row.sm-tree-branch-foreign{border-left-color:var(--warning-color, #d97706)}.sm-tree-row.sm-tree-branch-own-other-view-context{border-left-color:var(--info-color, #64748b)}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-caption,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-shortDescription,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-shortDescription{display:none}::ng-deep .sm-tree-tooltip .mdc-tooltip__surface{white-space:pre-line}.sm-tree-node-selected .sm-tree-row,.sm-tree-node-selected .sm-tree-row-caption,.sm-tree-node-selected .sm-tree-row-shortDescription{color:inherit}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }] }); }
|
|
18212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartTreeComponent, isStandalone: true, selector: "smart-tree", inputs: { treeStyle: { classPropertyName: "treeStyle", publicName: "treeStyle", isSignal: true, isRequired: false, transformFunction: null }, treeService: { classPropertyName: "treeService", publicName: "treeService", isSignal: true, isRequired: true, transformFunction: null } }, 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\">\n @if (uiActionModels.length) {\n <smart-ui-action-toolbar\n [uiActionModels]=\"uiActionModels\"\n [executor]=\"executor\"\n ></smart-ui-action-toolbar>\n }\n @if (treeData) {\n <mat-tree\n #tree\n [dataSource]=\"dataSource\"\n [treeControl]=\"treeControl\"\n [trackBy]=\"trackByIdentifier\"\n class=\"sm-tree\"\n >\n <mat-nested-tree-node\n *matTreeNodeDef=\"let node; when: hasChild\"\n matTreeNodeToggle\n [ngClass]=\"getClassesForTreeNode(node)\"\n [ngStyle]=\"getNodeStyle(node)\"\n >\n <div\n [ngStyle]=\"getNodePadding(node)\"\n [ngClass]=\"getInnerClassesForTreeNode(node)\"\n class=\"mat-tree-node sm-tree-node\"\n (click)=\"onNodeClick($event, node)\"\n >\n <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\n <mat-icon\n fontSet=\"material-symbols-outlined\"\n class=\"mat-icon-rtl-mirror\"\n (click)=\"onOpenNode($event, node)\"\n >\n @if (hasChild(node.level, node)) {\n <div>\n {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n </div>\n }\n </mat-icon>\n </button>\n @if (node.tooltip) {\n <smart-icon\n [icon]=\"node.icon\"\n [smartTooltip]=\"createTooltip(node.tooltip)\"\n smartTooltipClass=\"sm-tree-tooltip\"\n ></smart-icon>\n } @else {\n <smart-icon [icon]=\"node.icon\"></smart-icon>\n }\n <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\n @let captionTooltipText = getCaptionTooltipText(node);\n @if (captionTooltipText) {\n <div\n class=\"sm-tree-row-caption\"\n [smartTooltip]=\"createTooltip(captionTooltipText)\"\n smartTooltipClass=\"sm-tree-tooltip\"\n >\n {{ node.caption }}\n </div>\n } @else {\n <div class=\"sm-tree-row-caption\">{{ node.caption }}</div>\n }\n <div class=\"sm-shortDescription-spacer\"></div>\n <div class=\"sm-tree-row-shortDescription\">\n {{ node.shortDescription }}\n </div>\n <div class=\"sm-shortDescription-button-spacer\"></div>\n @if (node.button) {\n <div class=\"sm-tree-node-button\">\n @switch (node.button.type) {\n @case (smartTreeNodeButtonType.ICON) {\n <button (click)=\"customButtonClicked($event, node.button)\" mat-icon-button>\n <smart-icon\n title=\"{{ node.button.icon }}\"\n [icon]=\"node.button.icon\"\n ></smart-icon>\n </button>\n }\n @case (smartTreeNodeButtonType.MENU) {\n <div>\n <button\n mat-button\n [matMenuTriggerFor]=\"menu\"\n (click)=\"customButtonClicked($event, node.button, true)\"\n >\n @if (node.button.icon) {\n <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n }\n {{ node.button.label }}\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (button of node.button.menuItemButtons; track button.code ?? $index) {\n <button\n (click)=\"customButtonClicked($event, button, true)\"\n mat-menu-item\n [attr.data-testid]=\"button.code ?? null\"\n >\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label }}\n </button>\n }\n </mat-menu>\n </div>\n }\n @case (smartTreeNodeButtonType.NORMAL) {\n <button (click)=\"customButtonClicked($event, node.button)\" mat-raised-button>\n @if (node.button.icon) {\n <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n }\n {{ node.button.icon }}\n </button>\n }\n }\n </div>\n }\n </div>\n </div>\n <div\n [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\n [ngClass]=\"getClassesForTreeNodeChildren(node)\"\n role=\"group\"\n >\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\n </mat-nested-tree-node>\n </mat-tree>\n }\n @if (!treeData) {\n <div class=\"tree-loading\">\n <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\n </div>\n }\n</div>\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}.sm-tree-node-selected{background-color:var(--tree-active-background, var(--accent-color, #20b6a8));color:var(--tree-active-color, #ffffff)}::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}.sm-tree-row.sm-tree-branch-new,.sm-tree-row.sm-tree-branch-new *{color:var(--success-color, #16a34a)}.sm-tree-row.sm-tree-branch-new .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-modified,.sm-tree-row.sm-tree-branch-modified *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-modified .sm-tree-row-caption{font-weight:600}.sm-tree-row.sm-tree-branch-deleted,.sm-tree-row.sm-tree-branch-deleted *{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-branch-deleted .sm-tree-row-caption{text-decoration:line-through}.sm-tree-row.sm-tree-branch-contains-change,.sm-tree-row.sm-tree-branch-contains-change *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-foreign,.sm-tree-row.sm-tree-branch-own-other-view-context{border-left:3px solid;padding-left:6px}.sm-tree-row.sm-tree-branch-foreign{border-left-color:var(--warning-color, #d97706)}.sm-tree-row.sm-tree-branch-own-other-view-context{border-left-color:var(--info-color, #64748b)}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-caption,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-shortDescription,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-shortDescription{display:none}::ng-deep .sm-tree-tooltip .mdc-tooltip__surface{white-space:pre-line}.sm-tree-node-selected .sm-tree-row,.sm-tree-node-selected .sm-tree-row-caption,.sm-tree-node-selected .sm-tree-row-shortDescription{color:inherit}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }] }); }
|
|
18169
18213
|
}
|
|
18170
18214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartTreeComponent, decorators: [{
|
|
18171
18215
|
type: Component,
|
|
18172
|
-
args: [{ selector: 'smart-tree', imports: [UiActionToolbarComponent, MatTree, MatTreeNodeDef, MatNestedTreeNode, MatTreeNodeToggle, NgClass, NgStyle, MatIconButton, MatIcon, SmartIconComponent, MatButton, MatMenuTrigger, MatMenu, MatMenuItem, MatTreeNodeOutlet, MatProgressSpinner, SmartTooltipDirective], template: "<div class=\"smartTreeContainer\">\
|
|
18216
|
+
args: [{ selector: 'smart-tree', imports: [UiActionToolbarComponent, MatTree, MatTreeNodeDef, MatNestedTreeNode, MatTreeNodeToggle, NgClass, NgStyle, MatIconButton, MatIcon, SmartIconComponent, MatButton, MatMenuTrigger, MatMenu, MatMenuItem, MatTreeNodeOutlet, MatProgressSpinner, SmartTooltipDirective], template: "<div class=\"smartTreeContainer\">\n @if (uiActionModels.length) {\n <smart-ui-action-toolbar\n [uiActionModels]=\"uiActionModels\"\n [executor]=\"executor\"\n ></smart-ui-action-toolbar>\n }\n @if (treeData) {\n <mat-tree\n #tree\n [dataSource]=\"dataSource\"\n [treeControl]=\"treeControl\"\n [trackBy]=\"trackByIdentifier\"\n class=\"sm-tree\"\n >\n <mat-nested-tree-node\n *matTreeNodeDef=\"let node; when: hasChild\"\n matTreeNodeToggle\n [ngClass]=\"getClassesForTreeNode(node)\"\n [ngStyle]=\"getNodeStyle(node)\"\n >\n <div\n [ngStyle]=\"getNodePadding(node)\"\n [ngClass]=\"getInnerClassesForTreeNode(node)\"\n class=\"mat-tree-node sm-tree-node\"\n (click)=\"onNodeClick($event, node)\"\n >\n <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\n <mat-icon\n fontSet=\"material-symbols-outlined\"\n class=\"mat-icon-rtl-mirror\"\n (click)=\"onOpenNode($event, node)\"\n >\n @if (hasChild(node.level, node)) {\n <div>\n {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n </div>\n }\n </mat-icon>\n </button>\n @if (node.tooltip) {\n <smart-icon\n [icon]=\"node.icon\"\n [smartTooltip]=\"createTooltip(node.tooltip)\"\n smartTooltipClass=\"sm-tree-tooltip\"\n ></smart-icon>\n } @else {\n <smart-icon [icon]=\"node.icon\"></smart-icon>\n }\n <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\n @let captionTooltipText = getCaptionTooltipText(node);\n @if (captionTooltipText) {\n <div\n class=\"sm-tree-row-caption\"\n [smartTooltip]=\"createTooltip(captionTooltipText)\"\n smartTooltipClass=\"sm-tree-tooltip\"\n >\n {{ node.caption }}\n </div>\n } @else {\n <div class=\"sm-tree-row-caption\">{{ node.caption }}</div>\n }\n <div class=\"sm-shortDescription-spacer\"></div>\n <div class=\"sm-tree-row-shortDescription\">\n {{ node.shortDescription }}\n </div>\n <div class=\"sm-shortDescription-button-spacer\"></div>\n @if (node.button) {\n <div class=\"sm-tree-node-button\">\n @switch (node.button.type) {\n @case (smartTreeNodeButtonType.ICON) {\n <button (click)=\"customButtonClicked($event, node.button)\" mat-icon-button>\n <smart-icon\n title=\"{{ node.button.icon }}\"\n [icon]=\"node.button.icon\"\n ></smart-icon>\n </button>\n }\n @case (smartTreeNodeButtonType.MENU) {\n <div>\n <button\n mat-button\n [matMenuTriggerFor]=\"menu\"\n (click)=\"customButtonClicked($event, node.button, true)\"\n >\n @if (node.button.icon) {\n <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n }\n {{ node.button.label }}\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (button of node.button.menuItemButtons; track button.code ?? $index) {\n <button\n (click)=\"customButtonClicked($event, button, true)\"\n mat-menu-item\n [attr.data-testid]=\"button.code ?? null\"\n >\n @if (button.icon) {\n <smart-icon [icon]=\"button.icon\"></smart-icon>\n }\n {{ button.label }}\n </button>\n }\n </mat-menu>\n </div>\n }\n @case (smartTreeNodeButtonType.NORMAL) {\n <button (click)=\"customButtonClicked($event, node.button)\" mat-raised-button>\n @if (node.button.icon) {\n <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n }\n {{ node.button.icon }}\n </button>\n }\n }\n </div>\n }\n </div>\n </div>\n <div\n [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\n [ngClass]=\"getClassesForTreeNodeChildren(node)\"\n role=\"group\"\n >\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\n </mat-nested-tree-node>\n </mat-tree>\n }\n @if (!treeData) {\n <div class=\"tree-loading\">\n <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\n </div>\n }\n</div>\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}.sm-tree-node-selected{background-color:var(--tree-active-background, var(--accent-color, #20b6a8));color:var(--tree-active-color, #ffffff)}::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}.sm-tree-row.sm-tree-branch-new,.sm-tree-row.sm-tree-branch-new *{color:var(--success-color, #16a34a)}.sm-tree-row.sm-tree-branch-new .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-modified,.sm-tree-row.sm-tree-branch-modified *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-modified .sm-tree-row-caption{font-weight:600}.sm-tree-row.sm-tree-branch-deleted,.sm-tree-row.sm-tree-branch-deleted *{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-branch-deleted .sm-tree-row-caption{text-decoration:line-through}.sm-tree-row.sm-tree-branch-contains-change,.sm-tree-row.sm-tree-branch-contains-change *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-foreign,.sm-tree-row.sm-tree-branch-own-other-view-context{border-left:3px solid;padding-left:6px}.sm-tree-row.sm-tree-branch-foreign{border-left-color:var(--warning-color, #d97706)}.sm-tree-row.sm-tree-branch-own-other-view-context{border-left-color:var(--info-color, #64748b)}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-caption,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-shortDescription,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-shortDescription{display:none}::ng-deep .sm-tree-tooltip .mdc-tooltip__surface{white-space:pre-line}.sm-tree-node-selected .sm-tree-row,.sm-tree-node-selected .sm-tree-row-caption,.sm-tree-node-selected .sm-tree-row-shortDescription{color:inherit}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"] }]
|
|
18173
18217
|
}], ctorParameters: () => [], propDecorators: { trigger: [{
|
|
18174
18218
|
type: ViewChildren,
|
|
18175
18219
|
args: [MatMenuTrigger]
|
|
@@ -21634,11 +21678,11 @@ class TableLayoutDefinerComponent {
|
|
|
21634
21678
|
return true;
|
|
21635
21679
|
}
|
|
21636
21680
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TableLayoutDefinerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21637
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TableLayoutDefinerComponent, isStandalone: true, selector: "app-table-layout-definer", viewQueries: [{ propertyName: "formChildren", predicate: ["forms"], descendants: true }], ngImport: i0, template: "<div class=\"edit-columns-container\">\
|
|
21681
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TableLayoutDefinerComponent, isStandalone: true, selector: "app-table-layout-definer", viewQueries: [{ propertyName: "formChildren", predicate: ["forms"], descendants: true }], ngImport: i0, template: "<div class=\"edit-columns-container\">\n <div class=\"example-list\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n @for (col of forms; track col) {\n <div class=\"column-meta-row\" cdkDrag cdkDragLockAxis=\"y\">\n <smart-icon color=\"primary\" icon=\"drag_handle\"></smart-icon>\n <smartform class=\"form\" #forms [smartForm]=\"col\"></smartform>\n @if (isAlwaysShow(col) && (view?.orderedColumnNames)!.length > 1) {\n <button (click)=\"removeColumn(col)\" mat-icon-button color=\"primary\">\n <mat-icon fontSet=\"material-symbols-outlined\">delete_outline</mat-icon>\n </button>\n }\n </div>\n }\n </div>\n @if (showAddBtn) {\n <div class=\"add-btn\">\n <button mat-icon-button color=\"primary\" (click)=\"addColumn()\">\n <mat-icon fontSet=\"material-symbols-outlined\">add</mat-icon>\n </button>\n </div>\n }\n <div class=\"button-toolbar\">\n <button mat-button color=\"primary\" (click)=\"cancel()\"> M\u00E9gsem </button>\n <button mat-raised-button color=\"primary\" [disabled]=\"disableSave\" (click)=\"submit()\">\n Ment\u00E9s\n </button>\n </div>\n</div>\n", styles: [".edit-columns-container{padding:1rem;display:flex;flex-direction:column;gap:1rem}.row{display:flex;flex-direction:row;gap:.5rem}.form{flex:1}.fields{padding:1rem 0;display:flex;flex-direction:column;gap:.5rem}.example-list{display:flex;flex-direction:column;gap:1rem;width:500px;max-width:100%;max-height:80vh;overflow:auto}.column-meta-row{display:flex;flex-direction:row;gap:1rem;justify-content:space-between;border:solid 1px var(--color-border, #ccc);padding:1rem}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}h2{margin:0}.button-toolbar{display:flex;flex-direction:row;justify-content:space-between;padding:.5rem}.add-btn{display:flex;flex-direction:column;align-items:center}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
21638
21682
|
}
|
|
21639
21683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TableLayoutDefinerComponent, decorators: [{
|
|
21640
21684
|
type: Component,
|
|
21641
|
-
args: [{ selector: 'app-table-layout-definer', imports: [CdkDropList, CdkDrag, SmartIconComponent, SmartformComponent, MatIconButton, MatIcon, MatButton], template: "<div class=\"edit-columns-container\">\
|
|
21685
|
+
args: [{ selector: 'app-table-layout-definer', imports: [CdkDropList, CdkDrag, SmartIconComponent, SmartformComponent, MatIconButton, MatIcon, MatButton], template: "<div class=\"edit-columns-container\">\n <div class=\"example-list\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n @for (col of forms; track col) {\n <div class=\"column-meta-row\" cdkDrag cdkDragLockAxis=\"y\">\n <smart-icon color=\"primary\" icon=\"drag_handle\"></smart-icon>\n <smartform class=\"form\" #forms [smartForm]=\"col\"></smartform>\n @if (isAlwaysShow(col) && (view?.orderedColumnNames)!.length > 1) {\n <button (click)=\"removeColumn(col)\" mat-icon-button color=\"primary\">\n <mat-icon fontSet=\"material-symbols-outlined\">delete_outline</mat-icon>\n </button>\n }\n </div>\n }\n </div>\n @if (showAddBtn) {\n <div class=\"add-btn\">\n <button mat-icon-button color=\"primary\" (click)=\"addColumn()\">\n <mat-icon fontSet=\"material-symbols-outlined\">add</mat-icon>\n </button>\n </div>\n }\n <div class=\"button-toolbar\">\n <button mat-button color=\"primary\" (click)=\"cancel()\"> M\u00E9gsem </button>\n <button mat-raised-button color=\"primary\" [disabled]=\"disableSave\" (click)=\"submit()\">\n Ment\u00E9s\n </button>\n </div>\n</div>\n", styles: [".edit-columns-container{padding:1rem;display:flex;flex-direction:column;gap:1rem}.row{display:flex;flex-direction:row;gap:.5rem}.form{flex:1}.fields{padding:1rem 0;display:flex;flex-direction:column;gap:.5rem}.example-list{display:flex;flex-direction:column;gap:1rem;width:500px;max-width:100%;max-height:80vh;overflow:auto}.column-meta-row{display:flex;flex-direction:row;gap:1rem;justify-content:space-between;border:solid 1px var(--color-border, #ccc);padding:1rem}.buttonsContainer{display:flex;flex-direction:row;justify-content:space-between}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}h2{margin:0}.button-toolbar{display:flex;flex-direction:row;justify-content:space-between;padding:.5rem}.add-btn{display:flex;flex-direction:column;align-items:center}\n"] }]
|
|
21642
21686
|
}], ctorParameters: () => [], propDecorators: { formChildren: [{
|
|
21643
21687
|
type: ViewChildren,
|
|
21644
21688
|
args: ['forms']
|
|
@@ -21781,11 +21825,11 @@ class ExpandedRowRendererComponent {
|
|
|
21781
21825
|
this.componentRef.setInput('smartGrid', this.smartGrid());
|
|
21782
21826
|
}
|
|
21783
21827
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpandedRowRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21784
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: ExpandedRowRendererComponent, isStandalone: true, selector: "lib-expanded-row-renderer-component", inputs: { rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: true, transformFunction: null }, rowExpander: { classPropertyName: "rowExpander", publicName: "rowExpander", isSignal: true, isRequired: true, transformFunction: null }, expandedComponent: { classPropertyName: "expandedComponent", publicName: "expandedComponent", isSignal: true, isRequired: false, transformFunction: null }, smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-template #component></ng-template>\
|
|
21828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: ExpandedRowRendererComponent, isStandalone: true, selector: "lib-expanded-row-renderer-component", inputs: { rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: true, transformFunction: null }, rowExpander: { classPropertyName: "rowExpander", publicName: "rowExpander", isSignal: true, isRequired: true, transformFunction: null }, expandedComponent: { classPropertyName: "expandedComponent", publicName: "expandedComponent", isSignal: true, isRequired: false, transformFunction: null }, smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-template #component></ng-template>\n", styles: [""] }); }
|
|
21785
21829
|
}
|
|
21786
21830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpandedRowRendererComponent, decorators: [{
|
|
21787
21831
|
type: Component,
|
|
21788
|
-
args: [{ selector: 'lib-expanded-row-renderer-component', template: "<ng-template #component></ng-template>\
|
|
21832
|
+
args: [{ selector: 'lib-expanded-row-renderer-component', template: "<ng-template #component></ng-template>\n" }]
|
|
21789
21833
|
}], propDecorators: { vcRef: [{
|
|
21790
21834
|
type: ViewChild,
|
|
21791
21835
|
args: ['component', { read: ViewContainerRef }]
|
|
@@ -21867,11 +21911,11 @@ class ExpandableSectionComponent {
|
|
|
21867
21911
|
button.callback(button.args, element);
|
|
21868
21912
|
}
|
|
21869
21913
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpandableSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21870
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExpandableSectionComponent, isStandalone: true, selector: "smart-expandable-section", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\
|
|
21914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExpandableSectionComponent, isStandalone: true, selector: "smart-expandable-section", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\n <mat-expansion-panel\n [expanded]=\"data.isExpanded\"\n (opened)=\"onStateChange(true)\"\n (closed)=\"onStateChange(false)\"\n [disabled]=\"!!data.isDisabled\"\n >\n @if (data.headerComponent) {\n <mat-expansion-panel-header>\n <ng-template #headerComponent></ng-template>\n </mat-expansion-panel-header>\n }\n @if (!data.headerComponent) {\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"headerBar\">\n <span>{{ data.title }}</span>\n <smart-ui-action-toolbar [id]=\"data.headerToolbarId\"></smart-ui-action-toolbar>\n </div>\n </mat-panel-title>\n @if (data.button) {\n <div class=\"btn-container\">\n @if (data.button.type === type().BUTTON) {\n <button\n class=\"btn\"\n (click)=\"action(data.button, $event)\"\n mat-stroked-button\n >\n @if (\n data.button.icon &&\n (!data.button.iconPosition || data.button.iconPosition === position().PRE)\n ) {\n <smart-icon\n [icon]=\"data.button.icon\"\n ></smart-icon>\n }\n {{ data.button.label }}\n @if (data.button.icon && data.button.iconPosition === position().POST) {\n <smart-icon\n [icon]=\"data.button.icon\"\n ></smart-icon>\n }\n </button>\n }\n @if (data.button.type === type().MENU) {\n <button\n mat-button\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n color=\"{{ data.button.color }}\"\n >\n @if (\n data.button.icon &&\n (!data.button.iconPosition || data.button.iconPosition === position().PRE)\n ) {\n <smart-icon\n [icon]=\"data.button.icon\"\n ></smart-icon\n >\n }{{ data.button.label }}\n @if (data.button.icon && data.button.iconPosition === position().POST) {\n <smart-icon\n [icon]=\"data.button.icon\"\n ></smart-icon>\n }\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (button of data.button.menuItemButtons; track button) {\n <button\n (click)=\"customButtonClicked($event, button, data.index)\"\n mat-menu-item\n >\n @if (\n button.icon && (!button.iconPosition || button.iconPosition === position().PRE)\n ) {\n <smart-icon\n [icon]=\"button.icon\"\n ></smart-icon\n >\n }{{ button.label }}\n @if (button.icon && button.iconPosition === position().POST) {\n <smart-icon\n [icon]=\"button.icon\"\n ></smart-icon>\n }\n </button>\n }\n </mat-menu>\n </div>\n }\n </mat-expansion-panel-header>\n }\n <ng-template #renderComponent></ng-template>\n </mat-expansion-panel>\n </div>\n", styles: [":host{width:100%}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}:host ::ng-deep .headerBar{flex:1;display:flex;justify-content:space-between;align-items:center}:host ::ng-deep a:has(.headerBar){padding:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: 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: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
21871
21915
|
}
|
|
21872
21916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpandableSectionComponent, decorators: [{
|
|
21873
21917
|
type: Component,
|
|
21874
|
-
args: [{ selector: 'smart-expandable-section', imports: [NgClass, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, UiActionToolbarComponent, MatButton, SmartIconComponent, MatMenuTrigger, MatMenu, MatMenuItem], template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\
|
|
21918
|
+
args: [{ selector: 'smart-expandable-section', imports: [NgClass, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, UiActionToolbarComponent, MatButton, SmartIconComponent, MatMenuTrigger, MatMenu, MatMenuItem], template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\n <mat-expansion-panel\n [expanded]=\"data.isExpanded\"\n (opened)=\"onStateChange(true)\"\n (closed)=\"onStateChange(false)\"\n [disabled]=\"!!data.isDisabled\"\n >\n @if (data.headerComponent) {\n <mat-expansion-panel-header>\n <ng-template #headerComponent></ng-template>\n </mat-expansion-panel-header>\n }\n @if (!data.headerComponent) {\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"headerBar\">\n <span>{{ data.title }}</span>\n <smart-ui-action-toolbar [id]=\"data.headerToolbarId\"></smart-ui-action-toolbar>\n </div>\n </mat-panel-title>\n @if (data.button) {\n <div class=\"btn-container\">\n @if (data.button.type === type().BUTTON) {\n <button\n class=\"btn\"\n (click)=\"action(data.button, $event)\"\n mat-stroked-button\n >\n @if (\n data.button.icon &&\n (!data.button.iconPosition || data.button.iconPosition === position().PRE)\n ) {\n <smart-icon\n [icon]=\"data.button.icon\"\n ></smart-icon>\n }\n {{ data.button.label }}\n @if (data.button.icon && data.button.iconPosition === position().POST) {\n <smart-icon\n [icon]=\"data.button.icon\"\n ></smart-icon>\n }\n </button>\n }\n @if (data.button.type === type().MENU) {\n <button\n mat-button\n [matMenuTriggerFor]=\"menu\"\n (click)=\"$event.stopPropagation()\"\n color=\"{{ data.button.color }}\"\n >\n @if (\n data.button.icon &&\n (!data.button.iconPosition || data.button.iconPosition === position().PRE)\n ) {\n <smart-icon\n [icon]=\"data.button.icon\"\n ></smart-icon\n >\n }{{ data.button.label }}\n @if (data.button.icon && data.button.iconPosition === position().POST) {\n <smart-icon\n [icon]=\"data.button.icon\"\n ></smart-icon>\n }\n </button>\n }\n <mat-menu #menu=\"matMenu\">\n @for (button of data.button.menuItemButtons; track button) {\n <button\n (click)=\"customButtonClicked($event, button, data.index)\"\n mat-menu-item\n >\n @if (\n button.icon && (!button.iconPosition || button.iconPosition === position().PRE)\n ) {\n <smart-icon\n [icon]=\"button.icon\"\n ></smart-icon\n >\n }{{ button.label }}\n @if (button.icon && button.iconPosition === position().POST) {\n <smart-icon\n [icon]=\"button.icon\"\n ></smart-icon>\n }\n </button>\n }\n </mat-menu>\n </div>\n }\n </mat-expansion-panel-header>\n }\n <ng-template #renderComponent></ng-template>\n </mat-expansion-panel>\n </div>\n", styles: [":host{width:100%}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}:host ::ng-deep .headerBar{flex:1;display:flex;justify-content:space-between;align-items:center}:host ::ng-deep a:has(.headerBar){padding:.5rem}\n"] }]
|
|
21875
21919
|
}], propDecorators: { data: [{
|
|
21876
21920
|
type: Input
|
|
21877
21921
|
}], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], vcRef: [{
|
|
@@ -21971,11 +22015,11 @@ class SmartGridCardComponent {
|
|
|
21971
22015
|
this.renderer.addClass(this.componentRef.location.nativeElement, 'gridCardLayout');
|
|
21972
22016
|
}
|
|
21973
22017
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SmartGridCardComponent, isStandalone: true, selector: "app-smart-grid-card", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: true, isRequired: true, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartActionHost], viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["customCardComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-grid-card-template\">\
|
|
22018
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SmartGridCardComponent, isStandalone: true, selector: "app-smart-grid-card", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: true, isRequired: true, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartActionHost], viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["customCardComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-grid-card-template\">\n <ng-template #customCardComponent></ng-template>\n</div>\n", styles: [".smart-grid-card-template{display:flex}:host ::ng-deep .gridCardLayout{display:flex;flex:1}\n"] }); }
|
|
21975
22019
|
}
|
|
21976
22020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridCardComponent, decorators: [{
|
|
21977
22021
|
type: Component,
|
|
21978
|
-
args: [{ selector: 'app-smart-grid-card', providers: [SmartActionHost], template: "<div class=\"smart-grid-card-template\">\
|
|
22022
|
+
args: [{ selector: 'app-smart-grid-card', providers: [SmartActionHost], template: "<div class=\"smart-grid-card-template\">\n <ng-template #customCardComponent></ng-template>\n</div>\n", styles: [".smart-grid-card-template{display:flex}:host ::ng-deep .gridCardLayout{display:flex;flex:1}\n"] }]
|
|
21979
22023
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], smartGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartGrid", required: true }] }], parentLayoutComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentLayoutComponent", required: false }] }], testId: [{
|
|
21980
22024
|
type: HostBinding,
|
|
21981
22025
|
args: ['attr.data-testid']
|
|
@@ -23034,7 +23078,7 @@ class SmartGridComponent {
|
|
|
23034
23078
|
};
|
|
23035
23079
|
}
|
|
23036
23080
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23037
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "cardDefaultActionsMenu", first: true, predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\r\n <div class=\"smartGrid-container\">\r\n <div class=\"smart-grid-toolbar\">\r\n <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n @if (smartGrid.showEditColumns) {\r\n <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\r\n </ui-action-button>\r\n }\r\n </div>\r\n <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n <div class=\"smartGridContent\">\r\n <div>\r\n @if (smartGrid.showResultCount) {\r\n <div>\r\n <div class=\"smartGrid-data-number\">\r\n {{ smartGrid.gridModel.totalRowCount }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"smart-grid-table-container\">\r\n <ng-template #table></ng-template>\r\n </div>\r\n @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\r\n <div>\r\n @for (expandableSection of expandableSections; track expandableSection) {\r\n <smart-expandable-section\r\n #gridExpandableSection\r\n [data]=\"expandableSection\"\r\n ></smart-expandable-section>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\r\n <div\r\n class=\"cards-container\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\"\r\n >\r\n @for (row of smartGrid.gridModel.page.rows; track row.id) {\r\n <app-smart-grid-card\r\n class=\"smartGrid-card-container\"\r\n [ngClass]=\"calcRowClasses(row)\"\r\n [ngStyle]=\"calcStyle(row.style)\"\r\n [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\r\n [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\r\n (click)=\"onCardClick(row, $event)\"\r\n (dblclick)=\"onCardDoubleClick(row, $event)\"\r\n [item]=\"row\"\r\n [layout]=\"rowLayoutOf(row)\"\r\n [smartGrid]=\"smartGrid\"\r\n [parentLayoutComponent]=\"parentLayoutComponent()\"\r\n ></app-smart-grid-card>\r\n }\r\n @if (cardMenuRow(); as menuRow) {\r\n <lib-default-actions-popup\r\n [buttons]=\"cardMenuButtons()\"\r\n [row]=\"menuRow\"\r\n ></lib-default-actions-popup>\r\n }\r\n </div>\r\n }\r\n @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\r\n <div\r\n class=\"tree-container\"\r\n [ngStyle]=\"{\r\n 'grid-template-columns':\r\n smartGrid.numberOfColumn !== undefined\r\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n : '',\r\n }\"\r\n >\r\n <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n <mat-tree-node\r\n *matTreeNodeDef=\"let node\"\r\n matTreeNodeToggle\r\n matTreeNodePadding\r\n matTreeNodePaddingIndent=\"24\"\r\n >\r\n <button mat-icon-button disabled class=\"tree-button\"></button>\r\n <mat-checkbox\r\n class=\"checklist-leaf-node\"\r\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n (change)=\"treeNodeSelectionToggle(node)\"\r\n >{{ getTreeItem(node) }}</mat-checkbox\r\n >\r\n </mat-tree-node>\r\n <mat-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodePadding\r\n matTreeNodePaddingIndent=\"24\"\r\n >\r\n <button\r\n mat-icon-button\r\n matTreeNodeToggle\r\n class=\"tree-button\"\r\n [attr.aria-label]=\"'Toggle ' + node.item\"\r\n >\r\n <mat-icon fontSet=\"material-symbols-outlined\" class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n </mat-icon>\r\n </button>\r\n <mat-checkbox\r\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\r\n [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n (change)=\"treeNodeSelectionToggle(node)\"\r\n >{{ getTreeItem(node) }}</mat-checkbox\r\n >\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n }\r\n </div>\r\n @if (smartGrid.paginator) {\r\n <div class=\"paginator-row-material\">\r\n @if (smartGrid.gridModel.refreshEnabled) {\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n matTooltip=\"Friss\u00EDt\u00E9s\"\r\n (click)=\"refreshPartialResults()\"\r\n >\r\n <mat-icon fontSet=\"material-symbols-outlined\">refresh</mat-icon>\r\n </button>\r\n }\r\n @if (smartGrid.paginator && !treeControl) {\r\n <mat-paginator\r\n #paginator\r\n [length]=\"length\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n (page)=\"onChangePage($event)\"\r\n ></mat-paginator>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent", "layout"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
23081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "cardDefaultActionsMenu", first: true, predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n <div class=\"smartGrid-container\">\n <div class=\"smart-grid-toolbar\">\n <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n @if (smartGrid.showEditColumns) {\n <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n </ui-action-button>\n }\n </div>\n <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n <div class=\"smartGridContent\">\n <div>\n @if (smartGrid.showResultCount) {\n <div>\n <div class=\"smartGrid-data-number\">\n {{ smartGrid.gridModel.totalRowCount }}\n </div>\n </div>\n }\n </div>\n <div class=\"smart-grid-table-container\">\n <ng-template #table></ng-template>\n </div>\n @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n <div>\n @for (expandableSection of expandableSections; track expandableSection) {\n <smart-expandable-section\n #gridExpandableSection\n [data]=\"expandableSection\"\n ></smart-expandable-section>\n }\n </div>\n }\n @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n <div\n class=\"cards-container\"\n [ngStyle]=\"{\n 'grid-template-columns':\n smartGrid.numberOfColumn !== undefined\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n : '',\n }\"\n >\n @for (row of smartGrid.gridModel.page.rows; track row.id) {\n <app-smart-grid-card\n class=\"smartGrid-card-container\"\n [ngClass]=\"calcRowClasses(row)\"\n [ngStyle]=\"calcStyle(row.style)\"\n [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n (click)=\"onCardClick(row, $event)\"\n (dblclick)=\"onCardDoubleClick(row, $event)\"\n [item]=\"row\"\n [layout]=\"rowLayoutOf(row)\"\n [smartGrid]=\"smartGrid\"\n [parentLayoutComponent]=\"parentLayoutComponent()\"\n ></app-smart-grid-card>\n }\n @if (cardMenuRow(); as menuRow) {\n <lib-default-actions-popup\n [buttons]=\"cardMenuButtons()\"\n [row]=\"menuRow\"\n ></lib-default-actions-popup>\n }\n </div>\n }\n @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n <div\n class=\"tree-container\"\n [ngStyle]=\"{\n 'grid-template-columns':\n smartGrid.numberOfColumn !== undefined\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n : '',\n }\"\n >\n <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n <mat-tree-node\n *matTreeNodeDef=\"let node\"\n matTreeNodeToggle\n matTreeNodePadding\n matTreeNodePaddingIndent=\"24\"\n >\n <button mat-icon-button disabled class=\"tree-button\"></button>\n <mat-checkbox\n class=\"checklist-leaf-node\"\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n (change)=\"treeNodeSelectionToggle(node)\"\n >{{ getTreeItem(node) }}</mat-checkbox\n >\n </mat-tree-node>\n <mat-tree-node\n *matTreeNodeDef=\"let node; when: hasChild\"\n matTreeNodePadding\n matTreeNodePaddingIndent=\"24\"\n >\n <button\n mat-icon-button\n matTreeNodeToggle\n class=\"tree-button\"\n [attr.aria-label]=\"'Toggle ' + node.item\"\n >\n <mat-icon fontSet=\"material-symbols-outlined\" class=\"mat-icon-rtl-mirror\">\n {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <mat-checkbox\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n [indeterminate]=\"descendantsPartiallySelected(node)\"\n (change)=\"treeNodeSelectionToggle(node)\"\n >{{ getTreeItem(node) }}</mat-checkbox\n >\n </mat-tree-node>\n </mat-tree>\n </div>\n }\n </div>\n @if (smartGrid.paginator) {\n <div class=\"paginator-row-material\">\n @if (smartGrid.gridModel.refreshEnabled) {\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Friss\u00EDt\u00E9s\"\n (click)=\"refreshPartialResults()\"\n >\n <mat-icon fontSet=\"material-symbols-outlined\">refresh</mat-icon>\n </button>\n }\n @if (smartGrid.paginator && !treeControl) {\n <mat-paginator\n #paginator\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onChangePage($event)\"\n ></mat-paginator>\n }\n </div>\n }\n </div>\n}\n", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent", "layout"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
23038
23082
|
}
|
|
23039
23083
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, decorators: [{
|
|
23040
23084
|
type: Component,
|
|
@@ -23057,7 +23101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
23057
23101
|
MatCheckbox,
|
|
23058
23102
|
MatTooltip,
|
|
23059
23103
|
MatPaginator,
|
|
23060
|
-
], template: "@if (smartGrid) {\
|
|
23104
|
+
], template: "@if (smartGrid) {\n <div class=\"smartGrid-container\">\n <div class=\"smart-grid-toolbar\">\n <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n @if (smartGrid.showEditColumns) {\n <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n </ui-action-button>\n }\n </div>\n <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n <div class=\"smartGridContent\">\n <div>\n @if (smartGrid.showResultCount) {\n <div>\n <div class=\"smartGrid-data-number\">\n {{ smartGrid.gridModel.totalRowCount }}\n </div>\n </div>\n }\n </div>\n <div class=\"smart-grid-table-container\">\n <ng-template #table></ng-template>\n </div>\n @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n <div>\n @for (expandableSection of expandableSections; track expandableSection) {\n <smart-expandable-section\n #gridExpandableSection\n [data]=\"expandableSection\"\n ></smart-expandable-section>\n }\n </div>\n }\n @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n <div\n class=\"cards-container\"\n [ngStyle]=\"{\n 'grid-template-columns':\n smartGrid.numberOfColumn !== undefined\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n : '',\n }\"\n >\n @for (row of smartGrid.gridModel.page.rows; track row.id) {\n <app-smart-grid-card\n class=\"smartGrid-card-container\"\n [ngClass]=\"calcRowClasses(row)\"\n [ngStyle]=\"calcStyle(row.style)\"\n [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n (click)=\"onCardClick(row, $event)\"\n (dblclick)=\"onCardDoubleClick(row, $event)\"\n [item]=\"row\"\n [layout]=\"rowLayoutOf(row)\"\n [smartGrid]=\"smartGrid\"\n [parentLayoutComponent]=\"parentLayoutComponent()\"\n ></app-smart-grid-card>\n }\n @if (cardMenuRow(); as menuRow) {\n <lib-default-actions-popup\n [buttons]=\"cardMenuButtons()\"\n [row]=\"menuRow\"\n ></lib-default-actions-popup>\n }\n </div>\n }\n @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n <div\n class=\"tree-container\"\n [ngStyle]=\"{\n 'grid-template-columns':\n smartGrid.numberOfColumn !== undefined\n ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n : '',\n }\"\n >\n <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n <mat-tree-node\n *matTreeNodeDef=\"let node\"\n matTreeNodeToggle\n matTreeNodePadding\n matTreeNodePaddingIndent=\"24\"\n >\n <button mat-icon-button disabled class=\"tree-button\"></button>\n <mat-checkbox\n class=\"checklist-leaf-node\"\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n (change)=\"treeNodeSelectionToggle(node)\"\n >{{ getTreeItem(node) }}</mat-checkbox\n >\n </mat-tree-node>\n <mat-tree-node\n *matTreeNodeDef=\"let node; when: hasChild\"\n matTreeNodePadding\n matTreeNodePaddingIndent=\"24\"\n >\n <button\n mat-icon-button\n matTreeNodeToggle\n class=\"tree-button\"\n [attr.aria-label]=\"'Toggle ' + node.item\"\n >\n <mat-icon fontSet=\"material-symbols-outlined\" class=\"mat-icon-rtl-mirror\">\n {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <mat-checkbox\n [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n [indeterminate]=\"descendantsPartiallySelected(node)\"\n (change)=\"treeNodeSelectionToggle(node)\"\n >{{ getTreeItem(node) }}</mat-checkbox\n >\n </mat-tree-node>\n </mat-tree>\n </div>\n }\n </div>\n @if (smartGrid.paginator) {\n <div class=\"paginator-row-material\">\n @if (smartGrid.gridModel.refreshEnabled) {\n <button\n mat-icon-button\n type=\"button\"\n matTooltip=\"Friss\u00EDt\u00E9s\"\n (click)=\"refreshPartialResults()\"\n >\n <mat-icon fontSet=\"material-symbols-outlined\">refresh</mat-icon>\n </button>\n }\n @if (smartGrid.paginator && !treeControl) {\n <mat-paginator\n #paginator\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onChangePage($event)\"\n ></mat-paginator>\n }\n </div>\n }\n </div>\n}\n", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"] }]
|
|
23061
23105
|
}], ctorParameters: () => [], propDecorators: { smartGrid: [{
|
|
23062
23106
|
type: Input
|
|
23063
23107
|
}], uuid: [{
|
|
@@ -24597,11 +24641,11 @@ class SmartMapComponent {
|
|
|
24597
24641
|
return this.mapComponent.toBase64();
|
|
24598
24642
|
}
|
|
24599
24643
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartMapComponent, isStandalone: true, selector: "smart-map", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "mapComponent", first: true, predicate: ["mapComponent"], descendants: true }], ngImport: i0, template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\
|
|
24644
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartMapComponent, isStandalone: true, selector: "smart-map", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "mapComponent", first: true, predicate: ["mapComponent"], descendants: true }], ngImport: i0, template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\n<google-map\n #mapComponent\n [model]=\"model()!\"\n [items]=\"items()\"\n [style]=\"{ width: '100%', height: '320px' }\"\n (onMapDragEnd)=\"move($event.viewport)\"\n (onZoomChanged)=\"move($event.viewport)\"\n (onMapClick)=\"handleMapClick($event.coordinates)\"\n (onOverlayClick)=\"handleItemClick($event.itemId)\"\n (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\n>\n</google-map>\n} @else if (mapEngine === MapEngine.LEAFLET) {\n<leaflet-map\n #mapComponent\n [model]=\"model()!\"\n [items]=\"items()\"\n [editingSession]=\"editingSession()\"\n (onMapDragEnd)=\"move($event.viewport)\"\n (onZoomChanged)=\"move($event.viewport)\"\n (onMapClick)=\"handleMapClick($event.coordinates)\"\n (onOverlayClick)=\"handleItemClick($event.itemId)\"\n (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\n (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\n>\n</leaflet-map>\n} @else {\n<p>\n <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\n</p>\n<p>Please provide a valid choice of map engine!</p>\n} }\n", styles: [""], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["style", "styleClass"], outputs: ["onOverlayDblClick", "onOverlayDragStart", "onOverlayDrag", "onOverlayDragEnd", "onMapReady"] }, { kind: "component", type: LeafletMap, selector: "leaflet-map" }] }); }
|
|
24601
24645
|
}
|
|
24602
24646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMapComponent, decorators: [{
|
|
24603
24647
|
type: Component,
|
|
24604
|
-
args: [{ selector: 'smart-map', imports: [GoogleMap, LeafletMap], template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\
|
|
24648
|
+
args: [{ selector: 'smart-map', imports: [GoogleMap, LeafletMap], template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\n<google-map\n #mapComponent\n [model]=\"model()!\"\n [items]=\"items()\"\n [style]=\"{ width: '100%', height: '320px' }\"\n (onMapDragEnd)=\"move($event.viewport)\"\n (onZoomChanged)=\"move($event.viewport)\"\n (onMapClick)=\"handleMapClick($event.coordinates)\"\n (onOverlayClick)=\"handleItemClick($event.itemId)\"\n (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\n>\n</google-map>\n} @else if (mapEngine === MapEngine.LEAFLET) {\n<leaflet-map\n #mapComponent\n [model]=\"model()!\"\n [items]=\"items()\"\n [editingSession]=\"editingSession()\"\n (onMapDragEnd)=\"move($event.viewport)\"\n (onZoomChanged)=\"move($event.viewport)\"\n (onMapClick)=\"handleMapClick($event.coordinates)\"\n (onOverlayClick)=\"handleItemClick($event.itemId)\"\n (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\n (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\n>\n</leaflet-map>\n} @else {\n<p>\n <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\n</p>\n<p>Please provide a valid choice of map engine!</p>\n} }\n" }]
|
|
24605
24649
|
}], ctorParameters: () => [], propDecorators: { uuid: [{
|
|
24606
24650
|
type: Input
|
|
24607
24651
|
}], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: true }] }], mapComponent: [{
|
|
@@ -25420,9 +25464,9 @@ class SmartDiagramComponent {
|
|
|
25420
25464
|
display: true,
|
|
25421
25465
|
text: descriptor.title.content ?? "",
|
|
25422
25466
|
color: descriptor.title.color
|
|
25423
|
-
? `rgba(${descriptor.title.color.red ?? 0},
|
|
25424
|
-
${descriptor.title.color.green ?? 0},
|
|
25425
|
-
${descriptor.title.color.blue ?? 0},
|
|
25467
|
+
? `rgba(${descriptor.title.color.red ?? 0},
|
|
25468
|
+
${descriptor.title.color.green ?? 0},
|
|
25469
|
+
${descriptor.title.color.blue ?? 0},
|
|
25426
25470
|
${descriptor.title.color.alpha ?? 1})`
|
|
25427
25471
|
: "#000000ff",
|
|
25428
25472
|
font: {
|
|
@@ -25440,9 +25484,9 @@ class SmartDiagramComponent {
|
|
|
25440
25484
|
display: true,
|
|
25441
25485
|
text: descriptor.subTitle.content ?? "",
|
|
25442
25486
|
color: descriptor.subTitle.color
|
|
25443
|
-
? `rgba(${descriptor.subTitle.color.red ?? 0},
|
|
25444
|
-
${descriptor.subTitle.color.green ?? 0},
|
|
25445
|
-
${descriptor.subTitle.color.blue ?? 0},
|
|
25487
|
+
? `rgba(${descriptor.subTitle.color.red ?? 0},
|
|
25488
|
+
${descriptor.subTitle.color.green ?? 0},
|
|
25489
|
+
${descriptor.subTitle.color.blue ?? 0},
|
|
25446
25490
|
${descriptor.subTitle.color.alpha ?? 1})`
|
|
25447
25491
|
: "#000000ff",
|
|
25448
25492
|
font: {
|
|
@@ -25495,20 +25539,20 @@ class SmartDiagramComponent {
|
|
|
25495
25539
|
options.plugins.annotation = options.plugins.annotation || {};
|
|
25496
25540
|
options.plugins.annotation.annotations =
|
|
25497
25541
|
options.plugins.annotation.annotations || {};
|
|
25498
|
-
let borderColor = `rgba(
|
|
25499
|
-
${shape.borderColor?.red ?? 0},
|
|
25500
|
-
${shape.borderColor?.green ?? 0},
|
|
25501
|
-
${shape.borderColor?.blue ?? 0},
|
|
25542
|
+
let borderColor = `rgba(
|
|
25543
|
+
${shape.borderColor?.red ?? 0},
|
|
25544
|
+
${shape.borderColor?.green ?? 0},
|
|
25545
|
+
${shape.borderColor?.blue ?? 0},
|
|
25502
25546
|
${shape.borderColor?.alpha ?? 1})`;
|
|
25503
|
-
let backgroundColor = `rgba(
|
|
25504
|
-
${shape.backgroundColor?.red ?? 0},
|
|
25505
|
-
${shape.backgroundColor?.green ?? 0},
|
|
25506
|
-
${shape.backgroundColor?.blue ?? 0},
|
|
25547
|
+
let backgroundColor = `rgba(
|
|
25548
|
+
${shape.backgroundColor?.red ?? 0},
|
|
25549
|
+
${shape.backgroundColor?.green ?? 0},
|
|
25550
|
+
${shape.backgroundColor?.blue ?? 0},
|
|
25507
25551
|
${shape.backgroundColor?.alpha ?? 1})`;
|
|
25508
|
-
let fontColor = `rgba(
|
|
25509
|
-
${shape.labelText?.color?.red ?? 0},
|
|
25510
|
-
${shape.labelText?.color?.green ?? 0},
|
|
25511
|
-
${shape.labelText?.color?.blue ?? 0},
|
|
25552
|
+
let fontColor = `rgba(
|
|
25553
|
+
${shape.labelText?.color?.red ?? 0},
|
|
25554
|
+
${shape.labelText?.color?.green ?? 0},
|
|
25555
|
+
${shape.labelText?.color?.blue ?? 0},
|
|
25512
25556
|
${shape.labelText?.color?.alpha ?? 1})`;
|
|
25513
25557
|
let borderDash;
|
|
25514
25558
|
if (shape.borderDashLength && shape.borderDashGap) {
|
|
@@ -25570,10 +25614,10 @@ class SmartDiagramComponent {
|
|
|
25570
25614
|
});
|
|
25571
25615
|
}
|
|
25572
25616
|
if (descriptor.backgroundColor) {
|
|
25573
|
-
let backgroundColor = `rgba(
|
|
25574
|
-
${descriptor.backgroundColor?.red ?? 0},
|
|
25575
|
-
${descriptor.backgroundColor?.green ?? 0},
|
|
25576
|
-
${descriptor.backgroundColor?.blue ?? 0},
|
|
25617
|
+
let backgroundColor = `rgba(
|
|
25618
|
+
${descriptor.backgroundColor?.red ?? 0},
|
|
25619
|
+
${descriptor.backgroundColor?.green ?? 0},
|
|
25620
|
+
${descriptor.backgroundColor?.blue ?? 0},
|
|
25577
25621
|
${descriptor.backgroundColor?.alpha ?? 1})`;
|
|
25578
25622
|
let id = "customCanvasBackgroundColor";
|
|
25579
25623
|
const plugin = {
|
|
@@ -25678,11 +25722,11 @@ class SmartDiagramComponent {
|
|
|
25678
25722
|
return SmartStyleUtility.getNgStyles(style);
|
|
25679
25723
|
}
|
|
25680
25724
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SmartDiagramComponent, isStandalone: true, selector: "smart-diagram", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: true, transformFunction: null }, diagramModel: { classPropertyName: "diagramModel", publicName: "diagramModel", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementSelect: "elementSelect", canvasClick: "canvasClick", dataClick: "dataClick" }, viewQueries: [{ propertyName: "chartCanvas", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\
|
|
25725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SmartDiagramComponent, isStandalone: true, selector: "smart-diagram", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: true, transformFunction: null }, diagramModel: { classPropertyName: "diagramModel", publicName: "diagramModel", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementSelect: "elementSelect", canvasClick: "canvasClick", dataClick: "dataClick" }, viewQueries: [{ propertyName: "chartCanvas", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"chart-host\"\n [class]=\"aspectClass\"\n [ngStyle]=\"calcStyle($safeNavigationMigration(diagramModel?.descriptor?.style))\"\n>\n <div class=\"chart-container\">\n <canvas #chartCanvas role=\"img\" (click)=\"onCanvasClick($event)\"></canvas>\n </div>\n</div>\n", styles: [".chart-host{display:flex}.chart-container{position:relative}.default-aspect-ratio .chart-container{width:100%;aspect-ratio:1.78}.pie-aspect-ratio .chart-container{width:100%;aspect-ratio:1}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
25682
25726
|
}
|
|
25683
25727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartDiagramComponent, decorators: [{
|
|
25684
25728
|
type: Component,
|
|
25685
|
-
args: [{ selector: "smart-diagram", imports: [NgStyle], template: "<div\
|
|
25729
|
+
args: [{ selector: "smart-diagram", imports: [NgStyle], template: "<div\n class=\"chart-host\"\n [class]=\"aspectClass\"\n [ngStyle]=\"calcStyle($safeNavigationMigration(diagramModel?.descriptor?.style))\"\n>\n <div class=\"chart-container\">\n <canvas #chartCanvas role=\"img\" (click)=\"onCanvasClick($event)\"></canvas>\n </div>\n</div>\n", styles: [".chart-host{display:flex}.chart-container{position:relative}.default-aspect-ratio .chart-container{width:100%;aspect-ratio:1.78}.pie-aspect-ratio .chart-container{width:100%;aspect-ratio:1}\n"] }]
|
|
25686
25730
|
}], ctorParameters: () => [], propDecorators: { chartCanvas: [{
|
|
25687
25731
|
type: ViewChild,
|
|
25688
25732
|
args: ["chartCanvas"]
|
|
@@ -25708,11 +25752,11 @@ class SmartFilterParamComponent {
|
|
|
25708
25752
|
});
|
|
25709
25753
|
}
|
|
25710
25754
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterParamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25711
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterParamComponent, isStandalone: true, selector: "app-target-group-filter-param", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"targetGroupFilterParamContainer\">\
|
|
25755
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterParamComponent, isStandalone: true, selector: "app-target-group-filter-param", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"targetGroupFilterParamContainer\">\n @for (data of data()?.group; track data) {\n <div\n class=\"targetGroupFilterItem\"\n (click)=\"onItemClick(data)\"\n >\n <smart-icon icon=\"chevron_right\" color=\"gray\"></smart-icon>\n <div class=\"mat-caption\">\n {{ data.label }}\n </div>\n </div>\n }\n</div>\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"], dependencies: [{ kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
|
|
25712
25756
|
}
|
|
25713
25757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterParamComponent, decorators: [{
|
|
25714
25758
|
type: Component,
|
|
25715
|
-
args: [{ selector: 'app-target-group-filter-param', imports: [SmartIconComponent], template: "<div class=\"targetGroupFilterParamContainer\">\
|
|
25759
|
+
args: [{ selector: 'app-target-group-filter-param', imports: [SmartIconComponent], template: "<div class=\"targetGroupFilterParamContainer\">\n @for (data of data()?.group; track data) {\n <div\n class=\"targetGroupFilterItem\"\n (click)=\"onItemClick(data)\"\n >\n <smart-icon icon=\"chevron_right\" color=\"gray\"></smart-icon>\n <div class=\"mat-caption\">\n {{ data.label }}\n </div>\n </div>\n }\n</div>\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"] }]
|
|
25716
25760
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
|
|
25717
25761
|
|
|
25718
25762
|
class SmartFilterParamsComponent {
|
|
@@ -25782,11 +25826,11 @@ class SmartFilterParamsComponent {
|
|
|
25782
25826
|
}
|
|
25783
25827
|
}
|
|
25784
25828
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25785
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterParamsComponent, isStandalone: true, selector: "smart-filter-group-params", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (service().model?.showGroups && !service().model?.readOnly) {\
|
|
25829
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterParamsComponent, isStandalone: true, selector: "smart-filter-group-params", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (service().model?.showGroups && !service().model?.readOnly) {\n <div\n class=\"targetGroupFilterParamsContainer\"\n >\n <!-- <ng-template #smartFilter></ng-template> -->\n <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\n <div class=\"dataSource-btns\">\n <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\n <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\n </div>\n <div class=\"dataSource-add-database\">\n <div class=\"dataSource-add-database-title\">\n <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\n Adatb\u00E1zis\n </div>\n <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\n <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\n </button>\n </div>\n </div> -->\n <div class=\"sections\">\n @if (expandableSectionsFromExcel) {\n <smart-expandable-section\n class=\"excel\"\n [data]=\"expandableSectionsFromExcel!\"\n ></smart-expandable-section>\n }\n @for (data of expandableSections; track data) {\n <smart-expandable-section\n [data]=\"data\"\n ></smart-expandable-section>\n }\n </div>\n</div>\n}\n", styles: [".targetGroupFilterParamsContainer{padding:.5rem 0;display:flex;flex-direction:column;gap:2.5rem;overflow:auto;border-right:2px solid var(--primary-dark-color)}.smart-filter-editor-withoutParametersContainer{padding:.5rem 0}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var( --sb4-expansion-panel-expanded-bg-color, var(--accent-color) )!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:var(--sb4-expansion-panel-expanded-title-color, #fff)!important}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }] }); }
|
|
25786
25830
|
}
|
|
25787
25831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterParamsComponent, decorators: [{
|
|
25788
25832
|
type: Component,
|
|
25789
|
-
args: [{ selector: "smart-filter-group-params", imports: [ExpandableSectionComponent], template: "@if (service().model?.showGroups && !service().model?.readOnly) {\
|
|
25833
|
+
args: [{ selector: "smart-filter-group-params", imports: [ExpandableSectionComponent], template: "@if (service().model?.showGroups && !service().model?.readOnly) {\n <div\n class=\"targetGroupFilterParamsContainer\"\n >\n <!-- <ng-template #smartFilter></ng-template> -->\n <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\n <div class=\"dataSource-btns\">\n <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\n <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\n </div>\n <div class=\"dataSource-add-database\">\n <div class=\"dataSource-add-database-title\">\n <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\n Adatb\u00E1zis\n </div>\n <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\n <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\n </button>\n </div>\n </div> -->\n <div class=\"sections\">\n @if (expandableSectionsFromExcel) {\n <smart-expandable-section\n class=\"excel\"\n [data]=\"expandableSectionsFromExcel!\"\n ></smart-expandable-section>\n }\n @for (data of expandableSections; track data) {\n <smart-expandable-section\n [data]=\"data\"\n ></smart-expandable-section>\n }\n </div>\n</div>\n}\n", styles: [".targetGroupFilterParamsContainer{padding:.5rem 0;display:flex;flex-direction:column;gap:2.5rem;overflow:auto;border-right:2px solid var(--primary-dark-color)}.smart-filter-editor-withoutParametersContainer{padding:.5rem 0}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var( --sb4-expansion-panel-expanded-bg-color, var(--accent-color) )!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:var(--sb4-expansion-panel-expanded-title-color, #fff)!important}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
|
|
25790
25834
|
}], ctorParameters: () => [], propDecorators: { service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }], filterVcRef: [{
|
|
25791
25835
|
type: ViewChild,
|
|
25792
25836
|
args: ["smartFilter", { read: ViewContainerRef }]
|
|
@@ -26095,11 +26139,11 @@ class SmartFilterSimpleFieldComponent {
|
|
|
26095
26139
|
return option;
|
|
26096
26140
|
}
|
|
26097
26141
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterSimpleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterSimpleFieldComponent, isStandalone: true, selector: "smart-filter-simple-field", inputs: { operationTranslator: { classPropertyName: "operationTranslator", publicName: "operationTranslator", isSignal: true, isRequired: false, transformFunction: null }, filterExpressionField: { classPropertyName: "filterExpressionField", publicName: "filterExpressionField", isSignal: false, isRequired: false, transformFunction: null }, showPossibleActions: { classPropertyName: "showPossibleActions", publicName: "showPossibleActions", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vcRefForm", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div class=\"smart-filter-simple-field-container\">\
|
|
26142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterSimpleFieldComponent, isStandalone: true, selector: "smart-filter-simple-field", inputs: { operationTranslator: { classPropertyName: "operationTranslator", publicName: "operationTranslator", isSignal: true, isRequired: false, transformFunction: null }, filterExpressionField: { classPropertyName: "filterExpressionField", publicName: "filterExpressionField", isSignal: false, isRequired: false, transformFunction: null }, showPossibleActions: { classPropertyName: "showPossibleActions", publicName: "showPossibleActions", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vcRefForm", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div class=\"smart-filter-simple-field-container\">\n <div class=\"smart-filter-simple-field-form-widget\">\n @if (showPossibleActions()) {\n <div class=\"smart-filter-simple-field-form-widget-row\">\n <p>({{ currentOperation }})</p>\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\"\n >\n <mat-icon fontSet=\"material-symbols-outlined\">more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of filterExpressionField.possibleOperations; track option) {\n <button mat-menu-item (click)=\"optionSelected(option)\">\n <span>\n {{ getOptionLabel(option) }}\n </span>\n </button>\n }\n </mat-menu>\n </div>\n }\n <ng-template #form></ng-template>\n </div>\n</div>\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-unelevated-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-outlined-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
26099
26143
|
}
|
|
26100
26144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterSimpleFieldComponent, decorators: [{
|
|
26101
26145
|
type: Component,
|
|
26102
|
-
args: [{ selector: 'smart-filter-simple-field', imports: [MatIconButton, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem], template: "<div class=\"smart-filter-simple-field-container\">\
|
|
26146
|
+
args: [{ selector: 'smart-filter-simple-field', imports: [MatIconButton, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem], template: "<div class=\"smart-filter-simple-field-container\">\n <div class=\"smart-filter-simple-field-form-widget\">\n @if (showPossibleActions()) {\n <div class=\"smart-filter-simple-field-form-widget-row\">\n <p>({{ currentOperation }})</p>\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\"\n >\n <mat-icon fontSet=\"material-symbols-outlined\">more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of filterExpressionField.possibleOperations; track option) {\n <button mat-menu-item (click)=\"optionSelected(option)\">\n <span>\n {{ getOptionLabel(option) }}\n </span>\n </button>\n }\n </mat-menu>\n </div>\n }\n <ng-template #form></ng-template>\n </div>\n</div>\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-unelevated-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-outlined-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"] }]
|
|
26103
26147
|
}], propDecorators: { simpleFieldChildren: [{
|
|
26104
26148
|
type: ViewChildren,
|
|
26105
26149
|
args: ['simpleField']
|
|
@@ -26139,11 +26183,11 @@ class SmartFilterSimpleComponent {
|
|
|
26139
26183
|
this.service.shouldSubmit.complete();
|
|
26140
26184
|
}
|
|
26141
26185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterSimpleComponent, isStandalone: true, selector: "smart-filter-simple", viewQueries: [{ propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "@if (smartFilter) {\
|
|
26186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterSimpleComponent, isStandalone: true, selector: "smart-filter-simple", viewQueries: [{ propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "@if (smartFilter) {\n <div class=\"smart-simple-fields-container\">\n @for (filterExpressionField of smartFilter.data; track filterExpressionField; let i = $index) {\n <div>\n <smart-filter-simple-field\n #simpleField\n [filterExpressionField]=\"filterExpressionField\"\n [operationTranslator]=\"smartFilter.operationTranslator\"\n [showPossibleActions]=\"smartFilter.showPossibleActions\"\n ></smart-filter-simple-field>\n @for (subfilterExpressionField of filterExpressionField.subFieldList?.filters; track subfilterExpressionField) {\n <div>\n <smart-filter-simple-field\n #simpleField\n [filterExpressionField]=\"filterExpressionField\"\n [operationTranslator]=\"smartFilter.operationTranslator\"\n [showPossibleActions]=\"smartFilter.showPossibleActions\"\n ></smart-filter-simple-field>\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"], dependencies: [{ kind: "component", type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: ["operationTranslator", "filterExpressionField", "showPossibleActions"] }] }); }
|
|
26143
26187
|
}
|
|
26144
26188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterSimpleComponent, decorators: [{
|
|
26145
26189
|
type: Component,
|
|
26146
|
-
args: [{ selector: "smart-filter-simple", imports: [SmartFilterSimpleFieldComponent], template: "@if (smartFilter) {\
|
|
26190
|
+
args: [{ selector: "smart-filter-simple", imports: [SmartFilterSimpleFieldComponent], template: "@if (smartFilter) {\n <div class=\"smart-simple-fields-container\">\n @for (filterExpressionField of smartFilter.data; track filterExpressionField; let i = $index) {\n <div>\n <smart-filter-simple-field\n #simpleField\n [filterExpressionField]=\"filterExpressionField\"\n [operationTranslator]=\"smartFilter.operationTranslator\"\n [showPossibleActions]=\"smartFilter.showPossibleActions\"\n ></smart-filter-simple-field>\n @for (subfilterExpressionField of filterExpressionField.subFieldList?.filters; track subfilterExpressionField) {\n <div>\n <smart-filter-simple-field\n #simpleField\n [filterExpressionField]=\"filterExpressionField\"\n [operationTranslator]=\"smartFilter.operationTranslator\"\n [showPossibleActions]=\"smartFilter.showPossibleActions\"\n ></smart-filter-simple-field>\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"] }]
|
|
26147
26191
|
}], ctorParameters: () => [], propDecorators: { simpleFieldChildren: [{
|
|
26148
26192
|
type: ViewChildren,
|
|
26149
26193
|
args: ["simpleField"]
|
|
@@ -26172,11 +26216,11 @@ class SmartFilterComponent {
|
|
|
26172
26216
|
return await this.service.submit();
|
|
26173
26217
|
}
|
|
26174
26218
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26175
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterComponent, isStandalone: true, selector: "smart-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SmartFilterService], usesOnChanges: true, ngImport: i0, template: "@if (filter()) {\
|
|
26219
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterComponent, isStandalone: true, selector: "smart-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SmartFilterService], usesOnChanges: true, ngImport: i0, template: "@if (filter()) {\n <smart-filter-simple #simpleFilter></smart-filter-simple>\n}\n", styles: [""], dependencies: [{ kind: "component", type: SmartFilterSimpleComponent, selector: "smart-filter-simple" }] }); }
|
|
26176
26220
|
}
|
|
26177
26221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterComponent, decorators: [{
|
|
26178
26222
|
type: Component,
|
|
26179
|
-
args: [{ selector: 'smart-filter', providers: [SmartFilterService], imports: [SmartFilterSimpleComponent], template: "@if (filter()) {\
|
|
26223
|
+
args: [{ selector: 'smart-filter', providers: [SmartFilterService], imports: [SmartFilterSimpleComponent], template: "@if (filter()) {\n <smart-filter-simple #simpleFilter></smart-filter-simple>\n}\n" }]
|
|
26180
26224
|
}], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }] } });
|
|
26181
26225
|
|
|
26182
26226
|
var SmartFilterPosition;
|
|
@@ -26312,11 +26356,11 @@ class SmartFilterExpressionItemComponent {
|
|
|
26312
26356
|
}
|
|
26313
26357
|
}
|
|
26314
26358
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterExpressionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterExpressionItemComponent, isStandalone: true, selector: "app-expression-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: false, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"expressionItemContainer\">\
|
|
26359
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterExpressionItemComponent, isStandalone: true, selector: "app-expression-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: false, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"expressionItemContainer\">\n <div\n class=\"expressionItemInnerContainer\"\n [ngClass]=\"\n item.expressionData?.currentOperation === 'EXPRESSION'\n ? isSelected\n ? 'selectedExpressionContainer'\n : 'expressionContainer'\n : ''\n \"\n >\n @if (\n item.expressionData?.currentOperation === 'EXPRESSION') {\n <div class=\"expressionItemBubble expression\" (click)=\"select($event, item)\">[</div>\n @for (subItem of item.subFieldList?.filters; track subItem; let i = $index) {\n <app-expression-item\n [item]=\"subItem\"\n [service]=\"service()\"\n [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\n ></app-expression-item>\n }\n <div class=\"expressionItemBubble expression\">]</div>\n } @else {\n <div\n (click)=\"select($event, item)\"\n class=\"expressionItemBubble simpleItem\"\n [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\n >\n {{ item.label }}:\n @if (item.expressionData?.currentOperation !== 'BETWEEN') {\n <div>\n @if (item.widgetType === 'DATE') {\n <div>\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\n </div>\n }\n @if (item.widgetType === 'DATE_TIME') {\n <div>\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\n </div>\n }\n @if (item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE') {\n <div>\n <b>{{ getDisplayValue(item.expressionData!.operand2!.valueAsString!) }}</b>\n </div>\n }\n </div>\n }\n @if (item.expressionData?.currentOperation === 'IN') {\n <div>\n @for (value of item.expressionData?.operand2?.selectedValues; track value; let last = $last) {\n <b>\n {{ getDisplayValue(value) }} @if (!last) {\n <b>,</b>\n }\n </b>\n }\n </div>\n }\n @if (item.expressionData?.currentOperation === 'BETWEEN') {\n <div class=\"expressionValues\">\n @if (item.widgetType === 'DATE') {\n <div>\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\n </div>\n }\n @if (item.widgetType === 'DATE_TIME') {\n <div>\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\n </div>\n }\n @if (item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE') {\n <div>\n <b>{{ item.expressionData?.operand2?.valueAsString }}</b>\n </div>\n }\n <b>-</b>\n @if (item.widgetType === 'DATE') {\n <div>\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDate }}</b>\n </div>\n }\n @if (item.widgetType === 'DATE_TIME') {\n <div>\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDateTime }}</b>\n </div>\n }\n @if (item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE') {\n <div>\n <b>{{ item.expressionData?.operand3?.valueAsString }}</b>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n@if (hasNext()) {\n <div class=\"relationItemBubble\">\n <button\n mat-button\n (click)=\"setOperatorTo($event, boolOperatorType.AND)\"\n [ngClass]=\"\n item.expressionData?.boolOperator === boolOperatorType.AND\n ? 'mat-raised-button and-operator'\n : ''\n \"\n color=\"black\"\n >\n \u00C9S\n </button>\n <button\n mat-button\n (click)=\"setOperatorTo($event, boolOperatorType.OR)\"\n [ngClass]=\"\n item.expressionData?.boolOperator === boolOperatorType.OR\n ? 'mat-raised-button or-operator'\n : ''\n \"\n color=\"black\"\n >\n VAGY\n </button>\n </div>\n}\n</div>\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-darker-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.selectedSimpleItem{border:2px solid var(--primary-color)}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}\n"], dependencies: [{ kind: "component", type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: ["item", "hasNext", "service"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }] }); }
|
|
26316
26360
|
}
|
|
26317
26361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterExpressionItemComponent, decorators: [{
|
|
26318
26362
|
type: Component,
|
|
26319
|
-
args: [{ selector: 'app-expression-item', imports: [NgClass, MatButton, SmartDateTimePipe, SmartDatePipe], template: "<div class=\"expressionItemContainer\">\
|
|
26363
|
+
args: [{ selector: 'app-expression-item', imports: [NgClass, MatButton, SmartDateTimePipe, SmartDatePipe], template: "<div class=\"expressionItemContainer\">\n <div\n class=\"expressionItemInnerContainer\"\n [ngClass]=\"\n item.expressionData?.currentOperation === 'EXPRESSION'\n ? isSelected\n ? 'selectedExpressionContainer'\n : 'expressionContainer'\n : ''\n \"\n >\n @if (\n item.expressionData?.currentOperation === 'EXPRESSION') {\n <div class=\"expressionItemBubble expression\" (click)=\"select($event, item)\">[</div>\n @for (subItem of item.subFieldList?.filters; track subItem; let i = $index) {\n <app-expression-item\n [item]=\"subItem\"\n [service]=\"service()\"\n [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\n ></app-expression-item>\n }\n <div class=\"expressionItemBubble expression\">]</div>\n } @else {\n <div\n (click)=\"select($event, item)\"\n class=\"expressionItemBubble simpleItem\"\n [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\n >\n {{ item.label }}:\n @if (item.expressionData?.currentOperation !== 'BETWEEN') {\n <div>\n @if (item.widgetType === 'DATE') {\n <div>\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\n </div>\n }\n @if (item.widgetType === 'DATE_TIME') {\n <div>\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\n </div>\n }\n @if (item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE') {\n <div>\n <b>{{ getDisplayValue(item.expressionData!.operand2!.valueAsString!) }}</b>\n </div>\n }\n </div>\n }\n @if (item.expressionData?.currentOperation === 'IN') {\n <div>\n @for (value of item.expressionData?.operand2?.selectedValues; track value; let last = $last) {\n <b>\n {{ getDisplayValue(value) }} @if (!last) {\n <b>,</b>\n }\n </b>\n }\n </div>\n }\n @if (item.expressionData?.currentOperation === 'BETWEEN') {\n <div class=\"expressionValues\">\n @if (item.widgetType === 'DATE') {\n <div>\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\n </div>\n }\n @if (item.widgetType === 'DATE_TIME') {\n <div>\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\n </div>\n }\n @if (item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE') {\n <div>\n <b>{{ item.expressionData?.operand2?.valueAsString }}</b>\n </div>\n }\n <b>-</b>\n @if (item.widgetType === 'DATE') {\n <div>\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDate }}</b>\n </div>\n }\n @if (item.widgetType === 'DATE_TIME') {\n <div>\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDateTime }}</b>\n </div>\n }\n @if (item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE') {\n <div>\n <b>{{ item.expressionData?.operand3?.valueAsString }}</b>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n@if (hasNext()) {\n <div class=\"relationItemBubble\">\n <button\n mat-button\n (click)=\"setOperatorTo($event, boolOperatorType.AND)\"\n [ngClass]=\"\n item.expressionData?.boolOperator === boolOperatorType.AND\n ? 'mat-raised-button and-operator'\n : ''\n \"\n color=\"black\"\n >\n \u00C9S\n </button>\n <button\n mat-button\n (click)=\"setOperatorTo($event, boolOperatorType.OR)\"\n [ngClass]=\"\n item.expressionData?.boolOperator === boolOperatorType.OR\n ? 'mat-raised-button or-operator'\n : ''\n \"\n color=\"black\"\n >\n VAGY\n </button>\n </div>\n}\n</div>\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-darker-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.selectedSimpleItem{border:2px solid var(--primary-color)}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}\n"] }]
|
|
26320
26364
|
}], ctorParameters: () => [], propDecorators: { item: [{
|
|
26321
26365
|
type: Input
|
|
26322
26366
|
}], hasNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNext", required: true }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }] } });
|
|
@@ -26332,11 +26376,11 @@ class AdvancedRelationButtonComponent {
|
|
|
26332
26376
|
: FilterExpressionBoolOperator.AND);
|
|
26333
26377
|
}
|
|
26334
26378
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedRelationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AdvancedRelationButtonComponent, isStandalone: true, selector: "lib-advanced-relation-button", inputs: { boolOperator: "boolOperator" }, outputs: { boolOperatorChanged: "boolOperatorChanged" }, ngImport: i0, template: "<div class=\"relationItemBubble\">\
|
|
26379
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AdvancedRelationButtonComponent, isStandalone: true, selector: "lib-advanced-relation-button", inputs: { boolOperator: "boolOperator" }, outputs: { boolOperatorChanged: "boolOperatorChanged" }, ngImport: i0, template: "<div class=\"relationItemBubble\">\n <button\n mat-button\n (click)=\"toggle($event)\"\n class=\"mat-raised-button\"\n [ngClass]=\"boolOperator === boolOperatorType.AND ? 'and-oeprator' : 'or-operator'\"\n color=\"black\"\n >\n {{ boolOperator === boolOperatorType.AND ? '\u00C9S' : 'VAGY' }}\n </button>\n</div>\n", styles: [".relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0;padding-top:.75em;padding-bottom:.75em}.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem;border:1px solid #cdcdcd;padding:.25rem;max-height:42px;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
26336
26380
|
}
|
|
26337
26381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedRelationButtonComponent, decorators: [{
|
|
26338
26382
|
type: Component,
|
|
26339
|
-
args: [{ selector: 'lib-advanced-relation-button', imports: [NgClass, MatButton], template: "<div class=\"relationItemBubble\">\
|
|
26383
|
+
args: [{ selector: 'lib-advanced-relation-button', imports: [NgClass, MatButton], template: "<div class=\"relationItemBubble\">\n <button\n mat-button\n (click)=\"toggle($event)\"\n class=\"mat-raised-button\"\n [ngClass]=\"boolOperator === boolOperatorType.AND ? 'and-oeprator' : 'or-operator'\"\n color=\"black\"\n >\n {{ boolOperator === boolOperatorType.AND ? '\u00C9S' : 'VAGY' }}\n </button>\n</div>\n", styles: [".relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0;padding-top:.75em;padding-bottom:.75em}.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem;border:1px solid #cdcdcd;padding:.25rem;max-height:42px;height:100%}\n"] }]
|
|
26340
26384
|
}], propDecorators: { boolOperator: [{
|
|
26341
26385
|
type: Input
|
|
26342
26386
|
}], boolOperatorChanged: [{
|
|
@@ -26364,7 +26408,7 @@ class AdvancedSmartFilterExpressionItemComponent extends SmartFilterExpressionIt
|
|
|
26364
26408
|
return hasGroupEditActions(this.service());
|
|
26365
26409
|
}
|
|
26366
26410
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedSmartFilterExpressionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
26367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AdvancedSmartFilterExpressionItemComponent, isStandalone: true, selector: "app-advanced-expression-item", usesInheritance: true, ngImport: i0, template: "<div class=\"expressionItemContainer\">\
|
|
26411
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AdvancedSmartFilterExpressionItemComponent, isStandalone: true, selector: "app-advanced-expression-item", usesInheritance: true, ngImport: i0, template: "<div class=\"expressionItemContainer\">\n <div\n class=\"expressionItemInnerContainer\"\n [ngClass]=\"\n item.expressionData?.currentOperation === 'EXPRESSION'\n ? isSelected\n ? 'selectedExpressionContainer'\n : 'expressionContainer'\n : ''\n \"\n >\n @if (item.expressionData?.currentOperation === \"EXPRESSION\") {\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\n <div\n class=\"expressionItemBubble expression sub-expression-start\"\n (click)=\"select($event, item)\"\n ></div>\n <div class=\"sub-expression-items\">\n @for (subItem of item.subFieldList?.filters; track subItem) {\n <app-advanced-expression-item\n [item]=\"subItem\"\n [service]=\"service()\"\n [hasNext]=\"!$last\"\n ></app-advanced-expression-item>\n }\n </div>\n <lib-advanced-relation-button\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\n ></lib-advanced-relation-button>\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\n </div>\n } @else {\n <div\n (click)=\"select($event, item)\"\n class=\"expressionItemBubble simpleItem\"\n [class.selectedSimpleItem]=\"isSelected\"\n >\n @if (showDeleteButton()) {\n <button\n mat-button\n class=\"mat-raised-button delete-button\"\n (click)=\"deleteItem($event)\"\n >\n x\n </button>\n }\n <div class=\"expression-item-label\">{{ item.label }}:</div>\n\n @if (item.expressionData?.currentOperation !== \"BETWEEN\") {\n <div class=\"expression-item-data-fields\">\n @if (item.widgetType === \"DATE\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand2!.valueAsString! | smartDate\n }}</b>\n } @else if (item.widgetType === \"DATE_TIME\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand2!.valueAsString! | smartDateTime\n }}</b>\n } @else {\n <b class=\"expression-item-data-field\">{{\n getDisplayValue(item.expressionData!.operand2!.valueAsString!)\n }}</b>\n }\n </div>\n }\n\n @if (item.expressionData?.currentOperation === \"IN\") {\n <div class=\"expression-item-data-fields\">\n @for (\n value of item.expressionData?.operand2?.selectedValues;\n track value\n ) {\n <b class=\"expression-item-data-field\">\n {{ getDisplayValue(value) }}\n @if (!$last) {\n <b>,</b>\n }\n </b>\n }\n </div>\n }\n\n @if (item.expressionData?.currentOperation === \"BETWEEN\") {\n <div class=\"expressionValues expression-item-data-fields\">\n @if (item.widgetType === \"DATE\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand2!.valueAsString! | smartDate\n }}</b>\n } @else if (item.widgetType === \"DATE_TIME\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand2!.valueAsString! | smartDateTime\n }}</b>\n } @else {\n <b class=\"expression-item-data-field\">{{\n item.expressionData?.operand2?.valueAsString\n }}</b>\n }\n\n <b>-</b>\n\n @if (item.widgetType === \"DATE\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand3!.valueAsString! | smartDate\n }}</b>\n } @else if (item.widgetType === \"DATE_TIME\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand3!.valueAsString! | smartDateTime\n }}</b>\n } @else {\n <b class=\"expression-item-data-field\">{{\n item.expressionData?.operand3?.valueAsString\n }}</b>\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;height:20px;padding:5px;border-radius:1.5rem}.expression-item-label{padding:0 .5rem}\n"], dependencies: [{ kind: "component", type: AdvancedSmartFilterExpressionItemComponent, selector: "app-advanced-expression-item" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdvancedRelationButtonComponent, selector: "lib-advanced-relation-button", inputs: ["boolOperator"], outputs: ["boolOperatorChanged"] }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }] }); }
|
|
26368
26412
|
}
|
|
26369
26413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedSmartFilterExpressionItemComponent, decorators: [{
|
|
26370
26414
|
type: Component,
|
|
@@ -26376,7 +26420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
26376
26420
|
SmartDatePipe,
|
|
26377
26421
|
SmartDateTimePipe,
|
|
26378
26422
|
AdvancedRelationButtonComponent,
|
|
26379
|
-
], template: "<div class=\"expressionItemContainer\">\
|
|
26423
|
+
], template: "<div class=\"expressionItemContainer\">\n <div\n class=\"expressionItemInnerContainer\"\n [ngClass]=\"\n item.expressionData?.currentOperation === 'EXPRESSION'\n ? isSelected\n ? 'selectedExpressionContainer'\n : 'expressionContainer'\n : ''\n \"\n >\n @if (item.expressionData?.currentOperation === \"EXPRESSION\") {\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\n <div\n class=\"expressionItemBubble expression sub-expression-start\"\n (click)=\"select($event, item)\"\n ></div>\n <div class=\"sub-expression-items\">\n @for (subItem of item.subFieldList?.filters; track subItem) {\n <app-advanced-expression-item\n [item]=\"subItem\"\n [service]=\"service()\"\n [hasNext]=\"!$last\"\n ></app-advanced-expression-item>\n }\n </div>\n <lib-advanced-relation-button\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\n ></lib-advanced-relation-button>\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\n </div>\n } @else {\n <div\n (click)=\"select($event, item)\"\n class=\"expressionItemBubble simpleItem\"\n [class.selectedSimpleItem]=\"isSelected\"\n >\n @if (showDeleteButton()) {\n <button\n mat-button\n class=\"mat-raised-button delete-button\"\n (click)=\"deleteItem($event)\"\n >\n x\n </button>\n }\n <div class=\"expression-item-label\">{{ item.label }}:</div>\n\n @if (item.expressionData?.currentOperation !== \"BETWEEN\") {\n <div class=\"expression-item-data-fields\">\n @if (item.widgetType === \"DATE\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand2!.valueAsString! | smartDate\n }}</b>\n } @else if (item.widgetType === \"DATE_TIME\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand2!.valueAsString! | smartDateTime\n }}</b>\n } @else {\n <b class=\"expression-item-data-field\">{{\n getDisplayValue(item.expressionData!.operand2!.valueAsString!)\n }}</b>\n }\n </div>\n }\n\n @if (item.expressionData?.currentOperation === \"IN\") {\n <div class=\"expression-item-data-fields\">\n @for (\n value of item.expressionData?.operand2?.selectedValues;\n track value\n ) {\n <b class=\"expression-item-data-field\">\n {{ getDisplayValue(value) }}\n @if (!$last) {\n <b>,</b>\n }\n </b>\n }\n </div>\n }\n\n @if (item.expressionData?.currentOperation === \"BETWEEN\") {\n <div class=\"expressionValues expression-item-data-fields\">\n @if (item.widgetType === \"DATE\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand2!.valueAsString! | smartDate\n }}</b>\n } @else if (item.widgetType === \"DATE_TIME\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand2!.valueAsString! | smartDateTime\n }}</b>\n } @else {\n <b class=\"expression-item-data-field\">{{\n item.expressionData?.operand2?.valueAsString\n }}</b>\n }\n\n <b>-</b>\n\n @if (item.widgetType === \"DATE\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand3!.valueAsString! | smartDate\n }}</b>\n } @else if (item.widgetType === \"DATE_TIME\") {\n <b class=\"expression-item-data-field\">{{\n item.expressionData!.operand3!.valueAsString! | smartDateTime\n }}</b>\n } @else {\n <b class=\"expression-item-data-field\">{{\n item.expressionData?.operand3?.valueAsString\n }}</b>\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;height:20px;padding:5px;border-radius:1.5rem}.expression-item-label{padding:0 .5rem}\n"] }]
|
|
26380
26424
|
}] });
|
|
26381
26425
|
|
|
26382
26426
|
class SmartFilterExpressionItemsComponent {
|
|
@@ -26418,7 +26462,7 @@ class SmartFilterExpressionItemsComponent {
|
|
|
26418
26462
|
await this.service().bulkUpdateFilterExpression($event);
|
|
26419
26463
|
}
|
|
26420
26464
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterExpressionItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterExpressionItemsComponent, isStandalone: true, selector: "app-expression-items", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (useAdvancedFilter) {\
|
|
26465
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterExpressionItemsComponent, isStandalone: true, selector: "app-expression-items", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (useAdvancedFilter) {\n <div class=\"advanced-expression-builder-container\">\n <div\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"expressionsContainer example-list\"\n [ngClass]=\"isSelected ? 'selected' : ''\"\n >\n @for (item of items(); track item; let i = $index) {\n <div\n cdkDrag\n class=\"expressionItem\"\n [ngClass]=\"item.expressionData?.currentOperation == 'EXPRESSION' ? 'non-flex' : ''\"\n >\n <app-advanced-expression-item\n [item]=\"item\"\n [hasNext]=\"i < items().length - 1\"\n [service]=\"service()\"\n ></app-advanced-expression-item>\n </div>\n }\n </div>\n\n <div class=\"relationItemBubble\">\n <lib-advanced-relation-button\n [boolOperator]=\"service().model?.model?.workplaceList?.defaultOperation\"\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\n ></lib-advanced-relation-button>\n </div>\n </div>\n} @else {\n <div\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"expressionsContainer example-list\"\n [ngClass]=\"isSelected ? 'selected' : ''\"\n >\n @for (item of items(); track item; let i = $index) {\n <div cdkDrag class=\"expressionItem\">\n <app-expression-item\n [item]=\"item\"\n [hasNext]=\"i < items().length - 1\"\n [service]=\"service()\"\n ></app-expression-item>\n </div>\n }\n </div>\n}\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.non-flex{flex:0 0 100%}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}:host{display:flex}.advanced-expression-builder-container{display:inline-flex}.relationItemBubble{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: ["item", "hasNext", "service"] }, { kind: "component", type: AdvancedSmartFilterExpressionItemComponent, selector: "app-advanced-expression-item" }, { kind: "component", type: AdvancedRelationButtonComponent, selector: "lib-advanced-relation-button", inputs: ["boolOperator"], outputs: ["boolOperatorChanged"] }] }); }
|
|
26422
26466
|
}
|
|
26423
26467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterExpressionItemsComponent, decorators: [{
|
|
26424
26468
|
type: Component,
|
|
@@ -26427,7 +26471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
26427
26471
|
SmartFilterExpressionItemComponent,
|
|
26428
26472
|
AdvancedSmartFilterExpressionItemComponent,
|
|
26429
26473
|
AdvancedRelationButtonComponent,
|
|
26430
|
-
], template: "@if (useAdvancedFilter) {\
|
|
26474
|
+
], template: "@if (useAdvancedFilter) {\n <div class=\"advanced-expression-builder-container\">\n <div\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"expressionsContainer example-list\"\n [ngClass]=\"isSelected ? 'selected' : ''\"\n >\n @for (item of items(); track item; let i = $index) {\n <div\n cdkDrag\n class=\"expressionItem\"\n [ngClass]=\"item.expressionData?.currentOperation == 'EXPRESSION' ? 'non-flex' : ''\"\n >\n <app-advanced-expression-item\n [item]=\"item\"\n [hasNext]=\"i < items().length - 1\"\n [service]=\"service()\"\n ></app-advanced-expression-item>\n </div>\n }\n </div>\n\n <div class=\"relationItemBubble\">\n <lib-advanced-relation-button\n [boolOperator]=\"service().model?.model?.workplaceList?.defaultOperation\"\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\n ></lib-advanced-relation-button>\n </div>\n </div>\n} @else {\n <div\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"expressionsContainer example-list\"\n [ngClass]=\"isSelected ? 'selected' : ''\"\n >\n @for (item of items(); track item; let i = $index) {\n <div cdkDrag class=\"expressionItem\">\n <app-expression-item\n [item]=\"item\"\n [hasNext]=\"i < items().length - 1\"\n [service]=\"service()\"\n ></app-expression-item>\n </div>\n }\n </div>\n}\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.non-flex{flex:0 0 100%}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}:host{display:flex}.advanced-expression-builder-container{display:inline-flex}.relationItemBubble{padding:.5rem}\n"] }]
|
|
26431
26475
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }] } });
|
|
26432
26476
|
|
|
26433
26477
|
class ExpressionEditorDialogComponent {
|
|
@@ -26473,11 +26517,11 @@ class ExpressionEditorDialogComponent {
|
|
|
26473
26517
|
this.service.closeDialog(false);
|
|
26474
26518
|
}
|
|
26475
26519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26476
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ExpressionEditorDialogComponent, isStandalone: true, selector: "lib-expression-editor-dialog", viewQueries: [{ propertyName: "formComponent", first: true, predicate: ["form"], descendants: true, read: SmartformComponent }], ngImport: i0, template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\
|
|
26520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ExpressionEditorDialogComponent, isStandalone: true, selector: "lib-expression-editor-dialog", viewQueries: [{ propertyName: "formComponent", first: true, predicate: ["form"], descendants: true, read: SmartformComponent }], ngImport: i0, template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\n<div class=\"button-container\">\n <button (click)=\"cancel()\" mat-raised-button color=\"secondary\">Bez\u00E1r\u00E1s</button>\n</div>", styles: [".button-container{display:flex;justify-content:flex-end;gap:1rem}:host{display:flex;flex-direction:column;padding:1rem}:host::ng-deep h4{margin:0}:host::ng-deep .mat-mdc-form-field-infix:has(input){padding:0}\n"], dependencies: [{ kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
26477
26521
|
}
|
|
26478
26522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogComponent, decorators: [{
|
|
26479
26523
|
type: Component,
|
|
26480
|
-
args: [{ selector: "lib-expression-editor-dialog", imports: [SmartformComponent, MatButton], template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\
|
|
26524
|
+
args: [{ selector: "lib-expression-editor-dialog", imports: [SmartformComponent, MatButton], template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\n<div class=\"button-container\">\n <button (click)=\"cancel()\" mat-raised-button color=\"secondary\">Bez\u00E1r\u00E1s</button>\n</div>", styles: [".button-container{display:flex;justify-content:flex-end;gap:1rem}:host{display:flex;flex-direction:column;padding:1rem}:host::ng-deep h4{margin:0}:host::ng-deep .mat-mdc-form-field-infix:has(input){padding:0}\n"] }]
|
|
26481
26525
|
}], ctorParameters: () => [], propDecorators: { formComponent: [{
|
|
26482
26526
|
type: ViewChild,
|
|
26483
26527
|
args: ["form", { read: SmartformComponent }]
|
|
@@ -26875,11 +26919,11 @@ class SmartFilterEditorContentComponent {
|
|
|
26875
26919
|
});
|
|
26876
26920
|
}
|
|
26877
26921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterEditorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterEditorContentComponent, isStandalone: true, selector: "smart-filter-expression-editor", inputs: { service: "service" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFilterVcRef", first: true, predicate: ["simpleFilterFromChild"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-filter-editor-container\" *ngIf=\"service.model\">\
|
|
26922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterEditorContentComponent, isStandalone: true, selector: "smart-filter-expression-editor", inputs: { service: "service" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFilterVcRef", first: true, predicate: ["simpleFilterFromChild"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-filter-editor-container\" *ngIf=\"service.model\">\n @if (service.model.model?.label) {\n <h3 class=\"smart-filter-editor-title\">{{ service.model.model?.label }}</h3>\n }\n\n <div *ngIf=\"service.model.type === type.SIMPLE; then simpleFilter; else complexFilter\"></div>\n\n <ng-template #simpleFilter>\n <div class=\"smart-filter-editor-expressionsContainer\">\n <ng-template #simpleFilterFromChild></ng-template>\n <!-- #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform> -->\n </div>\n </ng-template>\n <ng-template #complexFilter>\n <div class=\"smart-filter-editor-uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\n <smart-ui-action-toolbar\n [uiActionModels]=\"uiActionModels\"\n [executor]=\"service\"\n ></smart-ui-action-toolbar>\n </div>\n <div\n *ngIf=\"\n service.model?.model?.workplaceList?.filters?.length;\n then withParameters;\n else withoutParameters\n \"\n ></div>\n <ng-template #withoutParameters>\n <div class=\"smart-filter-editor-withoutParametersContainer\">\n <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\n </div>\n </ng-template>\n <ng-template #withParameters>\n <div class=\"smart-filter-editor-withParametersContainer\">\n <div\n class=\"smart-filter-editor-expressionsContainer\"\n *ngIf=\"service.model?.model?.workplaceList?.filters?.length\"\n (click)=\"unSelectItems($event)\"\n >\n <app-expression-items\n [items]=\"(service.model?.model?.workplaceList)!.filters\"\n [service]=\"service\"\n ></app-expression-items>\n </div>\n <div\n *ngIf=\"\n !useAdvancedFilter ||\n service.model?.selectedField?.expressionData?.currentOperation === 'EXPRESSION'\n \"\n class=\"smart-filter-editor-expressionEditorContainer\"\n >\n <!-- <smartform #form [smartForm]=\"smartForm\"></smartform> -->\n <ng-template #form></ng-template>\n <div *ngIf=\"smartForm\">\n <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-template>\n</div>\n", styles: [".smart-filter-editor-container{display:flex;flex-direction:column;overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.smart-filter-editor-uiActionsBar{padding:.5rem;border-radius:.25rem;background-color:var(--container-color);display:flex;flex-direction:row;gap:1rem}.smart-filter-editor-withoutParametersContainer{display:flex;flex-direction:column;padding:.5rem;background-color:var(--container-color)}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.smart-filter-editor-withParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.smart-filter-editor-expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartFilterExpressionItemsComponent, selector: "app-expression-items", inputs: ["items", "service"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
26879
26923
|
}
|
|
26880
26924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterEditorContentComponent, decorators: [{
|
|
26881
26925
|
type: Component,
|
|
26882
|
-
args: [{ selector: 'smart-filter-expression-editor', imports: [NgIf, UiActionToolbarComponent, SmartFilterExpressionItemsComponent, MatButton], template: "<div class=\"smart-filter-editor-container\" *ngIf=\"service.model\">\
|
|
26926
|
+
args: [{ selector: 'smart-filter-expression-editor', imports: [NgIf, UiActionToolbarComponent, SmartFilterExpressionItemsComponent, MatButton], template: "<div class=\"smart-filter-editor-container\" *ngIf=\"service.model\">\n @if (service.model.model?.label) {\n <h3 class=\"smart-filter-editor-title\">{{ service.model.model?.label }}</h3>\n }\n\n <div *ngIf=\"service.model.type === type.SIMPLE; then simpleFilter; else complexFilter\"></div>\n\n <ng-template #simpleFilter>\n <div class=\"smart-filter-editor-expressionsContainer\">\n <ng-template #simpleFilterFromChild></ng-template>\n <!-- #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform> -->\n </div>\n </ng-template>\n <ng-template #complexFilter>\n <div class=\"smart-filter-editor-uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\n <smart-ui-action-toolbar\n [uiActionModels]=\"uiActionModels\"\n [executor]=\"service\"\n ></smart-ui-action-toolbar>\n </div>\n <div\n *ngIf=\"\n service.model?.model?.workplaceList?.filters?.length;\n then withParameters;\n else withoutParameters\n \"\n ></div>\n <ng-template #withoutParameters>\n <div class=\"smart-filter-editor-withoutParametersContainer\">\n <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\n </div>\n </ng-template>\n <ng-template #withParameters>\n <div class=\"smart-filter-editor-withParametersContainer\">\n <div\n class=\"smart-filter-editor-expressionsContainer\"\n *ngIf=\"service.model?.model?.workplaceList?.filters?.length\"\n (click)=\"unSelectItems($event)\"\n >\n <app-expression-items\n [items]=\"(service.model?.model?.workplaceList)!.filters\"\n [service]=\"service\"\n ></app-expression-items>\n </div>\n <div\n *ngIf=\"\n !useAdvancedFilter ||\n service.model?.selectedField?.expressionData?.currentOperation === 'EXPRESSION'\n \"\n class=\"smart-filter-editor-expressionEditorContainer\"\n >\n <!-- <smartform #form [smartForm]=\"smartForm\"></smartform> -->\n <ng-template #form></ng-template>\n <div *ngIf=\"smartForm\">\n <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-template>\n</div>\n", styles: [".smart-filter-editor-container{display:flex;flex-direction:column;overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.smart-filter-editor-uiActionsBar{padding:.5rem;border-radius:.25rem;background-color:var(--container-color);display:flex;flex-direction:row;gap:1rem}.smart-filter-editor-withoutParametersContainer{display:flex;flex-direction:column;padding:.5rem;background-color:var(--container-color)}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.smart-filter-editor-withParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.smart-filter-editor-expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"] }]
|
|
26883
26927
|
}], ctorParameters: () => [], propDecorators: { service: [{
|
|
26884
26928
|
type: Input
|
|
26885
26929
|
}], vcRef: [{
|
|
@@ -26922,11 +26966,11 @@ class SmartFilterWidgetComponent {
|
|
|
26922
26966
|
}
|
|
26923
26967
|
}
|
|
26924
26968
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26925
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterWidgetComponent, isStandalone: true, selector: "smart-filter-widget", inputs: { identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: true, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null } }, providers: [SmartFilterEditorService], usesOnChanges: true, ngImport: i0, template: "@if (service.model) {\
|
|
26969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterWidgetComponent, isStandalone: true, selector: "smart-filter-widget", inputs: { identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: true, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null } }, providers: [SmartFilterEditorService], usesOnChanges: true, ngImport: i0, template: "@if (service.model) {\n <div class=\"filter-widget-container\">\n <smart-filter-group-params [service]=\"service\"></smart-filter-group-params>\n <smart-filter-expression-editor [service]=\"service\"></smart-filter-expression-editor>\n </div>\n}\n", styles: [".filter-widget-container{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26926
26970
|
}
|
|
26927
26971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterWidgetComponent, decorators: [{
|
|
26928
26972
|
type: Component,
|
|
26929
|
-
args: [{ selector: 'smart-filter-widget', imports: [SmartFilterParamsComponent, SmartFilterEditorContentComponent], providers: [SmartFilterEditorService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (service.model) {\
|
|
26973
|
+
args: [{ selector: 'smart-filter-widget', imports: [SmartFilterParamsComponent, SmartFilterEditorContentComponent], providers: [SmartFilterEditorService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (service.model) {\n <div class=\"filter-widget-container\">\n <smart-filter-group-params [service]=\"service\"></smart-filter-group-params>\n <smart-filter-expression-editor [service]=\"service\"></smart-filter-expression-editor>\n </div>\n}\n", styles: [".filter-widget-container{display:flex;flex-direction:row}\n"] }]
|
|
26930
26974
|
}], ctorParameters: () => [], propDecorators: { identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: true }] }], uuid: [{
|
|
26931
26975
|
type: Input
|
|
26932
26976
|
}] } });
|
|
@@ -27267,11 +27311,11 @@ class SmartComponentLayoutComponent {
|
|
|
27267
27311
|
}
|
|
27268
27312
|
}
|
|
27269
27313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartComponentLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27270
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartComponentLayoutComponent, isStandalone: true, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "@if (smartComponentLayout?.expandable) {\
|
|
27314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartComponentLayoutComponent, isStandalone: true, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "@if (smartComponentLayout?.expandable) {\n @if (expandableSection) {\n <smart-expandable-section\n [data]=\"expandableSection\"\n ></smart-expandable-section>\n }\n} @else {\n @if (smartComponentLayout?.type === type().CONTAINER) {\n <!--\n Tracked by position, not by identity: the backend hands back new layout objects on every\n model refresh, so `track layout` recreated the whole subtree each time (NG0956). Position\n is sound here because a child rebuilds from its input in `setUp()` regardless of which\n component instance lands on which definition, and its own `deepEqual` guard then decides\n whether anything actually changed. `identifier` is not usable as a key \u2014 the platform's\n LayoutBuilder sets it conditionally, so a sibling list is overwhelmingly all-`undefined`\n (NG0955). See A20 / ADR-0007 decision 5.\n -->\n @for (layout of smartComponentLayout?.components; track $index) {\n <smart-component-layout\n [parentLayoutComponent]=\"this\"\n [smartComponentLayout]=\"layout\"\n [gridRow]=\"gridRow\"\n ></smart-component-layout>\n }\n }\n @if (smartForm) {\n <smartform [smartForm]=\"smartForm\"></smartform>\n }\n @if (smartGrid) {\n <smart-grid\n [smartGrid]=\"smartGrid\"\n [uuid]=\"uuid!\"\n [parentLayoutComponent]=\"this\"\n ></smart-grid>\n }\n @if (!!uuid && !!mapId) {\n <smart-map [uuid]=\"uuid\" [identifier]=\"mapId\"></smart-map>\n }\n @if (!!uuid && !!smartDiagramId) {\n <smart-diagram [uuid]=\"uuid\" [identifier]=\"smartDiagramId\"></smart-diagram>\n }\n @if (!!uuid && !!filterId) {\n <smart-filter-widget [uuid]=\"uuid\" [identifier]=\"filterId\"></smart-filter-widget>\n }\n @if (treeService) {\n <smart-tree [treeService]=\"treeService!\"></smart-tree>\n }\n @if (!!toolbarId) {\n <smart-ui-action-toolbar\n [id]=\"toolbarId\"\n [toolbarPropertes]=\"toolbarPropertes\"\n ></smart-ui-action-toolbar>\n }\n @if (embeddedSlotActive) {\n <ng-container #embeddedSlot></ng-container>\n }\n}\n\n\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}:host(.sm-view-tabs){min-height:0}:host(.sm-nav-view){gap:.75rem;padding:.75rem 1rem}:host(.sm-nav-pane) ::ng-deep .sm-nav-view,:host(.sm-nav-slot) ::ng-deep .sm-nav-view{padding:0}:host(.sm-nav-caption) ::ng-deep .label{margin:0}:host(.sm-nav-caption) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-section-title) ::ng-deep .row{align-items:center}:host(.sm-nav-section-title) ::ng-deep .row>.item{flex:0 1 auto;min-width:0}:host(.sm-nav-caption) ::ng-deep .row{display:block}:host(.sm-nav-caption) ::ng-deep .row>.item{display:inline-block;vertical-align:middle}:host(.sm-nav-caption) ::ng-deep .row>.item:has(.smart-form-widget-label),:host(.sm-nav-caption) ::ng-deep .row>.item:has(.smart-form-widget-label) *{display:inline}:host(.sm-nav-caption) ::ng-deep .row>.item+.item{margin-inline-start:.25em}:host(.sm-nav-header){align-items:center;justify-content:space-between;gap:.5rem}:host(.sm-nav-section){gap:.5rem;flex:1 1 0;min-width:0;margin-top:.5rem}:host(.sm-nav-section-title) ::ng-deep .label{margin:0}:host(.sm-nav-section-title) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.1rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-frame){position:relative;margin-top:.75rem;padding:1.75rem 1rem 1rem;border:1px none var(--color-border, #e4eaf2);border-radius:.5rem}:host(.sm-nav-frame-solid){border-style:solid}:host(.sm-nav-caption-n),:host(.sm-nav-caption-s){align-self:center}:host(.sm-nav-caption-ne),:host(.sm-nav-caption-se){align-self:flex-end}:host(.sm-nav-caption-sw),:host(.sm-nav-caption-s),:host(.sm-nav-caption-se){order:1}:host(.sm-nav-caption-e),:host(.sm-nav-caption-w){position:absolute;top:0;writing-mode:vertical-rl}:host(.sm-nav-caption-e){right:0}:host(.sm-nav-caption-w){left:0;transform:rotate(180deg)}:host:has(>smart-component-layout.sm-nav-caption-e){position:relative;padding-right:2.25rem}:host:has(>smart-component-layout.sm-nav-caption-w){position:relative;padding-left:2.25rem}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-nw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-n,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-ne,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-e,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-se,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-s,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-sw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-w{position:absolute;padding:0 .5rem;background-color:var(--color-surface, #ffffff)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-nw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-ne{top:0;transform:translateY(-50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-sw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-se{bottom:0;transform:translateY(50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-nw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-sw{left:.75rem}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-ne,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-se{right:.75rem}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-n{top:0;left:50%;transform:translate(-50%,-50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-s{bottom:0;left:50%;transform:translate(-50%,50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-e{top:.75rem;right:0;padding:.5rem 0;transform:translate(50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-w{top:.75rem;left:0;padding:.5rem 0;transform:translate(-50%) rotate(180deg)}:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-e){padding-right:2rem}:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-w){padding-left:2rem}:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-sw),:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-s),:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-se){padding:1rem 1rem 1.75rem;margin-bottom:.75rem}:host(.sm-nav-frame):not(:has(>smart-component-layout:is(.sm-nav-caption-nw,.sm-nav-caption-n,.sm-nav-caption-ne,.sm-nav-caption-e,.sm-nav-caption-se,.sm-nav-caption-s,.sm-nav-caption-sw,.sm-nav-caption-w))){padding:1rem}:host(.sm-nav-list),:host(.sm-nav-pane){display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host(.sm-nav-pane){margin-left:1rem;padding-left:1rem;border-left:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-pane.sm-slot-empty){flex:0 0 0;margin:0;padding:0;border:0}:host(.sm-nav-tree){flex:0 0 320px;align-self:stretch;min-height:60vh;min-width:0;padding:.5rem 0;background-color:var(--color-surface, #ffffff);border-right:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-slot){display:flex;flex-direction:column;flex:1 1 0;min-width:0;padding:.75rem 1rem}:host(.sm-nav-crumbs){padding-bottom:.25rem;border-bottom:1px solid var(--color-border, #e4eaf2)}\n"], dependencies: [{ kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parentLayoutComponent", "dev"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartFilterWidgetComponent, selector: "smart-filter-widget", inputs: ["identifier", "uuid"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }] }); }
|
|
27271
27315
|
}
|
|
27272
27316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
|
|
27273
27317
|
type: Component,
|
|
27274
|
-
args: [{ selector: 'smart-component-layout', imports: [ExpandableSectionComponent, SmartformComponent, SmartGridComponent, SmartMapComponent, SmartDiagramComponent, SmartFilterWidgetComponent, SmartTreeComponent, UiActionToolbarComponent], template: "@if (smartComponentLayout?.expandable) {\
|
|
27318
|
+
args: [{ selector: 'smart-component-layout', imports: [ExpandableSectionComponent, SmartformComponent, SmartGridComponent, SmartMapComponent, SmartDiagramComponent, SmartFilterWidgetComponent, SmartTreeComponent, UiActionToolbarComponent], template: "@if (smartComponentLayout?.expandable) {\n @if (expandableSection) {\n <smart-expandable-section\n [data]=\"expandableSection\"\n ></smart-expandable-section>\n }\n} @else {\n @if (smartComponentLayout?.type === type().CONTAINER) {\n <!--\n Tracked by position, not by identity: the backend hands back new layout objects on every\n model refresh, so `track layout` recreated the whole subtree each time (NG0956). Position\n is sound here because a child rebuilds from its input in `setUp()` regardless of which\n component instance lands on which definition, and its own `deepEqual` guard then decides\n whether anything actually changed. `identifier` is not usable as a key \u2014 the platform's\n LayoutBuilder sets it conditionally, so a sibling list is overwhelmingly all-`undefined`\n (NG0955). See A20 / ADR-0007 decision 5.\n -->\n @for (layout of smartComponentLayout?.components; track $index) {\n <smart-component-layout\n [parentLayoutComponent]=\"this\"\n [smartComponentLayout]=\"layout\"\n [gridRow]=\"gridRow\"\n ></smart-component-layout>\n }\n }\n @if (smartForm) {\n <smartform [smartForm]=\"smartForm\"></smartform>\n }\n @if (smartGrid) {\n <smart-grid\n [smartGrid]=\"smartGrid\"\n [uuid]=\"uuid!\"\n [parentLayoutComponent]=\"this\"\n ></smart-grid>\n }\n @if (!!uuid && !!mapId) {\n <smart-map [uuid]=\"uuid\" [identifier]=\"mapId\"></smart-map>\n }\n @if (!!uuid && !!smartDiagramId) {\n <smart-diagram [uuid]=\"uuid\" [identifier]=\"smartDiagramId\"></smart-diagram>\n }\n @if (!!uuid && !!filterId) {\n <smart-filter-widget [uuid]=\"uuid\" [identifier]=\"filterId\"></smart-filter-widget>\n }\n @if (treeService) {\n <smart-tree [treeService]=\"treeService!\"></smart-tree>\n }\n @if (!!toolbarId) {\n <smart-ui-action-toolbar\n [id]=\"toolbarId\"\n [toolbarPropertes]=\"toolbarPropertes\"\n ></smart-ui-action-toolbar>\n }\n @if (embeddedSlotActive) {\n <ng-container #embeddedSlot></ng-container>\n }\n}\n\n\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}:host(.sm-view-tabs){min-height:0}:host(.sm-nav-view){gap:.75rem;padding:.75rem 1rem}:host(.sm-nav-pane) ::ng-deep .sm-nav-view,:host(.sm-nav-slot) ::ng-deep .sm-nav-view{padding:0}:host(.sm-nav-caption) ::ng-deep .label{margin:0}:host(.sm-nav-caption) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-section-title) ::ng-deep .row{align-items:center}:host(.sm-nav-section-title) ::ng-deep .row>.item{flex:0 1 auto;min-width:0}:host(.sm-nav-caption) ::ng-deep .row{display:block}:host(.sm-nav-caption) ::ng-deep .row>.item{display:inline-block;vertical-align:middle}:host(.sm-nav-caption) ::ng-deep .row>.item:has(.smart-form-widget-label),:host(.sm-nav-caption) ::ng-deep .row>.item:has(.smart-form-widget-label) *{display:inline}:host(.sm-nav-caption) ::ng-deep .row>.item+.item{margin-inline-start:.25em}:host(.sm-nav-header){align-items:center;justify-content:space-between;gap:.5rem}:host(.sm-nav-section){gap:.5rem;flex:1 1 0;min-width:0;margin-top:.5rem}:host(.sm-nav-section-title) ::ng-deep .label{margin:0}:host(.sm-nav-section-title) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.1rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-frame){position:relative;margin-top:.75rem;padding:1.75rem 1rem 1rem;border:1px none var(--color-border, #e4eaf2);border-radius:.5rem}:host(.sm-nav-frame-solid){border-style:solid}:host(.sm-nav-caption-n),:host(.sm-nav-caption-s){align-self:center}:host(.sm-nav-caption-ne),:host(.sm-nav-caption-se){align-self:flex-end}:host(.sm-nav-caption-sw),:host(.sm-nav-caption-s),:host(.sm-nav-caption-se){order:1}:host(.sm-nav-caption-e),:host(.sm-nav-caption-w){position:absolute;top:0;writing-mode:vertical-rl}:host(.sm-nav-caption-e){right:0}:host(.sm-nav-caption-w){left:0;transform:rotate(180deg)}:host:has(>smart-component-layout.sm-nav-caption-e){position:relative;padding-right:2.25rem}:host:has(>smart-component-layout.sm-nav-caption-w){position:relative;padding-left:2.25rem}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-nw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-n,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-ne,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-e,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-se,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-s,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-sw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-w{position:absolute;padding:0 .5rem;background-color:var(--color-surface, #ffffff)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-nw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-ne{top:0;transform:translateY(-50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-sw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-se{bottom:0;transform:translateY(50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-nw,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-sw{left:.75rem}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-ne,:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-se{right:.75rem}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-n{top:0;left:50%;transform:translate(-50%,-50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-s{bottom:0;left:50%;transform:translate(-50%,50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-e{top:.75rem;right:0;padding:.5rem 0;transform:translate(50%)}:host(.sm-nav-frame)>smart-component-layout.sm-nav-caption-w{top:.75rem;left:0;padding:.5rem 0;transform:translate(-50%) rotate(180deg)}:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-e){padding-right:2rem}:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-w){padding-left:2rem}:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-sw),:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-s),:host(.sm-nav-frame):has(>smart-component-layout.sm-nav-caption-se){padding:1rem 1rem 1.75rem;margin-bottom:.75rem}:host(.sm-nav-frame):not(:has(>smart-component-layout:is(.sm-nav-caption-nw,.sm-nav-caption-n,.sm-nav-caption-ne,.sm-nav-caption-e,.sm-nav-caption-se,.sm-nav-caption-s,.sm-nav-caption-sw,.sm-nav-caption-w))){padding:1rem}:host(.sm-nav-list),:host(.sm-nav-pane){display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host(.sm-nav-pane){margin-left:1rem;padding-left:1rem;border-left:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-pane.sm-slot-empty){flex:0 0 0;margin:0;padding:0;border:0}:host(.sm-nav-tree){flex:0 0 320px;align-self:stretch;min-height:60vh;min-width:0;padding:.5rem 0;background-color:var(--color-surface, #ffffff);border-right:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-slot){display:flex;flex-direction:column;flex:1 1 0;min-width:0;padding:.75rem 1rem}:host(.sm-nav-crumbs){padding-bottom:.25rem;border-bottom:1px solid var(--color-border, #e4eaf2)}\n"] }]
|
|
27275
27319
|
}], propDecorators: { smartComponentLayout: [{
|
|
27276
27320
|
type: Input
|
|
27277
27321
|
}], parentLayoutComponent: [{
|
|
@@ -27389,11 +27433,11 @@ class GenericPageComponent extends SmartComponent {
|
|
|
27389
27433
|
return currentView?.type == ViewType.DIALOG;
|
|
27390
27434
|
}
|
|
27391
27435
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GenericPageComponent, deps: [{ token: i0.Injector }, { token: SMART_GENERIC_PAGE_NAME }, { token: SMART_GENERIC_COMPONENT_NAME }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GenericPageComponent, isStandalone: true, selector: "app-generic-page", usesInheritance: true, ngImport: i0, template: "<div class=\"generic-page-container\">\
|
|
27436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GenericPageComponent, isStandalone: true, selector: "app-generic-page", usesInheritance: true, ngImport: i0, template: "<div class=\"generic-page-container\">\n @if (componentLayout) {\n <smart-component-layout\n class=\"generic-page-layout\"\n [smartComponentLayout]=\"componentLayout\"\n ></smart-component-layout>\n }\n <smart-ui-action-toolbar\n class=\"generic-page-toolbar\"\n [uiActionModels]=\"uiActionModels\"\n ></smart-ui-action-toolbar>\n</div>\n@if (showRouterOutlet()) {\n <div>\n <ng-container [smartEmbeddedSlot]=\"'router-outlet'\" [containerUuid]=\"uuid\"></ng-container>\n </div>\n}\n", styles: [".generic-page-container{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "directive", type: SmartEmbeddedSlotDirective, selector: "[smartEmbeddedSlot]", inputs: ["smartEmbeddedSlot", "containerUuid"] }] }); }
|
|
27393
27437
|
}
|
|
27394
27438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GenericPageComponent, decorators: [{
|
|
27395
27439
|
type: Component,
|
|
27396
|
-
args: [{ selector: 'app-generic-page', imports: [SmartComponentLayoutComponent, UiActionToolbarComponent, SmartEmbeddedSlotDirective], template: "<div class=\"generic-page-container\">\
|
|
27440
|
+
args: [{ selector: 'app-generic-page', imports: [SmartComponentLayoutComponent, UiActionToolbarComponent, SmartEmbeddedSlotDirective], template: "<div class=\"generic-page-container\">\n @if (componentLayout) {\n <smart-component-layout\n class=\"generic-page-layout\"\n [smartComponentLayout]=\"componentLayout\"\n ></smart-component-layout>\n }\n <smart-ui-action-toolbar\n class=\"generic-page-toolbar\"\n [uiActionModels]=\"uiActionModels\"\n ></smart-ui-action-toolbar>\n</div>\n@if (showRouterOutlet()) {\n <div>\n <ng-container [smartEmbeddedSlot]=\"'router-outlet'\" [containerUuid]=\"uuid\"></ng-container>\n </div>\n}\n", styles: [".generic-page-container{display:flex;flex-direction:column;gap:1rem}\n"] }]
|
|
27397
27441
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
|
|
27398
27442
|
type: Inject,
|
|
27399
27443
|
args: [SMART_GENERIC_PAGE_NAME]
|
|
@@ -27476,7 +27520,7 @@ class SearchPageComponent extends SmartComponent {
|
|
|
27476
27520
|
return hasGroupEditActions(this.filterService);
|
|
27477
27521
|
}
|
|
27478
27522
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SearchPageComponent, deps: [{ token: i0.Injector }, { token: SmartFilterEditorService }, { token: SMART_SEARCH_PAGE_NAME }, { token: SMART_SEARCH_COMPONENT_NAME }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27479
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SearchPageComponent, isStandalone: true, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "layoutComponent", first: true, predicate: SmartComponentLayoutComponent, descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\
|
|
27523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SearchPageComponent, isStandalone: true, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "layoutComponent", first: true, predicate: SmartComponentLayoutComponent, descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"searchPageContainer\"\n [ngClass]=\"$safeNavigationMigration(data?.cssClassOfPage)\"\n>\n @if (data?.showTitle) {\n <h1 class=\"search-page-title\">{{ data?.pageTitle }}</h1>\n }\n <!-- <div class=\"filterContainer\">\n <smart-filter [filter]=\"filter\"></smart-filter>\n</div> -->\n @if (data?.showToolbar) {\n <smart-ui-action-toolbar\n [uiActionModels]=\"uiActionModels\"\n ></smart-ui-action-toolbar>\n }\n @if (data?.showFilter && filterService.model) {\n <div class=\"filter-editor-container\">\n @if (showFilterGroupParams()) {\n <smart-filter-group-params\n [service]=\"filterService\"\n ></smart-filter-group-params>\n }\n <smart-filter-expression-editor\n class=\"filter-expression-editor\"\n [service]=\"filterService\"\n ></smart-filter-expression-editor>\n </div>\n }\n @if (data?.showLayout && layout) {\n <smart-component-layout\n [smartComponentLayout]=\"layout\"\n ></smart-component-layout>\n }\n @if (data?.showGrid) {\n <div class=\"gridContainer\">\n @if (isShowNoResultText()) {\n <h2 class=\"noResultText\">\n {{ data?.noResultText }}\n </h2>\n }\n @if (!isShowNoResultText()) {\n <smart-grid\n #grid\n [smartGrid]=\"smartGrid\"\n [uuid]=\"uuid!\"\n [parentLayoutComponent]=\"layoutComponent()\"\n ></smart-grid>\n }\n </div>\n }\n</div>\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}.search-page-title{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host-context(.sm-nav-list) .searchPageContainer{gap:.5rem}.filter-expression-editor{flex:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parentLayoutComponent", "dev"] }] }); }
|
|
27480
27524
|
}
|
|
27481
27525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SearchPageComponent, decorators: [{
|
|
27482
27526
|
type: Component,
|
|
@@ -27487,7 +27531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
27487
27531
|
SmartFilterEditorContentComponent,
|
|
27488
27532
|
SmartComponentLayoutComponent,
|
|
27489
27533
|
SmartGridComponent,
|
|
27490
|
-
], template: "<div\
|
|
27534
|
+
], template: "<div\n class=\"searchPageContainer\"\n [ngClass]=\"$safeNavigationMigration(data?.cssClassOfPage)\"\n>\n @if (data?.showTitle) {\n <h1 class=\"search-page-title\">{{ data?.pageTitle }}</h1>\n }\n <!-- <div class=\"filterContainer\">\n <smart-filter [filter]=\"filter\"></smart-filter>\n</div> -->\n @if (data?.showToolbar) {\n <smart-ui-action-toolbar\n [uiActionModels]=\"uiActionModels\"\n ></smart-ui-action-toolbar>\n }\n @if (data?.showFilter && filterService.model) {\n <div class=\"filter-editor-container\">\n @if (showFilterGroupParams()) {\n <smart-filter-group-params\n [service]=\"filterService\"\n ></smart-filter-group-params>\n }\n <smart-filter-expression-editor\n class=\"filter-expression-editor\"\n [service]=\"filterService\"\n ></smart-filter-expression-editor>\n </div>\n }\n @if (data?.showLayout && layout) {\n <smart-component-layout\n [smartComponentLayout]=\"layout\"\n ></smart-component-layout>\n }\n @if (data?.showGrid) {\n <div class=\"gridContainer\">\n @if (isShowNoResultText()) {\n <h2 class=\"noResultText\">\n {{ data?.noResultText }}\n </h2>\n }\n @if (!isShowNoResultText()) {\n <smart-grid\n #grid\n [smartGrid]=\"smartGrid\"\n [uuid]=\"uuid!\"\n [parentLayoutComponent]=\"layoutComponent()\"\n ></smart-grid>\n }\n </div>\n }\n</div>\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}.search-page-title{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host-context(.sm-nav-list) .searchPageContainer{gap:.5rem}.filter-expression-editor{flex:1}\n"] }]
|
|
27491
27535
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: SmartFilterEditorService }, { type: undefined, decorators: [{
|
|
27492
27536
|
type: Inject,
|
|
27493
27537
|
args: [SMART_SEARCH_PAGE_NAME]
|
|
@@ -27574,11 +27618,11 @@ class UiActionFileUploadDialogComponent {
|
|
|
27574
27618
|
this.service.cancel();
|
|
27575
27619
|
}
|
|
27576
27620
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27577
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionFileUploadDialogComponent, isStandalone: true, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\
|
|
27621
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionFileUploadDialogComponent, isStandalone: true, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n <div class=\"headerContainer\">\n <h3 class=\"color-accent-700\">\n {{ getTitle() }}\n </h3>\n </div>\n\n @if(getText()){\n <p>\n {{ getText() }}\n </p>\n } @if(descriptor){\n <smart-upload-widget\n [uploadDescriptor]=\"descriptor.upload\"\n [isMultiple]=\"isMultiple ?? true\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n }\n\n <div class=\"folderNameDialogButtonsContainer\">\n <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\n </div>\n</div>\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:.5rem}.headerContainer ::ng-deep button{color:var(--primary-color);border:unset}.headerContainer h3{margin:0;font-size:1.5rem}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:.5rem}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media(max-width:900px){.folderNameDialogContainer{width:100%}}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"], dependencies: [{ kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
27578
27622
|
}
|
|
27579
27623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
|
|
27580
27624
|
type: Component,
|
|
27581
|
-
args: [{ selector: 'lib-ui-action-file-upload-dialog', imports: [UploadWidgetComponent, UiActionButtonComponent], template: "<div class=\"folderNameDialogContainer\">\
|
|
27625
|
+
args: [{ selector: 'lib-ui-action-file-upload-dialog', imports: [UploadWidgetComponent, UiActionButtonComponent], template: "<div class=\"folderNameDialogContainer\">\n <div class=\"headerContainer\">\n <h3 class=\"color-accent-700\">\n {{ getTitle() }}\n </h3>\n </div>\n\n @if(getText()){\n <p>\n {{ getText() }}\n </p>\n } @if(descriptor){\n <smart-upload-widget\n [uploadDescriptor]=\"descriptor.upload\"\n [isMultiple]=\"isMultiple ?? true\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n }\n\n <div class=\"folderNameDialogButtonsContainer\">\n <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\n </div>\n</div>\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:.5rem}.headerContainer ::ng-deep button{color:var(--primary-color);border:unset}.headerContainer h3{margin:0;font-size:1.5rem}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:.5rem}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media(max-width:900px){.folderNameDialogContainer{width:100%}}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"] }]
|
|
27582
27626
|
}], ctorParameters: () => [] });
|
|
27583
27627
|
|
|
27584
27628
|
class UiActionFileUploadDialogService extends SmartdialogService {
|
|
@@ -27817,11 +27861,11 @@ class SmartSessionTimerComponent {
|
|
|
27817
27861
|
this._destroy$.complete();
|
|
27818
27862
|
}
|
|
27819
27863
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartSessionTimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27820
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SmartSessionTimerComponent, isStandalone: true, selector: "smart-session-timer", outputs: { onTimerExpired: "onTimerExpired" }, ngImport: i0, template: "<div class=\"smart-session-timer-container\">\
|
|
27864
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SmartSessionTimerComponent, isStandalone: true, selector: "smart-session-timer", outputs: { onTimerExpired: "onTimerExpired" }, ngImport: i0, template: "<div class=\"smart-session-timer-container\">\n <span class=\"smart-session-timer\">{{ timeFormatted() }}</span>\n</div>\n", styles: [""] }); }
|
|
27821
27865
|
}
|
|
27822
27866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartSessionTimerComponent, decorators: [{
|
|
27823
27867
|
type: Component,
|
|
27824
|
-
args: [{ selector: 'smart-session-timer', template: "<div class=\"smart-session-timer-container\">\
|
|
27868
|
+
args: [{ selector: 'smart-session-timer', template: "<div class=\"smart-session-timer-container\">\n <span class=\"smart-session-timer\">{{ timeFormatted() }}</span>\n</div>\n" }]
|
|
27825
27869
|
}], propDecorators: { onTimerExpired: [{ type: i0.Output, args: ["onTimerExpired"] }] } });
|
|
27826
27870
|
|
|
27827
27871
|
const STRINGS_HU = {
|
|
@@ -28038,11 +28082,11 @@ class SmartNavbarComponent {
|
|
|
28038
28082
|
};
|
|
28039
28083
|
}
|
|
28040
28084
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28041
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartNavbarComponent, isStandalone: true, selector: "smart-navbar", inputs: { smartNavbar: "smartNavbar" }, viewQueries: [{ propertyName: "formComp", first: true, predicate: ["searchOption"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\
|
|
28085
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartNavbarComponent, isStandalone: true, selector: "smart-navbar", inputs: { smartNavbar: "smartNavbar" }, viewQueries: [{ propertyName: "formComp", first: true, predicate: ["searchOption"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n @if (smartNavbar.icon) {\n <img\n class=\"title\"\n src=\"{{ smartNavbar.icon }}\"\n alt=\"\"\n (click)=\"onIconClick()\"\n />\n }\n <ng-content select=\"[titleComponent]\" class=\"title\"></ng-content>\n @if (smartNavbar.searchBar) {\n <div class=\"input\">\n <input\n type=\"text\"\n placeholder=\"{{ smartNavbar.searchBar.placeholder }}\"\n [(ngModel)]=\"searchText\"\n />\n @if (smartNavbar.searchBar.quickFilterLabel && smartNavbar.searchBar.quickFilters.length) {\n <div\n class=\"drop_down_btn\"\n >\n <smartform #searchOption [smartForm]=\"filterForm\"></smartform>\n @if (smartNavbar.searchBar.icon) {\n <button\n class=\"search_icon\"\n mat-icon-button\n (click)=\"onSearchButtonClick()\"\n >\n <mat-icon class=\"search_icon\">{{ smartNavbar.searchBar.icon }}</mat-icon>\n </button>\n }\n </div>\n }\n </div>\n }\n @if (smartNavbar.filterButtonCallback) {\n <button\n mat-raised-button\n color=\"primary\"\n class=\"filter-btn\"\n (click)=\"openFilters()\"\n >\n <div #customFilter class=\"custom-filter-holder\">\n <ng-content select=\"[filterComponent]\"></ng-content>\n </div>\n @if (!customFilter.hasChildNodes()) {\n <mat-icon>filter_list</mat-icon> {{ smartNavbar.filterButtonLabel }}\n }\n </button>\n }\n @if (smartNavbar.userSettings) {\n <div class=\"account-content\">\n @if (smartNavbar?.notification) {\n <button\n mat-button\n [color]=\"$safeNavigationMigration(smartNavbar.notification?.iconColor)\"\n (click)=\"onNotificationClick()\"\n class=\"notification-btn\"\n >\n <mat-icon>\n {{ smartNavbar.notification?.icon }}\n </mat-icon>\n </button>\n }\n <button mat-button color=\"primary\" [matMenuTriggerFor]=\"menu\">\n @if (smartNavbar.userSettings.icon) {\n <mat-icon>\n {{ smartNavbar.userSettings.icon }}\n </mat-icon>\n }\n @if (!smartNavbar.userSettings.icon) {\n <mat-icon> person_outline </mat-icon>\n }\n {{ smartNavbar.userSettings.label }}\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (btn of smartNavbar.userSettings.settings; track btn) {\n <button\n mat-menu-item\n (click)=\"btn.callback()\"\n class=\"menuButton\"\n >\n @if (btn.icon && btn.iconPosition === buttonPosition().FRONT) {\n <mat-icon class=\"menuIcon\">\n {{ btn.icon }}\n </mat-icon>\n }\n <div class=\"menuLabel\">\n {{ btn.label }}\n </div>\n @if (btn.icon && btn.iconPosition === buttonPosition().POST) {\n <mat-icon class=\"menuIcon\">\n {{ btn.icon }}\n </mat-icon>\n }\n </button>\n }\n </mat-menu>\n </div>\n }\n</mat-toolbar>\n", styles: [".filter-btn{margin-left:20px}input[type=text]{flex:1;background:#fff;height:40px;border:none;outline:none;padding:0 25px;border-radius:25px 0 0 25px}.drop_down_btn{position:relative;left:-5;border-radius:0 25px 25px 0;height:40px;border:none;outline:none;cursor:pointer;background:#fff;color:#00a8da;display:flex;align-items:center;padding-right:20px}.input{flex:1;position:relative;font-size:20px;display:flex;flex-direction:row;align-items:center;padding-left:30px}mat-toolbar{height:var(--navbar-height)}::ng-deep .navbar-form .mat-form-field-appearance-outline .mat-form-field-outline,::ng-deep .navbar-form .mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline,::ng-deep .navbar-form .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline{opacity:.75!important;color:#fff}.account-content{margin-left:75px}.title{margin-right:75px}.account-content>*{margin-left:30px}.account-content>*:first-child{margin-left:0}.custom-filter-holder{display:flex;align-items:center}.menuButton{display:flex;flex-direction:row;gap:.5rem}.menuLabel{flex:1;text-align:left}\n"], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
28042
28086
|
}
|
|
28043
28087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartNavbarComponent, decorators: [{
|
|
28044
28088
|
type: Component,
|
|
28045
|
-
args: [{ selector: 'smart-navbar', encapsulation: ViewEncapsulation.Emulated, imports: [MatToolbar, FormsModule, SmartformComponent, MatIconButton, MatIcon, MatButton, MatMenuTrigger, MatMenu, MatMenuItem], template: "<mat-toolbar>\
|
|
28089
|
+
args: [{ selector: 'smart-navbar', encapsulation: ViewEncapsulation.Emulated, imports: [MatToolbar, FormsModule, SmartformComponent, MatIconButton, MatIcon, MatButton, MatMenuTrigger, MatMenu, MatMenuItem], template: "<mat-toolbar>\n @if (smartNavbar.icon) {\n <img\n class=\"title\"\n src=\"{{ smartNavbar.icon }}\"\n alt=\"\"\n (click)=\"onIconClick()\"\n />\n }\n <ng-content select=\"[titleComponent]\" class=\"title\"></ng-content>\n @if (smartNavbar.searchBar) {\n <div class=\"input\">\n <input\n type=\"text\"\n placeholder=\"{{ smartNavbar.searchBar.placeholder }}\"\n [(ngModel)]=\"searchText\"\n />\n @if (smartNavbar.searchBar.quickFilterLabel && smartNavbar.searchBar.quickFilters.length) {\n <div\n class=\"drop_down_btn\"\n >\n <smartform #searchOption [smartForm]=\"filterForm\"></smartform>\n @if (smartNavbar.searchBar.icon) {\n <button\n class=\"search_icon\"\n mat-icon-button\n (click)=\"onSearchButtonClick()\"\n >\n <mat-icon class=\"search_icon\">{{ smartNavbar.searchBar.icon }}</mat-icon>\n </button>\n }\n </div>\n }\n </div>\n }\n @if (smartNavbar.filterButtonCallback) {\n <button\n mat-raised-button\n color=\"primary\"\n class=\"filter-btn\"\n (click)=\"openFilters()\"\n >\n <div #customFilter class=\"custom-filter-holder\">\n <ng-content select=\"[filterComponent]\"></ng-content>\n </div>\n @if (!customFilter.hasChildNodes()) {\n <mat-icon>filter_list</mat-icon> {{ smartNavbar.filterButtonLabel }}\n }\n </button>\n }\n @if (smartNavbar.userSettings) {\n <div class=\"account-content\">\n @if (smartNavbar?.notification) {\n <button\n mat-button\n [color]=\"$safeNavigationMigration(smartNavbar.notification?.iconColor)\"\n (click)=\"onNotificationClick()\"\n class=\"notification-btn\"\n >\n <mat-icon>\n {{ smartNavbar.notification?.icon }}\n </mat-icon>\n </button>\n }\n <button mat-button color=\"primary\" [matMenuTriggerFor]=\"menu\">\n @if (smartNavbar.userSettings.icon) {\n <mat-icon>\n {{ smartNavbar.userSettings.icon }}\n </mat-icon>\n }\n @if (!smartNavbar.userSettings.icon) {\n <mat-icon> person_outline </mat-icon>\n }\n {{ smartNavbar.userSettings.label }}\n <mat-icon>arrow_drop_down</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (btn of smartNavbar.userSettings.settings; track btn) {\n <button\n mat-menu-item\n (click)=\"btn.callback()\"\n class=\"menuButton\"\n >\n @if (btn.icon && btn.iconPosition === buttonPosition().FRONT) {\n <mat-icon class=\"menuIcon\">\n {{ btn.icon }}\n </mat-icon>\n }\n <div class=\"menuLabel\">\n {{ btn.label }}\n </div>\n @if (btn.icon && btn.iconPosition === buttonPosition().POST) {\n <mat-icon class=\"menuIcon\">\n {{ btn.icon }}\n </mat-icon>\n }\n </button>\n }\n </mat-menu>\n </div>\n }\n</mat-toolbar>\n", styles: [".filter-btn{margin-left:20px}input[type=text]{flex:1;background:#fff;height:40px;border:none;outline:none;padding:0 25px;border-radius:25px 0 0 25px}.drop_down_btn{position:relative;left:-5;border-radius:0 25px 25px 0;height:40px;border:none;outline:none;cursor:pointer;background:#fff;color:#00a8da;display:flex;align-items:center;padding-right:20px}.input{flex:1;position:relative;font-size:20px;display:flex;flex-direction:row;align-items:center;padding-left:30px}mat-toolbar{height:var(--navbar-height)}::ng-deep .navbar-form .mat-form-field-appearance-outline .mat-form-field-outline,::ng-deep .navbar-form .mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline,::ng-deep .navbar-form .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline{opacity:.75!important;color:#fff}.account-content{margin-left:75px}.title{margin-right:75px}.account-content>*{margin-left:30px}.account-content>*:first-child{margin-left:0}.custom-filter-holder{display:flex;align-items:center}.menuButton{display:flex;flex-direction:row;gap:.5rem}.menuLabel{flex:1;text-align:left}\n"] }]
|
|
28046
28090
|
}], ctorParameters: () => [], propDecorators: { smartNavbar: [{
|
|
28047
28091
|
type: Input
|
|
28048
28092
|
}], formComp: [{
|
|
@@ -28186,11 +28230,11 @@ class AclEditingViewComponent extends SmartComponent {
|
|
|
28186
28230
|
});
|
|
28187
28231
|
}
|
|
28188
28232
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AclEditingViewComponent, deps: [{ token: i0.Injector }, { token: SMART_ACL_EDITING_VIEW_NAME }, { token: SmartformLayoutDefinitionService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AclEditingViewComponent, isStandalone: true, selector: "lib-acl-editing-view", viewQueries: [{ propertyName: "formChild", first: true, predicate: ["aclEditingForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"acl-editing-container\">\
|
|
28233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AclEditingViewComponent, isStandalone: true, selector: "lib-acl-editing-view", viewQueries: [{ propertyName: "formChild", first: true, predicate: ["aclEditingForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"acl-editing-container\">\n @if (smartForm) {\n <smartform\n #aclEditingForm\n [smartForm]=\"smartForm\"\n ></smartform>\n }\n <smart-ui-action-toolbar\n [uiActionModels]=\"aclActionModels()\"\n ></smart-ui-action-toolbar>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }] }); }
|
|
28190
28234
|
}
|
|
28191
28235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AclEditingViewComponent, decorators: [{
|
|
28192
28236
|
type: Component,
|
|
28193
|
-
args: [{ selector: 'lib-acl-editing-view', imports: [SmartformComponent, UiActionToolbarComponent], template: "<div class=\"acl-editing-container\">\
|
|
28237
|
+
args: [{ selector: 'lib-acl-editing-view', imports: [SmartformComponent, UiActionToolbarComponent], template: "<div class=\"acl-editing-container\">\n @if (smartForm) {\n <smartform\n #aclEditingForm\n [smartForm]=\"smartForm\"\n ></smartform>\n }\n <smart-ui-action-toolbar\n [uiActionModels]=\"aclActionModels()\"\n ></smart-ui-action-toolbar>\n</div>\n" }]
|
|
28194
28238
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
|
|
28195
28239
|
type: Inject,
|
|
28196
28240
|
args: [SMART_ACL_EDITING_VIEW_NAME]
|
|
@@ -28251,11 +28295,11 @@ class SubjectSelectorComponent extends SmartComponent {
|
|
|
28251
28295
|
};
|
|
28252
28296
|
}
|
|
28253
28297
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SubjectSelectorComponent, deps: [{ token: i0.Injector }, { token: SmartFilterEditorService }, { token: SMART_SUBJECT_SELECTOR_PAGE_NAME }, { token: SMART_SUBJECT_SELECTOR_COMPONENT_NAME }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28254
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SubjectSelectorComponent, isStandalone: true, selector: "app-subject-selector", providers: [SmartFilterEditorService], usesInheritance: true, ngImport: i0, template: "<div class=\"subject-selector-container\">\
|
|
28298
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SubjectSelectorComponent, isStandalone: true, selector: "app-subject-selector", providers: [SmartFilterEditorService], usesInheritance: true, ngImport: i0, template: "<div class=\"subject-selector-container\">\n <ng-template #subjectSelectorFrom></ng-template>\n <smartform [smartForm]=\"smartForm\"></smartform>\n <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\n <div class=\"filter-editor-container\">\n <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\n <smart-ui-action-toolbar [id]=\"'search'\"></smart-ui-action-toolbar>\n </div>\n <div class=\"gridContainer\">\n <smart-grid #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\" class=\"subject-grid\"></smart-grid>\n </div>\n <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\n</div>\n", styles: [".subject-selector-container{display:flex;flex-direction:column;gap:.5rem;height:80vh;min-width:60vh}.gridContainer{flex-grow:1;overflow-y:auto!important}::ng-deep .smartGridContent{overflow-y:auto!important}.filter-editor-container{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parentLayoutComponent", "dev"] }] }); }
|
|
28255
28299
|
}
|
|
28256
28300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SubjectSelectorComponent, decorators: [{
|
|
28257
28301
|
type: Component,
|
|
28258
|
-
args: [{ selector: 'app-subject-selector', providers: [SmartFilterEditorService], imports: [SmartformComponent, SmartFilterParamsComponent, SmartFilterEditorContentComponent, UiActionToolbarComponent, SmartGridComponent], template: "<div class=\"subject-selector-container\">\
|
|
28302
|
+
args: [{ selector: 'app-subject-selector', providers: [SmartFilterEditorService], imports: [SmartformComponent, SmartFilterParamsComponent, SmartFilterEditorContentComponent, UiActionToolbarComponent, SmartGridComponent], template: "<div class=\"subject-selector-container\">\n <ng-template #subjectSelectorFrom></ng-template>\n <smartform [smartForm]=\"smartForm\"></smartform>\n <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\n <div class=\"filter-editor-container\">\n <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\n <smart-ui-action-toolbar [id]=\"'search'\"></smart-ui-action-toolbar>\n </div>\n <div class=\"gridContainer\">\n <smart-grid #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\" class=\"subject-grid\"></smart-grid>\n </div>\n <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\n</div>\n", styles: [".subject-selector-container{display:flex;flex-direction:column;gap:.5rem;height:80vh;min-width:60vh}.gridContainer{flex-grow:1;overflow-y:auto!important}::ng-deep .smartGridContent{overflow-y:auto!important}.filter-editor-container{display:flex;flex-direction:column}\n"] }]
|
|
28259
28303
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: SmartFilterEditorService }, { type: undefined, decorators: [{
|
|
28260
28304
|
type: Inject,
|
|
28261
28305
|
args: [SMART_SUBJECT_SELECTOR_PAGE_NAME]
|
|
@@ -28342,11 +28386,11 @@ class ValidationResultPageComponent extends SmartComponent {
|
|
|
28342
28386
|
return 'primary';
|
|
28343
28387
|
}
|
|
28344
28388
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ValidationResultPageComponent, deps: [{ token: i0.Injector }, { token: SMART_VALIDATION_RESULT_PAGE_NAME }, { token: SMART_VALIDATION_RESULT_COMPONENT_NAME }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ValidationResultPageComponent, isStandalone: true, selector: "validation-result-page", usesInheritance: true, ngImport: i0, template: "<div class=\"validation-result-contanier\">\
|
|
28389
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ValidationResultPageComponent, isStandalone: true, selector: "validation-result-page", usesInheritance: true, ngImport: i0, template: "<div class=\"validation-result-contanier\">\n @for (item of items; track item) {\n <div class=\"validation-item\" [ngClass]=\"item.class\">\n <smart-icon [icon]=\"item.icon\" [color]=\"item.color\"></smart-icon>\n @if (item.html) {\n <div [innerHTML]=\"$safeNavigationMigration(item?.message)\"></div>\n } @else {\n {{ item?.message }}\n }\n </div>\n }\n <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\n</div>\n", styles: [".validation-result-contanier{display:flex;flex-direction:column;gap:1rem;padding:1rem}.validation-item{display:flex;flex-direction:row;gap:2rem;align-items:center;padding:1rem;border-radius:.5rem}.validation-error{color:var(--error-color);background-color:var(--error-light-color);border:2px solid var(--error-color)}.validation-warn{color:var(--warn-color);background-color:var(--warn-light-color);border:2px solid var(--warn-color)}.validation-info{color:var(--primary-color);background-color:var(--primary-light-color);border:2px solid var(--primary-color)}.validation-block{color:var(--accent-color);background-color:var(--accent-light-color);border:2px solid var(--accent-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }] }); }
|
|
28346
28390
|
}
|
|
28347
28391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ValidationResultPageComponent, decorators: [{
|
|
28348
28392
|
type: Component,
|
|
28349
|
-
args: [{ selector: 'validation-result-page', imports: [NgClass, SmartIconComponent, UiActionToolbarComponent], template: "<div class=\"validation-result-contanier\">\
|
|
28393
|
+
args: [{ selector: 'validation-result-page', imports: [NgClass, SmartIconComponent, UiActionToolbarComponent], template: "<div class=\"validation-result-contanier\">\n @for (item of items; track item) {\n <div class=\"validation-item\" [ngClass]=\"item.class\">\n <smart-icon [icon]=\"item.icon\" [color]=\"item.color\"></smart-icon>\n @if (item.html) {\n <div [innerHTML]=\"$safeNavigationMigration(item?.message)\"></div>\n } @else {\n {{ item?.message }}\n }\n </div>\n }\n <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\n</div>\n", styles: [".validation-result-contanier{display:flex;flex-direction:column;gap:1rem;padding:1rem}.validation-item{display:flex;flex-direction:row;gap:2rem;align-items:center;padding:1rem;border-radius:.5rem}.validation-error{color:var(--error-color);background-color:var(--error-light-color);border:2px solid var(--error-color)}.validation-warn{color:var(--warn-color);background-color:var(--warn-light-color);border:2px solid var(--warn-color)}.validation-info{color:var(--primary-color);background-color:var(--primary-light-color);border:2px solid var(--primary-color)}.validation-block{color:var(--accent-color);background-color:var(--accent-light-color);border:2px solid var(--accent-color)}\n"] }]
|
|
28350
28394
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
|
|
28351
28395
|
type: Inject,
|
|
28352
28396
|
args: [SMART_VALIDATION_RESULT_PAGE_NAME]
|
|
@@ -28383,11 +28427,11 @@ class NoPermissionPageComponent extends SmartComponent {
|
|
|
28383
28427
|
}
|
|
28384
28428
|
}
|
|
28385
28429
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NoPermissionPageComponent, deps: [{ token: i0.Injector }, { token: SMART_NO_PERMISSION_PAGE_NAME }, { token: SMART_NO_PERMISSION_COMPONENT_NAME }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28386
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: NoPermissionPageComponent, isStandalone: true, selector: "lib-no-permission-page", usesInheritance: true, ngImport: i0, template: "@if (componentLayout) {\
|
|
28430
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: NoPermissionPageComponent, isStandalone: true, selector: "lib-no-permission-page", usesInheritance: true, ngImport: i0, template: "@if (componentLayout) {\n <smart-component-layout\n [smartComponentLayout]=\"componentLayout\"\n ></smart-component-layout>\n}\n", styles: [""], dependencies: [{ kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }] }); }
|
|
28387
28431
|
}
|
|
28388
28432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NoPermissionPageComponent, decorators: [{
|
|
28389
28433
|
type: Component,
|
|
28390
|
-
args: [{ selector: 'lib-no-permission-page', imports: [SmartComponentLayoutComponent], template: "@if (componentLayout) {\
|
|
28434
|
+
args: [{ selector: 'lib-no-permission-page', imports: [SmartComponentLayoutComponent], template: "@if (componentLayout) {\n <smart-component-layout\n [smartComponentLayout]=\"componentLayout\"\n ></smart-component-layout>\n}\n" }]
|
|
28391
28435
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
|
|
28392
28436
|
type: Inject,
|
|
28393
28437
|
args: [SMART_NO_PERMISSION_PAGE_NAME]
|
|
@@ -28424,11 +28468,11 @@ class InvalidSmartlinkComponent extends SmartComponent {
|
|
|
28424
28468
|
}
|
|
28425
28469
|
}
|
|
28426
28470
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InvalidSmartlinkComponent, deps: [{ token: i0.Injector }, { token: SMART_INVALID_SMARTLINK_PAGE_NAME }, { token: SMART_INVALID_SMARTLINK_COMPONENT_NAME }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28427
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: InvalidSmartlinkComponent, isStandalone: true, selector: "lib-invalid-smartlink", usesInheritance: true, ngImport: i0, template: "@if (componentLayout) {\
|
|
28471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: InvalidSmartlinkComponent, isStandalone: true, selector: "lib-invalid-smartlink", usesInheritance: true, ngImport: i0, template: "@if (componentLayout) {\n <smart-component-layout\n [smartComponentLayout]=\"componentLayout\"\n ></smart-component-layout>\n}\n", styles: [""], dependencies: [{ kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }] }); }
|
|
28428
28472
|
}
|
|
28429
28473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InvalidSmartlinkComponent, decorators: [{
|
|
28430
28474
|
type: Component,
|
|
28431
|
-
args: [{ selector: 'lib-invalid-smartlink', imports: [SmartComponentLayoutComponent], template: "@if (componentLayout) {\
|
|
28475
|
+
args: [{ selector: 'lib-invalid-smartlink', imports: [SmartComponentLayoutComponent], template: "@if (componentLayout) {\n <smart-component-layout\n [smartComponentLayout]=\"componentLayout\"\n ></smart-component-layout>\n}\n" }]
|
|
28432
28476
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
|
|
28433
28477
|
type: Inject,
|
|
28434
28478
|
args: [SMART_INVALID_SMARTLINK_PAGE_NAME]
|