@smartbit4all/ng-client 3.3.49 → 3.3.51

package/fesm2020/smartbit4all-ng-client.mjs

@@ -5310,10 +5310,10 @@ class SmartformwidgetComponent {
     }
 }
 SmartformwidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartformwidgetComponent, deps: [{ token: SmartFormService }, { token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
-SmartformwidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: { form: "form", widgetInstance: "widgetInstance", onBlur: "onBlur", onValueChange: "onValueChange", labelColor: "labelColor", sophisticatedValueChange: "sophisticatedValueChange" }, viewQueries: [{ propertyName: "chipInputChild", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "customComponentVcRef", first: true, predicate: ["customComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "dateInputChild", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInputChild", first: true, predicate: ["timeInput"], descendants: true }], ngImport: i0, template: "<div class=\"container\" [formGroup]=\"form\">\r\n  <div\r\n    [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n    class=\"container\"\r\n    *ngIf=\"widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\"\r\n  >\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CONTAINER\" [ngClass]=\"getDirection()\">\r\n      <smartformwidget\r\n        *ngFor=\"let widget of widgetInstance.valueList\"\r\n        [form]=\"form\"\r\n        [widgetInstance]=\"widget\"\r\n        class=\"container-item\"\r\n        [ngClass]=\"widget.cssClass ?? ''\"\r\n        [onBlur]=\"onBlur\"\r\n        [onValueChange]=\"onValueChange\"\r\n        [sophisticatedValueChange]=\"sophisticatedValueChange\"\r\n        class=\"{{ widget.key }}\"\r\n        [labelColor]=\"labelColor\"\r\n      ></smartformwidget>\r\n    </div>\r\n\r\n    <div\r\n      (capsLock)=\"capsOn = $event\"\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input textField widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n\r\n        <input\r\n          *ngIf=\"!widgetInstance.selection\"\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n          type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\r\n          [mask]=\"widgetInstance.mask ?? ''\"\r\n          (keydown.enter)=\"onKeydown()\"\r\n          maxlength=\"{{ widgetInstance.maxLength }}\"\r\n        />\r\n        <input\r\n          *ngIf=\"widgetInstance.selection\"\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n          type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n          [matAutocomplete]=\"textFieldAuto\"\r\n          (keydown.enter)=\"onKeydown()\"\r\n        />\r\n        <button\r\n          *ngIf=\"widgetInstance.isPassword\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"togglePasswordVisibility($event)\"\r\n        >\r\n          <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n        </button>\r\n        <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.label\">\r\n            {{ option.label }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n        <span class=\"mat-error\" *ngIf=\"capsOn && widgetInstance.isPassword\">\r\n          {{ widgetInstance.capsLockWarning }}\r\n        </span>\r\n\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n\r\n        <span matPrefix>\r\n          <smart-icon\r\n            *ngIf=\"capsOn && widgetInstance.isPassword\"\r\n            [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\r\n            color=\"warn\"\r\n          ></smart-icon>\r\n          <smart-icon\r\n            *ngIf=\"widgetInstance.icon && widgetInstance.iconPosition === 'PRE'\"\r\n            [icon]=\"widgetInstance.icon\"\r\n            [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n          ></smart-icon>\r\n          {{ widgetInstance.prefix }}\r\n        </span>\r\n        <span matSuffix>\r\n          {{ widgetInstance.suffix }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"\r\n            widgetInstance.icon &&\r\n            (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n          \"\r\n          [icon]=\"widgetInstance.icon\"\r\n          [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <button\r\n          *ngIf=\"widgetInstance.textFieldButton\"\r\n          matSuffix\r\n          mat-button\r\n          color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n          (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().PRE && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n            [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n          >\r\n          </smart-icon>\r\n          {{ widgetInstance.textFieldButton.label }}\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n        </button>\r\n        <mat-hint\r\n          *ngIf=\"widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength\"\r\n          matSuffix\r\n          align=\"end\"\r\n          >{{ widgetInstance.maxLength - form.controls[widgetInstance.key].value.length }}</mat-hint\r\n        >\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input textField widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <input\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          type=\"number\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [min]=\"widgetInstance.minValues ?? null\"\r\n          [max]=\"widgetInstance.maxValues ?? null\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <span matPrefix>\r\n          {{ widgetInstance.prefix }}\r\n        </span>\r\n        <span matSuffix>\r\n          {{ widgetInstance.suffix }}\r\n        </span>\r\n        <smart-icon *ngIf=\"widgetInstance.icon\" [icon]=\"widgetInstance.icon\" matSuffix>\r\n        </smart-icon>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <button\r\n          *ngIf=\"widgetInstance.textFieldButton\"\r\n          matSuffix\r\n          mat-button\r\n          color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n          (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().PRE && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n          {{ widgetInstance.textFieldButton.label }}\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-chip-list #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n          <mat-chip\r\n            [disabled]=\"widgetInstance.isDisabled\"\r\n            *ngFor=\"let value of widgetInstance.value\"\r\n            (removed)=\"remove(value)\"\r\n          >\r\n            {{ value }}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n          <input\r\n            #chipInput\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            [matChipInputFor]=\"chipList\"\r\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n            [matChipInputAddOnBlur]=\"addOnBlur\"\r\n            [readonly]=\"widgetInstance.isReadonly\"\r\n            [matAutocomplete]=\"chipAuto\"\r\n            (matChipInputTokenEnd)=\"add($event)\"\r\n            (blur)=\"onBlur?.next($event)\"\r\n            (input)=\"onValueChange?.next($event)\"\r\n            [disabled]=\"widgetInstance.isDisabled\"\r\n          />\r\n          <mat-autocomplete\r\n            #chipAuto=\"matAutocomplete\"\r\n            (optionSelected)=\"selected($event, widgetInstance)\"\r\n          >\r\n            <mat-option\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n              *ngFor=\"let item of widgetInstance.valueList\"\r\n              [value]=\"item.value\"\r\n            >\r\n              {{ item.label }}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-chip-list>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_BOX\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <textarea\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          maxlength=\"{{ widgetInstance.maxLength }}\"\r\n        ></textarea>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint\r\n          *ngIf=\"widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength\"\r\n          matSuffix\r\n          align=\"end\"\r\n          >{{ widgetInstance.maxLength - form.controls[widgetInstance.key].value.length }}</mat-hint\r\n        >\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CHECK_BOX\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div\r\n        class=\"input checkbox widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n          <div\r\n            class=\"checkbox-item-container\"\r\n            *ngFor=\"let checkbox of widgetInstance.valueList; let i = index\"\r\n          >\r\n            <img\r\n              *ngIf=\"checkbox.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"checkbox-item-image\"\r\n              [src]=\"checkbox.imageUrl\"\r\n            />\r\n            <mat-checkbox\r\n              class=\"selecatbleObject\"\r\n              formControlName=\"{{ widgetInstance.key }}\"\r\n              [ngModel]=\"checkbox.value\"\r\n              (change)=\"onValueChange?.next(checkbox)\"\r\n            >\r\n              {{ checkbox.label }}\r\n            </mat-checkbox>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CHECK_BOX_2\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div\r\n        class=\"input checkbox widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n          <div\r\n            class=\"checkbox-item-container\"\r\n            *ngFor=\"let checkbox of widgetInstance.valueList; let i = index\"\r\n          >\r\n            <img\r\n              *ngIf=\"checkbox.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"checkbox-item-image\"\r\n              [src]=\"checkbox.imageUrl\"\r\n            />\r\n            <mat-checkbox\r\n              class=\"selecatbleObject\"\r\n              formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\r\n              [value]=\"checkbox.value\"\r\n              (change)=\"onValueChange?.next(checkbox)\"\r\n              [disabled]=\"widgetInstance.isDisabled!\"\r\n            >\r\n              {{ checkbox.label }}\r\n            </mat-checkbox>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.RADIO_BUTTON\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-radio-group\r\n        class=\"input radio-section widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        aria-label=\"{{ widgetInstance.label }}\"\r\n        appearance=\"outline\"\r\n        formControlName=\"{{ widgetInstance.key }}\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <div [ngClass]=\"getDirection()\">\r\n          <div class=\"radio-item-container\" *ngFor=\"let radio of widgetInstance.valueList\">\r\n            <img\r\n              *ngIf=\"radio.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"radio-item-image\"\r\n              [src]=\"radio.imageUrl\"\r\n            />\r\n            <mat-radio-button\r\n              class=\"selecatbleObject\"\r\n              value=\"{{ radio.value }}\"\r\n              [ngClass]=\"getDirection()\"\r\n              (change)=\"onValueChange?.next(radio.value)\"\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n            >\r\n              {{ radio.label }}\r\n            </mat-radio-button>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </div>\r\n      </mat-radio-group>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_PICKER\"\r\n      class=\"datePicker widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent date\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker (closed)=\"onBlur?.next(widgetInstance)\"></mat-datepicker>\r\n        <input\r\n          matInput\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          [min]=\"widgetInstance.minDate ?? null\"\r\n          [max]=\"widgetInstance.maxDate ?? null\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [matDatepicker]=\"picker\"\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n          (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n          [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint>\r\n          {{ widgetInstance.dateFormatHint }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <!-- <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-datepicker-toggle matSuffix [for]=\"$any(picker)\"></mat-datepicker-toggle>\r\n        <ngx-mat-datetime-picker\r\n          #picker\r\n          [showSpinners]=\"true\"\r\n          [showSeconds]=\"false\"\r\n          [stepHour]=\"1\"\r\n          [stepMinute]=\"1\"\r\n          [stepSecond]=\"10\"\r\n          [touchUi]=\"false\"\r\n          [color]=\"'primary'\"\r\n          [enableMeridian]=\"false\"\r\n          [disableMinute]=\"false\"\r\n          [hideTime]=\"false\"\r\n        >\r\n        </ngx-mat-datetime-picker>\r\n        <input\r\n          matInput\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [ngxMatDatetimePicker]=\"picker\"\r\n          [ngxMatDatetimePickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint>\r\n          {{ widgetInstance.dateFormatHint }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n    </div> -->\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"dateTimePickerContainer\">\r\n        <mat-form-field\r\n          class=\"input widgetContent date\"\r\n          [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n          [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n          appearance=\"outline\"\r\n        >\r\n          <mat-label\r\n            class=\"label\"\r\n            [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n            *ngIf=\"!widgetInstance.showLabel\"\r\n          >\r\n            {{ getWidgetLabel(widgetInstance) }}\r\n          </mat-label>\r\n          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n          <mat-datepicker #picker (closed)=\"onBlur?.next(widgetInstance)\"></mat-datepicker>\r\n          <input\r\n            #dateInput\r\n            matInput\r\n            [formControlName]=\"widgetInstance.key\"\r\n            [id]=\"widgetInstance.key\"\r\n            [value]=\"widgetInstance.value\"\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            [matDatepicker]=\"picker\"\r\n            (blur)=\"onDatePickerBlur($event)\"\r\n            (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n            [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n          />\r\n          <span class=\"mat-error\">\r\n            {{ widgetInstance.error }}\r\n          </span>\r\n          <smart-icon\r\n            *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n            [icon]=\"widgetInstance.errorIcon\"\r\n            [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            matSuffix\r\n          ></smart-icon>\r\n          <mat-hint>\r\n            {{ widgetInstance.dateFormatHint }}\r\n          </mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field\r\n          *ngIf=\"hasCreated\"\r\n          class=\"input widgetContent time\"\r\n          [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n          [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n          appearance=\"outline\"\r\n        >\r\n          <input\r\n            #timeInput\r\n            [formControlName]=\"widgetInstance.key + '-time'\"\r\n            [id]=\"widgetInstance.key\"\r\n            [type]=\"'time'\"\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            (blur)=\"onTimePickerBlur($event)\"\r\n            matInput\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.SELECT\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-select\r\n          [formControlName]=\"widgetInstance.key\"\r\n          (selectionChange)=\"onValueChange?.next($event.value)\"\r\n          (closed)=\"onBlur?.next(widgetInstance)\"\r\n          [disabled]=\"widgetInstance.isDisabled!\"\r\n          [compareWith]=\"\r\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n          \"\r\n        >\r\n          <div *ngFor=\"let option of widgetInstance.valueList\">\r\n            <mat-optgroup\r\n              *ngIf=\"option.type === getType().ITEM_GROUP\"\r\n              [label]=\"option.label\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let innerOption of option.valueList\"\r\n                [value]=\"innerOption.value\"\r\n                [disabled]=\"innerOption.isDisabled\"\r\n              >\r\n                <smart-icon\r\n                  *ngIf=\"innerOption.icon\"\r\n                  [icon]=\"innerOption.icon\"\r\n                  [color]=\"innerOption.iconColor\"\r\n                ></smart-icon>\r\n                {{ innerOption.label }}\r\n              </mat-option>\r\n            </mat-optgroup>\r\n            <mat-option\r\n              *ngIf=\"option.type === getType().ITEM\"\r\n              [value]=\"option.value\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <smart-icon\r\n                *ngIf=\"option.icon\"\r\n                [icon]=\"option.icon\"\r\n                [color]=\"option.iconColor\"\r\n              ></smart-icon\r\n              >{{ option.label }}</mat-option\r\n            >\r\n          </div>\r\n        </mat-select>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-select\r\n          [formControlName]=\"widgetInstance.key\"\r\n          multiple\r\n          (selectionChange)=\"onValueChange?.next($event.value)\"\r\n          (closed)=\"onBlur?.next(widgetInstance)\"\r\n          [disabled]=\"widgetInstance.isDisabled!\"\r\n          [compareWith]=\"\r\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n          \"\r\n        >\r\n          <div *ngFor=\"let option of widgetInstance.valueList\">\r\n            <mat-optgroup\r\n              *ngIf=\"option.type === getType().ITEM_GROUP\"\r\n              [label]=\"option.label\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let innerOption of option.valueList\"\r\n                [value]=\"innerOption.value\"\r\n                [disabled]=\"innerOption.isDisabled\"\r\n              >\r\n                <smart-icon\r\n                  *ngIf=\"innerOption.icon\"\r\n                  [icon]=\"innerOption.icon\"\r\n                  [color]=\"innerOption.iconColor\"\r\n                ></smart-icon\r\n                >{{ innerOption.label }}</mat-option\r\n              >\r\n            </mat-optgroup>\r\n            <mat-option\r\n              *ngIf=\"option.type === getType().ITEM\"\r\n              [value]=\"option.value\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <smart-icon\r\n                *ngIf=\"option.icon\"\r\n                [icon]=\"option.icon\"\r\n                [color]=\"option.iconColor\"\r\n              ></smart-icon\r\n              >{{ option.label }}</mat-option\r\n            >\r\n          </div>\r\n        </mat-select>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.LABEL\"\r\n      class=\"label widgetContainer\"\r\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n      [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n    >\r\n      <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <p>{{ widgetInstance.widgetDescription }}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TIME\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent time\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <input\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'time'\"\r\n          [value]=\"getTime()\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TOGGLE\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <mat-slide-toggle\r\n          formControlName=\"{{ widgetInstance.key }}\"\r\n          value=\"{{ widgetInstance.value }}\"\r\n          (change)=\"onValueChange?.next($event)\"\r\n          [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n          >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\r\n        ><span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n        ></smart-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.INDICATOR\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"smartIndicator widgetContent\">\r\n        <div class=\"indicatorItems\">\r\n          <div\r\n            *ngFor=\"let item of indicatorItems; let i = index\"\r\n            class=\"indicatorItem\"\r\n            [ngClass]=\"getIndicatorItemClass(i)\"\r\n          ></div>\r\n        </div>\r\n        <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n          {{ getIndicatorStatusLabel() }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.FILE_UPLOADER\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <smartfileuploader\r\n        class=\"widgetContent\"\r\n        [uploadCallback]=\"upload.bind(this)\"\r\n        [fileFormats]=\"widgetInstance.fileFormats\"\r\n        [maxSizeMb]=\"widgetInstance.maxSizeMb\"\r\n        [i18n]=\"widgetInstance.i18n\"\r\n      ></smartfileuploader>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.IMAGE\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <img\r\n        class=\"widgetContent\"\r\n        title=\"{{ widgetInstance.key }}\"\r\n        [ngClass]=\"widgetInstance.imageCss ?? ''\"\r\n        [src]=\"widgetInstance.value\"\r\n      />\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.DIVIDER\" class=\"widgetContainer\">\r\n      <hr class=\"smartDivider\" />\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.BUTTON\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"widgetContent\">\r\n        <button\r\n          mat-button\r\n          [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n          [color]=\"widgetInstance.uiActionDescriptor?.color\"\r\n          (click)=\"onButtonClicked(widgetInstance)\"\r\n        >\r\n          <div\r\n            *ngIf=\"isOnlyIcon(widgetInstance.uiActionDescriptor); then iconOnly; else text\"\r\n          ></div>\r\n          <ng-template #iconOnly>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.uiActionDescriptor?.icon\"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n          </ng-template>\r\n          <ng-template #text>\r\n            <smart-icon\r\n              *ngIf=\"\r\n                widgetInstance.uiActionDescriptor?.icon &&\r\n                widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\r\n              \"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n            {{ widgetInstance.uiActionDescriptor?.title }}\r\n            <smart-icon\r\n              *ngIf=\"\r\n                widgetInstance.uiActionDescriptor?.icon &&\r\n                widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\r\n              \"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n          </ng-template>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"widgetContainer\">\r\n      <h4\r\n        class=\"labelContainer\"\r\n        *ngIf=\"widgetInstance.type === smartFormWidgetType.COMPONENT && widgetInstance.showLabel\"\r\n        class=\"{{ labelColor }}\"\r\n      >\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"widgetContent\">\r\n        <ng-template #customComponent></ng-template>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.RICH_TEXT\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\">\r\n        <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <quill-editor\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [modules]=\"widgetInstance.quillModules\"\r\n          [placeholder]=\"widgetInstance.placeholder\"\r\n          [readOnly]=\"widgetInstance.isReadonly\"\r\n        ></quill-editor>\r\n        <mat-hint\r\n          *ngIf=\"\r\n            !widgetInstance?.hint ||\r\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n          \"\r\n          >{{ widgetInstance.hint?.text }}</mat-hint\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.SORTABLE\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\">\r\n        <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <lib-sortable-widget\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [widgetInstance]=\"widgetInstance\"\r\n        ></lib-sortable-widget>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.MATRIX\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\">\r\n      <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n\r\n    <table class=\"matrixTable widgetContent\">\r\n      <tr>\r\n        <th></th>\r\n        <th class=\"optionLabel\" *ngFor=\"let option of widgetInstance.value.columns\">\r\n          {{ option.displayValue }}\r\n        </th>\r\n      </tr>\r\n      <tr *ngFor=\"let question of widgetInstance.value.rows; let i = index\">\r\n        <th class=\"questionLabel\">\r\n          <label>{{ question.displayValue }}</label>\r\n        </th>\r\n\r\n        <td class=\"selectTd\" *ngFor=\"let option of widgetInstance.value.columns; let j = index\">\r\n          <mat-radio-group\r\n            *ngIf=\"!widgetInstance.isMultiple\"\r\n            [formControlName]=\"widgetInstance.key + '.' + question.code\"\r\n            [name]=\"'q' + i\"\r\n          >\r\n            <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\r\n          </mat-radio-group>\r\n          <div *ngIf=\"widgetInstance.isMultiple\">\r\n            <mat-checkbox\r\n              [formControlName]=\"widgetInstance.key + '.data.' + question.code + '.' + option.code\"\r\n              [value]=\"widgetInstance.value['data'][question.code][option.code]\"\r\n              [checked]=\"true\"\r\n            ></mat-checkbox>\r\n          </div>\r\n        </td>\r\n        <br />\r\n        <button *ngIf=\"widgetInstance.button\" mat-icon-button (click)=\"removeMatrixRow(question)\"\r\n          ><smart-icon icon=\"close\"></smart-icon\r\n        ></button>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\">\r\n      <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n    <youtube-player\r\n      videoId=\"{{ widgetInstance.videoId }}\"\r\n      [width]=\"widgetInstance.width\"\r\n      [height]=\"widgetInstance.height\"\r\n      [startSeconds]=\"widgetInstance.startSeconds\"\r\n      [endSeconds]=\"widgetInstance.endSeconds\"\r\n    ></youtube-player>\r\n    <mat-hint\r\n      *ngIf=\"\r\n        !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n      \"\r\n      >{{ widgetInstance.hint?.text }}</mat-hint\r\n    >\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.MONTH_PICKER\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n      <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n    <lib-smart-month-picker\r\n      [widgetInstance]=\"widgetInstance\"\r\n      (valueChange)=\"handleYearMonthPicked($event)\"\r\n    ></lib-smart-month-picker>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"~quill/dist/quill.snow.css\";.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col{display:flex;flex-direction:column;gap:.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-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-subheading-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;max-width:225px}.date{width:125px}.time{width:90px}.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}\n"], components: [{ type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i9.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i13.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }, { type: i16.QuillEditorComponent, selector: "quill-editor" }, { type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { type: i18.YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "showBeforeIframeApiLoads"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance"], outputs: ["valueChange"] }], directives: [{ type: i20.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i20.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3$2.MatLabel, selector: "mat-label" }, { type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i20.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i24.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i20.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$2.MatSuffix, selector: "[matSuffix]" }, { type: i3$2.MatPrefix, selector: "[matPrefix]" }, { type: i20.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i20.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i20.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9.MatChipRemove, selector: "[matChipRemove]" }, { type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i11.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], pipes: { "async": i3$1.AsyncPipe }, encapsulation: i0.ViewEncapsulation.None });
+SmartformwidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: { form: "form", widgetInstance: "widgetInstance", onBlur: "onBlur", onValueChange: "onValueChange", labelColor: "labelColor", sophisticatedValueChange: "sophisticatedValueChange" }, viewQueries: [{ propertyName: "chipInputChild", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "customComponentVcRef", first: true, predicate: ["customComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "dateInputChild", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInputChild", first: true, predicate: ["timeInput"], descendants: true }], ngImport: i0, template: "<div class=\"container\" [formGroup]=\"form\">\r\n  <div\r\n    [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n    class=\"container\"\r\n    *ngIf=\"widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\"\r\n  >\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CONTAINER\" [ngClass]=\"getDirection()\">\r\n      <smartformwidget\r\n        *ngFor=\"let widget of widgetInstance.valueList\"\r\n        [form]=\"form\"\r\n        [widgetInstance]=\"widget\"\r\n        class=\"container-item\"\r\n        [ngClass]=\"widget.cssClass ?? ''\"\r\n        [onBlur]=\"onBlur\"\r\n        [onValueChange]=\"onValueChange\"\r\n        [sophisticatedValueChange]=\"sophisticatedValueChange\"\r\n        class=\"{{ widget.key }}\"\r\n        [labelColor]=\"labelColor\"\r\n      ></smartformwidget>\r\n    </div>\r\n\r\n    <div\r\n      (capsLock)=\"capsOn = $event\"\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input textField widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n\r\n        <input\r\n          *ngIf=\"!widgetInstance.selection\"\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n          type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\r\n          [mask]=\"widgetInstance.mask ?? ''\"\r\n          (keydown.enter)=\"onKeydown()\"\r\n          maxlength=\"{{ widgetInstance.maxLength }}\"\r\n        />\r\n        <input\r\n          *ngIf=\"widgetInstance.selection\"\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n          type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n          [matAutocomplete]=\"textFieldAuto\"\r\n          (keydown.enter)=\"onKeydown()\"\r\n        />\r\n        <button\r\n          *ngIf=\"widgetInstance.isPassword\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"togglePasswordVisibility($event)\"\r\n        >\r\n          <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n        </button>\r\n        <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.label\">\r\n            {{ option.label }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n        <span class=\"mat-error\" *ngIf=\"capsOn && widgetInstance.isPassword\">\r\n          {{ widgetInstance.capsLockWarning }}\r\n        </span>\r\n\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n\r\n        <span matPrefix>\r\n          <smart-icon\r\n            *ngIf=\"capsOn && widgetInstance.isPassword\"\r\n            [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\r\n            color=\"warn\"\r\n          ></smart-icon>\r\n          <smart-icon\r\n            *ngIf=\"widgetInstance.icon && widgetInstance.iconPosition === 'PRE'\"\r\n            [icon]=\"widgetInstance.icon\"\r\n            [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n          ></smart-icon>\r\n          {{ widgetInstance.prefix }}\r\n        </span>\r\n        <span matSuffix>\r\n          {{ widgetInstance.suffix }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"\r\n            widgetInstance.icon &&\r\n            (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n          \"\r\n          [icon]=\"widgetInstance.icon\"\r\n          [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <button\r\n          *ngIf=\"widgetInstance.textFieldButton\"\r\n          matSuffix\r\n          mat-button\r\n          color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n          (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().PRE && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n            [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n          >\r\n          </smart-icon>\r\n          {{ widgetInstance.textFieldButton.label }}\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n        </button>\r\n        <mat-hint\r\n          *ngIf=\"widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength\"\r\n          matSuffix\r\n          align=\"end\"\r\n          >{{ widgetInstance.maxLength - form.controls[widgetInstance.key].value.length }}</mat-hint\r\n        >\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input textField widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <input\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          type=\"number\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [min]=\"widgetInstance.minValues ?? null\"\r\n          [max]=\"widgetInstance.maxValues ?? null\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <span matPrefix>\r\n          {{ widgetInstance.prefix }}\r\n        </span>\r\n        <span matSuffix>\r\n          {{ widgetInstance.suffix }}\r\n        </span>\r\n        <smart-icon *ngIf=\"widgetInstance.icon\" [icon]=\"widgetInstance.icon\" matSuffix>\r\n        </smart-icon>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <button\r\n          *ngIf=\"widgetInstance.textFieldButton\"\r\n          matSuffix\r\n          mat-button\r\n          color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n          (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().PRE && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n          {{ widgetInstance.textFieldButton.label }}\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-chip-list #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n          <mat-chip\r\n            [disabled]=\"widgetInstance.isDisabled\"\r\n            *ngFor=\"let value of widgetInstance.value\"\r\n            (removed)=\"remove(value)\"\r\n          >\r\n            {{ value }}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n          <input\r\n            #chipInput\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            [matChipInputFor]=\"chipList\"\r\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n            [matChipInputAddOnBlur]=\"addOnBlur\"\r\n            [readonly]=\"widgetInstance.isReadonly\"\r\n            [matAutocomplete]=\"chipAuto\"\r\n            (matChipInputTokenEnd)=\"add($event)\"\r\n            (blur)=\"onBlur?.next($event)\"\r\n            (input)=\"onValueChange?.next($event)\"\r\n            [disabled]=\"widgetInstance.isDisabled\"\r\n          />\r\n          <mat-autocomplete\r\n            #chipAuto=\"matAutocomplete\"\r\n            (optionSelected)=\"selected($event, widgetInstance)\"\r\n          >\r\n            <mat-option\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n              *ngFor=\"let item of widgetInstance.valueList\"\r\n              [value]=\"item.value\"\r\n            >\r\n              {{ item.label }}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-chip-list>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_BOX\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <textarea\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          maxlength=\"{{ widgetInstance.maxLength }}\"\r\n        ></textarea>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint\r\n          *ngIf=\"widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength\"\r\n          matSuffix\r\n          align=\"end\"\r\n          >{{ widgetInstance.maxLength - form.controls[widgetInstance.key].value.length }}</mat-hint\r\n        >\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CHECK_BOX\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div\r\n        class=\"input checkbox widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n          <div\r\n            class=\"checkbox-item-container\"\r\n            *ngFor=\"let checkbox of widgetInstance.valueList; let i = index\"\r\n          >\r\n            <img\r\n              *ngIf=\"checkbox.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"checkbox-item-image\"\r\n              [src]=\"checkbox.imageUrl\"\r\n            />\r\n            <mat-checkbox\r\n              class=\"selecatbleObject\"\r\n              formControlName=\"{{ widgetInstance.key }}\"\r\n              [ngModel]=\"checkbox.value\"\r\n              (change)=\"onValueChange?.next(checkbox)\"\r\n            >\r\n              {{ checkbox.label }}\r\n            </mat-checkbox>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CHECK_BOX_2\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div\r\n        class=\"input checkbox widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n          <div\r\n            class=\"checkbox-item-container\"\r\n            *ngFor=\"let checkbox of widgetInstance.valueList; let i = index\"\r\n          >\r\n            <img\r\n              *ngIf=\"checkbox.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"checkbox-item-image\"\r\n              [src]=\"checkbox.imageUrl\"\r\n            />\r\n            <mat-checkbox\r\n              class=\"selecatbleObject\"\r\n              formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\r\n              [value]=\"checkbox.value\"\r\n              (change)=\"onValueChange?.next(checkbox)\"\r\n              [disabled]=\"widgetInstance.isDisabled!\"\r\n            >\r\n              {{ checkbox.label }}\r\n            </mat-checkbox>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.RADIO_BUTTON\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-radio-group\r\n        class=\"input radio-section widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        aria-label=\"{{ widgetInstance.label }}\"\r\n        appearance=\"outline\"\r\n        formControlName=\"{{ widgetInstance.key }}\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <div [ngClass]=\"getDirection()\">\r\n          <div class=\"radio-item-container\" *ngFor=\"let radio of widgetInstance.valueList\">\r\n            <img\r\n              *ngIf=\"radio.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"radio-item-image\"\r\n              [src]=\"radio.imageUrl\"\r\n            />\r\n            <mat-radio-button\r\n              class=\"selecatbleObject\"\r\n              value=\"{{ radio.value }}\"\r\n              [ngClass]=\"getDirection()\"\r\n              (change)=\"onValueChange?.next(radio.value)\"\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n            >\r\n              {{ radio.label }}\r\n            </mat-radio-button>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </div>\r\n      </mat-radio-group>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_PICKER\"\r\n      class=\"datePicker widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent date\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker (closed)=\"onBlur?.next(widgetInstance)\"></mat-datepicker>\r\n        <input\r\n          matInput\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          [min]=\"widgetInstance.minDate ?? null\"\r\n          [max]=\"widgetInstance.maxDate ?? null\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [matDatepicker]=\"picker\"\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n          (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n          [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint>\r\n          {{ widgetInstance.dateFormatHint }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <!-- <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-datepicker-toggle matSuffix [for]=\"$any(picker)\"></mat-datepicker-toggle>\r\n        <ngx-mat-datetime-picker\r\n          #picker\r\n          [showSpinners]=\"true\"\r\n          [showSeconds]=\"false\"\r\n          [stepHour]=\"1\"\r\n          [stepMinute]=\"1\"\r\n          [stepSecond]=\"10\"\r\n          [touchUi]=\"false\"\r\n          [color]=\"'primary'\"\r\n          [enableMeridian]=\"false\"\r\n          [disableMinute]=\"false\"\r\n          [hideTime]=\"false\"\r\n        >\r\n        </ngx-mat-datetime-picker>\r\n        <input\r\n          matInput\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [ngxMatDatetimePicker]=\"picker\"\r\n          [ngxMatDatetimePickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint>\r\n          {{ widgetInstance.dateFormatHint }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n    </div> -->\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"dateTimePickerContainer\">\r\n        <mat-form-field\r\n          class=\"input widgetContent date\"\r\n          [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n          [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n          appearance=\"outline\"\r\n        >\r\n          <mat-label\r\n            class=\"label\"\r\n            [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n            *ngIf=\"!widgetInstance.showLabel\"\r\n          >\r\n            {{ getWidgetLabel(widgetInstance) }}\r\n          </mat-label>\r\n          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n          <mat-datepicker #picker (closed)=\"onBlur?.next(widgetInstance)\"></mat-datepicker>\r\n          <input\r\n            #dateInput\r\n            matInput\r\n            [formControlName]=\"widgetInstance.key\"\r\n            [id]=\"widgetInstance.key\"\r\n            [value]=\"widgetInstance.value\"\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            [matDatepicker]=\"picker\"\r\n            (blur)=\"onDatePickerBlur($event)\"\r\n            (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n            [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n          />\r\n          <span class=\"mat-error\">\r\n            {{ widgetInstance.error }}\r\n          </span>\r\n          <smart-icon\r\n            *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n            [icon]=\"widgetInstance.errorIcon\"\r\n            [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            matSuffix\r\n          ></smart-icon>\r\n          <mat-hint>\r\n            {{ widgetInstance.dateFormatHint }}\r\n          </mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field\r\n          *ngIf=\"hasCreated\"\r\n          class=\"input widgetContent time\"\r\n          [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n          [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n          appearance=\"outline\"\r\n        >\r\n          <input\r\n            #timeInput\r\n            [formControlName]=\"widgetInstance.key + '-time'\"\r\n            [id]=\"widgetInstance.key\"\r\n            [type]=\"'time'\"\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            (blur)=\"onTimePickerBlur($event)\"\r\n            matInput\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.SELECT\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-select\r\n          [formControlName]=\"widgetInstance.key\"\r\n          (selectionChange)=\"onValueChange?.next($event.value)\"\r\n          (closed)=\"onBlur?.next(widgetInstance)\"\r\n          [disabled]=\"widgetInstance.isDisabled!\"\r\n          [compareWith]=\"\r\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n          \"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n        >\r\n          <div *ngFor=\"let option of widgetInstance.valueList\">\r\n            <mat-optgroup\r\n              *ngIf=\"option.type === getType().ITEM_GROUP\"\r\n              [label]=\"option.label\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let innerOption of option.valueList\"\r\n                [value]=\"innerOption.value\"\r\n                [disabled]=\"innerOption.isDisabled\"\r\n              >\r\n                <smart-icon\r\n                  *ngIf=\"innerOption.icon\"\r\n                  [icon]=\"innerOption.icon\"\r\n                  [color]=\"innerOption.iconColor\"\r\n                ></smart-icon>\r\n                {{ innerOption.label }}\r\n              </mat-option>\r\n            </mat-optgroup>\r\n            <mat-option\r\n              *ngIf=\"option.type === getType().ITEM\"\r\n              [value]=\"option.value\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <smart-icon\r\n                *ngIf=\"option.icon\"\r\n                [icon]=\"option.icon\"\r\n                [color]=\"option.iconColor\"\r\n              ></smart-icon\r\n              >{{ option.label }}</mat-option\r\n            >\r\n          </div>\r\n        </mat-select>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-select\r\n          [formControlName]=\"widgetInstance.key\"\r\n          multiple\r\n          (selectionChange)=\"onValueChange?.next($event.value)\"\r\n          (closed)=\"onBlur?.next(widgetInstance)\"\r\n          [disabled]=\"widgetInstance.isDisabled!\"\r\n          [compareWith]=\"\r\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n          \"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n        >\r\n          <div *ngFor=\"let option of widgetInstance.valueList\">\r\n            <mat-optgroup\r\n              *ngIf=\"option.type === getType().ITEM_GROUP\"\r\n              [label]=\"option.label\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let innerOption of option.valueList\"\r\n                [value]=\"innerOption.value\"\r\n                [disabled]=\"innerOption.isDisabled\"\r\n              >\r\n                <smart-icon\r\n                  *ngIf=\"innerOption.icon\"\r\n                  [icon]=\"innerOption.icon\"\r\n                  [color]=\"innerOption.iconColor\"\r\n                ></smart-icon\r\n                >{{ innerOption.label }}</mat-option\r\n              >\r\n            </mat-optgroup>\r\n            <mat-option\r\n              *ngIf=\"option.type === getType().ITEM\"\r\n              [value]=\"option.value\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <smart-icon\r\n                *ngIf=\"option.icon\"\r\n                [icon]=\"option.icon\"\r\n                [color]=\"option.iconColor\"\r\n              ></smart-icon\r\n              >{{ option.label }}</mat-option\r\n            >\r\n          </div>\r\n        </mat-select>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.LABEL\"\r\n      class=\"label widgetContainer\"\r\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n      [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n    >\r\n      <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <p>{{ widgetInstance.widgetDescription }}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TIME\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent time\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <input\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'time'\"\r\n          [value]=\"getTime()\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TOGGLE\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <mat-slide-toggle\r\n          formControlName=\"{{ widgetInstance.key }}\"\r\n          value=\"{{ widgetInstance.value }}\"\r\n          (change)=\"onValueChange?.next($event)\"\r\n          [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n          >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\r\n        ><span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n        ></smart-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.INDICATOR\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"smartIndicator widgetContent\">\r\n        <div class=\"indicatorItems\">\r\n          <div\r\n            *ngFor=\"let item of indicatorItems; let i = index\"\r\n            class=\"indicatorItem\"\r\n            [ngClass]=\"getIndicatorItemClass(i)\"\r\n          ></div>\r\n        </div>\r\n        <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n          {{ getIndicatorStatusLabel() }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.FILE_UPLOADER\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <smartfileuploader\r\n        class=\"widgetContent\"\r\n        [uploadCallback]=\"upload.bind(this)\"\r\n        [fileFormats]=\"widgetInstance.fileFormats\"\r\n        [maxSizeMb]=\"widgetInstance.maxSizeMb\"\r\n        [i18n]=\"widgetInstance.i18n\"\r\n      ></smartfileuploader>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.IMAGE\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <img\r\n        class=\"widgetContent\"\r\n        title=\"{{ widgetInstance.key }}\"\r\n        [ngClass]=\"widgetInstance.imageCss ?? ''\"\r\n        [src]=\"widgetInstance.value\"\r\n      />\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.DIVIDER\" class=\"widgetContainer\">\r\n      <hr class=\"smartDivider\" />\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.BUTTON\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"widgetContent\">\r\n        <button\r\n          mat-button\r\n          [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n          [color]=\"widgetInstance.uiActionDescriptor?.color\"\r\n          (click)=\"onButtonClicked(widgetInstance)\"\r\n        >\r\n          <div\r\n            *ngIf=\"isOnlyIcon(widgetInstance.uiActionDescriptor); then iconOnly; else text\"\r\n          ></div>\r\n          <ng-template #iconOnly>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.uiActionDescriptor?.icon\"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n          </ng-template>\r\n          <ng-template #text>\r\n            <smart-icon\r\n              *ngIf=\"\r\n                widgetInstance.uiActionDescriptor?.icon &&\r\n                widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\r\n              \"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n            {{ widgetInstance.uiActionDescriptor?.title }}\r\n            <smart-icon\r\n              *ngIf=\"\r\n                widgetInstance.uiActionDescriptor?.icon &&\r\n                widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\r\n              \"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n          </ng-template>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"widgetContainer\">\r\n      <h4\r\n        class=\"labelContainer\"\r\n        *ngIf=\"widgetInstance.type === smartFormWidgetType.COMPONENT && widgetInstance.showLabel\"\r\n        class=\"{{ labelColor }}\"\r\n      >\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"widgetContent\">\r\n        <ng-template #customComponent></ng-template>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.RICH_TEXT\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\">\r\n        <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <quill-editor\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [modules]=\"widgetInstance.quillModules\"\r\n          [placeholder]=\"widgetInstance.placeholder\"\r\n          [readOnly]=\"widgetInstance.isReadonly\"\r\n        ></quill-editor>\r\n        <mat-hint\r\n          *ngIf=\"\r\n            !widgetInstance?.hint ||\r\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n          \"\r\n          >{{ widgetInstance.hint?.text }}</mat-hint\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.SORTABLE\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\">\r\n        <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <lib-sortable-widget\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [widgetInstance]=\"widgetInstance\"\r\n        ></lib-sortable-widget>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.MATRIX\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\">\r\n      <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n\r\n    <table class=\"matrixTable widgetContent\">\r\n      <tr>\r\n        <th></th>\r\n        <th class=\"optionLabel\" *ngFor=\"let option of widgetInstance.value.columns\">\r\n          {{ option.displayValue }}\r\n        </th>\r\n      </tr>\r\n      <tr *ngFor=\"let question of widgetInstance.value.rows; let i = index\">\r\n        <th class=\"questionLabel\">\r\n          <label>{{ question.displayValue }}</label>\r\n        </th>\r\n\r\n        <td class=\"selectTd\" *ngFor=\"let option of widgetInstance.value.columns; let j = index\">\r\n          <mat-radio-group\r\n            *ngIf=\"!widgetInstance.isMultiple\"\r\n            [formControlName]=\"widgetInstance.key + '.' + question.code\"\r\n            [name]=\"'q' + i\"\r\n          >\r\n            <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\r\n          </mat-radio-group>\r\n          <div *ngIf=\"widgetInstance.isMultiple\">\r\n            <mat-checkbox\r\n              [formControlName]=\"widgetInstance.key + '.data.' + question.code + '.' + option.code\"\r\n              [value]=\"widgetInstance.value['data'][question.code][option.code]\"\r\n              [checked]=\"true\"\r\n            ></mat-checkbox>\r\n          </div>\r\n        </td>\r\n        <br />\r\n        <button *ngIf=\"widgetInstance.button\" mat-icon-button (click)=\"removeMatrixRow(question)\"\r\n          ><smart-icon icon=\"close\"></smart-icon\r\n        ></button>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\">\r\n      <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n    <youtube-player\r\n      videoId=\"{{ widgetInstance.videoId }}\"\r\n      [width]=\"widgetInstance.width\"\r\n      [height]=\"widgetInstance.height\"\r\n      [startSeconds]=\"widgetInstance.startSeconds\"\r\n      [endSeconds]=\"widgetInstance.endSeconds\"\r\n    ></youtube-player>\r\n    <mat-hint\r\n      *ngIf=\"\r\n        !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n      \"\r\n      >{{ widgetInstance.hint?.text }}</mat-hint\r\n    >\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.MONTH_PICKER\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n      <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n    <lib-smart-month-picker\r\n      [widgetInstance]=\"widgetInstance\"\r\n      (valueChange)=\"handleYearMonthPicked($event)\"\r\n    ></lib-smart-month-picker>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"~quill/dist/quill.snow.css\";.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col{display:flex;flex-direction:column;gap:.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-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-subheading-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;max-width:225px}.date{width:125px}.time{width:90px}.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}\n"], components: [{ type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i9.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i13.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }, { type: i16.QuillEditorComponent, selector: "quill-editor" }, { type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { type: i18.YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "showBeforeIframeApiLoads"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance"], outputs: ["valueChange"] }], directives: [{ type: i20.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i20.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3$2.MatLabel, selector: "mat-label" }, { type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i20.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i24.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i20.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$2.MatSuffix, selector: "[matSuffix]" }, { type: i3$2.MatPrefix, selector: "[matPrefix]" }, { type: i20.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i20.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i20.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i9.MatChipRemove, selector: "[matChipRemove]" }, { type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i11.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], pipes: { "async": i3$1.AsyncPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartformwidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartformwidget', encapsulation: ViewEncapsulation.None, template: "<div class=\"container\" [formGroup]=\"form\">\r\n  <div\r\n    [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n    class=\"container\"\r\n    *ngIf=\"widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\"\r\n  >\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CONTAINER\" [ngClass]=\"getDirection()\">\r\n      <smartformwidget\r\n        *ngFor=\"let widget of widgetInstance.valueList\"\r\n        [form]=\"form\"\r\n        [widgetInstance]=\"widget\"\r\n        class=\"container-item\"\r\n        [ngClass]=\"widget.cssClass ?? ''\"\r\n        [onBlur]=\"onBlur\"\r\n        [onValueChange]=\"onValueChange\"\r\n        [sophisticatedValueChange]=\"sophisticatedValueChange\"\r\n        class=\"{{ widget.key }}\"\r\n        [labelColor]=\"labelColor\"\r\n      ></smartformwidget>\r\n    </div>\r\n\r\n    <div\r\n      (capsLock)=\"capsOn = $event\"\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input textField widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n\r\n        <input\r\n          *ngIf=\"!widgetInstance.selection\"\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n          type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\r\n          [mask]=\"widgetInstance.mask ?? ''\"\r\n          (keydown.enter)=\"onKeydown()\"\r\n          maxlength=\"{{ widgetInstance.maxLength }}\"\r\n        />\r\n        <input\r\n          *ngIf=\"widgetInstance.selection\"\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n          type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n          [matAutocomplete]=\"textFieldAuto\"\r\n          (keydown.enter)=\"onKeydown()\"\r\n        />\r\n        <button\r\n          *ngIf=\"widgetInstance.isPassword\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"togglePasswordVisibility($event)\"\r\n        >\r\n          <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n        </button>\r\n        <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.label\">\r\n            {{ option.label }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n        <span class=\"mat-error\" *ngIf=\"capsOn && widgetInstance.isPassword\">\r\n          {{ widgetInstance.capsLockWarning }}\r\n        </span>\r\n\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n\r\n        <span matPrefix>\r\n          <smart-icon\r\n            *ngIf=\"capsOn && widgetInstance.isPassword\"\r\n            [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\r\n            color=\"warn\"\r\n          ></smart-icon>\r\n          <smart-icon\r\n            *ngIf=\"widgetInstance.icon && widgetInstance.iconPosition === 'PRE'\"\r\n            [icon]=\"widgetInstance.icon\"\r\n            [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n          ></smart-icon>\r\n          {{ widgetInstance.prefix }}\r\n        </span>\r\n        <span matSuffix>\r\n          {{ widgetInstance.suffix }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"\r\n            widgetInstance.icon &&\r\n            (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n          \"\r\n          [icon]=\"widgetInstance.icon\"\r\n          [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <button\r\n          *ngIf=\"widgetInstance.textFieldButton\"\r\n          matSuffix\r\n          mat-button\r\n          color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n          (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().PRE && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n            [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n          >\r\n          </smart-icon>\r\n          {{ widgetInstance.textFieldButton.label }}\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n        </button>\r\n        <mat-hint\r\n          *ngIf=\"widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength\"\r\n          matSuffix\r\n          align=\"end\"\r\n          >{{ widgetInstance.maxLength - form.controls[widgetInstance.key].value.length }}</mat-hint\r\n        >\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input textField widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <input\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          type=\"number\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [min]=\"widgetInstance.minValues ?? null\"\r\n          [max]=\"widgetInstance.maxValues ?? null\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <span matPrefix>\r\n          {{ widgetInstance.prefix }}\r\n        </span>\r\n        <span matSuffix>\r\n          {{ widgetInstance.suffix }}\r\n        </span>\r\n        <smart-icon *ngIf=\"widgetInstance.icon\" [icon]=\"widgetInstance.icon\" matSuffix>\r\n        </smart-icon>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <button\r\n          *ngIf=\"widgetInstance.textFieldButton\"\r\n          matSuffix\r\n          mat-button\r\n          color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n          (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().PRE && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n          {{ widgetInstance.textFieldButton.label }}\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-chip-list #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n          <mat-chip\r\n            [disabled]=\"widgetInstance.isDisabled\"\r\n            *ngFor=\"let value of widgetInstance.value\"\r\n            (removed)=\"remove(value)\"\r\n          >\r\n            {{ value }}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n          <input\r\n            #chipInput\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            [matChipInputFor]=\"chipList\"\r\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n            [matChipInputAddOnBlur]=\"addOnBlur\"\r\n            [readonly]=\"widgetInstance.isReadonly\"\r\n            [matAutocomplete]=\"chipAuto\"\r\n            (matChipInputTokenEnd)=\"add($event)\"\r\n            (blur)=\"onBlur?.next($event)\"\r\n            (input)=\"onValueChange?.next($event)\"\r\n            [disabled]=\"widgetInstance.isDisabled\"\r\n          />\r\n          <mat-autocomplete\r\n            #chipAuto=\"matAutocomplete\"\r\n            (optionSelected)=\"selected($event, widgetInstance)\"\r\n          >\r\n            <mat-option\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n              *ngFor=\"let item of widgetInstance.valueList\"\r\n              [value]=\"item.value\"\r\n            >\r\n              {{ item.label }}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-chip-list>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_BOX\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <textarea\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          maxlength=\"{{ widgetInstance.maxLength }}\"\r\n        ></textarea>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint\r\n          *ngIf=\"widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength\"\r\n          matSuffix\r\n          align=\"end\"\r\n          >{{ widgetInstance.maxLength - form.controls[widgetInstance.key].value.length }}</mat-hint\r\n        >\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CHECK_BOX\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div\r\n        class=\"input checkbox widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n          <div\r\n            class=\"checkbox-item-container\"\r\n            *ngFor=\"let checkbox of widgetInstance.valueList; let i = index\"\r\n          >\r\n            <img\r\n              *ngIf=\"checkbox.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"checkbox-item-image\"\r\n              [src]=\"checkbox.imageUrl\"\r\n            />\r\n            <mat-checkbox\r\n              class=\"selecatbleObject\"\r\n              formControlName=\"{{ widgetInstance.key }}\"\r\n              [ngModel]=\"checkbox.value\"\r\n              (change)=\"onValueChange?.next(checkbox)\"\r\n            >\r\n              {{ checkbox.label }}\r\n            </mat-checkbox>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CHECK_BOX_2\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div\r\n        class=\"input checkbox widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n          <div\r\n            class=\"checkbox-item-container\"\r\n            *ngFor=\"let checkbox of widgetInstance.valueList; let i = index\"\r\n          >\r\n            <img\r\n              *ngIf=\"checkbox.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"checkbox-item-image\"\r\n              [src]=\"checkbox.imageUrl\"\r\n            />\r\n            <mat-checkbox\r\n              class=\"selecatbleObject\"\r\n              formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\r\n              [value]=\"checkbox.value\"\r\n              (change)=\"onValueChange?.next(checkbox)\"\r\n              [disabled]=\"widgetInstance.isDisabled!\"\r\n            >\r\n              {{ checkbox.label }}\r\n            </mat-checkbox>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.RADIO_BUTTON\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-radio-group\r\n        class=\"input radio-section widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        aria-label=\"{{ widgetInstance.label }}\"\r\n        appearance=\"outline\"\r\n        formControlName=\"{{ widgetInstance.key }}\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <div [ngClass]=\"getDirection()\">\r\n          <div class=\"radio-item-container\" *ngFor=\"let radio of widgetInstance.valueList\">\r\n            <img\r\n              *ngIf=\"radio.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"radio-item-image\"\r\n              [src]=\"radio.imageUrl\"\r\n            />\r\n            <mat-radio-button\r\n              class=\"selecatbleObject\"\r\n              value=\"{{ radio.value }}\"\r\n              [ngClass]=\"getDirection()\"\r\n              (change)=\"onValueChange?.next(radio.value)\"\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n            >\r\n              {{ radio.label }}\r\n            </mat-radio-button>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </div>\r\n      </mat-radio-group>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_PICKER\"\r\n      class=\"datePicker widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent date\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker (closed)=\"onBlur?.next(widgetInstance)\"></mat-datepicker>\r\n        <input\r\n          matInput\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          [min]=\"widgetInstance.minDate ?? null\"\r\n          [max]=\"widgetInstance.maxDate ?? null\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [matDatepicker]=\"picker\"\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n          (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n          [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint>\r\n          {{ widgetInstance.dateFormatHint }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <!-- <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-datepicker-toggle matSuffix [for]=\"$any(picker)\"></mat-datepicker-toggle>\r\n        <ngx-mat-datetime-picker\r\n          #picker\r\n          [showSpinners]=\"true\"\r\n          [showSeconds]=\"false\"\r\n          [stepHour]=\"1\"\r\n          [stepMinute]=\"1\"\r\n          [stepSecond]=\"10\"\r\n          [touchUi]=\"false\"\r\n          [color]=\"'primary'\"\r\n          [enableMeridian]=\"false\"\r\n          [disableMinute]=\"false\"\r\n          [hideTime]=\"false\"\r\n        >\r\n        </ngx-mat-datetime-picker>\r\n        <input\r\n          matInput\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [ngxMatDatetimePicker]=\"picker\"\r\n          [ngxMatDatetimePickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint>\r\n          {{ widgetInstance.dateFormatHint }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n    </div> -->\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"dateTimePickerContainer\">\r\n        <mat-form-field\r\n          class=\"input widgetContent date\"\r\n          [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n          [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n          appearance=\"outline\"\r\n        >\r\n          <mat-label\r\n            class=\"label\"\r\n            [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n            *ngIf=\"!widgetInstance.showLabel\"\r\n          >\r\n            {{ getWidgetLabel(widgetInstance) }}\r\n          </mat-label>\r\n          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n          <mat-datepicker #picker (closed)=\"onBlur?.next(widgetInstance)\"></mat-datepicker>\r\n          <input\r\n            #dateInput\r\n            matInput\r\n            [formControlName]=\"widgetInstance.key\"\r\n            [id]=\"widgetInstance.key\"\r\n            [value]=\"widgetInstance.value\"\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            [matDatepicker]=\"picker\"\r\n            (blur)=\"onDatePickerBlur($event)\"\r\n            (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n            [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n          />\r\n          <span class=\"mat-error\">\r\n            {{ widgetInstance.error }}\r\n          </span>\r\n          <smart-icon\r\n            *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n            [icon]=\"widgetInstance.errorIcon\"\r\n            [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            matSuffix\r\n          ></smart-icon>\r\n          <mat-hint>\r\n            {{ widgetInstance.dateFormatHint }}\r\n          </mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field\r\n          *ngIf=\"hasCreated\"\r\n          class=\"input widgetContent time\"\r\n          [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n          [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n          appearance=\"outline\"\r\n        >\r\n          <input\r\n            #timeInput\r\n            [formControlName]=\"widgetInstance.key + '-time'\"\r\n            [id]=\"widgetInstance.key\"\r\n            [type]=\"'time'\"\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            (blur)=\"onTimePickerBlur($event)\"\r\n            matInput\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.SELECT\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-select\r\n          [formControlName]=\"widgetInstance.key\"\r\n          (selectionChange)=\"onValueChange?.next($event.value)\"\r\n          (closed)=\"onBlur?.next(widgetInstance)\"\r\n          [disabled]=\"widgetInstance.isDisabled!\"\r\n          [compareWith]=\"\r\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n          \"\r\n        >\r\n          <div *ngFor=\"let option of widgetInstance.valueList\">\r\n            <mat-optgroup\r\n              *ngIf=\"option.type === getType().ITEM_GROUP\"\r\n              [label]=\"option.label\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let innerOption of option.valueList\"\r\n                [value]=\"innerOption.value\"\r\n                [disabled]=\"innerOption.isDisabled\"\r\n              >\r\n                <smart-icon\r\n                  *ngIf=\"innerOption.icon\"\r\n                  [icon]=\"innerOption.icon\"\r\n                  [color]=\"innerOption.iconColor\"\r\n                ></smart-icon>\r\n                {{ innerOption.label }}\r\n              </mat-option>\r\n            </mat-optgroup>\r\n            <mat-option\r\n              *ngIf=\"option.type === getType().ITEM\"\r\n              [value]=\"option.value\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <smart-icon\r\n                *ngIf=\"option.icon\"\r\n                [icon]=\"option.icon\"\r\n                [color]=\"option.iconColor\"\r\n              ></smart-icon\r\n              >{{ option.label }}</mat-option\r\n            >\r\n          </div>\r\n        </mat-select>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-select\r\n          [formControlName]=\"widgetInstance.key\"\r\n          multiple\r\n          (selectionChange)=\"onValueChange?.next($event.value)\"\r\n          (closed)=\"onBlur?.next(widgetInstance)\"\r\n          [disabled]=\"widgetInstance.isDisabled!\"\r\n          [compareWith]=\"\r\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n          \"\r\n        >\r\n          <div *ngFor=\"let option of widgetInstance.valueList\">\r\n            <mat-optgroup\r\n              *ngIf=\"option.type === getType().ITEM_GROUP\"\r\n              [label]=\"option.label\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let innerOption of option.valueList\"\r\n                [value]=\"innerOption.value\"\r\n                [disabled]=\"innerOption.isDisabled\"\r\n              >\r\n                <smart-icon\r\n                  *ngIf=\"innerOption.icon\"\r\n                  [icon]=\"innerOption.icon\"\r\n                  [color]=\"innerOption.iconColor\"\r\n                ></smart-icon\r\n                >{{ innerOption.label }}</mat-option\r\n              >\r\n            </mat-optgroup>\r\n            <mat-option\r\n              *ngIf=\"option.type === getType().ITEM\"\r\n              [value]=\"option.value\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <smart-icon\r\n                *ngIf=\"option.icon\"\r\n                [icon]=\"option.icon\"\r\n                [color]=\"option.iconColor\"\r\n              ></smart-icon\r\n              >{{ option.label }}</mat-option\r\n            >\r\n          </div>\r\n        </mat-select>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.LABEL\"\r\n      class=\"label widgetContainer\"\r\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n      [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n    >\r\n      <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <p>{{ widgetInstance.widgetDescription }}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TIME\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent time\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <input\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'time'\"\r\n          [value]=\"getTime()\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TOGGLE\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <mat-slide-toggle\r\n          formControlName=\"{{ widgetInstance.key }}\"\r\n          value=\"{{ widgetInstance.value }}\"\r\n          (change)=\"onValueChange?.next($event)\"\r\n          [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n          >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\r\n        ><span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n        ></smart-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.INDICATOR\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"smartIndicator widgetContent\">\r\n        <div class=\"indicatorItems\">\r\n          <div\r\n            *ngFor=\"let item of indicatorItems; let i = index\"\r\n            class=\"indicatorItem\"\r\n            [ngClass]=\"getIndicatorItemClass(i)\"\r\n          ></div>\r\n        </div>\r\n        <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n          {{ getIndicatorStatusLabel() }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.FILE_UPLOADER\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <smartfileuploader\r\n        class=\"widgetContent\"\r\n        [uploadCallback]=\"upload.bind(this)\"\r\n        [fileFormats]=\"widgetInstance.fileFormats\"\r\n        [maxSizeMb]=\"widgetInstance.maxSizeMb\"\r\n        [i18n]=\"widgetInstance.i18n\"\r\n      ></smartfileuploader>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.IMAGE\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <img\r\n        class=\"widgetContent\"\r\n        title=\"{{ widgetInstance.key }}\"\r\n        [ngClass]=\"widgetInstance.imageCss ?? ''\"\r\n        [src]=\"widgetInstance.value\"\r\n      />\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.DIVIDER\" class=\"widgetContainer\">\r\n      <hr class=\"smartDivider\" />\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.BUTTON\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"widgetContent\">\r\n        <button\r\n          mat-button\r\n          [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n          [color]=\"widgetInstance.uiActionDescriptor?.color\"\r\n          (click)=\"onButtonClicked(widgetInstance)\"\r\n        >\r\n          <div\r\n            *ngIf=\"isOnlyIcon(widgetInstance.uiActionDescriptor); then iconOnly; else text\"\r\n          ></div>\r\n          <ng-template #iconOnly>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.uiActionDescriptor?.icon\"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n          </ng-template>\r\n          <ng-template #text>\r\n            <smart-icon\r\n              *ngIf=\"\r\n                widgetInstance.uiActionDescriptor?.icon &&\r\n                widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\r\n              \"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n            {{ widgetInstance.uiActionDescriptor?.title }}\r\n            <smart-icon\r\n              *ngIf=\"\r\n                widgetInstance.uiActionDescriptor?.icon &&\r\n                widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\r\n              \"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n          </ng-template>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"widgetContainer\">\r\n      <h4\r\n        class=\"labelContainer\"\r\n        *ngIf=\"widgetInstance.type === smartFormWidgetType.COMPONENT && widgetInstance.showLabel\"\r\n        class=\"{{ labelColor }}\"\r\n      >\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"widgetContent\">\r\n        <ng-template #customComponent></ng-template>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.RICH_TEXT\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\">\r\n        <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <quill-editor\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [modules]=\"widgetInstance.quillModules\"\r\n          [placeholder]=\"widgetInstance.placeholder\"\r\n          [readOnly]=\"widgetInstance.isReadonly\"\r\n        ></quill-editor>\r\n        <mat-hint\r\n          *ngIf=\"\r\n            !widgetInstance?.hint ||\r\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n          \"\r\n          >{{ widgetInstance.hint?.text }}</mat-hint\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.SORTABLE\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\">\r\n        <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <lib-sortable-widget\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [widgetInstance]=\"widgetInstance\"\r\n        ></lib-sortable-widget>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.MATRIX\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\">\r\n      <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n\r\n    <table class=\"matrixTable widgetContent\">\r\n      <tr>\r\n        <th></th>\r\n        <th class=\"optionLabel\" *ngFor=\"let option of widgetInstance.value.columns\">\r\n          {{ option.displayValue }}\r\n        </th>\r\n      </tr>\r\n      <tr *ngFor=\"let question of widgetInstance.value.rows; let i = index\">\r\n        <th class=\"questionLabel\">\r\n          <label>{{ question.displayValue }}</label>\r\n        </th>\r\n\r\n        <td class=\"selectTd\" *ngFor=\"let option of widgetInstance.value.columns; let j = index\">\r\n          <mat-radio-group\r\n            *ngIf=\"!widgetInstance.isMultiple\"\r\n            [formControlName]=\"widgetInstance.key + '.' + question.code\"\r\n            [name]=\"'q' + i\"\r\n          >\r\n            <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\r\n          </mat-radio-group>\r\n          <div *ngIf=\"widgetInstance.isMultiple\">\r\n            <mat-checkbox\r\n              [formControlName]=\"widgetInstance.key + '.data.' + question.code + '.' + option.code\"\r\n              [value]=\"widgetInstance.value['data'][question.code][option.code]\"\r\n              [checked]=\"true\"\r\n            ></mat-checkbox>\r\n          </div>\r\n        </td>\r\n        <br />\r\n        <button *ngIf=\"widgetInstance.button\" mat-icon-button (click)=\"removeMatrixRow(question)\"\r\n          ><smart-icon icon=\"close\"></smart-icon\r\n        ></button>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\">\r\n      <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n    <youtube-player\r\n      videoId=\"{{ widgetInstance.videoId }}\"\r\n      [width]=\"widgetInstance.width\"\r\n      [height]=\"widgetInstance.height\"\r\n      [startSeconds]=\"widgetInstance.startSeconds\"\r\n      [endSeconds]=\"widgetInstance.endSeconds\"\r\n    ></youtube-player>\r\n    <mat-hint\r\n      *ngIf=\"\r\n        !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n      \"\r\n      >{{ widgetInstance.hint?.text }}</mat-hint\r\n    >\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.MONTH_PICKER\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n      <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n    <lib-smart-month-picker\r\n      [widgetInstance]=\"widgetInstance\"\r\n      (valueChange)=\"handleYearMonthPicked($event)\"\r\n    ></lib-smart-month-picker>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"~quill/dist/quill.snow.css\";.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col{display:flex;flex-direction:column;gap:.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-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-subheading-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;max-width:225px}.date{width:125px}.time{width:90px}.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}\n"] }]
+            args: [{ selector: 'smartformwidget', encapsulation: ViewEncapsulation.None, template: "<div class=\"container\" [formGroup]=\"form\">\r\n  <div\r\n    [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n    class=\"container\"\r\n    *ngIf=\"widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\"\r\n  >\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CONTAINER\" [ngClass]=\"getDirection()\">\r\n      <smartformwidget\r\n        *ngFor=\"let widget of widgetInstance.valueList\"\r\n        [form]=\"form\"\r\n        [widgetInstance]=\"widget\"\r\n        class=\"container-item\"\r\n        [ngClass]=\"widget.cssClass ?? ''\"\r\n        [onBlur]=\"onBlur\"\r\n        [onValueChange]=\"onValueChange\"\r\n        [sophisticatedValueChange]=\"sophisticatedValueChange\"\r\n        class=\"{{ widget.key }}\"\r\n        [labelColor]=\"labelColor\"\r\n      ></smartformwidget>\r\n    </div>\r\n\r\n    <div\r\n      (capsLock)=\"capsOn = $event\"\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input textField widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n\r\n        <input\r\n          *ngIf=\"!widgetInstance.selection\"\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n          type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\r\n          [mask]=\"widgetInstance.mask ?? ''\"\r\n          (keydown.enter)=\"onKeydown()\"\r\n          maxlength=\"{{ widgetInstance.maxLength }}\"\r\n        />\r\n        <input\r\n          *ngIf=\"widgetInstance.selection\"\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n          type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n          [matAutocomplete]=\"textFieldAuto\"\r\n          (keydown.enter)=\"onKeydown()\"\r\n        />\r\n        <button\r\n          *ngIf=\"widgetInstance.isPassword\"\r\n          mat-icon-button\r\n          matSuffix\r\n          (click)=\"togglePasswordVisibility($event)\"\r\n        >\r\n          <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n        </button>\r\n        <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n          <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.label\">\r\n            {{ option.label }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n        <span class=\"mat-error\" *ngIf=\"capsOn && widgetInstance.isPassword\">\r\n          {{ widgetInstance.capsLockWarning }}\r\n        </span>\r\n\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n\r\n        <span matPrefix>\r\n          <smart-icon\r\n            *ngIf=\"capsOn && widgetInstance.isPassword\"\r\n            [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\r\n            color=\"warn\"\r\n          ></smart-icon>\r\n          <smart-icon\r\n            *ngIf=\"widgetInstance.icon && widgetInstance.iconPosition === 'PRE'\"\r\n            [icon]=\"widgetInstance.icon\"\r\n            [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n          ></smart-icon>\r\n          {{ widgetInstance.prefix }}\r\n        </span>\r\n        <span matSuffix>\r\n          {{ widgetInstance.suffix }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"\r\n            widgetInstance.icon &&\r\n            (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\r\n          \"\r\n          [icon]=\"widgetInstance.icon\"\r\n          [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <button\r\n          *ngIf=\"widgetInstance.textFieldButton\"\r\n          matSuffix\r\n          mat-button\r\n          color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n          (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().PRE && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n            [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n          >\r\n          </smart-icon>\r\n          {{ widgetInstance.textFieldButton.label }}\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n        </button>\r\n        <mat-hint\r\n          *ngIf=\"widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength\"\r\n          matSuffix\r\n          align=\"end\"\r\n          >{{ widgetInstance.maxLength - form.controls[widgetInstance.key].value.length }}</mat-hint\r\n        >\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input textField widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <input\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          type=\"number\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [min]=\"widgetInstance.minValues ?? null\"\r\n          [max]=\"widgetInstance.maxValues ?? null\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          (input)=\"onValueChange?.next($event)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <span matPrefix>\r\n          {{ widgetInstance.prefix }}\r\n        </span>\r\n        <span matSuffix>\r\n          {{ widgetInstance.suffix }}\r\n        </span>\r\n        <smart-icon *ngIf=\"widgetInstance.icon\" [icon]=\"widgetInstance.icon\" matSuffix>\r\n        </smart-icon>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <button\r\n          *ngIf=\"widgetInstance.textFieldButton\"\r\n          matSuffix\r\n          mat-button\r\n          color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n          (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().PRE && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n          {{ widgetInstance.textFieldButton.label }}\r\n          <smart-icon\r\n            *ngIf=\"\r\n              widgetInstance.textFieldButton.iconPosition ===\r\n                smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\r\n            \"\r\n            [icon]=\"widgetInstance.textFieldButton.icon\"\r\n          >\r\n          </smart-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-chip-list #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n          <mat-chip\r\n            [disabled]=\"widgetInstance.isDisabled\"\r\n            *ngFor=\"let value of widgetInstance.value\"\r\n            (removed)=\"remove(value)\"\r\n          >\r\n            {{ value }}\r\n            <button matChipRemove>\r\n              <mat-icon>cancel</mat-icon>\r\n            </button>\r\n          </mat-chip>\r\n          <input\r\n            #chipInput\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            [matChipInputFor]=\"chipList\"\r\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n            [matChipInputAddOnBlur]=\"addOnBlur\"\r\n            [readonly]=\"widgetInstance.isReadonly\"\r\n            [matAutocomplete]=\"chipAuto\"\r\n            (matChipInputTokenEnd)=\"add($event)\"\r\n            (blur)=\"onBlur?.next($event)\"\r\n            (input)=\"onValueChange?.next($event)\"\r\n            [disabled]=\"widgetInstance.isDisabled\"\r\n          />\r\n          <mat-autocomplete\r\n            #chipAuto=\"matAutocomplete\"\r\n            (optionSelected)=\"selected($event, widgetInstance)\"\r\n          >\r\n            <mat-option\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n              *ngFor=\"let item of widgetInstance.valueList\"\r\n              [value]=\"item.value\"\r\n            >\r\n              {{ item.label }}\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-chip-list>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TEXT_BOX\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <textarea\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'string'\"\r\n          [value]=\"widgetInstance.value\"\r\n          [readonly]=\"widgetInstance.isReadonly\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next($event)\"\r\n          maxlength=\"{{ widgetInstance.maxLength }}\"\r\n        ></textarea>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint\r\n          *ngIf=\"widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength\"\r\n          matSuffix\r\n          align=\"end\"\r\n          >{{ widgetInstance.maxLength - form.controls[widgetInstance.key].value.length }}</mat-hint\r\n        >\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CHECK_BOX\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div\r\n        class=\"input checkbox widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n          <div\r\n            class=\"checkbox-item-container\"\r\n            *ngFor=\"let checkbox of widgetInstance.valueList; let i = index\"\r\n          >\r\n            <img\r\n              *ngIf=\"checkbox.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"checkbox-item-image\"\r\n              [src]=\"checkbox.imageUrl\"\r\n            />\r\n            <mat-checkbox\r\n              class=\"selecatbleObject\"\r\n              formControlName=\"{{ widgetInstance.key }}\"\r\n              [ngModel]=\"checkbox.value\"\r\n              (change)=\"onValueChange?.next(checkbox)\"\r\n            >\r\n              {{ checkbox.label }}\r\n            </mat-checkbox>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.CHECK_BOX_2\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div\r\n        class=\"input checkbox widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n          <div\r\n            class=\"checkbox-item-container\"\r\n            *ngFor=\"let checkbox of widgetInstance.valueList; let i = index\"\r\n          >\r\n            <img\r\n              *ngIf=\"checkbox.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"checkbox-item-image\"\r\n              [src]=\"checkbox.imageUrl\"\r\n            />\r\n            <mat-checkbox\r\n              class=\"selecatbleObject\"\r\n              formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\r\n              [value]=\"checkbox.value\"\r\n              (change)=\"onValueChange?.next(checkbox)\"\r\n              [disabled]=\"widgetInstance.isDisabled!\"\r\n            >\r\n              {{ checkbox.label }}\r\n            </mat-checkbox>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.RADIO_BUTTON\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-radio-group\r\n        class=\"input radio-section widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        aria-label=\"{{ widgetInstance.label }}\"\r\n        appearance=\"outline\"\r\n        formControlName=\"{{ widgetInstance.key }}\"\r\n      >\r\n        <mat-label class=\"radioLabel\" *ngIf=\"!widgetInstance.showLabel\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <div [ngClass]=\"getDirection()\">\r\n          <div class=\"radio-item-container\" *ngFor=\"let radio of widgetInstance.valueList\">\r\n            <img\r\n              *ngIf=\"radio.imageUrl\"\r\n              title=\"{{ widgetInstance.key }}\"\r\n              class=\"radio-item-image\"\r\n              [src]=\"radio.imageUrl\"\r\n            />\r\n            <mat-radio-button\r\n              class=\"selecatbleObject\"\r\n              value=\"{{ radio.value }}\"\r\n              [ngClass]=\"getDirection()\"\r\n              (change)=\"onValueChange?.next(radio.value)\"\r\n              [disabled]=\"widgetInstance.isDisabled\"\r\n            >\r\n              {{ radio.label }}\r\n            </mat-radio-button>\r\n          </div>\r\n          <div class=\"radio-error\">\r\n            <span class=\"mat-error\">\r\n              {{ widgetInstance.error }}\r\n            </span>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n              [icon]=\"widgetInstance.errorIcon\"\r\n              [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            ></smart-icon>\r\n          </div>\r\n        </div>\r\n      </mat-radio-group>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_PICKER\"\r\n      class=\"datePicker widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent date\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker (closed)=\"onBlur?.next(widgetInstance)\"></mat-datepicker>\r\n        <input\r\n          matInput\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          [min]=\"widgetInstance.minDate ?? null\"\r\n          [max]=\"widgetInstance.maxDate ?? null\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [matDatepicker]=\"picker\"\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n          (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n          [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint>\r\n          {{ widgetInstance.dateFormatHint }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <!-- <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-datepicker-toggle matSuffix [for]=\"$any(picker)\"></mat-datepicker-toggle>\r\n        <ngx-mat-datetime-picker\r\n          #picker\r\n          [showSpinners]=\"true\"\r\n          [showSeconds]=\"false\"\r\n          [stepHour]=\"1\"\r\n          [stepMinute]=\"1\"\r\n          [stepSecond]=\"10\"\r\n          [touchUi]=\"false\"\r\n          [color]=\"'primary'\"\r\n          [enableMeridian]=\"false\"\r\n          [disableMinute]=\"false\"\r\n          [hideTime]=\"false\"\r\n        >\r\n        </ngx-mat-datetime-picker>\r\n        <input\r\n          matInput\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [value]=\"widgetInstance.value\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          [ngxMatDatetimePicker]=\"picker\"\r\n          [ngxMatDatetimePickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n        <mat-hint>\r\n          {{ widgetInstance.dateFormatHint }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n    </div> -->\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"dateTimePickerContainer\">\r\n        <mat-form-field\r\n          class=\"input widgetContent date\"\r\n          [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n          [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n          appearance=\"outline\"\r\n        >\r\n          <mat-label\r\n            class=\"label\"\r\n            [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n            *ngIf=\"!widgetInstance.showLabel\"\r\n          >\r\n            {{ getWidgetLabel(widgetInstance) }}\r\n          </mat-label>\r\n          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n          <mat-datepicker #picker (closed)=\"onBlur?.next(widgetInstance)\"></mat-datepicker>\r\n          <input\r\n            #dateInput\r\n            matInput\r\n            [formControlName]=\"widgetInstance.key\"\r\n            [id]=\"widgetInstance.key\"\r\n            [value]=\"widgetInstance.value\"\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            [matDatepicker]=\"picker\"\r\n            (blur)=\"onDatePickerBlur($event)\"\r\n            (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n            [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n          />\r\n          <span class=\"mat-error\">\r\n            {{ widgetInstance.error }}\r\n          </span>\r\n          <smart-icon\r\n            *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n            [icon]=\"widgetInstance.errorIcon\"\r\n            [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n            matSuffix\r\n          ></smart-icon>\r\n          <mat-hint>\r\n            {{ widgetInstance.dateFormatHint }}\r\n          </mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field\r\n          *ngIf=\"hasCreated\"\r\n          class=\"input widgetContent time\"\r\n          [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n          [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n          appearance=\"outline\"\r\n        >\r\n          <input\r\n            #timeInput\r\n            [formControlName]=\"widgetInstance.key + '-time'\"\r\n            [id]=\"widgetInstance.key\"\r\n            [type]=\"'time'\"\r\n            placeholder=\"{{ widgetInstance.placeholder }}\"\r\n            (blur)=\"onTimePickerBlur($event)\"\r\n            matInput\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.SELECT\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-select\r\n          [formControlName]=\"widgetInstance.key\"\r\n          (selectionChange)=\"onValueChange?.next($event.value)\"\r\n          (closed)=\"onBlur?.next(widgetInstance)\"\r\n          [disabled]=\"widgetInstance.isDisabled!\"\r\n          [compareWith]=\"\r\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n          \"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n        >\r\n          <div *ngFor=\"let option of widgetInstance.valueList\">\r\n            <mat-optgroup\r\n              *ngIf=\"option.type === getType().ITEM_GROUP\"\r\n              [label]=\"option.label\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let innerOption of option.valueList\"\r\n                [value]=\"innerOption.value\"\r\n                [disabled]=\"innerOption.isDisabled\"\r\n              >\r\n                <smart-icon\r\n                  *ngIf=\"innerOption.icon\"\r\n                  [icon]=\"innerOption.icon\"\r\n                  [color]=\"innerOption.iconColor\"\r\n                ></smart-icon>\r\n                {{ innerOption.label }}\r\n              </mat-option>\r\n            </mat-optgroup>\r\n            <mat-option\r\n              *ngIf=\"option.type === getType().ITEM\"\r\n              [value]=\"option.value\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <smart-icon\r\n                *ngIf=\"option.icon\"\r\n                [icon]=\"option.icon\"\r\n                [color]=\"option.iconColor\"\r\n              ></smart-icon\r\n              >{{ option.label }}</mat-option\r\n            >\r\n          </div>\r\n        </mat-select>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE\"\r\n      class=\"widgetContainer\"\r\n    >\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <mat-select\r\n          [formControlName]=\"widgetInstance.key\"\r\n          multiple\r\n          (selectionChange)=\"onValueChange?.next($event.value)\"\r\n          (closed)=\"onBlur?.next(widgetInstance)\"\r\n          [disabled]=\"widgetInstance.isDisabled!\"\r\n          [compareWith]=\"\r\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\r\n          \"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n        >\r\n          <div *ngFor=\"let option of widgetInstance.valueList\">\r\n            <mat-optgroup\r\n              *ngIf=\"option.type === getType().ITEM_GROUP\"\r\n              [label]=\"option.label\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let innerOption of option.valueList\"\r\n                [value]=\"innerOption.value\"\r\n                [disabled]=\"innerOption.isDisabled\"\r\n              >\r\n                <smart-icon\r\n                  *ngIf=\"innerOption.icon\"\r\n                  [icon]=\"innerOption.icon\"\r\n                  [color]=\"innerOption.iconColor\"\r\n                ></smart-icon\r\n                >{{ innerOption.label }}</mat-option\r\n              >\r\n            </mat-optgroup>\r\n            <mat-option\r\n              *ngIf=\"option.type === getType().ITEM\"\r\n              [value]=\"option.value\"\r\n              [disabled]=\"option.isDisabled\"\r\n            >\r\n              <smart-icon\r\n                *ngIf=\"option.icon\"\r\n                [icon]=\"option.icon\"\r\n                [color]=\"option.iconColor\"\r\n              ></smart-icon\r\n              >{{ option.label }}</mat-option\r\n            >\r\n          </div>\r\n        </mat-select>\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n      <mat-hint\r\n        *ngIf=\"\r\n          !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n        \"\r\n        >{{ widgetInstance.hint?.text }}</mat-hint\r\n      >\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"widgetInstance.type === smartFormWidgetType.LABEL\"\r\n      class=\"label widgetContainer\"\r\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n      [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n    >\r\n      <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <p>{{ widgetInstance.widgetDescription }}</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TIME\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <mat-form-field\r\n        class=\"input widgetContent time\"\r\n        [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n        [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n        appearance=\"outline\"\r\n      >\r\n        <mat-label\r\n          class=\"label\"\r\n          [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n          *ngIf=\"!widgetInstance.showLabel\"\r\n        >\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </mat-label>\r\n        <input\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [type]=\"'time'\"\r\n          [value]=\"getTime()\"\r\n          placeholder=\"{{ widgetInstance.placeholder }}\"\r\n          matInput\r\n          (blur)=\"onBlur?.next(widgetInstance)\"\r\n        />\r\n        <span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n          matSuffix\r\n        ></smart-icon>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.TOGGLE\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n        <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <mat-slide-toggle\r\n          formControlName=\"{{ widgetInstance.key }}\"\r\n          value=\"{{ widgetInstance.value }}\"\r\n          (change)=\"onValueChange?.next($event)\"\r\n          [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n          >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\r\n        ><span class=\"mat-error\">\r\n          {{ widgetInstance.error }}\r\n        </span>\r\n        <smart-icon\r\n          *ngIf=\"widgetInstance.error && widgetInstance.errorIcon\"\r\n          [icon]=\"widgetInstance.errorIcon\"\r\n          [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n        ></smart-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.INDICATOR\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"smartIndicator widgetContent\">\r\n        <div class=\"indicatorItems\">\r\n          <div\r\n            *ngFor=\"let item of indicatorItems; let i = index\"\r\n            class=\"indicatorItem\"\r\n            [ngClass]=\"getIndicatorItemClass(i)\"\r\n          ></div>\r\n        </div>\r\n        <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n          {{ getIndicatorStatusLabel() }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.FILE_UPLOADER\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <smartfileuploader\r\n        class=\"widgetContent\"\r\n        [uploadCallback]=\"upload.bind(this)\"\r\n        [fileFormats]=\"widgetInstance.fileFormats\"\r\n        [maxSizeMb]=\"widgetInstance.maxSizeMb\"\r\n        [i18n]=\"widgetInstance.i18n\"\r\n      ></smartfileuploader>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.IMAGE\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <img\r\n        class=\"widgetContent\"\r\n        title=\"{{ widgetInstance.key }}\"\r\n        [ngClass]=\"widgetInstance.imageCss ?? ''\"\r\n        [src]=\"widgetInstance.value\"\r\n      />\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.DIVIDER\" class=\"widgetContainer\">\r\n      <hr class=\"smartDivider\" />\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.BUTTON\" class=\"widgetContainer\">\r\n      <h4 class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"widgetContent\">\r\n        <button\r\n          mat-button\r\n          [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n          [color]=\"widgetInstance.uiActionDescriptor?.color\"\r\n          (click)=\"onButtonClicked(widgetInstance)\"\r\n        >\r\n          <div\r\n            *ngIf=\"isOnlyIcon(widgetInstance.uiActionDescriptor); then iconOnly; else text\"\r\n          ></div>\r\n          <ng-template #iconOnly>\r\n            <smart-icon\r\n              *ngIf=\"widgetInstance.uiActionDescriptor?.icon\"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n          </ng-template>\r\n          <ng-template #text>\r\n            <smart-icon\r\n              *ngIf=\"\r\n                widgetInstance.uiActionDescriptor?.icon &&\r\n                widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\r\n              \"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n            {{ widgetInstance.uiActionDescriptor?.title }}\r\n            <smart-icon\r\n              *ngIf=\"\r\n                widgetInstance.uiActionDescriptor?.icon &&\r\n                widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\r\n              \"\r\n              [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n              [color]=\"\r\n                widgetInstance.uiActionDescriptor?.iconColor ??\r\n                widgetInstance.uiActionDescriptor?.color\r\n              \"\r\n            ></smart-icon>\r\n          </ng-template>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"widgetContainer\">\r\n      <h4\r\n        class=\"labelContainer\"\r\n        *ngIf=\"widgetInstance.type === smartFormWidgetType.COMPONENT && widgetInstance.showLabel\"\r\n        class=\"{{ labelColor }}\"\r\n      >\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <div class=\"widgetContent\">\r\n        <ng-template #customComponent></ng-template>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.RICH_TEXT\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\">\r\n        <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <quill-editor\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [id]=\"widgetInstance.key\"\r\n          [modules]=\"widgetInstance.quillModules\"\r\n          [placeholder]=\"widgetInstance.placeholder\"\r\n          [readOnly]=\"widgetInstance.isReadonly\"\r\n        ></quill-editor>\r\n        <mat-hint\r\n          *ngIf=\"\r\n            !widgetInstance?.hint ||\r\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n          \"\r\n          >{{ widgetInstance.hint?.text }}</mat-hint\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"widgetInstance.type === smartFormWidgetType.SORTABLE\" class=\"widgetContainer\">\r\n      <div class=\"labelContainer\">\r\n        <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n          {{ getWidgetLabel(widgetInstance) }}\r\n        </h4>\r\n        <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n          widgetInstance.hint?.text\r\n        }}</mat-hint>\r\n      </div>\r\n      <div class=\"widgetContent\">\r\n        <lib-sortable-widget\r\n          [formControlName]=\"widgetInstance.key\"\r\n          [widgetInstance]=\"widgetInstance\"\r\n        ></lib-sortable-widget>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.MATRIX\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\">\r\n      <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n\r\n    <table class=\"matrixTable widgetContent\">\r\n      <tr>\r\n        <th></th>\r\n        <th class=\"optionLabel\" *ngFor=\"let option of widgetInstance.value.columns\">\r\n          {{ option.displayValue }}\r\n        </th>\r\n      </tr>\r\n      <tr *ngFor=\"let question of widgetInstance.value.rows; let i = index\">\r\n        <th class=\"questionLabel\">\r\n          <label>{{ question.displayValue }}</label>\r\n        </th>\r\n\r\n        <td class=\"selectTd\" *ngFor=\"let option of widgetInstance.value.columns; let j = index\">\r\n          <mat-radio-group\r\n            *ngIf=\"!widgetInstance.isMultiple\"\r\n            [formControlName]=\"widgetInstance.key + '.' + question.code\"\r\n            [name]=\"'q' + i\"\r\n          >\r\n            <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\r\n          </mat-radio-group>\r\n          <div *ngIf=\"widgetInstance.isMultiple\">\r\n            <mat-checkbox\r\n              [formControlName]=\"widgetInstance.key + '.data.' + question.code + '.' + option.code\"\r\n              [value]=\"widgetInstance.value['data'][question.code][option.code]\"\r\n              [checked]=\"true\"\r\n            ></mat-checkbox>\r\n          </div>\r\n        </td>\r\n        <br />\r\n        <button *ngIf=\"widgetInstance.button\" mat-icon-button (click)=\"removeMatrixRow(question)\"\r\n          ><smart-icon icon=\"close\"></smart-icon\r\n        ></button>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\">\r\n      <h4 *ngIf=\"widgetInstance.showLabel\" class=\"{{ labelColor }}\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n    <youtube-player\r\n      videoId=\"{{ widgetInstance.videoId }}\"\r\n      [width]=\"widgetInstance.width\"\r\n      [height]=\"widgetInstance.height\"\r\n      [startSeconds]=\"widgetInstance.startSeconds\"\r\n      [endSeconds]=\"widgetInstance.endSeconds\"\r\n    ></youtube-player>\r\n    <mat-hint\r\n      *ngIf=\"\r\n        !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n      \"\r\n      >{{ widgetInstance.hint?.text }}</mat-hint\r\n    >\r\n  </div>\r\n  <div *ngIf=\"widgetInstance.type === smartFormWidgetType.MONTH_PICKER\" class=\"widgetContainer\">\r\n    <div class=\"labelContainer\" *ngIf=\"widgetInstance.showLabel\">\r\n      <h4 class=\"{{ labelColor }} smart-form-widget-label\">\r\n        {{ getWidgetLabel(widgetInstance) }}\r\n      </h4>\r\n      <mat-hint *ngIf=\"widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\">{{\r\n        widgetInstance.hint?.text\r\n      }}</mat-hint>\r\n    </div>\r\n    <lib-smart-month-picker\r\n      [widgetInstance]=\"widgetInstance\"\r\n      (valueChange)=\"handleYearMonthPicked($event)\"\r\n    ></lib-smart-month-picker>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"~quill/dist/quill.snow.css\";.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col{display:flex;flex-direction:column;gap:.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-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-subheading-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;max-width:225px}.date{width:125px}.time{width:90px}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: SmartFormService }, { type: ComponentFactoryService }]; }, propDecorators: { form: [{
                 type: Input
             }], widgetInstance: [{
@@ -9465,125 +9465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 args: ['forms']
             }] } });
 
-class SmartFilterService {
-    constructor() {
-        this._destroy$ = new Subject();
-        this.shouldSubmit = new Subject();
-        this.reSubscribeToSubmit = new Subject();
-        this.change = new Subject();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    async submit() {
-        this.shouldSubmit.next();
-        await this.shouldSubmit.pipe(takeUntil(this._destroy$)).toPromise();
-        this.shouldSubmit = new Subject();
-        this.reSubscribeToSubmit.next();
-        return this.filter;
-    }
-}
-SmartFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SmartFilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-/**
- * Filter API 2
- * Filter API 2
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-const FilterExpressionBoolOperator$1 = {
-    And: 'AND',
-    Or: 'OR'
-};
-
-/**
- * Filter API 2
- * Filter API 2
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-const FilterExpressionDataType = {
-    String: 'STRING',
-    Number: 'NUMBER',
-    Date: 'DATE',
-    DateTime: 'DATE_TIME',
-    Boolean: 'BOOLEAN'
-};
-
-/**
- * Filter API 2
- * Filter API 2
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-const FilterExpressionFieldWidgetType = {
-    TextField: 'TEXT_FIELD',
-    TextFieldChips: 'TEXT_FIELD_CHIPS',
-    TextBox: 'TEXT_BOX',
-    Select: 'SELECT',
-    SelectMultiple: 'SELECT_MULTIPLE',
-    Date: 'DATE',
-    Time: 'TIME',
-    DateTime: 'DATE_TIME',
-    CheckBox: 'CHECK_BOX',
-    RadioButton: 'RADIO_BUTTON',
-    Range: 'RANGE'
-};
-
-/**
- * Filter API 2
- * Filter API 2
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-const FilterExpressionOperation = {
-    Expression: 'EXPRESSION',
-    Equal: 'EQUAL',
-    NotEqual: 'NOT_EQUAL',
-    Less: 'LESS',
-    LessOrEqual: 'LESS_OR_EQUAL',
-    Greater: 'GREATER',
-    GreaterOrEqual: 'GREATER_OR_EQUAL',
-    Like: 'LIKE',
-    NotLike: 'NOT_LIKE',
-    Between: 'BETWEEN',
-    NotBetween: 'NOT_BETWEEN',
-    IsEmpty: 'IS_EMPTY',
-    IsNotEmpty: 'IS_NOT_EMPTY',
-    Exists: 'EXISTS',
-    NotExists: 'NOT_EXISTS',
-    In: 'IN',
-    NotIn: 'NOT_IN'
-};
-
 /**
  * Filter API 2
  * Filter API 2
@@ -9599,452 +9480,158 @@ var FilterExpressionOrderBy;
 (function (FilterExpressionOrderBy) {
     FilterExpressionOrderBy.OrderEnum = {
         Asc: 'ASC',
-        Desc: 'DESC'
+        Desc: 'DESC',
     };
 })(FilterExpressionOrderBy || (FilterExpressionOrderBy = {}));
 
-/**
- * Filter API 2
- * Filter API 2
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
+var ExpandableSectionButtonType;
+(function (ExpandableSectionButtonType) {
+    ExpandableSectionButtonType[ExpandableSectionButtonType["BUTTON"] = 0] = "BUTTON";
+    ExpandableSectionButtonType[ExpandableSectionButtonType["MENU"] = 1] = "MENU";
+    ExpandableSectionButtonType[ExpandableSectionButtonType["MENU_ITEM"] = 2] = "MENU_ITEM";
+})(ExpandableSectionButtonType || (ExpandableSectionButtonType = {}));
+var ExpandableSectionButtonIconPosition;
+(function (ExpandableSectionButtonIconPosition) {
+    ExpandableSectionButtonIconPosition["PRE"] = "Pre";
+    ExpandableSectionButtonIconPosition["POST"] = "Post";
+})(ExpandableSectionButtonIconPosition || (ExpandableSectionButtonIconPosition = {}));
 
-var FilterExpressionBuilderGroup;
-(function (FilterExpressionBuilderGroup) {
-    FilterExpressionBuilderGroup.BuilderGroupKindEnum = {
-        Diplay: 'DIPLAY',
-        Bracket: 'BRACKET',
-        Exist: 'EXIST'
-    };
-})(FilterExpressionBuilderGroup || (FilterExpressionBuilderGroup = {}));
+class ExpandableSectionComponent {
+    constructor(cfService) {
+        this.cfService = cfService;
+        this.stateChange = new Subject();
+    }
+    onStateChange(isOpened) {
+        this.data.isExpanded = isOpened;
+        this.stateChange.next(this.data);
+        if (this.data.stateChanged) {
+            this.data.stateChanged.next({
+                data: this.data.data,
+                isExpanded: isOpened,
+                index: this.data.index,
+            });
+        }
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        if (this.data.headerComponent) {
+            this.cfService.createComponent(this.vcRefheader, this.data.headerComponent, new Map([
+                [this.data.headerInputName ?? '', this.data.headerData],
+                ['stateChange', this.stateChange],
+                ['index', this.data.index],
+                ['sectionIndex', this.index],
+            ]));
+        }
+        this.componentRef = this.cfService.createComponent(this.vcRef, this.data.customComponent, new Map([
+            [this.data.inputName ?? '', this.data.data],
+            ['stateChange', this.stateChange],
+            ['index', this.data.index],
+            ['sectionIndex', this.index],
+        ]));
+    }
+    action(button, event) {
+        event.stopPropagation();
+        if (!button.callback) {
+            throw new Error(`Button with name ${button.label} or icon ${button.icon} does not have a callback!`);
+        }
+        button.callback(button.args);
+    }
+    setExpanded() { }
+    type() {
+        return ExpandableSectionButtonType;
+    }
+    position() {
+        return ExpandableSectionButtonIconPosition;
+    }
+    customButtonClicked(event, button, element) {
+        event.stopPropagation();
+        if (!button.callback) {
+            throw new Error(`Button with name ${button.label} or icon ${button.icon} does not have a callback!`);
+        }
+        button.callback(button.args, element);
+    }
+}
+ExpandableSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExpandableSectionComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
+ExpandableSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n    <mat-expansion-panel\r\n        [expanded]=\"data.isExpanded\"\r\n        (opened)=\"onStateChange(true)\"\r\n        (closed)=\"onStateChange(false)\"\r\n    >\r\n        <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n            <ng-template #headerComponent></ng-template>\r\n        </mat-expansion-panel-header>\r\n        <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n            <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n            <div class=\"btn-container\" *ngIf=\"data.button\">\r\n                <button\r\n                    *ngIf=\"data.button.type === type().BUTTON\"\r\n                    class=\"btn\"\r\n                    (click)=\"action(data.button, $event)\"\r\n                    mat-stroked-button\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                    {{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <button\r\n                    *ngIf=\"data.button.type === type().MENU\"\r\n                    mat-button\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    color=\"{{ data.button.color }}\"\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon\r\n                    >{{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\">\r\n                    <button\r\n                        *ngFor=\"let button of data.button.menuItemButtons\"\r\n                        (click)=\"customButtonClicked($event, button, data.index)\"\r\n                        mat-menu-item\r\n                    >\r\n                        <smart-icon\r\n                            *ngIf=\"\r\n                                button.icon &&\r\n                                (!button.iconPosition || button.iconPosition === position().PRE)\r\n                            \"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon\r\n                        >{{ button.label }}\r\n                        <smart-icon\r\n                            *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon>\r\n                    </button>\r\n                </mat-menu>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n        <ng-template #renderComponent></ng-template>\r\n    </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"], components: [{ type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExpandableSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-expandable-section', template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n    <mat-expansion-panel\r\n        [expanded]=\"data.isExpanded\"\r\n        (opened)=\"onStateChange(true)\"\r\n        (closed)=\"onStateChange(false)\"\r\n    >\r\n        <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n            <ng-template #headerComponent></ng-template>\r\n        </mat-expansion-panel-header>\r\n        <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n            <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n            <div class=\"btn-container\" *ngIf=\"data.button\">\r\n                <button\r\n                    *ngIf=\"data.button.type === type().BUTTON\"\r\n                    class=\"btn\"\r\n                    (click)=\"action(data.button, $event)\"\r\n                    mat-stroked-button\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                    {{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <button\r\n                    *ngIf=\"data.button.type === type().MENU\"\r\n                    mat-button\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    color=\"{{ data.button.color }}\"\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon\r\n                    >{{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\">\r\n                    <button\r\n                        *ngFor=\"let button of data.button.menuItemButtons\"\r\n                        (click)=\"customButtonClicked($event, button, data.index)\"\r\n                        mat-menu-item\r\n                    >\r\n                        <smart-icon\r\n                            *ngIf=\"\r\n                                button.icon &&\r\n                                (!button.iconPosition || button.iconPosition === position().PRE)\r\n                            \"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon\r\n                        >{{ button.label }}\r\n                        <smart-icon\r\n                            *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon>\r\n                    </button>\r\n                </mat-menu>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n        <ng-template #renderComponent></ng-template>\r\n    </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ComponentFactoryService }]; }, propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], vcRef: [{
+                type: ViewChild,
+                args: ['renderComponent', { read: ViewContainerRef }]
+            }], vcRefheader: [{
+                type: ViewChild,
+                args: ['headerComponent', { read: ViewContainerRef }]
+            }] } });
 
-class SmartFilterSimpleFieldComponent {
-    constructor(service, cfService) {
+class SmartGridComponent {
+    constructor(service, cfService, dialog, uiActionDescriptorService) {
         this.service = service;
         this.cfService = cfService;
+        this.dialog = dialog;
+        this.uiActionDescriptorService = uiActionDescriptorService;
+        // private readonly defaultPageSize: number = 10;
+        this.defaultPageSizeOptions = [5, 10, 25, 50];
         this._destroy$ = new Subject();
+        this.dev = false;
+        this.pageSizeOptions = this.defaultPageSizeOptions;
+        this.selectionChanges = new Subject();
+        this.uiActionDescriptors = new Map();
+        this.afterViewInitExecuted = false;
+        this.isBlocked = true;
+        this.getLevel = (node) => node.level ?? 0;
+        this.isExpandable = (node) => (node.children && node.children.length > 0 ? true : false);
+        this.getChildren = (node) => {
+            if (node.children) {
+                let rows = this.smartGrid?.gridModel.page.rows?.filter((row) => node.children?.some((child) => child === row.id));
+                if (rows) {
+                    return rows;
+                }
+            }
+            return [];
+        };
+        this.hasChild = (_, _nodeData) => this.isExpandable(_nodeData);
+        this.transformer = (row, level) => {
+            row.level = level;
+            return row;
+        };
+        this.service.gridModelChanged.subscribe(() => {
+            // called after every service call (load, save, refresh, etc.)
+            this.smartGrid.gridModel = this.service.gridModel;
+            this.render();
+        });
     }
-    ngOnInit() {
-        this.operation = this.filterExpressionField.expressionData?.currentOperation;
-        this.currentOperation = this.getOptionLabel(this.operation);
-    }
-    ngAfterViewInit() {
-        this.constructForm();
+    ngOnChanges(changes) {
+        if (changes['smartGrid']) {
+            this.smartGrid = changes['smartGrid'].currentValue;
+            this.service.paginator = this.smartGrid?.paginator;
+            this.setupToolbar();
+        }
+        if (changes['uuid']) {
+            this.uuid = changes['uuid'].currentValue;
+        }
+        if (this.afterViewInitExecuted && this.uuid && this.smartGrid) {
+            this.refresh();
+        }
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    constructFormWidget(key, label, widgetType, possibleValues) {
-        let type = widgetType;
-        if (type === FilterExpressionFieldWidgetType.Date) {
-            type = SmartFormWidgetType.DATE_PICKER;
+    ngAfterViewInit() {
+        if (this.dev) {
+            // for dev purposes
+            this.service.gridModel = this.smartGrid.gridModel;
+            this.render();
         }
-        else if (type === FilterExpressionFieldWidgetType.DateTime) {
-            type = SmartFormWidgetType.DATE_TIME_PICKER;
+        if (this.uuid && this.smartGrid && !this.dev) {
+            this.refresh();
         }
-        let widget = {
-            key,
-            label,
-            type,
-            value: '',
-            showLabel: true,
-            valueList: possibleValues.map((value) => {
-                return {
-                    key: value.objectUri ? value.objectUri : value.code,
-                    label: value.displayValue,
-                    type: SmartFormWidgetType.ITEM,
-                    value: value.objectUri ? value.objectUri : value.code,
-                };
-            }),
-        };
-        return widget;
-    }
-    constructForm() {
-        this.vcRefForm?.clear();
-        let widgets = [];
-        let key;
-        if (this.filterExpressionField.widgetType === 'SELECT_MULTIPLE') {
-            key = 'expressionData.operand2.selectedValues';
-        }
-        if (this.filterExpressionField.expressionData?.operand2) {
-            if (key !== 'expressionData.operand2.selectedValues') {
-                key = 'expressionData.operand2.valueAsString';
-            }
-            widgets.push(this.constructFormWidget(key, this.filterExpressionField.label2, this.filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, this.filterExpressionField.possibleValues));
-        }
-        if (this.filterExpressionField.expressionData?.operand3) {
-            if (key !== 'selectedValues') {
-                key = 'expressionData.operand3.valueAsString';
-            }
-            widgets.push(this.constructFormWidget(key, this.filterExpressionField.label3, this.filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, this.filterExpressionField.possibleValues));
-        }
-        this.operation = this.filterExpressionField.expressionData?.currentOperation;
-        this.currentOperation = this.getOptionLabel(this.operation);
-        this.smartForm = {
-            direction: SmartFormWidgetDirection.ROW,
-            componentModel: { data: this.filterExpressionField },
-            useOnValueChangeEvent: true,
-            useOnBlurEvent: true,
-            submitOnEnter: this.service.filter?.submitOnEnter,
-            widgets,
-            translateService: this.service.filter?.translateService,
-        };
-        // Show form on page
-        this.componentRefForm = this.cfService.createComponent(this.vcRefForm, SmartformComponent, new Map([['smartForm', this.smartForm]]));
-        this.componentRefForm.instance.onValueChangeSubject
-            ?.pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.submit();
-            this.service.change.next();
-        });
-        this.componentRefForm.instance.onBlurSubject?.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.submit();
-            this.service.change.next();
-        });
-    }
-    submit() {
-        let form = this.componentRefForm.instance.submitForm();
-        this.filterExpressionField = form.componentModel?.data;
-        this.simpleFieldChildren.forEach((smartFilterFieldComponent, index) => {
-            let filterExpressionField = smartFilterFieldComponent.submit();
-            this.filterExpressionField.subFieldList.filters[index] = filterExpressionField;
-        });
-        return this.filterExpressionField;
-    }
-    optionSelected(option) {
-        let oldOption = this.componentRefForm.instance.smartForm.componentModel.data.expressionData
-            .currentOperation;
-        this.componentRefForm.instance.smartForm.componentModel.data.expressionData.currentOperation =
-            option;
-        this.operation = option;
-        this.currentOperation = this.getOptionLabel(this.operation);
-        if (oldOption !== FilterExpressionOperation.Between &&
-            option === FilterExpressionOperation.Between) {
-            this.submit();
-            let label = this.filterExpressionField.label2;
-            this.filterExpressionField.label2 = `${label} - tól`;
-            this.filterExpressionField.label3 = `${label} - ig`;
-            this.filterExpressionField.expressionData.operand3 = {
-                isDataName: this.filterExpressionField.expressionData.operand2?.isDataName,
-                type: this.filterExpressionField.expressionData.operand3?.type,
-                valueAsString: this.filterExpressionField.expressionData.operand3?.valueAsString,
-                selectedValues: this.filterExpressionField.expressionData.operand3?.selectedValues,
-            };
-            this.constructForm();
-        }
-        else if (oldOption === FilterExpressionOperation.Between &&
-            option !== FilterExpressionOperation.Between) {
-            let label = this.filterExpressionField.label2.replace(' - tól', '');
-            this.filterExpressionField.label2 = `${label}`;
-            this.filterExpressionField.label3 = undefined;
-            this.filterExpressionField.expressionData.operand3 = undefined;
-            this.constructForm();
-        }
-    }
-    getOptionLabel(option) {
-        if (!option) {
-            return '';
-        }
-        else if (this.operationTranslator) {
-            return this.operationTranslator(option);
-        }
-        return option;
-    }
-}
-SmartFilterSimpleFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterSimpleFieldComponent, deps: [{ token: SmartFilterService }, { token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterSimpleFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: { operationTranslator: "operationTranslator", filterExpressionField: "filterExpressionField", showPossibleActions: "showPossibleActions" }, viewQueries: [{ propertyName: "vcRefForm", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div class=\"smart-filter-simple-field-container\">\r\n  <div class=\"smart-filter-simple-field-form-widget\">\r\n    <div\r\n      class=\"smart-filter-simple-field-form-widget-row\"\r\n      *ngIf=\"showPossibleActions\"\r\n    >\r\n      <p>({{ currentOperation }})</p>\r\n      <button\r\n        mat-icon-button\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-label=\"Example icon-button with a menu\"\r\n      >\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          mat-menu-item\r\n          *ngFor=\"let option of filterExpressionField.possibleOperations\"\r\n          (click)=\"optionSelected(option)\"\r\n        >\r\n          <span>\r\n            {{ getOptionLabel(option) }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <ng-template #form></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-flat-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-stroked-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterSimpleFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-filter-simple-field', template: "<div class=\"smart-filter-simple-field-container\">\r\n  <div class=\"smart-filter-simple-field-form-widget\">\r\n    <div\r\n      class=\"smart-filter-simple-field-form-widget-row\"\r\n      *ngIf=\"showPossibleActions\"\r\n    >\r\n      <p>({{ currentOperation }})</p>\r\n      <button\r\n        mat-icon-button\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-label=\"Example icon-button with a menu\"\r\n      >\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          mat-menu-item\r\n          *ngFor=\"let option of filterExpressionField.possibleOperations\"\r\n          (click)=\"optionSelected(option)\"\r\n        >\r\n          <span>\r\n            {{ getOptionLabel(option) }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <ng-template #form></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-flat-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-stroked-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: SmartFilterService }, { type: ComponentFactoryService }]; }, propDecorators: { simpleFieldChildren: [{
-                type: ViewChildren,
-                args: ['simpleField']
-            }], operationTranslator: [{
-                type: Input
-            }], filterExpressionField: [{
-                type: Input
-            }], showPossibleActions: [{
-                type: Input
-            }], vcRefForm: [{
-                type: ViewChild,
-                args: ['form', { read: ViewContainerRef }]
-            }] } });
-
-class SmartFilterSimpleComponent {
-    constructor(service) {
-        this.service = service;
-        this._destroy$ = new Subject();
-        this.service.reSubscribeToSubmit.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.subscribeToSubmit();
-        });
-        this.subscribeToSubmit();
-    }
-    ngOnInit() {
-        this.smartFilter = this.service.filter;
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    subscribeToSubmit() {
-        this.service.shouldSubmit.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.submit();
-        });
-    }
-    submit() {
-        this.simpleFieldChildren.forEach((smartFilterFieldComponent, index) => {
-            this.smartFilter.data[index] = smartFilterFieldComponent.submit();
-        });
-        this.service.filter = this.smartFilter;
-        this.service.shouldSubmit.complete();
-    }
-}
-SmartFilterSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterSimpleComponent, deps: [{ token: SmartFilterService }], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterSimpleComponent, selector: "smart-filter-simple", viewQueries: [{ propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"smartFilter\" class=\"smart-simple-fields-container\">\r\n    <div *ngFor=\"let filterExpressionField of smartFilter.data; let i = index\">\r\n        <smart-filter-simple-field\r\n            #simpleField\r\n            [filterExpressionField]=\"filterExpressionField\"\r\n            [operationTranslator]=\"smartFilter.operationTranslator\"\r\n            [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n        ></smart-filter-simple-field>\r\n        <div *ngFor=\"let subfilterExpressionField of filterExpressionField.subFieldList?.filters\">\r\n            <smart-filter-simple-field\r\n                #simpleField\r\n                [filterExpressionField]=\"filterExpressionField\"\r\n                [operationTranslator]=\"smartFilter.operationTranslator\"\r\n                [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n            ></smart-filter-simple-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"], components: [{ type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: ["operationTranslator", "filterExpressionField", "showPossibleActions"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterSimpleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "smart-filter-simple", template: "<div *ngIf=\"smartFilter\" class=\"smart-simple-fields-container\">\r\n    <div *ngFor=\"let filterExpressionField of smartFilter.data; let i = index\">\r\n        <smart-filter-simple-field\r\n            #simpleField\r\n            [filterExpressionField]=\"filterExpressionField\"\r\n            [operationTranslator]=\"smartFilter.operationTranslator\"\r\n            [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n        ></smart-filter-simple-field>\r\n        <div *ngFor=\"let subfilterExpressionField of filterExpressionField.subFieldList?.filters\">\r\n            <smart-filter-simple-field\r\n                #simpleField\r\n                [filterExpressionField]=\"filterExpressionField\"\r\n                [operationTranslator]=\"smartFilter.operationTranslator\"\r\n                [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n            ></smart-filter-simple-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: SmartFilterService }]; }, propDecorators: { simpleFieldChildren: [{
-                type: ViewChildren,
-                args: ["simpleField"]
-            }] } });
-
-class SmartFilterComponent {
-    constructor(service) {
-        this.service = service;
-    }
-    ngOnInit() {
-        if (this.filter) {
-            this.setUp();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes['filter'].currentValue) {
-            this.setUp();
-        }
-    }
-    setUp() {
-        this.service.filter = this.filter;
-    }
-    async submit() {
-        return await this.service.submit();
-    }
-}
-SmartFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterComponent, deps: [{ token: SmartFilterService }], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterComponent, selector: "smart-filter", inputs: { filter: "filter" }, providers: [SmartFilterService], usesOnChanges: true, ngImport: i0, template: "<smart-filter-simple *ngIf=\"filter\" #simpleFilter></smart-filter-simple>\r\n", styles: [""], components: [{ type: SmartFilterSimpleComponent, selector: "smart-filter-simple" }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-filter', providers: [SmartFilterService], template: "<smart-filter-simple *ngIf=\"filter\" #simpleFilter></smart-filter-simple>\r\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: SmartFilterService }]; }, propDecorators: { filter: [{
-                type: Input
-            }] } });
-
-class SmartFilterExpressionFieldComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-SmartFilterExpressionFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterExpressionFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterExpressionFieldComponent, selector: "lib-smart-filter-expression-field", ngImport: i0, template: "", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-smart-filter-expression-field', template: "", styles: [""] }]
-        }], ctorParameters: function () { return []; } });
-
-class SmartFilterModule {
-}
-SmartFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SmartFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterModule, declarations: [SmartFilterComponent,
-        SmartFilterExpressionFieldComponent,
-        SmartFilterSimpleComponent,
-        SmartFilterSimpleFieldComponent], imports: [BrowserModule, SmartformModule, MatMenuModule, MatIconModule, MatButtonModule], exports: [SmartFilterComponent] });
-SmartFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterModule, imports: [[BrowserModule, SmartformModule, MatMenuModule, MatIconModule, MatButtonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SmartFilterComponent,
-                        SmartFilterExpressionFieldComponent,
-                        SmartFilterSimpleComponent,
-                        SmartFilterSimpleFieldComponent,
-                    ],
-                    imports: [BrowserModule, SmartformModule, MatMenuModule, MatIconModule, MatButtonModule],
-                    exports: [SmartFilterComponent],
-                }]
-        }] });
-
-var SmartFilterPosition;
-(function (SmartFilterPosition) {
-    SmartFilterPosition[SmartFilterPosition["TOP"] = 0] = "TOP";
-    SmartFilterPosition[SmartFilterPosition["BOTTOM"] = 1] = "BOTTOM";
-    SmartFilterPosition[SmartFilterPosition["LEFT"] = 2] = "LEFT";
-    SmartFilterPosition[SmartFilterPosition["RIGHT"] = 3] = "RIGHT";
-})(SmartFilterPosition || (SmartFilterPosition = {}));
-var SmartFilterType;
-(function (SmartFilterType) {
-    SmartFilterType[SmartFilterType["SIMPLE"] = 0] = "SIMPLE";
-    SmartFilterType[SmartFilterType["ADVANCED"] = 1] = "ADVANCED";
-})(SmartFilterType || (SmartFilterType = {}));
-
-/*
- * Public API Surface of smart-filter
- */
-
-var ExpandableSectionButtonType;
-(function (ExpandableSectionButtonType) {
-    ExpandableSectionButtonType[ExpandableSectionButtonType["BUTTON"] = 0] = "BUTTON";
-    ExpandableSectionButtonType[ExpandableSectionButtonType["MENU"] = 1] = "MENU";
-    ExpandableSectionButtonType[ExpandableSectionButtonType["MENU_ITEM"] = 2] = "MENU_ITEM";
-})(ExpandableSectionButtonType || (ExpandableSectionButtonType = {}));
-var ExpandableSectionButtonIconPosition;
-(function (ExpandableSectionButtonIconPosition) {
-    ExpandableSectionButtonIconPosition["PRE"] = "Pre";
-    ExpandableSectionButtonIconPosition["POST"] = "Post";
-})(ExpandableSectionButtonIconPosition || (ExpandableSectionButtonIconPosition = {}));
-
-class ExpandableSectionComponent {
-    constructor(cfService) {
-        this.cfService = cfService;
-        this.stateChange = new Subject();
-    }
-    onStateChange(isOpened) {
-        this.data.isExpanded = isOpened;
-        this.stateChange.next(this.data);
-        if (this.data.stateChanged) {
-            this.data.stateChanged.next({
-                data: this.data.data,
-                isExpanded: isOpened,
-                index: this.data.index,
-            });
-        }
-    }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        if (this.data.headerComponent) {
-            this.cfService.createComponent(this.vcRefheader, this.data.headerComponent, new Map([
-                [this.data.headerInputName ?? '', this.data.headerData],
-                ['stateChange', this.stateChange],
-                ['index', this.data.index],
-                ['sectionIndex', this.index],
-            ]));
-        }
-        this.componentRef = this.cfService.createComponent(this.vcRef, this.data.customComponent, new Map([
-            [this.data.inputName ?? '', this.data.data],
-            ['stateChange', this.stateChange],
-            ['index', this.data.index],
-            ['sectionIndex', this.index],
-        ]));
-    }
-    action(button, event) {
-        event.stopPropagation();
-        if (!button.callback) {
-            throw new Error(`Button with name ${button.label} or icon ${button.icon} does not have a callback!`);
-        }
-        button.callback(button.args);
-    }
-    setExpanded() { }
-    type() {
-        return ExpandableSectionButtonType;
-    }
-    position() {
-        return ExpandableSectionButtonIconPosition;
-    }
-    customButtonClicked(event, button, element) {
-        event.stopPropagation();
-        if (!button.callback) {
-            throw new Error(`Button with name ${button.label} or icon ${button.icon} does not have a callback!`);
-        }
-        button.callback(button.args, element);
-    }
-}
-ExpandableSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExpandableSectionComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
-ExpandableSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n    <mat-expansion-panel\r\n        [expanded]=\"data.isExpanded\"\r\n        (opened)=\"onStateChange(true)\"\r\n        (closed)=\"onStateChange(false)\"\r\n    >\r\n        <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n            <ng-template #headerComponent></ng-template>\r\n        </mat-expansion-panel-header>\r\n        <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n            <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n            <div class=\"btn-container\" *ngIf=\"data.button\">\r\n                <button\r\n                    *ngIf=\"data.button.type === type().BUTTON\"\r\n                    class=\"btn\"\r\n                    (click)=\"action(data.button, $event)\"\r\n                    mat-stroked-button\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                    {{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <button\r\n                    *ngIf=\"data.button.type === type().MENU\"\r\n                    mat-button\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    color=\"{{ data.button.color }}\"\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon\r\n                    >{{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\">\r\n                    <button\r\n                        *ngFor=\"let button of data.button.menuItemButtons\"\r\n                        (click)=\"customButtonClicked($event, button, data.index)\"\r\n                        mat-menu-item\r\n                    >\r\n                        <smart-icon\r\n                            *ngIf=\"\r\n                                button.icon &&\r\n                                (!button.iconPosition || button.iconPosition === position().PRE)\r\n                            \"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon\r\n                        >{{ button.label }}\r\n                        <smart-icon\r\n                            *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon>\r\n                    </button>\r\n                </mat-menu>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n        <ng-template #renderComponent></ng-template>\r\n    </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"], components: [{ type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExpandableSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-expandable-section', template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n    <mat-expansion-panel\r\n        [expanded]=\"data.isExpanded\"\r\n        (opened)=\"onStateChange(true)\"\r\n        (closed)=\"onStateChange(false)\"\r\n    >\r\n        <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n            <ng-template #headerComponent></ng-template>\r\n        </mat-expansion-panel-header>\r\n        <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n            <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n            <div class=\"btn-container\" *ngIf=\"data.button\">\r\n                <button\r\n                    *ngIf=\"data.button.type === type().BUTTON\"\r\n                    class=\"btn\"\r\n                    (click)=\"action(data.button, $event)\"\r\n                    mat-stroked-button\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                    {{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <button\r\n                    *ngIf=\"data.button.type === type().MENU\"\r\n                    mat-button\r\n                    [matMenuTriggerFor]=\"menu\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    color=\"{{ data.button.color }}\"\r\n                >\r\n                    <smart-icon\r\n                        *ngIf=\"\r\n                            data.button.icon &&\r\n                            (!data.button.iconPosition ||\r\n                                data.button.iconPosition === position().PRE)\r\n                        \"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon\r\n                    >{{ data.button.label }}\r\n                    <smart-icon\r\n                        *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n                        [icon]=\"data.button.icon\"\r\n                    ></smart-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\">\r\n                    <button\r\n                        *ngFor=\"let button of data.button.menuItemButtons\"\r\n                        (click)=\"customButtonClicked($event, button, data.index)\"\r\n                        mat-menu-item\r\n                    >\r\n                        <smart-icon\r\n                            *ngIf=\"\r\n                                button.icon &&\r\n                                (!button.iconPosition || button.iconPosition === position().PRE)\r\n                            \"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon\r\n                        >{{ button.label }}\r\n                        <smart-icon\r\n                            *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n                            [icon]=\"button.icon\"\r\n                        ></smart-icon>\r\n                    </button>\r\n                </mat-menu>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n        <ng-template #renderComponent></ng-template>\r\n    </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ComponentFactoryService }]; }, propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], vcRef: [{
-                type: ViewChild,
-                args: ['renderComponent', { read: ViewContainerRef }]
-            }], vcRefheader: [{
-                type: ViewChild,
-                args: ['headerComponent', { read: ViewContainerRef }]
-            }] } });
-
-class SmartGridComponent {
-    constructor(service, cfService, dialog, uiActionDescriptorService) {
-        this.service = service;
-        this.cfService = cfService;
-        this.dialog = dialog;
-        this.uiActionDescriptorService = uiActionDescriptorService;
-        // private readonly defaultPageSize: number = 10;
-        this.defaultPageSizeOptions = [5, 10, 25, 50];
-        this._destroy$ = new Subject();
-        this.dev = false;
-        this.pageSizeOptions = this.defaultPageSizeOptions;
-        this.selectionChanges = new Subject();
-        this.uiActionDescriptors = new Map();
-        this.afterViewInitExecuted = false;
-        this.isBlocked = true;
-        this.getLevel = (node) => node.level ?? 0;
-        this.isExpandable = (node) => (node.children && node.children.length > 0 ? true : false);
-        this.getChildren = (node) => {
-            if (node.children) {
-                let rows = this.smartGrid?.gridModel.page.rows?.filter((row) => node.children?.some((child) => child === row.id));
-                if (rows) {
-                    return rows;
-                }
-            }
-            return [];
-        };
-        this.hasChild = (_, _nodeData) => this.isExpandable(_nodeData);
-        this.transformer = (row, level) => {
-            row.level = level;
-            return row;
-        };
-        this.service.gridModelChanged.subscribe(() => {
-            // called after every service call (load, save, refresh, etc.)
-            this.smartGrid.gridModel = this.service.gridModel;
-            this.render();
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes['smartGrid']) {
-            this.smartGrid = changes['smartGrid'].currentValue;
-            this.service.paginator = this.smartGrid?.paginator;
-            this.setupToolbar();
-        }
-        if (changes['uuid']) {
-            this.uuid = changes['uuid'].currentValue;
-        }
-        if (this.afterViewInitExecuted && this.uuid && this.smartGrid) {
-            this.refresh();
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    ngAfterViewInit() {
-        if (this.dev) {
-            // for dev purposes
-            this.service.gridModel = this.smartGrid.gridModel;
-            this.render();
-        }
-        if (this.uuid && this.smartGrid && !this.dev) {
-            this.refresh();
-        }
-        this.afterViewInitExecuted = true;
+        this.afterViewInitExecuted = true;
     }
     /**
      *
@@ -11604,9 +11191,169 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}`;
-        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+        })}`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress,
+        });
+    }
+    performAction(viewUuid, treeId, nodeId, body, observe = 'body', reportProgress = false, options) {
+        if (viewUuid === null || viewUuid === undefined) {
+            throw new Error('Required parameter viewUuid was null or undefined when calling performAction.');
+        }
+        if (treeId === null || treeId === undefined) {
+            throw new Error('Required parameter treeId was null or undefined when calling performAction.');
+        }
+        if (nodeId === null || nodeId === undefined) {
+            throw new Error('Required parameter nodeId was null or undefined when calling performAction.');
+        }
+        if (body === null || body === undefined) {
+            throw new Error('Required parameter body was null or undefined when calling performAction.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = ['application/json'];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        // to determine the Content-Type header
+        const consumes = ['application/json'];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/tree/${this.configuration.encodeParam({
+            name: 'viewUuid',
+            value: viewUuid,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: 'uuid',
+        })}/${this.configuration.encodeParam({
+            name: 'treeId',
+            value: treeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/${this.configuration.encodeParam({
+            name: 'nodeId',
+            value: nodeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/action`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: body,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress,
+        });
+    }
+    performAction2(viewUuid, treeId, nodeId, body, observe = 'body', reportProgress = false, options) {
+        if (viewUuid === null || viewUuid === undefined) {
+            throw new Error('Required parameter viewUuid was null or undefined when calling performAction2.');
+        }
+        if (treeId === null || treeId === undefined) {
+            throw new Error('Required parameter treeId was null or undefined when calling performAction2.');
+        }
+        if (nodeId === null || nodeId === undefined) {
+            throw new Error('Required parameter nodeId was null or undefined when calling performAction2.');
+        }
+        if (body === null || body === undefined) {
+            throw new Error('Required parameter body was null or undefined when calling performAction2.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = ['application/json'];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        // to determine the Content-Type header
+        const consumes = ['application/json'];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/tree2/${this.configuration.encodeParam({
+            name: 'viewUuid',
+            value: viewUuid,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: 'uuid',
+        })}/${this.configuration.encodeParam({
+            name: 'treeId',
+            value: treeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/${this.configuration.encodeParam({
+            name: 'nodeId',
+            value: nodeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/action`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
+            body: body,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -11614,18 +11361,15 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    performAction(viewUuid, treeId, nodeId, body, observe = 'body', reportProgress = false, options) {
+    performMainAction(viewUuid, treeId, body, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling performAction.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling performMainAction.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling performAction.');
-        }
-        if (nodeId === null || nodeId === undefined) {
-            throw new Error('Required parameter nodeId was null or undefined when calling performAction.');
+            throw new Error('Required parameter treeId was null or undefined when calling performMainAction.');
         }
         if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performAction.');
+            throw new Error('Required parameter body was null or undefined when calling performMainAction.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -11675,14 +11419,6 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}/${this.configuration.encodeParam({
-            name: 'nodeId',
-            value: nodeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
         })}/action`;
         return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
@@ -11694,18 +11430,15 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    performAction2(viewUuid, treeId, nodeId, body, observe = 'body', reportProgress = false, options) {
+    performMainAction2(viewUuid, treeId, body, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling performAction2.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling performMainAction2.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling performAction2.');
-        }
-        if (nodeId === null || nodeId === undefined) {
-            throw new Error('Required parameter nodeId was null or undefined when calling performAction2.');
+            throw new Error('Required parameter treeId was null or undefined when calling performMainAction2.');
         }
         if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performAction2.');
+            throw new Error('Required parameter body was null or undefined when calling performMainAction2.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -11755,14 +11488,6 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}/${this.configuration.encodeParam({
-            name: 'nodeId',
-            value: nodeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
         })}/action`;
         return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
@@ -11774,15 +11499,15 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    performMainAction(viewUuid, treeId, body, observe = 'body', reportProgress = false, options) {
+    selectNode(viewUuid, treeId, nodeId, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling performMainAction.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling selectNode.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling performMainAction.');
+            throw new Error('Required parameter treeId was null or undefined when calling selectNode.');
         }
-        if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performMainAction.');
+        if (nodeId === null || nodeId === undefined) {
+            throw new Error('Required parameter nodeId was null or undefined when calling selectNode.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -11798,12 +11523,6 @@ class TreeService {
         if (localVarHttpContext === undefined) {
             localVarHttpContext = new HttpContext();
         }
-        // to determine the Content-Type header
-        const consumes = ['application/json'];
-        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
-        if (httpContentTypeSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
-        }
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -11832,10 +11551,17 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}/action`;
+        })}/${this.configuration.encodeParam({
+            name: 'nodeId',
+            value: nodeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/select`;
         return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
-            body: body,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -11843,15 +11569,15 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    performMainAction2(viewUuid, treeId, body, observe = 'body', reportProgress = false, options) {
+    selectNode2(viewUuid, treeId, nodeId, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling performMainAction2.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling selectNode2.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling performMainAction2.');
+            throw new Error('Required parameter treeId was null or undefined when calling selectNode2.');
         }
-        if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performMainAction2.');
+        if (nodeId === null || nodeId === undefined) {
+            throw new Error('Required parameter nodeId was null or undefined when calling selectNode2.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -11867,12 +11593,6 @@ class TreeService {
         if (localVarHttpContext === undefined) {
             localVarHttpContext = new HttpContext();
         }
-        // to determine the Content-Type header
-        const consumes = ['application/json'];
-        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
-        if (httpContentTypeSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
-        }
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -11901,10 +11621,17 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}/action`;
+        })}/${this.configuration.encodeParam({
+            name: 'nodeId',
+            value: nodeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/select`;
         return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
-            body: body,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -11912,941 +11639,1229 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    selectNode(viewUuid, treeId, nodeId, observe = 'body', reportProgress = false, options) {
-        if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling selectNode.');
+}
+TreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TreeService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$2, optional: true }, { token: Configuration$2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TreeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TreeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH$2]
+                }] }, { type: Configuration$2, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+var SmartTreeNodeButtonType;
+(function (SmartTreeNodeButtonType) {
+    SmartTreeNodeButtonType["MENU"] = "MENU";
+    SmartTreeNodeButtonType["ICON"] = "ICON";
+    SmartTreeNodeButtonType["NORMAL"] = "NORMAL";
+})(SmartTreeNodeButtonType || (SmartTreeNodeButtonType = {}));
+
+class SmarttreeService {
+    constructor() {
+        this.errorMessage = 'The tree is currently unavailable';
+        this.smartTreeModelChanged = new Subject();
+        this.uiActionModelsChanged = new Subject();
+    }
+    get uiActionModels() {
+        return this._uiActionModels;
+    }
+    set uiActionModels(uiActionModels) {
+        this._uiActionModels = uiActionModels;
+        this.uiActionModelsChanged.next();
+    }
+    async initialize() {
+        await this.downloadTree().then((rootNodes) => {
+            this.treeFromBackend = rootNodes;
+            this.syncTree();
+        });
+    }
+    async downloadTree() {
+        throw new Error('downloadTree method not implemented.');
+    }
+    async downloadChildren(parentNode) {
+        throw new Error('downloadChildren method not implemented.');
+    }
+    onTreeNodeClick(treeNode) {
+        throw new Error('onTreeNodeClick method not implemented.');
+    }
+    onTreeNodeOpen(treeNode) {
+        throw new Error('onTreeNodeOpen method not implemented.');
+    }
+    syncTree() {
+        throw new Error('syncTree method not implemented.');
+    }
+}
+SmarttreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SmarttreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SmarttreeGenericService extends SmarttreeService {
+    constructor(inject, pageName, treeId) {
+        super();
+        this.pageName = pageName;
+        this.treeId = treeId;
+        // UseUiAction properties
+        this.submit = new Subject();
+        this.reSubscribeToChange = new Subject();
+        this.uiActionDescriptors = new Map();
+        this.viewContextName = 'viewContextUuid';
+        this.configureTree({
+            pageName: this.pageName,
+            treeid: this.treeId,
+            viewContextName: this.viewContextName,
+        });
+        this.viewContext = inject.get(SmartViewContextService);
+        this.service = inject.get(TreeService);
+        this.uiActionService = inject.get(UiActionService);
+        this.uiActionDescriptorService = inject.get(UiActionDescriptorService);
+        this.initialize();
+    }
+    constructUiActionModels(uiActions) {
+        this.uiActionModels = uiActions.map((uiAction) => {
+            return {
+                serviceToUse: this,
+                uiAction,
+            };
+        });
+    }
+    configureTree(configuration) {
+        this.treeId = configuration.treeid;
+        this.viewContextName = configuration.viewContextName;
+        this.pageName = configuration.pageName;
+    }
+    async initialize() {
+        if (sessionStorage.getItem(this.viewContextName)) {
+            await this.downloadTree().then((rootNodes) => {
+                if (!deepEqual(this.treeFromBackend, rootNodes)) {
+                    this.treeFromBackend = rootNodes;
+                    this.syncTree();
+                }
+            });
+        }
+    }
+    async downloadTree() {
+        let uuid = this.viewContext.getUuidOfPage(this.pageName);
+        const rootNodes = await this.viewContext.handlePerformActionResponse(await this.service.getRootNodes2(uuid, this.treeId).toPromise());
+        const uiActions = await this.viewContext.handlePerformActionResponse(await this.service.getMainActions2(uuid, this.treeId).toPromise());
+        if (uiActions) {
+            this.constructUiActionModels(uiActions);
+        }
+        if (!rootNodes) {
+            throw new Error('RootNodes are undefined!');
+        }
+        return rootNodes;
+    }
+    async downloadChildren(parentNode) {
+        let uuid = this.viewContext.getUuidOfPage(this.pageName);
+        const children = await this.viewContext.handlePerformActionResponse(await this.service.getChildrenNodes2(uuid, this.treeId, parentNode.identifier).toPromise());
+        if (!children) {
+            throw new Error(`Node with identifier ${parentNode.identifier} does not have children.`);
+        }
+        return children;
+    }
+    async onTreeNodeOpen(treeNode) {
+        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        if (treeNode?.expanded) {
+            let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.collapseNode2(viewUuid, this.treeId, treeNode.identifier).toPromise());
+            treeNode = tempTreeNode;
+        }
+        else if (!treeNode?.expanded) {
+            let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.expandNode2(viewUuid, this.treeId, treeNode?.identifier).toPromise());
+            treeNode = tempTreeNode;
         }
-        if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling selectNode.');
+        let node = this.deepSearchTreeNode(treeNode?.identifier, this.treeFromBackend);
+        node.expanded = treeNode?.expanded;
+        node.childrenNodes = treeNode?.childrenNodes;
+        this.syncTree();
+    }
+    onTreeNodeClick(treeNode) {
+        this.selectFolder(treeNode.identifier, treeNode);
+    }
+    async selectFolder(folderUri, treeNode) {
+        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        let updatedTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.selectNode2(viewUuid, this.treeId, treeNode.identifier).toPromise());
+        if (this.selectedNode) {
+            this.selectedNode.selected = false;
         }
-        if (nodeId === null || nodeId === undefined) {
-            throw new Error('Required parameter nodeId was null or undefined when calling selectNode.');
+        this.selectedNode = updatedTreeNode;
+        let node = this.deepSearchTreeNode(updatedTreeNode?.identifier, this.treeFromBackend);
+        if (!node) {
+            throw Error('Tree node does not exist');
         }
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        node.expanded = updatedTreeNode?.expanded;
+        node.childrenNodes = updatedTreeNode?.childrenNodes;
+        node.selected = updatedTreeNode?.selected;
+        treeNode = updatedTreeNode;
+        this.syncTree();
+        this.viewContext.getAndSyncViewContext(this.viewContext.getUuidOfPage(this.viewContextName));
+    }
+    async updateTreeOnTheFly() {
+        await this.initialize();
+    }
+    async syncTree() {
+        await this.cacheActionDesciptors(this.getAllNodes(this.treeFromBackend));
+        if (!this.treeFromBackend) {
+            throw new Error('There is no treeFromBackend available!');
         }
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        if (!this.smartTreeModel) {
+            this.smartTreeModel = {
+                rootNodes: [],
+            };
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
+        let smartTreeNodes = this.createButtonsForTreeNodes(this.treeFromBackend);
+        this.smartTreeModel = undefined;
+        this.smartTreeModel = {
+            rootNodes: [],
+        };
+        this.smartTreeModelChanged.next(this.smartTreeModel);
+        this.smartTreeModel.rootNodes = smartTreeNodes;
+        this.findSelected(this.smartTreeModel.rootNodes);
+        this.smartTreeModelChanged.next(this.smartTreeModel);
+    }
+    deepSearchTreeNode(identifier, nodes) {
+        let treeNode;
+        for (let index = 0; index < nodes.length; index++) {
+            const node = nodes[index];
+            if (node.identifier === identifier) {
+                treeNode = node;
+                break;
+            }
+            if (node.childrenNodes && node.childrenNodes.length) {
+                treeNode = this.deepSearchTreeNode(identifier, node.childrenNodes);
+                if (treeNode) {
+                    break;
+                }
+            }
         }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
+        return treeNode;
+    }
+    findSelected(nodes) {
+        return nodes.forEach((node) => {
+            if (node.selected) {
+                this.selectedNode = node;
+                return;
             }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
+            else if (node.childrenNodes && node.childrenNodes.length) {
+                return this.findSelected(node.childrenNodes);
             }
-            else {
-                responseType_ = 'blob';
+        });
+    }
+    createButtonsForTreeNodes(nodes) {
+        nodes.map((node) => {
+            node.button = node.actions?.length
+                ? {
+                    type: SmartTreeNodeButtonType.MENU,
+                    icon: 'more_vert',
+                    menuItemButtons: node.actions.map((action) => {
+                        return {
+                            type: SmartTreeNodeButtonType.NORMAL,
+                            label: this.getLabelByAction(action),
+                            callback: this.doAction.bind(this),
+                            args: [action, node.identifier],
+                        };
+                    }),
+                }
+                : undefined;
+            node.icon = 'Folders';
+            if (node.childrenNodes) {
+                node.childrenNodes = this.createButtonsForTreeNodes(node.childrenNodes);
             }
-        }
-        let localVarPath = `/tree/${this.configuration.encodeParam({
-            name: 'viewUuid',
-            value: viewUuid,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: 'uuid',
-        })}/${this.configuration.encodeParam({
-            name: 'treeId',
-            value: treeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}/${this.configuration.encodeParam({
-            name: 'nodeId',
-            value: nodeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}/select`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress,
         });
+        return nodes;
     }
-    selectNode2(viewUuid, treeId, nodeId, observe = 'body', reportProgress = false, options) {
-        if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling selectNode2.');
-        }
-        if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling selectNode2.');
-        }
-        if (nodeId === null || nodeId === undefined) {
-            throw new Error('Required parameter nodeId was null or undefined when calling selectNode2.');
-        }
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+    async doAction(args) {
+        let uiAction = args[0];
+        let nodeUuid = args[1];
+        if (uiAction.params) {
+            uiAction.params['nodeUuid'] = nodeUuid;
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
+        else {
+            uiAction.params = {
+                nodeUuid: nodeUuid,
+            };
         }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            }
-            else {
-                responseType_ = 'blob';
+        let uiActionModel = {
+            serviceToUse: this,
+            uiAction,
+        };
+        this.uiActionService.uiActionModel = uiActionModel;
+        this.uiActionService.execute(uiAction);
+    }
+    getAllNodes(nodes) {
+        return nodes.flatMap((n) => [n, ...this.getAllNodes(n.childrenNodes)]);
+    }
+    async cacheActionDesciptors(nodes) {
+        let newUiActions = new Set();
+        nodes.forEach((node) => {
+            node.actions
+                ?.filter((uiAction) => !this.uiActionDescriptors.get(uiAction.code))
+                .forEach((action) => newUiActions.add(action));
+        });
+        for (let action of newUiActions) {
+            if (!this.uiActionDescriptors.get(action.code)) {
+                let descriptor = await this.uiActionDescriptorService.getActionDescriptor(action);
+                this.uiActionDescriptors.set(action.code, descriptor);
             }
         }
-        let localVarPath = `/tree2/${this.configuration.encodeParam({
-            name: 'viewUuid',
-            value: viewUuid,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: 'uuid',
-        })}/${this.configuration.encodeParam({
-            name: 'treeId',
-            value: treeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}/${this.configuration.encodeParam({
-            name: 'nodeId',
-            value: nodeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}/select`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress,
-        });
+    }
+    getLabelByAction(action) {
+        let desc = this.uiActionDescriptors.get(action.code);
+        return desc.title;
+    }
+    // #region UseUiAction
+    getAdditionalParams(uiAction) {
+        if (uiAction.params && uiAction.params['nodeUuid']) {
+            let nodeUuid = uiAction.params['nodeUuid'];
+            let nodeName;
+            if (uiAction.code === 'RENAME') {
+                nodeName = this.deepSearchTreeNode(nodeUuid, this.treeFromBackend)?.caption;
+            }
+            return {
+                forTextArea: '',
+                forTextField: nodeName ? nodeName : '',
+            };
+        }
+        return {
+            forTextArea: '',
+            forTextField: '',
+        };
+    }
+    getModel() {
+        return {};
+    }
+    async performUiActionRequest(uiActionRequest) {
+        if (uiActionRequest.params['nodeUuid']) {
+            await this.performNodeUiActionRequest(uiActionRequest);
+        }
+        else {
+            await this.performMainUiActionRequest(uiActionRequest);
+        }
+        await this.viewContext.getAndSyncViewContext();
+        this.syncTree();
+    }
+    async performNodeUiActionRequest(uiActionRequest) {
+        let nodeId = uiActionRequest.params['nodeUuid'];
+        delete uiActionRequest.params['nodeUuid'];
+        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performAction2(viewUuid, this.treeId, nodeId, uiActionRequest).toPromise());
+    }
+    async performMainUiActionRequest(uiActionRequest) {
+        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performMainAction2(viewUuid, this.treeId, uiActionRequest).toPromise());
+    }
+    handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
+        throw new Error('Method not implemented.');
     }
 }
-TreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TreeService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$2, optional: true }, { token: Configuration$2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-TreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TreeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TreeService, decorators: [{
+SmarttreeGenericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeGenericService, deps: [{ token: i0.Injector }, { token: 'pageName' }, { token: 'treeId' }], target: i0.ɵɵFactoryTarget.Injectable });
+SmarttreeGenericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeGenericService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeGenericService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [BASE_PATH$2]
-                }] }, { type: Configuration$2, decorators: [{
-                    type: Optional
+                    args: ['pageName']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['treeId']
                 }] }]; } });
 
-var SmartTreeNodeButtonType;
-(function (SmartTreeNodeButtonType) {
-    SmartTreeNodeButtonType["MENU"] = "MENU";
-    SmartTreeNodeButtonType["ICON"] = "ICON";
-    SmartTreeNodeButtonType["NORMAL"] = "NORMAL";
-})(SmartTreeNodeButtonType || (SmartTreeNodeButtonType = {}));
-
-class SmarttreeService {
-    constructor() {
-        this.errorMessage = 'The tree is currently unavailable';
-        this.smartTreeModelChanged = new Subject();
-        this.uiActionModelsChanged = new Subject();
+class SmartTreeComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this._destroy$ = new Subject();
+        this.treeControl = new NestedTreeControl((node) => node.childrenNodes);
+        this.dataSource = new MatTreeNestedDataSource();
+        this.smartTreeNodeButtonType = SmartTreeNodeButtonType;
+        this.uiActionModels = [];
+        this.hasChild = (_, node) => node.hasChildren;
     }
-    get uiActionModels() {
-        return this._uiActionModels;
+    ngOnInit() {
+        if (!this.treeService) {
+            throw new Error('TreeService has not been given!');
+        }
+        this.errorMessage = this.treeService.errorMessage;
+        this.treeService.smartTreeModelChanged.subscribe((newSmartTree) => {
+            this.treeData = newSmartTree;
+            this.dataSource.data = this.treeData.rootNodes;
+            this.expandTreeNodes();
+        });
+        this.treeService.uiActionModelsChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            if (this.treeService.uiActionModels) {
+                this.uiActionModels = this.treeService.uiActionModels;
+            }
+        });
     }
-    set uiActionModels(uiActionModels) {
-        this._uiActionModels = uiActionModels;
-        this.uiActionModelsChanged.next();
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    async initialize() {
-        await this.downloadTree().then((rootNodes) => {
-            this.treeFromBackend = rootNodes;
-            this.syncTree();
+    getIfExpanded(node) {
+        return this.treeControl.isExpanded(node);
+    }
+    expandTreeNodes() {
+        this.expandTreeNodesDeeply(this.dataSource.data);
+    }
+    expandTreeNodesDeeply(nodes) {
+        nodes.forEach((node) => {
+            if (node.expanded) {
+                this.treeControl.expand(node);
+                this.cdr.markForCheck();
+                if (node.childrenNodes && node.childrenNodes.length) {
+                    this.expandTreeNodesDeeply(node.childrenNodes);
+                }
+            }
+            else {
+                this.treeControl.collapse(node);
+            }
         });
     }
-    async downloadTree() {
-        throw new Error('downloadTree method not implemented.');
+    onNodeClick(event, node) {
+        event.stopPropagation();
+        if (this.tempActiveNode)
+            this.tempActiveNode.selected = false;
+        node.selected = true;
+        this.tempActiveNode = node;
+        this.treeService.onTreeNodeClick(node);
     }
-    async downloadChildren(parentNode) {
-        throw new Error('downloadChildren method not implemented.');
+    onOpenNode(event, node) {
+        event.stopPropagation();
+        this.treeService.onTreeNodeOpen(node);
     }
-    onTreeNodeClick(treeNode) {
-        throw new Error('onTreeNodeClick method not implemented.');
+    getNodeStyle(node) {
+        if (this.treeStyle) {
+            var style = node.selected
+                ? {
+                    background: this.treeStyle.activeStyle?.backgroundColor,
+                    color: this.treeStyle.activeStyle?.color,
+                }
+                : {
+                    background: this.treeStyle.levelBackgroundColor[node.level],
+                    color: this.treeStyle.color,
+                };
+            return style;
+        }
+        return {};
     }
-    onTreeNodeOpen(treeNode) {
-        throw new Error('onTreeNodeOpen method not implemented.');
+    getNodePadding(node) {
+        if (this.treeStyle) {
+            var style = node.selected
+                ? {
+                    'padding-left': 15 * node.level + 'px',
+                }
+                : {
+                    'padding-left': 15 * node.level + 'px',
+                };
+            return style;
+        }
+        return {};
     }
-    syncTree() {
-        throw new Error('syncTree method not implemented.');
+    customButtonClicked(event, button, close) {
+        event.stopPropagation();
+        if (button.type === SmartTreeNodeButtonType.MENU) {
+            return;
+        }
+        if (!button.callback) {
+            throw new Error(`Button with name ${button.label || button.icon} does not have a callback!`);
+        }
+        button.callback(button.args);
+        if (close) {
+            let openMenus = this.trigger.filter((matMenuTrigger) => matMenuTrigger.menuOpen);
+            openMenus.forEach((matMenuTrigger) => {
+                matMenuTrigger.closeMenu();
+            });
+        }
+    }
+    getClassesForTreeNode(node) {
+        let classes = [];
+        if (node.expanded) {
+            classes.push(this.getCustomClass('expanded', node.level));
+        }
+        else {
+            classes.push(this.getCustomClass('collapsed', node.level));
+        }
+        if (node.selected) {
+            classes.push(this.getCustomClass('selected', node.level));
+        }
+        else {
+            classes.push(this.getCustomClass('unselected', node.level));
+        }
+        if (node.level !== 0) {
+            classes.push(this.getCustomClass('child', node.level));
+        }
+        return classes;
+    }
+    getInnerClassesForTreeNode(node) {
+        let classes = [];
+        if (node.expanded) {
+            classes.push(this.getCustomClass('inner-expanded', node.level));
+        }
+        else {
+            classes.push(this.getCustomClass('inner-collapsed', node.level));
+        }
+        if (node.selected) {
+            classes.push(this.getCustomClass('inner-selected', node.level));
+        }
+        else {
+            classes.push(this.getCustomClass('inner-unselected', node.level));
+        }
+        return classes;
+    }
+    getClassesForTreeNodeChildren(node) {
+        let classes = [];
+        classes.push(this.getCustomClass('group', node.level));
+        return classes;
+    }
+    getCustomClass(cssClass, plusProperty) {
+        return `${cssClass}-${plusProperty}`;
     }
 }
-SmarttreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SmarttreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeService, decorators: [{
-            type: Injectable,
+SmartTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SmartTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartTreeComponent, selector: "smart-tree", inputs: { treeStyle: "treeStyle", treeService: "treeService" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror\"\r\n            matTreeNodeToggle\r\n            (click)=\"onOpenNode($event, node)\"\r\n          >\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}\n"], components: [{ type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }, { type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i10$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-tree', template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror\"\r\n            matTreeNodeToggle\r\n            (click)=\"onOpenNode($event, node)\"\r\n          >\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
+                type: ViewChildren,
+                args: [MatMenuTrigger]
+            }], tree: [{
+                type: ViewChild,
+                args: ['tree']
+            }], treeStyle: [{
+                type: Input
+            }], treeService: [{
+                type: Input
+            }] } });
+
+class SmarttreeModule {
+}
+SmarttreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SmarttreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeModule, declarations: [SmartTreeComponent], imports: [BrowserModule,
+        MatCommonModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTreeModule,
+        MatMenuModule,
+        SmartIconModule,
+        SmartViewContextModule], exports: [SmartTreeComponent] });
+SmarttreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeModule, providers: [SmarttreeService, SmarttreeGenericService], imports: [[
+            BrowserModule,
+            MatCommonModule,
+            MatButtonModule,
+            MatIconModule,
+            MatTreeModule,
+            MatMenuModule,
+            SmartIconModule,
+            SmartViewContextModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeModule, decorators: [{
+            type: NgModule,
             args: [{
-                    providedIn: 'root',
+                    declarations: [SmartTreeComponent],
+                    imports: [
+                        BrowserModule,
+                        MatCommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTreeModule,
+                        MatMenuModule,
+                        SmartIconModule,
+                        SmartViewContextModule,
+                    ],
+                    exports: [SmartTreeComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    providers: [SmarttreeService, SmarttreeGenericService],
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
-class SmarttreeGenericService extends SmarttreeService {
-    constructor(inject, pageName, treeId) {
-        super();
-        this.pageName = pageName;
-        this.treeId = treeId;
-        // UseUiAction properties
-        this.submit = new Subject();
-        this.reSubscribeToChange = new Subject();
-        this.uiActionDescriptors = new Map();
-        this.viewContextName = 'viewContextUuid';
-        this.configureTree({
-            pageName: this.pageName,
-            treeid: this.treeId,
-            viewContextName: this.viewContextName,
-        });
-        this.viewContext = inject.get(SmartViewContextService);
-        this.service = inject.get(TreeService);
-        this.uiActionService = inject.get(UiActionService);
-        this.uiActionDescriptorService = inject.get(UiActionDescriptorService);
-        this.initialize();
+/**
+ * Custom HttpParameterCodec
+ * Workaround for https://github.com/angular/angular/issues/18261
+ */
+class CustomHttpParameterCodec$1 {
+    encodeKey(k) {
+        return encodeURIComponent(k);
     }
-    constructUiActionModels(uiActions) {
-        this.uiActionModels = uiActions.map((uiAction) => {
-            return {
-                serviceToUse: this,
-                uiAction,
-            };
-        });
+    encodeValue(v) {
+        return encodeURIComponent(v);
     }
-    configureTree(configuration) {
-        this.treeId = configuration.treeid;
-        this.viewContextName = configuration.viewContextName;
-        this.pageName = configuration.pageName;
+    decodeKey(k) {
+        return decodeURIComponent(k);
     }
-    async initialize() {
-        if (sessionStorage.getItem(this.viewContextName)) {
-            await this.downloadTree().then((rootNodes) => {
-                if (!deepEqual(this.treeFromBackend, rootNodes)) {
-                    this.treeFromBackend = rootNodes;
-                    this.syncTree();
-                }
-            });
-        }
+    decodeValue(v) {
+        return decodeURIComponent(v);
     }
-    async downloadTree() {
-        let uuid = this.viewContext.getUuidOfPage(this.pageName);
-        const rootNodes = await this.viewContext.handlePerformActionResponse(await this.service.getRootNodes2(uuid, this.treeId).toPromise());
-        const uiActions = await this.viewContext.handlePerformActionResponse(await this.service.getMainActions2(uuid, this.treeId).toPromise());
-        if (uiActions) {
-            this.constructUiActionModels(uiActions);
+}
+
+const BASE_PATH$1 = new InjectionToken('basePath');
+const COLLECTION_FORMATS$1 = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+};
+
+class Configuration$1 {
+    constructor(configurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
+        if (configurationParameters.encodeParam) {
+            this.encodeParam = configurationParameters.encodeParam;
         }
-        if (!rootNodes) {
-            throw new Error('RootNodes are undefined!');
+        else {
+            this.encodeParam = param => this.defaultEncodeParam(param);
         }
-        return rootNodes;
-    }
-    async downloadChildren(parentNode) {
-        let uuid = this.viewContext.getUuidOfPage(this.pageName);
-        const children = await this.viewContext.handlePerformActionResponse(await this.service.getChildrenNodes2(uuid, this.treeId, parentNode.identifier).toPromise());
-        if (!children) {
-            throw new Error(`Node with identifier ${parentNode.identifier} does not have children.`);
+        if (configurationParameters.credentials) {
+            this.credentials = configurationParameters.credentials;
+        }
+        else {
+            this.credentials = {};
         }
-        return children;
     }
-    async onTreeNodeOpen(treeNode) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        if (treeNode?.expanded) {
-            let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.collapseNode2(viewUuid, this.treeId, treeNode.identifier).toPromise());
-            treeNode = tempTreeNode;
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderContentType(contentTypes) {
+        if (contentTypes.length === 0) {
+            return undefined;
         }
-        else if (!treeNode?.expanded) {
-            let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.expandNode2(viewUuid, this.treeId, treeNode?.identifier).toPromise());
-            treeNode = tempTreeNode;
+        const type = contentTypes.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
         }
-        let node = this.deepSearchTreeNode(treeNode?.identifier, this.treeFromBackend);
-        node.expanded = treeNode?.expanded;
-        node.childrenNodes = treeNode?.childrenNodes;
-        this.syncTree();
-    }
-    onTreeNodeClick(treeNode) {
-        this.selectFolder(treeNode.identifier, treeNode);
+        return type;
     }
-    async selectFolder(folderUri, treeNode) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        let updatedTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.selectNode2(viewUuid, this.treeId, treeNode.identifier).toPromise());
-        if (this.selectedNode) {
-            this.selectedNode.selected = false;
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderAccept(accepts) {
+        if (accepts.length === 0) {
+            return undefined;
         }
-        this.selectedNode = updatedTreeNode;
-        let node = this.deepSearchTreeNode(updatedTreeNode?.identifier, this.treeFromBackend);
-        if (!node) {
-            throw Error('Tree node does not exist');
+        const type = accepts.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
         }
-        node.expanded = updatedTreeNode?.expanded;
-        node.childrenNodes = updatedTreeNode?.childrenNodes;
-        node.selected = updatedTreeNode?.selected;
-        treeNode = updatedTreeNode;
-        this.syncTree();
-        this.viewContext.getAndSyncViewContext(this.viewContext.getUuidOfPage(this.viewContextName));
+        return type;
     }
-    async updateTreeOnTheFly() {
-        await this.initialize();
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    isJsonMime(mime) {
+        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
     }
-    async syncTree() {
-        await this.cacheActionDesciptors(this.getAllNodes(this.treeFromBackend));
-        if (!this.treeFromBackend) {
-            throw new Error('There is no treeFromBackend available!');
-        }
-        if (!this.smartTreeModel) {
-            this.smartTreeModel = {
-                rootNodes: [],
-            };
-        }
-        let smartTreeNodes = this.createButtonsForTreeNodes(this.treeFromBackend);
-        this.smartTreeModel = undefined;
-        this.smartTreeModel = {
-            rootNodes: [],
-        };
-        this.smartTreeModelChanged.next(this.smartTreeModel);
-        this.smartTreeModel.rootNodes = smartTreeNodes;
-        this.findSelected(this.smartTreeModel.rootNodes);
-        this.smartTreeModelChanged.next(this.smartTreeModel);
+    lookupCredential(key) {
+        const value = this.credentials[key];
+        return typeof value === 'function'
+            ? value()
+            : value;
     }
-    deepSearchTreeNode(identifier, nodes) {
-        let treeNode;
-        for (let index = 0; index < nodes.length; index++) {
-            const node = nodes[index];
-            if (node.identifier === identifier) {
-                treeNode = node;
-                break;
-            }
-            if (node.childrenNodes && node.childrenNodes.length) {
-                treeNode = this.deepSearchTreeNode(identifier, node.childrenNodes);
-                if (treeNode) {
-                    break;
-                }
-            }
+    defaultEncodeParam(param) {
+        // This implementation exists as fallback for missing configuration
+        // and for backwards compatibility to older typescript-angular generator versions.
+        // It only works for the 'simple' parameter style.
+        // Date-handling only works for the 'date-time' format.
+        // All other styles and Date-formats are probably handled incorrectly.
+        //
+        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
+        const value = param.dataFormat === 'date-time' && param.value instanceof Date
+            ? param.value.toISOString()
+            : param.value;
+        return encodeURIComponent(String(value));
+    }
+}
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+class DefaultService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration$1();
+        if (configuration) {
+            this.configuration = configuration;
         }
-        return treeNode;
-    }
-    findSelected(nodes) {
-        return nodes.forEach((node) => {
-            if (node.selected) {
-                this.selectedNode = node;
-                return;
-            }
-            else if (node.childrenNodes && node.childrenNodes.length) {
-                return this.findSelected(node.childrenNodes);
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
             }
-        });
-    }
-    createButtonsForTreeNodes(nodes) {
-        nodes.map((node) => {
-            node.button = node.actions?.length
-                ? {
-                    type: SmartTreeNodeButtonType.MENU,
-                    icon: 'more_vert',
-                    menuItemButtons: node.actions.map((action) => {
-                        return {
-                            type: SmartTreeNodeButtonType.NORMAL,
-                            label: this.getLabelByAction(action),
-                            callback: this.doAction.bind(this),
-                            args: [action, node.identifier],
-                        };
-                    }),
-                }
-                : undefined;
-            node.icon = 'Folders';
-            if (node.childrenNodes) {
-                node.childrenNodes = this.createButtonsForTreeNodes(node.childrenNodes);
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
             }
-        });
-        return nodes;
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$1();
     }
-    async doAction(args) {
-        let uiAction = args[0];
-        let nodeUuid = args[1];
-        if (uiAction.params) {
-            uiAction.params['nodeUuid'] = nodeUuid;
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
         }
         else {
-            uiAction.params = {
-                nodeUuid: nodeUuid,
-            };
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
         }
-        let uiActionModel = {
-            serviceToUse: this,
-            uiAction,
-        };
-        this.uiActionService.uiActionModel = uiActionModel;
-        this.uiActionService.execute(uiAction);
-    }
-    getAllNodes(nodes) {
-        return nodes.flatMap((n) => [n, ...this.getAllNodes(n.childrenNodes)]);
+        return httpParams;
     }
-    async cacheActionDesciptors(nodes) {
-        let newUiActions = new Set();
-        nodes.forEach((node) => {
-            node.actions
-                ?.filter((uiAction) => !this.uiActionDescriptors.get(uiAction.code))
-                .forEach((action) => newUiActions.add(action));
-        });
-        for (let action of newUiActions) {
-            if (!this.uiActionDescriptors.get(action.code)) {
-                let descriptor = await this.uiActionDescriptorService.getActionDescriptor(action);
-                this.uiActionDescriptors.set(action.code, descriptor);
-            }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
         }
-    }
-    getLabelByAction(action) {
-        let desc = this.uiActionDescriptors.get(action.code);
-        return desc.title;
-    }
-    // #region UseUiAction
-    getAdditionalParams(uiAction) {
-        if (uiAction.params && uiAction.params['nodeUuid']) {
-            let nodeUuid = uiAction.params['nodeUuid'];
-            let nodeName;
-            if (uiAction.code === 'RENAME') {
-                nodeName = this.deepSearchTreeNode(nodeUuid, this.treeFromBackend)?.caption;
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substr(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
             }
-            return {
-                forTextArea: '',
-                forTextField: nodeName ? nodeName : '',
-            };
         }
-        return {
-            forTextArea: '',
-            forTextField: '',
-        };
-    }
-    getModel() {
-        return {};
-    }
-    async performUiActionRequest(uiActionRequest) {
-        if (uiActionRequest.params['nodeUuid']) {
-            await this.performNodeUiActionRequest(uiActionRequest);
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
         }
         else {
-            await this.performMainUiActionRequest(uiActionRequest);
+            throw Error("key may not be null if value is not object or array");
         }
-        await this.viewContext.getAndSyncViewContext();
-        this.syncTree();
+        return httpParams;
     }
-    async performNodeUiActionRequest(uiActionRequest) {
-        let nodeId = uiActionRequest.params['nodeUuid'];
-        delete uiActionRequest.params['nodeUuid'];
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performAction2(viewUuid, this.treeId, nodeId, uiActionRequest).toPromise());
+    nopePost(observe = 'body', reportProgress = false, options) {
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/nope`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
     }
-    async performMainUiActionRequest(uiActionRequest) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performMainAction2(viewUuid, this.treeId, uiActionRequest).toPromise());
+}
+DefaultService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DefaultService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$1, optional: true }, { token: Configuration$1, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DefaultService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DefaultService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DefaultService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH$1]
+                }] }, { type: Configuration$1, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+const APIS = [DefaultService];
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var ComponentType;
+(function (ComponentType) {
+    ComponentType["CONTAINER"] = "container";
+    ComponentType["FORM"] = "form";
+    ComponentType["WIDGET"] = "widget";
+})(ComponentType || (ComponentType = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var ComponentWidgetType;
+(function (ComponentWidgetType) {
+    ComponentWidgetType["GRID"] = "grid";
+    ComponentWidgetType["FILTER"] = "filter";
+    ComponentWidgetType["TREE"] = "tree";
+    ComponentWidgetType["TOOLBAR"] = "toolbar";
+})(ComponentWidgetType || (ComponentWidgetType = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var LayoutDirection;
+(function (LayoutDirection) {
+    LayoutDirection["HORIZONTAL"] = "horizontal";
+    LayoutDirection["VERTICAL"] = "vertical";
+})(LayoutDirection || (LayoutDirection = {}));
+
+class ApiModule {
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
     }
-    handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
-        throw new Error('Method not implemented.');
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration$1, useFactory: configurationFactory }]
+        };
     }
 }
-SmarttreeGenericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeGenericService, deps: [{ token: i0.Injector }, { token: 'pageName' }, { token: 'treeId' }], target: i0.ɵɵFactoryTarget.Injectable });
-SmarttreeGenericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeGenericService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeGenericService, decorators: [{
-            type: Injectable,
+ApiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
+ApiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiModule });
+ApiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiModule, providers: [], imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiModule, decorators: [{
+            type: NgModule,
             args: [{
-                    providedIn: 'root',
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['pageName']
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['treeId']
+        }], ctorParameters: function () { return [{ type: ApiModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
                 }] }]; } });
 
-class SmartTreeComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
+/*
+ * Public API Surface of smart-grid
+ */
+
+class SmartComponentLayoutComponent {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
         this._destroy$ = new Subject();
-        this.treeControl = new NestedTreeControl((node) => node.childrenNodes);
-        this.dataSource = new MatTreeNestedDataSource();
-        this.smartTreeNodeButtonType = SmartTreeNodeButtonType;
-        this.uiActionModels = [];
-        this.hasChild = (_, node) => node.hasChildren;
+        this.toolbarId = 'not_initialized_yet';
     }
-    ngOnInit() {
-        if (!this.treeService) {
-            throw new Error('TreeService has not been given!');
+    ngAfterViewInit() {
+        if (this.smartFormList?.first) {
+            this.setFormComponent(this.smartFormList?.first);
         }
-        this.errorMessage = this.treeService.errorMessage;
-        this.treeService.smartTreeModelChanged.subscribe((newSmartTree) => {
-            this.treeData = newSmartTree;
-            this.dataSource.data = this.treeData.rootNodes;
-            this.expandTreeNodes();
+        this.smartFormList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setFormComponent(list.first);
         });
-        this.treeService.uiActionModelsChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            if (this.treeService.uiActionModels) {
-                this.uiActionModels = this.treeService.uiActionModels;
+        if (this.smartGridList?.first) {
+            this.setGridComponent(this.smartGridList?.first);
+        }
+        this.smartGridList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setGridComponent(list.first);
+        });
+        this.smartFilterList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            if (!this.smartFilterComponent) {
+                this.smartFilterComponent = list.first;
+                this.bindFilter();
             }
         });
+        if (this.toolbarList?.first) {
+            this.setToolbarComponent(this.toolbarList?.first);
+        }
+        this.toolbarList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setToolbarComponent(list.first);
+        });
+        if (this.smartComponentLayout) {
+            this.setUp();
+        }
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    getIfExpanded(node) {
-        return this.treeControl.isExpanded(node);
-    }
-    expandTreeNodes() {
-        this.expandTreeNodesDeeply(this.dataSource.data);
+    ngOnChanges(changes) {
+        this.smartComponentLayout = changes['smartComponentLayout'].currentValue;
+        if (this.smartComponentLayout) {
+            this.setUp();
+        }
     }
-    expandTreeNodesDeeply(nodes) {
-        nodes.forEach((node) => {
-            if (node.expanded) {
-                this.treeControl.expand(node);
-                this.cdr.markForCheck();
-                if (node.childrenNodes && node.childrenNodes.length) {
-                    this.expandTreeNodesDeeply(node.childrenNodes);
-                }
+    setUp() {
+        this.parent = this.smartComponentLayout?.parentComponent;
+        this.uuid = this.parent.uuid;
+        this.treeService = this.parent.smartTreeService;
+        if (this.smartComponentLayout?.expandable) {
+            this.constructExpandableSection();
+        }
+        else if (this.smartComponentLayout?.type === ComponentType.FORM) {
+            this.constructForm();
+        }
+        else if (this.smartComponentLayout?.type === ComponentType.WIDGET) {
+            if (this.smartComponentLayout.widget?.type === ComponentWidgetType.GRID) {
+                this.constructGrid();
             }
-            else {
-                this.treeControl.collapse(node);
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.FILTER) {
+                this.constructFilter();
             }
-        });
-    }
-    onNodeClick(event, node) {
-        event.stopPropagation();
-        if (this.tempActiveNode)
-            this.tempActiveNode.selected = false;
-        node.selected = true;
-        this.tempActiveNode = node;
-        this.treeService.onTreeNodeClick(node);
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TREE) {
+                this.constructTree();
+            }
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TOOLBAR) {
+                this.constructToolbar();
+            }
+            this.parent.initActions();
+        }
     }
-    onOpenNode(event, node) {
-        event.stopPropagation();
-        this.treeService.onTreeNodeOpen(node);
+    type() {
+        return ComponentType;
     }
-    getNodeStyle(node) {
-        if (this.treeStyle) {
-            var style = node.selected
-                ? {
-                    background: this.treeStyle.activeStyle?.backgroundColor,
-                    color: this.treeStyle.activeStyle?.color,
-                }
-                : {
-                    background: this.treeStyle.levelBackgroundColor[node.level],
-                    color: this.treeStyle.color,
-                };
-            return style;
-        }
-        return {};
+    constructExpandableSection() {
+        let data = { ...this.smartComponentLayout };
+        data.expandable = false;
+        this.expandableSection = {
+            title: this.smartComponentLayout?.expandableSectionLabel ?? '',
+            data,
+            inputName: 'smartComponentLayout',
+            customComponent: SmartComponentLayoutComponent,
+        };
     }
-    getNodePadding(node) {
-        if (this.treeStyle) {
-            var style = node.selected
-                ? {
-                    'padding-left': 15 * node.level + 'px',
-                }
-                : {
-                    'padding-left': 15 * node.level + 'px',
-                };
-            return style;
-        }
-        return {};
+    constructForm() {
+        const widgets = this.layoutService.render({
+            layoutDefinitions: this.smartComponentLayout?.form,
+        });
+        this.smartForm = {
+            direction: SmartFormWidgetDirection.COL,
+            componentModel: this.parent?.model,
+            widgets,
+        };
+        this.bindForm();
     }
-    customButtonClicked(event, button, close) {
-        event.stopPropagation();
-        if (button.type === SmartTreeNodeButtonType.MENU) {
-            return;
-        }
-        if (!button.callback) {
-            throw new Error(`Button with name ${button.label || button.icon} does not have a callback!`);
-        }
-        button.callback(button.args);
-        if (close) {
-            let openMenus = this.trigger.filter((matMenuTrigger) => matMenuTrigger.menuOpen);
-            openMenus.forEach((matMenuTrigger) => {
-                matMenuTrigger.closeMenu();
-            });
+    setFormComponent(comp) {
+        if (!this.smartFormComponent) {
+            this.smartFormComponent = comp;
+            this.bindForm();
         }
     }
-    getClassesForTreeNode(node) {
-        let classes = [];
-        if (node.expanded) {
-            classes.push(this.getCustomClass('expanded', node.level));
-        }
-        else {
-            classes.push(this.getCustomClass('collapsed', node.level));
-        }
-        if (node.selected) {
-            classes.push(this.getCustomClass('selected', node.level));
-        }
-        else {
-            classes.push(this.getCustomClass('unselected', node.level));
-        }
-        if (node.level !== 0) {
-            classes.push(this.getCustomClass('child', node.level));
+    bindForm() {
+        if (this.smartForm && this.smartFormComponent) {
+            this.parent?.addForm(
+            // unique identifier for the form
+            `form_${this.makeid(5)}`, this.smartForm, this.smartFormComponent);
         }
-        return classes;
     }
-    getInnerClassesForTreeNode(node) {
-        let classes = [];
-        if (node.expanded) {
-            classes.push(this.getCustomClass('inner-expanded', node.level));
-        }
-        else {
-            classes.push(this.getCustomClass('inner-collapsed', node.level));
+    makeid(length) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        let counter = 0;
+        while (counter < length) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            counter += 1;
         }
-        if (node.selected) {
-            classes.push(this.getCustomClass('inner-selected', node.level));
+        return result;
+    }
+    constructGrid() {
+        this.smartGrid = {
+            gridIdentifier: this.smartComponentLayout?.widget?.identifier,
+            gridModel: {
+                page: {},
+            },
+            options: {
+                rowUiActionType: GridUiActionType.POPUP_MENU,
+            },
+            layoutDef: SmartLayoutDef.TABLE,
+            paginator: true,
+        };
+        this.bindGrid();
+    }
+    setGridComponent(comp) {
+        if (!this.smartGridComponent) {
+            this.smartGridComponent = comp;
+            this.bindGrid();
         }
-        else {
-            classes.push(this.getCustomClass('inner-unselected', node.level));
+    }
+    bindGrid() {
+        if (this.smartGrid && this.smartGridComponent) {
+            this.smartGrid = this.parent?.addGrid(this.smartGrid, {
+                rowUiActionType: GridUiActionType.POPUP_MENU,
+            }, false, this.smartGridComponent);
         }
-        return classes;
     }
-    getClassesForTreeNodeChildren(node) {
-        let classes = [];
-        classes.push(this.getCustomClass('group', node.level));
-        return classes;
+    setToolbarComponent(comp) {
+        this.toolbar = comp;
     }
-    getCustomClass(cssClass, plusProperty) {
-        return `${cssClass}-${plusProperty}`;
+    constructFilter() {
+        this.smartFilter = this.smartComponentLayout.parentComponent.addFilter(`filter_${this.makeid(5)}`, this.smartComponentLayout?.widget?.filterExpressionFieldList, this.smartComponentLayout?.widget?.filterType, this.smartFilterComponent);
+    }
+    bindFilter() {
+        // TODO
+    }
+    constructTree() {
+        this.parent.setUpDefaultTree(this.smartComponentLayout?.widget?.identifier);
+        this.treeService?.initialize();
+    }
+    constructToolbar() {
+        let toolbarId = this.smartComponentLayout?.widget?.identifier;
+        if (this.toolbarId !== toolbarId) {
+            this.toolbarId = toolbarId;
+        }
     }
 }
-SmartTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SmartTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartTreeComponent, selector: "smart-tree", inputs: { treeStyle: "treeStyle", treeService: "treeService" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror\"\r\n            matTreeNodeToggle\r\n            (click)=\"onOpenNode($event, node)\"\r\n          >\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}\n"], components: [{ type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }, { type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i10$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartTreeComponent, decorators: [{
+SmartComponentLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }], target: i0.ɵɵFactoryTarget.Component });
+SmartComponentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout" }, viewQueries: [{ propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"], components: [{ type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout"] }, { type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-tree', template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror\"\r\n            matTreeNodeToggle\r\n            (click)=\"onOpenNode($event, node)\"\r\n          >\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
-                type: ViewChildren,
-                args: [MatMenuTrigger]
-            }], tree: [{
-                type: ViewChild,
-                args: ['tree']
-            }], treeStyle: [{
-                type: Input
-            }], treeService: [{
+            args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: function () { return [{ type: SmartformLayoutDefinitionService }]; }, propDecorators: { smartComponentLayout: [{
                 type: Input
+            }], smartFormList: [{
+                type: ViewChildren,
+                args: ['form']
+            }], smartGridList: [{
+                type: ViewChildren,
+                args: ['grid']
+            }], smartFilterList: [{
+                type: ViewChildren,
+                args: ['filter']
+            }], toolbarList: [{
+                type: ViewChildren,
+                args: ['toolbar']
+            }], components: [{
+                type: ViewChildren,
+                args: [SmartComponentLayoutComponent]
             }] } });
 
-class SmarttreeModule {
+class SmartComponentLayoutModule {
 }
-SmarttreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SmarttreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeModule, declarations: [SmartTreeComponent], imports: [BrowserModule,
+SmartComponentLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SmartComponentLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutModule, declarations: [SmartComponentLayoutComponent], imports: [BrowserModule,
         MatCommonModule,
-        MatButtonModule,
-        MatIconModule,
-        MatTreeModule,
-        MatMenuModule,
-        SmartIconModule,
-        SmartViewContextModule], exports: [SmartTreeComponent] });
-SmarttreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeModule, providers: [SmarttreeService, SmarttreeGenericService], imports: [[
+        SmartformModule,
+        SmartGridModule,
+        SmartExpandableSectionModule,
+        SmarttreeModule,
+        SmartViewContextModule], exports: [SmartComponentLayoutComponent] });
+SmartComponentLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutModule, providers: [], imports: [[
             BrowserModule,
             MatCommonModule,
-            MatButtonModule,
-            MatIconModule,
-            MatTreeModule,
-            MatMenuModule,
-            SmartIconModule,
+            SmartformModule,
+            SmartGridModule,
+            SmartExpandableSectionModule,
+            SmarttreeModule,
             SmartViewContextModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmarttreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SmartTreeComponent],
+                    declarations: [SmartComponentLayoutComponent],
                     imports: [
                         BrowserModule,
                         MatCommonModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTreeModule,
-                        MatMenuModule,
-                        SmartIconModule,
+                        SmartformModule,
+                        SmartGridModule,
+                        SmartExpandableSectionModule,
+                        SmarttreeModule,
                         SmartViewContextModule,
                     ],
-                    exports: [SmartTreeComponent],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    providers: [SmarttreeService, SmarttreeGenericService],
+                    exports: [SmartComponentLayoutComponent],
+                    providers: [],
                 }]
         }] });
 
-/**
- * Custom HttpParameterCodec
- * Workaround for https://github.com/angular/angular/issues/18261
- */
-class CustomHttpParameterCodec$1 {
-    encodeKey(k) {
-        return encodeURIComponent(k);
-    }
-    encodeValue(v) {
-        return encodeURIComponent(v);
-    }
-    decodeKey(k) {
-        return decodeURIComponent(k);
-    }
-    decodeValue(v) {
-        return decodeURIComponent(v);
+class SmartFilterParamComponent {
+    constructor() { }
+    onItemClick(item) {
+        this.data.serviceToUse.peformWidgetAction({
+            code: 'ADD_FILTER_EXPRESSION',
+            params: {
+                model: item,
+            },
+        });
     }
-}
-
-const BASE_PATH$1 = new InjectionToken('basePath');
-const COLLECTION_FORMATS$1 = {
-    'csv': ',',
-    'tsv': '   ',
-    'ssv': ' ',
-    'pipes': '|'
-};
+}
+SmartFilterParamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterParamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamComponent, selector: "app-target-group-filter-param", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"targetGroupFilterParamContainer\">\r\n  <div\r\n    class=\"targetGroupFilterItem\"\r\n    *ngFor=\"let data of data?.group\"\r\n    (click)=\"onItemClick(data)\"\r\n  >\r\n    <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\r\n    <div class=\"mat-caption\">\r\n      {{ data.label }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-target-group-filter-param', template: "<div class=\"targetGroupFilterParamContainer\">\r\n  <div\r\n    class=\"targetGroupFilterItem\"\r\n    *ngFor=\"let data of data?.group\"\r\n    (click)=\"onItemClick(data)\"\r\n  >\r\n    <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\r\n    <div class=\"mat-caption\">\r\n      {{ data.label }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }] } });
 
-class Configuration$1 {
-    constructor(configurationParameters = {}) {
-        this.apiKeys = configurationParameters.apiKeys;
-        this.username = configurationParameters.username;
-        this.password = configurationParameters.password;
-        this.accessToken = configurationParameters.accessToken;
-        this.basePath = configurationParameters.basePath;
-        this.withCredentials = configurationParameters.withCredentials;
-        this.encoder = configurationParameters.encoder;
-        if (configurationParameters.encodeParam) {
-            this.encodeParam = configurationParameters.encodeParam;
-        }
-        else {
-            this.encodeParam = param => this.defaultEncodeParam(param);
-        }
-        if (configurationParameters.credentials) {
-            this.credentials = configurationParameters.credentials;
-        }
-        else {
-            this.credentials = {};
-        }
-    }
-    /**
-     * Select the correct content-type to use for a request.
-     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
-     * If no content type is found return the first found type if the contentTypes is not empty
-     * @param contentTypes - the array of content types that are available for selection
-     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
-     */
-    selectHeaderContentType(contentTypes) {
-        if (contentTypes.length === 0) {
-            return undefined;
-        }
-        const type = contentTypes.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return contentTypes[0];
-        }
-        return type;
-    }
-    /**
-     * Select the correct accept content-type to use for a request.
-     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
-     * If no content type is found return the first found type if the contentTypes is not empty
-     * @param accepts - the array of content types that are available for selection.
-     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
-     */
-    selectHeaderAccept(accepts) {
-        if (accepts.length === 0) {
-            return undefined;
-        }
-        const type = accepts.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return accepts[0];
-        }
-        return type;
-    }
-    /**
-     * Check if the given MIME is a JSON MIME.
-     * JSON MIME examples:
-     *   application/json
-     *   application/json; charset=UTF8
-     *   APPLICATION/JSON
-     *   application/vnd.company+json
-     * @param mime - MIME (Multipurpose Internet Mail Extensions)
-     * @return True if the given MIME is JSON, false otherwise.
-     */
-    isJsonMime(mime) {
-        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
-        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+class SmartFilterParamsComponent {
+    constructor() {
+        this._destroy$ = new Subject();
+        this.expandableSections = [];
     }
-    lookupCredential(key) {
-        const value = this.credentials[key];
-        return typeof value === 'function'
-            ? value()
-            : value;
+    ngOnInit() {
+        this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.setUp(this.service.model);
+        });
+        this.setUp(this.service.model);
     }
-    defaultEncodeParam(param) {
-        // This implementation exists as fallback for missing configuration
-        // and for backwards compatibility to older typescript-angular generator versions.
-        // It only works for the 'simple' parameter style.
-        // Date-handling only works for the 'date-time' format.
-        // All other styles and Date-formats are probably handled incorrectly.
-        //
-        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
-        const value = param.dataFormat === 'date-time' && param.value instanceof Date
-            ? param.value.toISOString()
-            : param.value;
-        return encodeURIComponent(String(value));
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-}
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-class DefaultService {
-    constructor(httpClient, basePath, configuration) {
-        this.httpClient = httpClient;
-        this.basePath = 'http://localhost';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration$1();
-        if (configuration) {
-            this.configuration = configuration;
-        }
-        if (typeof this.configuration.basePath !== 'string') {
-            if (Array.isArray(basePath) && basePath.length > 0) {
-                basePath = basePath[0];
-            }
-            if (typeof basePath !== 'string') {
-                basePath = this.basePath;
-            }
-            this.configuration.basePath = basePath;
+    setUp(model) {
+        if (model?.model) {
+            this.filterBuilder = model.model;
+            this.constructExpandableSections();
         }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$1();
     }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === "object" && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
-        }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+    constructExpandableSections() {
+        if (this.filterBuilder.groups) {
+            this.expandableSections = this.filterBuilder.groups.map((filterExpressionBuilderGroup) => {
+                return {
+                    title: filterExpressionBuilderGroup.label,
+                    cssClass: 'filterExpressionBuilderGroup',
+                    customComponent: SmartFilterParamComponent,
+                    data: {
+                        group: filterExpressionBuilderGroup.fields,
+                        serviceToUse: this.service,
+                    },
+                    inputName: 'data',
+                    isExpanded: true,
+                };
+            });
         }
-        return httpParams;
     }
-    addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
-            return httpParams;
-        }
-        if (typeof value === "object") {
-            if (Array.isArray(value)) {
-                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
-            }
-            else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substr(0, 10));
-                }
-                else {
-                    throw Error("key may not be null if value is Date");
-                }
-            }
-            else {
-                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
-            }
-        }
-        else if (key != null) {
-            httpParams = httpParams.append(key, value);
-        }
-        else {
-            throw Error("key may not be null if value is not object or array");
-        }
-        return httpParams;
+}
+SmartFilterParamsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: { service: "service" }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <!-- <ng-template #smartFilter></ng-template> -->\r\n  <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], components: [{ type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-filter-group-params', template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <!-- <ng-template #smartFilter></ng-template> -->\r\n  <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { service: [{
+                type: Input
+            }], filterVcRef: [{
+                type: ViewChild,
+                args: ['smartFilter', { read: ViewContainerRef }]
+            }] } });
+
+class SmartFilterService {
+    constructor() {
+        this._destroy$ = new Subject();
+        this.shouldSubmit = new Subject();
+        this.reSubscribeToSubmit = new Subject();
+        this.change = new Subject();
     }
-    nopePost(observe = 'body', reportProgress = false, options) {
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = [];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
-        }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            }
-            else {
-                responseType_ = 'blob';
-            }
-        }
-        let localVarPath = `/nope`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress
-        });
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    async submit() {
+        this.shouldSubmit.next();
+        await this.shouldSubmit.pipe(takeUntil(this._destroy$)).toPromise();
+        this.shouldSubmit = new Subject();
+        this.reSubscribeToSubmit.next();
+        return this.filter;
     }
 }
-DefaultService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DefaultService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$1, optional: true }, { token: Configuration$1, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-DefaultService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DefaultService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DefaultService, decorators: [{
+SmartFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SmartFilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [BASE_PATH$1]
-                }] }, { type: Configuration$1, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-const APIS = [DefaultService];
+        }], ctorParameters: function () { return []; } });
 
 /**
- * Form layout definition
- * Contains form layout definition objects.
+ * Filter API 2
+ * Filter API 2
  *
  * The version of the OpenAPI document: 1.0.0
  * Contact: info@it4all.hu
@@ -12855,16 +12870,15 @@ const APIS = [DefaultService];
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
-var ComponentType;
-(function (ComponentType) {
-    ComponentType["CONTAINER"] = "container";
-    ComponentType["FORM"] = "form";
-    ComponentType["WIDGET"] = "widget";
-})(ComponentType || (ComponentType = {}));
+var FilterExpressionBoolOperator$1;
+(function (FilterExpressionBoolOperator) {
+    FilterExpressionBoolOperator["AND"] = "AND";
+    FilterExpressionBoolOperator["OR"] = "OR";
+})(FilterExpressionBoolOperator$1 || (FilterExpressionBoolOperator$1 = {}));
 
 /**
- * Form layout definition
- * Contains form layout definition objects.
+ * Filter API 2
+ * Filter API 2
  *
  * The version of the OpenAPI document: 1.0.0
  * Contact: info@it4all.hu
@@ -12873,17 +12887,18 @@ var ComponentType;
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
-var ComponentWidgetType;
-(function (ComponentWidgetType) {
-    ComponentWidgetType["GRID"] = "grid";
-    ComponentWidgetType["FILTER"] = "filter";
-    ComponentWidgetType["TREE"] = "tree";
-    ComponentWidgetType["TOOLBAR"] = "toolbar";
-})(ComponentWidgetType || (ComponentWidgetType = {}));
+var FilterExpressionDataType;
+(function (FilterExpressionDataType) {
+    FilterExpressionDataType["STRING"] = "STRING";
+    FilterExpressionDataType["NUMBER"] = "NUMBER";
+    FilterExpressionDataType["DATE"] = "DATE";
+    FilterExpressionDataType["DATE_TIME"] = "DATE_TIME";
+    FilterExpressionDataType["BOOLEAN"] = "BOOLEAN";
+})(FilterExpressionDataType || (FilterExpressionDataType = {}));
 
 /**
- * Form layout definition
- * Contains form layout definition objects.
+ * Filter API 2
+ * Filter API 2
  *
  * The version of the OpenAPI document: 1.0.0
  * Contact: info@it4all.hu
@@ -12892,358 +12907,365 @@ var ComponentWidgetType;
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
-var LayoutDirection;
-(function (LayoutDirection) {
-    LayoutDirection["HORIZONTAL"] = "horizontal";
-    LayoutDirection["VERTICAL"] = "vertical";
-})(LayoutDirection || (LayoutDirection = {}));
-
-class ApiModule {
-    constructor(parentModule, http) {
-        if (parentModule) {
-            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
-        }
-        if (!http) {
-            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
-                'See also https://github.com/angular/angular/issues/20575');
-        }
-    }
-    static forRoot(configurationFactory) {
-        return {
-            ngModule: ApiModule,
-            providers: [{ provide: Configuration$1, useFactory: configurationFactory }]
-        };
-    }
-}
-ApiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
-ApiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiModule });
-ApiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiModule, providers: [], imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    declarations: [],
-                    exports: [],
-                    providers: []
-                }]
-        }], ctorParameters: function () { return [{ type: ApiModule, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: i1.HttpClient, decorators: [{
-                    type: Optional
-                }] }]; } });
+var FilterExpressionFieldWidgetType;
+(function (FilterExpressionFieldWidgetType) {
+    FilterExpressionFieldWidgetType["TEXT_FIELD"] = "TEXT_FIELD";
+    FilterExpressionFieldWidgetType["TEXT_FIELD_CHIPS"] = "TEXT_FIELD_CHIPS";
+    FilterExpressionFieldWidgetType["TEXT_BOX"] = "TEXT_BOX";
+    FilterExpressionFieldWidgetType["SELECT"] = "SELECT";
+    FilterExpressionFieldWidgetType["SELECT_MULTIPLE"] = "SELECT_MULTIPLE";
+    FilterExpressionFieldWidgetType["DATE"] = "DATE";
+    FilterExpressionFieldWidgetType["TIME"] = "TIME";
+    FilterExpressionFieldWidgetType["DATE_TIME"] = "DATE_TIME";
+    FilterExpressionFieldWidgetType["CHECK_BOX"] = "CHECK_BOX";
+    FilterExpressionFieldWidgetType["RADIO_BUTTON"] = "RADIO_BUTTON";
+    FilterExpressionFieldWidgetType["RANGE"] = "RANGE";
+})(FilterExpressionFieldWidgetType || (FilterExpressionFieldWidgetType = {}));
 
-/*
- * Public API Surface of smart-grid
+/**
+ * Filter API 2
+ * Filter API 2
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var FilterExpressionOperation;
+(function (FilterExpressionOperation) {
+    FilterExpressionOperation["EXPRESSION"] = "EXPRESSION";
+    FilterExpressionOperation["EQUAL"] = "EQUAL";
+    FilterExpressionOperation["NOT_EQUAL"] = "NOT_EQUAL";
+    FilterExpressionOperation["LESS"] = "LESS";
+    FilterExpressionOperation["LESS_OR_EQUAL"] = "LESS_OR_EQUAL";
+    FilterExpressionOperation["GREATER"] = "GREATER";
+    FilterExpressionOperation["GREATER_OR_EQUAL"] = "GREATER_OR_EQUAL";
+    FilterExpressionOperation["LIKE"] = "LIKE";
+    FilterExpressionOperation["NOT_LIKE"] = "NOT_LIKE";
+    FilterExpressionOperation["BETWEEN"] = "BETWEEN";
+    FilterExpressionOperation["NOT_BETWEEN"] = "NOT_BETWEEN";
+    FilterExpressionOperation["IS_EMPTY"] = "IS_EMPTY";
+    FilterExpressionOperation["IS_NOT_EMPTY"] = "IS_NOT_EMPTY";
+    FilterExpressionOperation["EXISTS"] = "EXISTS";
+    FilterExpressionOperation["NOT_EXISTS"] = "NOT_EXISTS";
+    FilterExpressionOperation["IN"] = "IN";
+    FilterExpressionOperation["NOT_IN"] = "NOT_IN";
+})(FilterExpressionOperation || (FilterExpressionOperation = {}));
+
+/**
+ * Filter API 2
+ * Filter API 2
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var FilterExpressionOrderByOrderEnum;
+(function (FilterExpressionOrderByOrderEnum) {
+    FilterExpressionOrderByOrderEnum["ASC"] = "ASC";
+    FilterExpressionOrderByOrderEnum["DESC"] = "DESC";
+})(FilterExpressionOrderByOrderEnum || (FilterExpressionOrderByOrderEnum = {}));
+;
+
+/**
+ * Filter API 2
+ * Filter API 2
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
  */
 
-class SmartComponentLayoutComponent {
-    constructor(layoutService) {
-        this.layoutService = layoutService;
+var FilterExpressionBuilderGroupBuilderGroupKindEnum;
+(function (FilterExpressionBuilderGroupBuilderGroupKindEnum) {
+    FilterExpressionBuilderGroupBuilderGroupKindEnum["DIPLAY"] = "DIPLAY";
+    FilterExpressionBuilderGroupBuilderGroupKindEnum["BRACKET"] = "BRACKET";
+    FilterExpressionBuilderGroupBuilderGroupKindEnum["EXIST"] = "EXIST";
+})(FilterExpressionBuilderGroupBuilderGroupKindEnum || (FilterExpressionBuilderGroupBuilderGroupKindEnum = {}));
+;
+
+class SmartFilterSimpleFieldComponent {
+    constructor(service, cfService) {
+        this.service = service;
+        this.cfService = cfService;
         this._destroy$ = new Subject();
-        this.toolbarId = 'not_initialized_yet';
+    }
+    ngOnInit() {
+        this.operation = this.filterExpressionField.expressionData?.currentOperation;
+        this.currentOperation = this.getOptionLabel(this.operation);
     }
     ngAfterViewInit() {
-        if (this.smartFormList?.first) {
-            this.setFormComponent(this.smartFormList?.first);
-        }
-        this.smartFormList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setFormComponent(list.first);
-        });
-        if (this.smartGridList?.first) {
-            this.setGridComponent(this.smartGridList?.first);
-        }
-        this.smartGridList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setGridComponent(list.first);
-        });
-        this.smartFilterList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            if (!this.smartFilterComponent) {
-                this.smartFilterComponent = list.first;
-                this.bindFilter();
-            }
-        });
-        if (this.toolbarList?.first) {
-            this.setToolbarComponent(this.toolbarList?.first);
-        }
-        this.toolbarList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setToolbarComponent(list.first);
-        });
-        if (this.smartComponentLayout) {
-            this.setUp();
-        }
+        this.constructForm();
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    ngOnChanges(changes) {
-        this.smartComponentLayout = changes['smartComponentLayout'].currentValue;
-        if (this.smartComponentLayout) {
-            this.setUp();
+    constructFormWidget(key, label, widgetType, possibleValues, placeholder) {
+        let type = widgetType;
+        if (type === FilterExpressionFieldWidgetType.DATE) {
+            type = SmartFormWidgetType.DATE_PICKER;
         }
-    }
-    setUp() {
-        this.parent = this.smartComponentLayout?.parentComponent;
-        this.uuid = this.parent.uuid;
-        this.treeService = this.parent.smartTreeService;
-        if (this.smartComponentLayout?.expandable) {
-            this.constructExpandableSection();
+        else if (type === FilterExpressionFieldWidgetType.DATE_TIME) {
+            type = SmartFormWidgetType.DATE_TIME_PICKER;
         }
-        else if (this.smartComponentLayout?.type === ComponentType.FORM) {
-            this.constructForm();
+        let widget = {
+            key,
+            label,
+            type,
+            value: '',
+            placeholder: placeholder,
+            showLabel: true,
+            valueList: possibleValues.map((value) => {
+                return {
+                    key: value.objectUri ? value.objectUri : value.code,
+                    label: value.displayValue,
+                    type: SmartFormWidgetType.ITEM,
+                    value: value.objectUri ? value.objectUri : value.code,
+                };
+            }),
+        };
+        return widget;
+    }
+    constructForm() {
+        this.vcRefForm?.clear();
+        let widgets = [];
+        let key;
+        if (this.filterExpressionField.widgetType === 'SELECT_MULTIPLE') {
+            key = 'expressionData.operand2.selectedValues';
         }
-        else if (this.smartComponentLayout?.type === ComponentType.WIDGET) {
-            if (this.smartComponentLayout.widget?.type === ComponentWidgetType.GRID) {
-                this.constructGrid();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.FILTER) {
-                this.constructFilter();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TREE) {
-                this.constructTree();
+        if (this.filterExpressionField.expressionData?.operand2) {
+            if (key !== 'expressionData.operand2.selectedValues') {
+                key = 'expressionData.operand2.valueAsString';
             }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TOOLBAR) {
-                this.constructToolbar();
+            widgets.push(this.constructFormWidget(key, this.filterExpressionField.label2, this.filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, this.filterExpressionField.possibleValues, this.filterExpressionField.placeholder2));
+        }
+        if (this.filterExpressionField.expressionData?.operand3) {
+            if (key !== 'selectedValues') {
+                key = 'expressionData.operand3.valueAsString';
             }
+            widgets.push(this.constructFormWidget(key, this.filterExpressionField.label3, this.filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, this.filterExpressionField.possibleValues, this.filterExpressionField.placeholder3));
         }
-        this.parent.initActions();
-    }
-    type() {
-        return ComponentType;
-    }
-    constructExpandableSection() {
-        let data = { ...this.smartComponentLayout };
-        data.expandable = false;
-        this.expandableSection = {
-            title: this.smartComponentLayout?.expandableSectionLabel ?? '',
-            data,
-            inputName: 'smartComponentLayout',
-            customComponent: SmartComponentLayoutComponent,
-        };
-    }
-    constructForm() {
-        const widgets = this.layoutService.render({
-            layoutDefinitions: this.smartComponentLayout?.form,
-        });
+        this.operation = this.filterExpressionField.expressionData?.currentOperation;
+        this.currentOperation = this.getOptionLabel(this.operation);
         this.smartForm = {
-            direction: SmartFormWidgetDirection.COL,
-            componentModel: this.parent?.model,
+            direction: SmartFormWidgetDirection.ROW,
+            componentModel: { data: this.filterExpressionField },
+            useOnValueChangeEvent: true,
+            useOnBlurEvent: true,
+            submitOnEnter: this.service.filter?.submitOnEnter,
             widgets,
+            translateService: this.service.filter?.translateService,
         };
-        this.bindForm();
-    }
-    setFormComponent(comp) {
-        if (!this.smartFormComponent) {
-            this.smartFormComponent = comp;
-            this.bindForm();
-        }
+        // Show form on page
+        this.componentRefForm = this.cfService.createComponent(this.vcRefForm, SmartformComponent, new Map([['smartForm', this.smartForm]]));
+        this.componentRefForm.instance.onValueChangeSubject
+            ?.pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.submit();
+            this.service.change.next();
+        });
+        this.componentRefForm.instance.onBlurSubject?.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.submit();
+            this.service.change.next();
+        });
     }
-    bindForm() {
-        if (this.smartForm && this.smartFormComponent) {
-            this.parent?.addForm(
-            // unique identifier for the form
-            `form_${this.makeid(5)}`, this.smartForm, this.smartFormComponent);
-        }
+    submit() {
+        let form = this.componentRefForm.instance.submitForm();
+        this.filterExpressionField = form.componentModel?.data;
+        this.simpleFieldChildren.forEach((smartFilterFieldComponent, index) => {
+            let filterExpressionField = smartFilterFieldComponent.submit();
+            this.filterExpressionField.subFieldList.filters[index] = filterExpressionField;
+        });
+        return this.filterExpressionField;
     }
-    makeid(length) {
-        let result = '';
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        const charactersLength = characters.length;
-        let counter = 0;
-        while (counter < length) {
-            result += characters.charAt(Math.floor(Math.random() * charactersLength));
-            counter += 1;
+    optionSelected(option) {
+        let oldOption = this.componentRefForm.instance.smartForm.componentModel.data.expressionData
+            .currentOperation;
+        this.componentRefForm.instance.smartForm.componentModel.data.expressionData.currentOperation =
+            option;
+        this.operation = option;
+        this.currentOperation = this.getOptionLabel(this.operation);
+        if (oldOption !== FilterExpressionOperation.BETWEEN &&
+            option === FilterExpressionOperation.BETWEEN) {
+            this.submit();
+            let label = this.filterExpressionField.label2;
+            this.filterExpressionField.label2 = `${label} - tól`;
+            this.filterExpressionField.label3 = `${label} - ig`;
+            this.filterExpressionField.expressionData.operand3 = {
+                isDataName: this.filterExpressionField.expressionData.operand2?.isDataName,
+                type: this.filterExpressionField.expressionData.operand3?.type,
+                valueAsString: this.filterExpressionField.expressionData.operand3?.valueAsString,
+                selectedValues: this.filterExpressionField.expressionData.operand3?.selectedValues,
+            };
+            this.constructForm();
         }
-        return result;
-    }
-    constructGrid() {
-        this.smartGrid = {
-            gridIdentifier: this.smartComponentLayout?.widget?.identifier,
-            gridModel: {
-                page: {},
-            },
-            options: {
-                rowUiActionType: GridUiActionType.POPUP_MENU,
-            },
-            layoutDef: SmartLayoutDef.TABLE,
-            paginator: true,
-        };
-        this.bindGrid();
-    }
-    setGridComponent(comp) {
-        if (!this.smartGridComponent) {
-            this.smartGridComponent = comp;
-            this.bindGrid();
+        else if (oldOption === FilterExpressionOperation.BETWEEN &&
+            option !== FilterExpressionOperation.BETWEEN) {
+            let label = this.filterExpressionField.label2.replace(' - tól', '');
+            this.filterExpressionField.label2 = `${label}`;
+            this.filterExpressionField.label3 = undefined;
+            this.filterExpressionField.expressionData.operand3 = undefined;
+            this.constructForm();
         }
     }
-    bindGrid() {
-        if (this.smartGrid && this.smartGridComponent) {
-            this.smartGrid = this.parent?.addGrid(this.smartGrid, {
-                rowUiActionType: GridUiActionType.POPUP_MENU,
-            }, false, this.smartGridComponent);
+    getOptionLabel(option) {
+        if (!option) {
+            return '';
         }
-    }
-    setToolbarComponent(comp) {
-        this.toolbar = comp;
-    }
-    constructFilter() {
-        this.smartFilter = this.smartComponentLayout.parentComponent.addFilter(`filter_${this.makeid(5)}`, this.smartComponentLayout?.widget?.filterExpressionFieldList, this.smartComponentLayout?.widget?.filterType, this.smartFilterComponent);
-    }
-    bindFilter() {
-        // TODO
-    }
-    constructTree() {
-        this.parent.setUpDefaultTree(this.smartComponentLayout?.widget?.identifier);
-        this.treeService?.initialize();
-    }
-    constructToolbar() {
-        let toolbarId = this.smartComponentLayout?.widget?.identifier;
-        if (this.toolbarId !== toolbarId) {
-            this.toolbarId = toolbarId;
+        else if (this.operationTranslator) {
+            return this.operationTranslator(option);
         }
+        return option;
     }
 }
-SmartComponentLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }], target: i0.ɵɵFactoryTarget.Component });
-SmartComponentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout" }, viewQueries: [{ propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"], components: [{ type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout"] }, { type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
+SmartFilterSimpleFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterSimpleFieldComponent, deps: [{ token: SmartFilterService }, { token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterSimpleFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: { operationTranslator: "operationTranslator", filterExpressionField: "filterExpressionField", showPossibleActions: "showPossibleActions" }, viewQueries: [{ propertyName: "vcRefForm", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div class=\"smart-filter-simple-field-container\">\r\n  <div class=\"smart-filter-simple-field-form-widget\">\r\n    <div\r\n      class=\"smart-filter-simple-field-form-widget-row\"\r\n      *ngIf=\"showPossibleActions\"\r\n    >\r\n      <p>({{ currentOperation }})</p>\r\n      <button\r\n        mat-icon-button\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-label=\"Example icon-button with a menu\"\r\n      >\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          mat-menu-item\r\n          *ngFor=\"let option of filterExpressionField.possibleOperations\"\r\n          (click)=\"optionSelected(option)\"\r\n        >\r\n          <span>\r\n            {{ getOptionLabel(option) }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <ng-template #form></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-flat-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-stroked-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterSimpleFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: function () { return [{ type: SmartformLayoutDefinitionService }]; }, propDecorators: { smartComponentLayout: [{
-                type: Input
-            }], smartFormList: [{
-                type: ViewChildren,
-                args: ['form']
-            }], smartGridList: [{
-                type: ViewChildren,
-                args: ['grid']
-            }], smartFilterList: [{
-                type: ViewChildren,
-                args: ['filter']
-            }], toolbarList: [{
-                type: ViewChildren,
-                args: ['toolbar']
-            }], components: [{
+            args: [{ selector: 'smart-filter-simple-field', template: "<div class=\"smart-filter-simple-field-container\">\r\n  <div class=\"smart-filter-simple-field-form-widget\">\r\n    <div\r\n      class=\"smart-filter-simple-field-form-widget-row\"\r\n      *ngIf=\"showPossibleActions\"\r\n    >\r\n      <p>({{ currentOperation }})</p>\r\n      <button\r\n        mat-icon-button\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-label=\"Example icon-button with a menu\"\r\n      >\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          mat-menu-item\r\n          *ngFor=\"let option of filterExpressionField.possibleOperations\"\r\n          (click)=\"optionSelected(option)\"\r\n        >\r\n          <span>\r\n            {{ getOptionLabel(option) }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <ng-template #form></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-flat-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-stroked-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: SmartFilterService }, { type: ComponentFactoryService }]; }, propDecorators: { simpleFieldChildren: [{
                 type: ViewChildren,
-                args: [SmartComponentLayoutComponent]
-            }] } });
-
-class SmartComponentLayoutModule {
-}
-SmartComponentLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SmartComponentLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutModule, declarations: [SmartComponentLayoutComponent], imports: [BrowserModule,
-        MatCommonModule,
-        SmartformModule,
-        SmartGridModule,
-        SmartExpandableSectionModule,
-        SmarttreeModule,
-        SmartViewContextModule], exports: [SmartComponentLayoutComponent] });
-SmartComponentLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutModule, providers: [], imports: [[
-            BrowserModule,
-            MatCommonModule,
-            SmartformModule,
-            SmartGridModule,
-            SmartExpandableSectionModule,
-            SmarttreeModule,
-            SmartViewContextModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartComponentLayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SmartComponentLayoutComponent],
-                    imports: [
-                        BrowserModule,
-                        MatCommonModule,
-                        SmartformModule,
-                        SmartGridModule,
-                        SmartExpandableSectionModule,
-                        SmarttreeModule,
-                        SmartViewContextModule,
-                    ],
-                    exports: [SmartComponentLayoutComponent],
-                    providers: [],
-                }]
-        }] });
-
-class SmartFilterParamComponent {
-    constructor() { }
-    onItemClick(item) {
-        this.data.serviceToUse.peformWidgetAction({
-            code: 'ADD_FILTER_EXPRESSION',
-            params: {
-                model: item,
-            },
-        });
-    }
-}
-SmartFilterParamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterParamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamComponent, selector: "app-target-group-filter-param", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"targetGroupFilterParamContainer\">\r\n  <div\r\n    class=\"targetGroupFilterItem\"\r\n    *ngFor=\"let data of data?.group\"\r\n    (click)=\"onItemClick(data)\"\r\n  >\r\n    <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\r\n    <div class=\"mat-caption\">\r\n      {{ data.label }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-target-group-filter-param', template: "<div class=\"targetGroupFilterParamContainer\">\r\n  <div\r\n    class=\"targetGroupFilterItem\"\r\n    *ngFor=\"let data of data?.group\"\r\n    (click)=\"onItemClick(data)\"\r\n  >\r\n    <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\r\n    <div class=\"mat-caption\">\r\n      {{ data.label }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                args: ['simpleField']
+            }], operationTranslator: [{
                 type: Input
+            }], filterExpressionField: [{
+                type: Input
+            }], showPossibleActions: [{
+                type: Input
+            }], vcRefForm: [{
+                type: ViewChild,
+                args: ['form', { read: ViewContainerRef }]
             }] } });
 
-class SmartFilterParamsComponent {
-    constructor() {
+class SmartFilterSimpleComponent {
+    constructor(service) {
+        this.service = service;
         this._destroy$ = new Subject();
-        this.expandableSections = [];
+        this.service.reSubscribeToSubmit.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.subscribeToSubmit();
+        });
+        this.subscribeToSubmit();
     }
     ngOnInit() {
-        this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.setUp(this.service.model);
-        });
-        this.setUp(this.service.model);
+        this.smartFilter = this.service.filter;
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    setUp(model) {
-        if (model?.model) {
-            this.filterBuilder = model.model;
-            this.constructExpandableSections();
+    subscribeToSubmit() {
+        this.service.shouldSubmit.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.submit();
+        });
+    }
+    submit() {
+        this.simpleFieldChildren.forEach((smartFilterFieldComponent, index) => {
+            this.smartFilter.data[index] = smartFilterFieldComponent.submit();
+        });
+        this.service.filter = this.smartFilter;
+        this.service.shouldSubmit.complete();
+    }
+}
+SmartFilterSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterSimpleComponent, deps: [{ token: SmartFilterService }], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterSimpleComponent, selector: "smart-filter-simple", viewQueries: [{ propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"smartFilter\" class=\"smart-simple-fields-container\">\r\n    <div *ngFor=\"let filterExpressionField of smartFilter.data; let i = index\">\r\n        <smart-filter-simple-field\r\n            #simpleField\r\n            [filterExpressionField]=\"filterExpressionField\"\r\n            [operationTranslator]=\"smartFilter.operationTranslator\"\r\n            [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n        ></smart-filter-simple-field>\r\n        <div *ngFor=\"let subfilterExpressionField of filterExpressionField.subFieldList?.filters\">\r\n            <smart-filter-simple-field\r\n                #simpleField\r\n                [filterExpressionField]=\"filterExpressionField\"\r\n                [operationTranslator]=\"smartFilter.operationTranslator\"\r\n                [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n            ></smart-filter-simple-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"], components: [{ type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: ["operationTranslator", "filterExpressionField", "showPossibleActions"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterSimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "smart-filter-simple", template: "<div *ngIf=\"smartFilter\" class=\"smart-simple-fields-container\">\r\n    <div *ngFor=\"let filterExpressionField of smartFilter.data; let i = index\">\r\n        <smart-filter-simple-field\r\n            #simpleField\r\n            [filterExpressionField]=\"filterExpressionField\"\r\n            [operationTranslator]=\"smartFilter.operationTranslator\"\r\n            [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n        ></smart-filter-simple-field>\r\n        <div *ngFor=\"let subfilterExpressionField of filterExpressionField.subFieldList?.filters\">\r\n            <smart-filter-simple-field\r\n                #simpleField\r\n                [filterExpressionField]=\"filterExpressionField\"\r\n                [operationTranslator]=\"smartFilter.operationTranslator\"\r\n                [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n            ></smart-filter-simple-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: SmartFilterService }]; }, propDecorators: { simpleFieldChildren: [{
+                type: ViewChildren,
+                args: ["simpleField"]
+            }] } });
+
+class SmartFilterComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    ngOnInit() {
+        if (this.filter) {
+            this.setUp();
         }
     }
-    constructExpandableSections() {
-        if (this.filterBuilder.groups) {
-            this.expandableSections = this.filterBuilder.groups.map((filterExpressionBuilderGroup) => {
-                return {
-                    title: filterExpressionBuilderGroup.label,
-                    cssClass: 'filterExpressionBuilderGroup',
-                    customComponent: SmartFilterParamComponent,
-                    data: {
-                        group: filterExpressionBuilderGroup.fields,
-                        serviceToUse: this.service,
-                    },
-                    inputName: 'data',
-                    isExpanded: true,
-                };
-            });
+    ngOnChanges(changes) {
+        if (changes['filter'].currentValue) {
+            this.setUp();
         }
     }
+    setUp() {
+        this.service.filter = this.filter;
+    }
+    async submit() {
+        return await this.service.submit();
+    }
 }
-SmartFilterParamsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: { service: "service" }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <!-- <ng-template #smartFilter></ng-template> -->\r\n  <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], components: [{ type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, decorators: [{
+SmartFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterComponent, deps: [{ token: SmartFilterService }], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterComponent, selector: "smart-filter", inputs: { filter: "filter" }, providers: [SmartFilterService], usesOnChanges: true, ngImport: i0, template: "<smart-filter-simple *ngIf=\"filter\" #simpleFilter></smart-filter-simple>\r\n", styles: [""], components: [{ type: SmartFilterSimpleComponent, selector: "smart-filter-simple" }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-filter-group-params', template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <!-- <ng-template #smartFilter></ng-template> -->\r\n  <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { service: [{
+            args: [{ selector: 'smart-filter', providers: [SmartFilterService], template: "<smart-filter-simple *ngIf=\"filter\" #simpleFilter></smart-filter-simple>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: SmartFilterService }]; }, propDecorators: { filter: [{
                 type: Input
-            }], filterVcRef: [{
-                type: ViewChild,
-                args: ['smartFilter', { read: ViewContainerRef }]
             }] } });
 
+class SmartFilterExpressionFieldComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+SmartFilterExpressionFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterExpressionFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterExpressionFieldComponent, selector: "lib-smart-filter-expression-field", ngImport: i0, template: "", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-smart-filter-expression-field', template: "", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class SmartFilterModule {
+}
+SmartFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SmartFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterModule, declarations: [SmartFilterComponent,
+        SmartFilterExpressionFieldComponent,
+        SmartFilterSimpleComponent,
+        SmartFilterSimpleFieldComponent], imports: [BrowserModule, SmartformModule, MatMenuModule, MatIconModule, MatButtonModule], exports: [SmartFilterComponent] });
+SmartFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterModule, imports: [[BrowserModule, SmartformModule, MatMenuModule, MatIconModule, MatButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SmartFilterComponent,
+                        SmartFilterExpressionFieldComponent,
+                        SmartFilterSimpleComponent,
+                        SmartFilterSimpleFieldComponent,
+                    ],
+                    imports: [BrowserModule, SmartformModule, MatMenuModule, MatIconModule, MatButtonModule],
+                    exports: [SmartFilterComponent],
+                }]
+        }] });
+
+var SmartFilterPosition;
+(function (SmartFilterPosition) {
+    SmartFilterPosition[SmartFilterPosition["TOP"] = 0] = "TOP";
+    SmartFilterPosition[SmartFilterPosition["BOTTOM"] = 1] = "BOTTOM";
+    SmartFilterPosition[SmartFilterPosition["LEFT"] = 2] = "LEFT";
+    SmartFilterPosition[SmartFilterPosition["RIGHT"] = 3] = "RIGHT";
+})(SmartFilterPosition || (SmartFilterPosition = {}));
+var SmartFilterType;
+(function (SmartFilterType) {
+    SmartFilterType[SmartFilterType["SIMPLE"] = 0] = "SIMPLE";
+    SmartFilterType[SmartFilterType["ADVANCED"] = 1] = "ADVANCED";
+})(SmartFilterType || (SmartFilterType = {}));
+
+/*
+ * Public API Surface of smart-filter
+ */
+
 var FilterExpressionBuilderUiModelTypeEnum;
 (function (FilterExpressionBuilderUiModelTypeEnum) {
     FilterExpressionBuilderUiModelTypeEnum["SIMPLE"] = "SIMPLE";
@@ -13431,28 +13453,28 @@ class SmartFilterEditorContentComponent {
             model[index] = filterExpressionField;
             if (filterExpressionField.widgetType === 'SELECT_MULTIPLE') {
                 key = index + '.expressionData.operand2.selectedValues';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand2?.valueAsString ?? ''));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand2?.valueAsString ?? ''));
                 return;
             }
             if (filterExpressionField.expressionData?.currentOperation === 'BETWEEN') {
                 key = index + '.expressionData.operand2.valueAsString';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand2?.valueAsString ?? ''));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand2?.valueAsString ?? ''));
                 key = index + '.expressionData.operand3.valueAsString';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label3, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand3?.valueAsString ?? ''));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label3, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand3?.valueAsString ?? ''));
                 return;
             }
             if (filterExpressionField.expressionData?.operand2) {
                 if (key !== index + '.expressionData.operand2.selectedValues') {
                     key = index + '.expressionData.operand2.valueAsString';
                 }
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand2?.valueAsString ?? ''));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand2?.valueAsString ?? ''));
                 return;
             }
             if (filterExpressionField?.expressionData?.operand3) {
                 if (key !== index + '.selectedValues') {
                     key = index + '.expressionData.operand3.valueAsString';
                 }
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label3, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand3?.valueAsString ?? ''));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label3, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, filterExpressionField.possibleValues, filterExpressionField.expressionData?.operand3?.valueAsString ?? ''));
                 return;
             }
         });
@@ -13557,10 +13579,10 @@ class SmartFilterEditorContentComponent {
     }
     constructFormWidget(key, label, widgetType, possibleValues, value) {
         let type = widgetType;
-        if (type === FilterExpressionFieldWidgetType.Date) {
+        if (type === FilterExpressionFieldWidgetType.DATE) {
             type = SmartFormWidgetType.DATE_PICKER;
         }
-        else if (type === FilterExpressionFieldWidgetType.DateTime) {
+        else if (type === FilterExpressionFieldWidgetType.DATE_TIME) {
             type = SmartFormWidgetType.DATE_TIME_PICKER;
         }
         let widget = {
@@ -15231,5 +15253,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APIS$3 as APIS, ApiModule$3 as ApiModule, ApiQueueService, BASE_PATH$5 as BASE_PATH, COLLECTION_FORMATS$5 as COLLECTION_FORMATS, CloseResult, ComponentFactoryService, ComponentFactoryServiceModule, ComponentType, ComponentWidgetType, Configuration$5 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultUiActionCode_CLOSE, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroup, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderBy, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, LayoutDirection, LinkTargetEnum, MessageOptionType, MessageTextType, MessageType, SelectionDefinitionTypeEnum, SessionAPIS, SessionErrorBehaviour, SessionService, SharedModule, SimplifiedTabGroupComponent, SmartActionType, SmartAuthService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDialog, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorModule, SmartFilterEditorService, SmartFilterExpressionItemComponent, SmartFilterExpressionItemsComponent, SmartFilterModule, SmartFilterParamComponent, SmartFilterParamsComponent, SmartFilterPosition, SmartFilterType, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkUuidVariableInPath, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartSubject, SmartTabGroupModule, SmartTabGroupService, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformModule, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, TabGroupComponent, ToggleLabelPosition, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, WidgetMap };
+export { APIS$3 as APIS, ApiModule$3 as ApiModule, ApiQueueService, BASE_PATH$5 as BASE_PATH, COLLECTION_FORMATS$5 as COLLECTION_FORMATS, CloseResult, ComponentFactoryService, ComponentFactoryServiceModule, ComponentType, ComponentWidgetType, Configuration$5 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultUiActionCode_CLOSE, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, LayoutDirection, LinkTargetEnum, MessageOptionType, MessageTextType, MessageType, SelectionDefinitionTypeEnum, SessionAPIS, SessionErrorBehaviour, SessionService, SharedModule, SimplifiedTabGroupComponent, SmartActionType, SmartAuthService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartComponentLayoutModule, SmartComponentLayoutUtility, SmartDatePipe, SmartDateTimePipe, SmartDialog, SmartExpandableSectionModule, SmartExpandableSectionService, SmartFileUploaderComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorModule, SmartFilterEditorService, SmartFilterExpressionItemComponent, SmartFilterExpressionItemsComponent, SmartFilterModule, SmartFilterParamComponent, SmartFilterParamsComponent, SmartFilterPosition, SmartFilterType, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridModule, SmartGridService, SmartGridType, SmartIconComponent, SmartIconModule, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkUuidVariableInPath, SmartNavbarComponent, SmartNavbarModule, SmartNavbarService, SmartNavigationModule, SmartNavigationService, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartSubject, SmartTabGroupModule, SmartTabGroupService, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartWidgetSettings, SmartdialogModule, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmartformModule, SmartformwidgetComponent, SmarttableComponent, SmarttableModule, SmarttableService, SmarttreeGenericService, SmarttreeModule, SmarttreeService, TabGroupComponent, ToggleLabelPosition, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, WidgetMap };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map