@smartbit4all/ng-client 7.0.2 → 7.0.4
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.
|
@@ -3444,6 +3444,8 @@ class UiActionButtonComponent {
|
|
|
3444
3444
|
...(ngDevMode ? [{ debugName: "descriptor" }] : /* istanbul ignore next */ []));
|
|
3445
3445
|
this.code = input(/* @ts-ignore */
|
|
3446
3446
|
...(ngDevMode ? [undefined, { debugName: "code" }] : /* istanbul ignore next */ []));
|
|
3447
|
+
this.identifier = input(/* @ts-ignore */
|
|
3448
|
+
...(ngDevMode ? [undefined, { debugName: "identifier" }] : /* istanbul ignore next */ []));
|
|
3447
3449
|
this.viewActivated = input(/* @ts-ignore */
|
|
3448
3450
|
...(ngDevMode ? [undefined, { debugName: "viewActivated" }] : /* istanbul ignore next */ []));
|
|
3449
3451
|
this.addedCssClass = input(/* @ts-ignore */
|
|
@@ -3608,13 +3610,22 @@ class UiActionButtonComponent {
|
|
|
3608
3610
|
getSeparatorColor() {
|
|
3609
3611
|
return 'rgb(from var(--' + this.getColor() + '-color) r g b / 0.8)';
|
|
3610
3612
|
}
|
|
3613
|
+
getDataTestId() {
|
|
3614
|
+
if (this.code()) {
|
|
3615
|
+
if (this.identifier()) {
|
|
3616
|
+
return this.code() + '_' + this.identifier();
|
|
3617
|
+
}
|
|
3618
|
+
return this.code();
|
|
3619
|
+
}
|
|
3620
|
+
return null;
|
|
3621
|
+
}
|
|
3611
3622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3612
|
-
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 }, viewActivated: { classPropertyName: "viewActivated", publicName: "viewActivated", 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 } }, 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]=\"effectiveDescriptor().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 >\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: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;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:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2));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, #ffffff))!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2))!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) )}\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"] }, { 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"] }] }); }
|
|
3623
|
+
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 }, 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 } }, 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]=\"effectiveDescriptor().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 >\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: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;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:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2));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, #ffffff))!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2))!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) )}\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"] }, { 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"] }] }); }
|
|
3613
3624
|
}
|
|
3614
3625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionButtonComponent, decorators: [{
|
|
3615
3626
|
type: Component,
|
|
3616
|
-
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]=\"effectiveDescriptor().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 >\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: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;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:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2));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, #ffffff))!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2))!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) )}\n"] }]
|
|
3617
|
-
}], 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 }] }], viewActivated: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActivated", 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 }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], actionDoubleClick: [{ type: i0.Output, args: ["actionDoubleClick"] }] } });
|
|
3627
|
+
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]=\"effectiveDescriptor().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 >\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: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;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:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2));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, #ffffff))!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2))!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) )}\n"] }]
|
|
3628
|
+
}], 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 }] }], 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 }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], actionDoubleClick: [{ type: i0.Output, args: ["actionDoubleClick"] }] } });
|
|
3618
3629
|
|
|
3619
3630
|
class MessageDialogComponent {
|
|
3620
3631
|
constructor() {
|
|
@@ -3703,7 +3714,7 @@ class MessageDialogComponent {
|
|
|
3703
3714
|
return this.messageData.textType === MessageTextType.HTML;
|
|
3704
3715
|
}
|
|
3705
3716
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3706
|
-
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 (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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
3717
|
+
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 (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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
3707
3718
|
}
|
|
3708
3719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageDialogComponent, decorators: [{
|
|
3709
3720
|
type: Component,
|
|
@@ -6543,6 +6554,9 @@ class SmartFormService {
|
|
|
6543
6554
|
widget = this.findSmartFormWidgetByKey(widgets, key);
|
|
6544
6555
|
if (widget) {
|
|
6545
6556
|
let value = this.getValueDeeply(data, key);
|
|
6557
|
+
if (widget.type === SmartFormWidgetType.CHECK_BOX && typeof value !== 'boolean') {
|
|
6558
|
+
value = value === 'true';
|
|
6559
|
+
}
|
|
6546
6560
|
if (typeof value === 'boolean' &&
|
|
6547
6561
|
widget.type !== SmartFormWidgetType.TOGGLE &&
|
|
6548
6562
|
widget.type !== SmartFormWidgetType.CHECK_BOX) {
|
|
@@ -7394,7 +7408,7 @@ class ThemeSelectorComponent {
|
|
|
7394
7408
|
}
|
|
7395
7409
|
}
|
|
7396
7410
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7397
|
-
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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7411
|
+
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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7398
7412
|
}
|
|
7399
7413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
|
|
7400
7414
|
type: Component,
|
|
@@ -7716,11 +7730,11 @@ class HoverMenuComponent {
|
|
|
7716
7730
|
return IconPosition;
|
|
7717
7731
|
}
|
|
7718
7732
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HoverMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7719
|
-
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 [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 [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}.ui-hover-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}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:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.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:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect:hover ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{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, #1976d2)) )!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, #1976d2) 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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7733
|
+
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}.ui-hover-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}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:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.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:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect:hover ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{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, #1976d2)) )!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, #1976d2) 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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7720
7734
|
}
|
|
7721
7735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HoverMenuComponent, decorators: [{
|
|
7722
7736
|
type: Component,
|
|
7723
|
-
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 [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 [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}.ui-hover-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}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:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.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:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect:hover ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{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, #1976d2)) )!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, #1976d2) r g b / .12) )!important}\n"] }]
|
|
7737
|
+
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}.ui-hover-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}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:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.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:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect:hover ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{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, #1976d2)) )!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, #1976d2) r g b / .12) )!important}\n"] }]
|
|
7724
7738
|
}], ctorParameters: () => [], propDecorators: { submenuComponents: [{
|
|
7725
7739
|
type: ViewChildren,
|
|
7726
7740
|
args: ['submenu']
|
|
@@ -7986,11 +8000,11 @@ class ClickMenuComponent {
|
|
|
7986
8000
|
return IconPosition;
|
|
7987
8001
|
}
|
|
7988
8002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ClickMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7989
|
-
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 [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 [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}.ui-tiered-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}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);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:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:var(--sb4-panel-hover-bg-color)!important}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{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:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color: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, #1976d2)) )!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, #1976d2) 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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
8003
|
+
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}.ui-tiered-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}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);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:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:var(--sb4-panel-hover-bg-color)!important}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{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:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color: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, #1976d2)) )!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, #1976d2) 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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
7990
8004
|
}
|
|
7991
8005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ClickMenuComponent, decorators: [{
|
|
7992
8006
|
type: Component,
|
|
7993
|
-
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 [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 [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}.ui-tiered-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}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);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:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:var(--sb4-panel-hover-bg-color)!important}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{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:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color: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, #1976d2)) )!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, #1976d2) r g b / .12) )!important}\n"] }]
|
|
8007
|
+
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}.ui-tiered-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}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);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:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:var(--sb4-panel-hover-bg-color)!important}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{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:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color: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, #1976d2)) )!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, #1976d2) r g b / .12) )!important}\n"] }]
|
|
7994
8008
|
}], ctorParameters: () => [], propDecorators: { submenuComponents: [{
|
|
7995
8009
|
type: ViewChildren,
|
|
7996
8010
|
args: ['submenu']
|
|
@@ -8389,11 +8403,11 @@ class UiActionToolbarComponent {
|
|
|
8389
8403
|
return MenuTriggerType;
|
|
8390
8404
|
}
|
|
8391
8405
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8392
|
-
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 } }, 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 [ngClass]=\"{\n scrollableContent: scrollOnWrap,\n verticalToolbar: isVertical,\n horizontalToolbar: isHorizontal,\n alignedStart: isAlignedStart,\n alignedEnd: isAlignedEnd,\n }\"\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 [disabled]=\"!!entry.model.uiAction.disabled\"\n [addedCssClass]=\"entry.model.cssClass\"\n [viewActivated]=\"entry.model.uiAction.viewActivated\"\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}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], 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"] }] }); }
|
|
8406
|
+
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 } }, 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 [ngClass]=\"{\n scrollableContent: scrollOnWrap,\n verticalToolbar: isVertical,\n horizontalToolbar: isHorizontal,\n alignedStart: isAlignedStart,\n alignedEnd: isAlignedEnd,\n }\"\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 (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}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], 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"] }] }); }
|
|
8393
8407
|
}
|
|
8394
8408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionToolbarComponent, decorators: [{
|
|
8395
8409
|
type: Component,
|
|
8396
|
-
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 [ngClass]=\"{\n scrollableContent: scrollOnWrap,\n verticalToolbar: isVertical,\n horizontalToolbar: isHorizontal,\n alignedStart: isAlignedStart,\n alignedEnd: isAlignedEnd,\n }\"\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 [disabled]=\"!!entry.model.uiAction.disabled\"\n [addedCssClass]=\"entry.model.cssClass\"\n [viewActivated]=\"entry.model.uiAction.viewActivated\"\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}\n"] }]
|
|
8410
|
+
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 [ngClass]=\"{\n scrollableContent: scrollOnWrap,\n verticalToolbar: isVertical,\n horizontalToolbar: isHorizontal,\n alignedStart: isAlignedStart,\n alignedEnd: isAlignedEnd,\n }\"\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 (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}\n"] }]
|
|
8397
8411
|
}], ctorParameters: () => [], propDecorators: { containerRef: [{
|
|
8398
8412
|
type: ViewChild,
|
|
8399
8413
|
args: ['container', { static: false }]
|
|
@@ -8624,7 +8638,7 @@ class SmartfileuploaderComponent {
|
|
|
8624
8638
|
};
|
|
8625
8639
|
}
|
|
8626
8640
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8627
|
-
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 color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\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()\"\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;--warninig-color: #be2d2e;--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(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-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(--warninig-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(--warninig-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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
|
|
8641
|
+
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 color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\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()\"\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;--warninig-color: #be2d2e;--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(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-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(--warninig-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(--warninig-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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
|
|
8628
8642
|
}
|
|
8629
8643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
|
|
8630
8644
|
type: Component,
|
|
@@ -8820,7 +8834,7 @@ class PhotoCaptureWidgetComponent {
|
|
|
8820
8834
|
}
|
|
8821
8835
|
}
|
|
8822
8836
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8823
|
-
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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
8837
|
+
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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
8824
8838
|
}
|
|
8825
8839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, decorators: [{
|
|
8826
8840
|
type: Component,
|
|
@@ -9066,7 +9080,7 @@ class VoiceRecordWidgetComponent {
|
|
|
9066
9080
|
});
|
|
9067
9081
|
}
|
|
9068
9082
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecordWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9069
|
-
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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
9083
|
+
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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
9070
9084
|
}
|
|
9071
9085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecordWidgetComponent, decorators: [{
|
|
9072
9086
|
type: Component,
|
|
@@ -9299,7 +9313,7 @@ class SmartFileEditorComponent {
|
|
|
9299
9313
|
useExisting: forwardRef(() => SmartFileEditorComponent),
|
|
9300
9314
|
multi: true,
|
|
9301
9315
|
},
|
|
9302
|
-
], 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(--warninig-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]=\"widgetInstance.isDisabled\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n }\n\n <div\n [ngClass]=\"{ disabledWidget: widgetInstance.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]=\"widgetInstance.isDisabled\"\n [descriptor]=\"changeButton\"\n >\n </ui-action-button>\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;--warninig-color: #be2d2e;--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{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-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(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-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"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
9316
|
+
], 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(--warninig-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]=\"widgetInstance.isDisabled\"\n (uploadFilesEvent)=\"upload($event)\"\n />\n }\n\n <div\n [ngClass]=\"{ disabledWidget: widgetInstance.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]=\"widgetInstance.isDisabled\"\n [descriptor]=\"changeButton\"\n >\n </ui-action-button>\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;--warninig-color: #be2d2e;--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{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-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(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-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"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
9303
9317
|
}
|
|
9304
9318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
|
|
9305
9319
|
type: Component,
|
|
@@ -10595,11 +10609,11 @@ class SmartformwidgetComponent {
|
|
|
10595
10609
|
}
|
|
10596
10610
|
}
|
|
10597
10611
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10598
|
-
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=\"container\"\n >\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n <div\n [attr.data-testid]=\"widgetInstance.key\"\n [ngClass]=\"getDirection()\"\n >\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\n (capsLock)=\"capsOn = $event\"\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n mat-icon-button\n matSuffix\n (click)=\"togglePasswordVisibility($event)\"\n >\n <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</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 && 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 && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n </button>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint\n matSuffix\n align=\"end\"\n >{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint\n >\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>\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 @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 && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n {{ widgetInstance.textFieldButton.label }}\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n [disabled]=\"widgetInstance.isDisabled\"\n (removed)=\"remove(value)\"\n >\n {{ value }}\n <button matChipRemove>\n <mat-icon>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\n [disabled]=\"widgetInstance.isDisabled\"\n [value]=\"item.value\"\n >\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\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n [disabled]=\"widgetInstance.isDisabled\"\n (removed)=\"remove(value)\"\n >\n {{ getChipsValue(value) }}\n <button matChipRemove>\n <mat-icon>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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n matSuffix\n align=\"end\"\n >{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint\n >\n }\n </mat-form-field>\n @if (\n !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n <div\n [attr.data-testid]=\"widgetInstance.key\"\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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 >\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\n [attr.data-testid]=\"widgetInstance.key\"\n class=\"widgetContainer\"\n >\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{\n widgetInstance.hint?.text\n }}</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\n class=\"checkbox-item-container\"\n >\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 {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{\n widgetInstance.hint?.text\n }}</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\n class=\"datePicker widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</mat-hint>\n }\n </div>\n }\n <lib-smart-month-picker\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (valueChange)=\"handleYearMonthPicked($event)\"\n ></lib-smart-month-picker>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup\n [label]=\"option.label\"\n [disabled]=\"option.isDisabled\"\n >\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option\n [value]=\"innerOption.value\"\n [disabled]=\"innerOption.isDisabled\"\n >\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\n [value]=\"option.value\"\n [disabled]=\"option.isDisabled\"\n >\n @if (option.icon) {\n <smart-icon\n [icon]=\"option.icon\"\n [color]=\"option.iconColor\"\n ></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 (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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup\n [label]=\"option.label\"\n [disabled]=\"option.isDisabled\"\n >\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option\n [value]=\"innerOption.value\"\n [disabled]=\"innerOption.isDisabled\"\n >\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\n [value]=\"option.value\"\n [disabled]=\"option.isDisabled\"\n >\n @if (option.icon) {\n <smart-icon\n [icon]=\"option.icon\"\n [color]=\"option.iconColor\"\n ></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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n <div\n class=\"label widgetContainer\"\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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 class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\" [ngClass]=\"getNgClass()\">\n @for (item of indicatorItems; track item; let i = $index) {\n <div\n class=\"indicatorItem\"\n [ngClass]=\"getIndicatorItemClass(i)\"\n ></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 >\n </div>\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\n class=\"labelContainer {{ labelColor() }}\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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]=\"widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\"\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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint\n matSuffix\n align=\"end\"\n class=\"rich-text-editor-leeway-counter\"\n >{{ getRichTextEditorLengthLeeway() }}</mat-hint\n >\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>{{\n widgetInstance.hint?.text\n }}</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>{{\n widgetInstance.hint?.text\n }}</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>{{\n widgetInstance.hint?.text\n }}</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 || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { 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"], 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: 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 }); }
|
|
10612
|
+
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=\"container\"\n >\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n <div\n [attr.data-testid]=\"widgetInstance.key\"\n [ngClass]=\"getDirection()\"\n >\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\n (capsLock)=\"capsOn = $event\"\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n mat-icon-button\n matSuffix\n (click)=\"togglePasswordVisibility($event)\"\n >\n <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</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 && 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 && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n </button>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint\n matSuffix\n align=\"end\"\n >{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint\n >\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>\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 @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 && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n {{ widgetInstance.textFieldButton.label }}\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n [disabled]=\"widgetInstance.isDisabled\"\n (removed)=\"remove(value)\"\n >\n {{ value }}\n <button matChipRemove>\n <mat-icon>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\n [disabled]=\"widgetInstance.isDisabled\"\n [value]=\"item.value\"\n >\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\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n [disabled]=\"widgetInstance.isDisabled\"\n (removed)=\"remove(value)\"\n >\n {{ getChipsValue(value) }}\n <button matChipRemove>\n <mat-icon>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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n matSuffix\n align=\"end\"\n >{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint\n >\n }\n </mat-form-field>\n @if (\n !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n <div\n [attr.data-testid]=\"widgetInstance.key\"\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n [attr.data-testid]=\"widgetInstance.key\"\n class=\"widgetContainer\"\n >\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{\n widgetInstance.hint?.text\n }}</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\n class=\"checkbox-item-container\"\n >\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 {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{\n widgetInstance.hint?.text\n }}</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\n class=\"datePicker widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</mat-hint>\n }\n </div>\n }\n <lib-smart-month-picker\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (valueChange)=\"handleYearMonthPicked($event)\"\n ></lib-smart-month-picker>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup\n [label]=\"option.label\"\n [disabled]=\"option.isDisabled\"\n >\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option\n [value]=\"innerOption.value\"\n [disabled]=\"innerOption.isDisabled\"\n >\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\n [value]=\"option.value\"\n [disabled]=\"option.isDisabled\"\n >\n @if (option.icon) {\n <smart-icon\n [icon]=\"option.icon\"\n [color]=\"option.iconColor\"\n ></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 (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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup\n [label]=\"option.label\"\n [disabled]=\"option.isDisabled\"\n >\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option\n [value]=\"innerOption.value\"\n [disabled]=\"innerOption.isDisabled\"\n >\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\n [value]=\"option.value\"\n [disabled]=\"option.isDisabled\"\n >\n @if (option.icon) {\n <smart-icon\n [icon]=\"option.icon\"\n [color]=\"option.iconColor\"\n ></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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n <div\n class=\"label widgetContainer\"\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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 class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\" [ngClass]=\"getNgClass()\">\n @for (item of indicatorItems; track item; let i = $index) {\n <div\n class=\"indicatorItem\"\n [ngClass]=\"getIndicatorItemClass(i)\"\n ></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 >\n </div>\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\n class=\"labelContainer {{ labelColor() }}\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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]=\"widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\"\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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint\n matSuffix\n align=\"end\"\n class=\"rich-text-editor-leeway-counter\"\n >{{ getRichTextEditorLengthLeeway() }}</mat-hint\n >\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>{{\n widgetInstance.hint?.text\n }}</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>{{\n widgetInstance.hint?.text\n }}</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>{{\n widgetInstance.hint?.text\n }}</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 || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { 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"], 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: 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 }); }
|
|
10599
10613
|
}
|
|
10600
10614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, decorators: [{
|
|
10601
10615
|
type: Component,
|
|
10602
|
-
args: [{ selector: 'smartformwidget', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgClass, TrackCapsDirective, NgStyle, MatHint, MatFormField, MatLabel, MatInput, NgxMaskDirective, MatAutocompleteTrigger, MatIconButton, MatSuffix, MatIcon, MatAutocomplete, MatOption, MatPrefix, SmartIconComponent, UiActionButtonComponent, UiActionToolbarComponent, MatButton, MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChip, CdkTextareaAutosize, MatCheckbox, MatRadioGroup, MatRadioButton, MatDatepickerToggle, MatDatepicker, MatDatepickerInput, SmartMonthPickerComponent, MatSelect, MatOptgroup, MatSlideToggle, SmartVoiceRecorderComponent, SmartFileEditorComponent, SmartMultiFileEditorComponent, QuillEditorComponent, SortableWidgetComponent, YouTubePlayer, AsyncPipe, HighlightPipe], template: "<div class=\"container material\" [formGroup]=\"form()\">\n @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n <div\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\n class=\"container\"\n >\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n <div\n [attr.data-testid]=\"widgetInstance.key\"\n [ngClass]=\"getDirection()\"\n >\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\n (capsLock)=\"capsOn = $event\"\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n mat-icon-button\n matSuffix\n (click)=\"togglePasswordVisibility($event)\"\n >\n <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</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 && 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 && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n </button>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint\n matSuffix\n align=\"end\"\n >{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint\n >\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>\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 @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 && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n {{ widgetInstance.textFieldButton.label }}\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n [disabled]=\"widgetInstance.isDisabled\"\n (removed)=\"remove(value)\"\n >\n {{ value }}\n <button matChipRemove>\n <mat-icon>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\n [disabled]=\"widgetInstance.isDisabled\"\n [value]=\"item.value\"\n >\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\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n [disabled]=\"widgetInstance.isDisabled\"\n (removed)=\"remove(value)\"\n >\n {{ getChipsValue(value) }}\n <button matChipRemove>\n <mat-icon>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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n matSuffix\n align=\"end\"\n >{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint\n >\n }\n </mat-form-field>\n @if (\n !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n <div\n [attr.data-testid]=\"widgetInstance.key\"\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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 >\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\n [attr.data-testid]=\"widgetInstance.key\"\n class=\"widgetContainer\"\n >\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{\n widgetInstance.hint?.text\n }}</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\n class=\"checkbox-item-container\"\n >\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 {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{\n widgetInstance.hint?.text\n }}</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\n class=\"datePicker widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</mat-hint>\n }\n </div>\n }\n <lib-smart-month-picker\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (valueChange)=\"handleYearMonthPicked($event)\"\n ></lib-smart-month-picker>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup\n [label]=\"option.label\"\n [disabled]=\"option.isDisabled\"\n >\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option\n [value]=\"innerOption.value\"\n [disabled]=\"innerOption.isDisabled\"\n >\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\n [value]=\"option.value\"\n [disabled]=\"option.isDisabled\"\n >\n @if (option.icon) {\n <smart-icon\n [icon]=\"option.icon\"\n [color]=\"option.iconColor\"\n ></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 (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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup\n [label]=\"option.label\"\n [disabled]=\"option.isDisabled\"\n >\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option\n [value]=\"innerOption.value\"\n [disabled]=\"innerOption.isDisabled\"\n >\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\n [value]=\"option.value\"\n [disabled]=\"option.isDisabled\"\n >\n @if (option.icon) {\n <smart-icon\n [icon]=\"option.icon\"\n [color]=\"option.iconColor\"\n ></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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n <div\n class=\"label widgetContainer\"\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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 class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\" [ngClass]=\"getNgClass()\">\n @for (item of indicatorItems; track item; let i = $index) {\n <div\n class=\"indicatorItem\"\n [ngClass]=\"getIndicatorItemClass(i)\"\n ></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 >\n </div>\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\n class=\"labelContainer {{ labelColor() }}\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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]=\"widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\"\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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint\n matSuffix\n align=\"end\"\n class=\"rich-text-editor-leeway-counter\"\n >{{ getRichTextEditorLengthLeeway() }}</mat-hint\n >\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>{{\n widgetInstance.hint?.text\n }}</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>{{\n widgetInstance.hint?.text\n }}</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>{{\n widgetInstance.hint?.text\n }}</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 || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\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"] }]
|
|
10616
|
+
args: [{ selector: 'smartformwidget', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgClass, TrackCapsDirective, NgStyle, MatHint, MatFormField, MatLabel, MatInput, NgxMaskDirective, MatAutocompleteTrigger, MatIconButton, MatSuffix, MatIcon, MatAutocomplete, MatOption, MatPrefix, SmartIconComponent, UiActionButtonComponent, UiActionToolbarComponent, MatButton, MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChip, CdkTextareaAutosize, MatCheckbox, MatRadioGroup, MatRadioButton, MatDatepickerToggle, MatDatepicker, MatDatepickerInput, SmartMonthPickerComponent, MatSelect, MatOptgroup, MatSlideToggle, SmartVoiceRecorderComponent, SmartFileEditorComponent, SmartMultiFileEditorComponent, QuillEditorComponent, SortableWidgetComponent, YouTubePlayer, AsyncPipe, HighlightPipe], template: "<div class=\"container material\" [formGroup]=\"form()\">\n @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n <div\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\n class=\"container\"\n >\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n <div\n [attr.data-testid]=\"widgetInstance.key\"\n [ngClass]=\"getDirection()\"\n >\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\n (capsLock)=\"capsOn = $event\"\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n mat-icon-button\n matSuffix\n (click)=\"togglePasswordVisibility($event)\"\n >\n <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</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 && 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 && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n </button>\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint\n matSuffix\n align=\"end\"\n >{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint\n >\n }\n </mat-form-field>\n @if (\n !widgetInstance?.hint ||\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>\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 @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 && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n {{ widgetInstance.textFieldButton.label }}\n @if (\n widgetInstance.textFieldButton.iconPosition ===\n smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\n ) {\n <smart-icon\n [icon]=\"widgetInstance.textFieldButton.icon\"\n >\n </smart-icon>\n }\n </button>\n }\n </mat-form-field>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n [disabled]=\"widgetInstance.isDisabled\"\n (removed)=\"remove(value)\"\n >\n {{ value }}\n <button matChipRemove>\n <mat-icon>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\n [disabled]=\"widgetInstance.isDisabled\"\n [value]=\"item.value\"\n >\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\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n [disabled]=\"widgetInstance.isDisabled\"\n (removed)=\"remove(value)\"\n >\n {{ getChipsValue(value) }}\n <button matChipRemove>\n <mat-icon>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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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\n matSuffix\n align=\"end\"\n >{{\n widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n }}</mat-hint\n >\n }\n </mat-form-field>\n @if (\n !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n <div\n [attr.data-testid]=\"widgetInstance.key\"\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n [attr.data-testid]=\"widgetInstance.key\"\n class=\"widgetContainer\"\n >\n @if (widgetInstance.showLabel) {\n <div class=\"labelContainer\">\n <h4\n class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{\n widgetInstance.hint?.text\n }}</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\n class=\"checkbox-item-container\"\n >\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 {{ widgetInstance.cssLabelClass }}\"\n [ngClass]=\"getLabelNgClass()\"\n [ngStyle]=\"getLabelStyle()\"\n >\n {{ getWidgetLabel(widgetInstance) }}\n </h4>\n @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n <mat-hint>{{\n widgetInstance.hint?.text\n }}</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\n class=\"datePicker widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</mat-hint>\n }\n </div>\n }\n <lib-smart-month-picker\n [attr.data-testid]=\"widgetInstance.key\"\n [widgetInstance]=\"widgetInstance\"\n (valueChange)=\"handleYearMonthPicked($event)\"\n ></lib-smart-month-picker>\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup\n [label]=\"option.label\"\n [disabled]=\"option.isDisabled\"\n >\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option\n [value]=\"innerOption.value\"\n [disabled]=\"innerOption.isDisabled\"\n >\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\n [value]=\"option.value\"\n [disabled]=\"option.isDisabled\"\n >\n @if (option.icon) {\n <smart-icon\n [icon]=\"option.icon\"\n [color]=\"option.iconColor\"\n ></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 (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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n <div\n class=\"widgetContainer\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n >\n @for (option of widgetInstance.valueList; track option) {\n <div>\n @if (option.type === getType().ITEM_GROUP) {\n <mat-optgroup\n [label]=\"option.label\"\n [disabled]=\"option.isDisabled\"\n >\n @for (innerOption of option.valueList; track innerOption) {\n <mat-option\n [value]=\"innerOption.value\"\n [disabled]=\"innerOption.isDisabled\"\n >\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\n [value]=\"option.value\"\n [disabled]=\"option.isDisabled\"\n >\n @if (option.icon) {\n <smart-icon\n [icon]=\"option.icon\"\n [color]=\"option.iconColor\"\n ></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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n </div>\n }\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n <div\n class=\"label widgetContainer\"\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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\n class=\"label\"\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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 class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\" [ngClass]=\"getNgClass()\">\n @for (item of indicatorItems; track item; let i = $index) {\n <div\n class=\"indicatorItem\"\n [ngClass]=\"getIndicatorItemClass(i)\"\n ></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 >\n </div>\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\n class=\"labelContainer {{ labelColor() }}\"\n >\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>{{\n widgetInstance.hint?.text\n }}</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]=\"widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\"\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\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\n }\n @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n <mat-hint\n matSuffix\n align=\"end\"\n class=\"rich-text-editor-leeway-counter\"\n >{{ getRichTextEditorLengthLeeway() }}</mat-hint\n >\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>{{\n widgetInstance.hint?.text\n }}</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>{{\n widgetInstance.hint?.text\n }}</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>{{\n widgetInstance.hint?.text\n }}</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 || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n ) {\n <mat-hint\n >{{ widgetInstance.hint?.text }}</mat-hint\n >\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"] }]
|
|
10603
10617
|
}], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], widgetInstance: [{
|
|
10604
10618
|
type: Input
|
|
10605
10619
|
}], onBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBlur", required: false }] }], onValueChange: [{
|
|
@@ -12054,7 +12068,7 @@ class SmartViewContextErrorDialogComponent {
|
|
|
12054
12068
|
this.service.closeDialog();
|
|
12055
12069
|
}
|
|
12056
12070
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartViewContextErrorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12057
|
-
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=\"container\">\n <h3 class=\"color-accent-700\">\n {{ smartViewContextApiError.dialogTitle }}\n </h3>\n <div class=\"content\">\n <p>\n {{ smartViewContextApiError.message }}\n </p>\n </div>\n <div class=\"buttonContainer\">\n <ui-action-button [descriptor]=\"buttonDescriptor\" (actionClick)=\"onActionClick()\">\n </ui-action-button>\n </div>\n </div>\n}\n", styles: [".container{display:flex;flex-direction:column;gap:1em;min-width:25rem;max-width:50vw;height:auto;max-height:75vh}.content{flex:1;overflow:auto}.buttonContainer{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
12071
|
+
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=\"container\">\n <h3 class=\"color-accent-700\">\n {{ smartViewContextApiError.dialogTitle }}\n </h3>\n <div class=\"content\">\n <p>\n {{ smartViewContextApiError.message }}\n </p>\n </div>\n <div class=\"buttonContainer\">\n <ui-action-button [descriptor]=\"buttonDescriptor\" (actionClick)=\"onActionClick()\">\n </ui-action-button>\n </div>\n </div>\n}\n", styles: [".container{display:flex;flex-direction:column;gap:1em;min-width:25rem;max-width:50vw;height:auto;max-height:75vh}.content{flex:1;overflow:auto}.buttonContainer{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
12058
12072
|
}
|
|
12059
12073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartViewContextErrorDialogComponent, decorators: [{
|
|
12060
12074
|
type: Component,
|
|
@@ -13783,7 +13797,7 @@ class UiActionConfirmDialogComponent {
|
|
|
13783
13797
|
this.service.cancel();
|
|
13784
13798
|
}
|
|
13785
13799
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13786
|
-
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]=\"'X'\"></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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
13800
|
+
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]=\"'X'\"></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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
13787
13801
|
}
|
|
13788
13802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionConfirmDialogComponent, decorators: [{
|
|
13789
13803
|
type: Component,
|
|
@@ -22524,7 +22538,7 @@ class UiActionFileUploadDialogComponent {
|
|
|
22524
22538
|
this.service.cancel();
|
|
22525
22539
|
}
|
|
22526
22540
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22527
|
-
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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
22541
|
+
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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
|
|
22528
22542
|
}
|
|
22529
22543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
|
|
22530
22544
|
type: Component,
|