@fuentis/phoenix-ui 0.0.9-alpha.253 → 0.0.9-alpha.255

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -5323,15 +5323,16 @@ class ReadOnlyInputComponent {
                     : timePeriodFromMS(formValue);
                 this.value = convertedValue;
                 break;
-            case ControlType.TEXT_EDITOR:
-                const htmlContent = this.metaform.get(this.control.configuration.key)?.value;
-                if (htmlContent?.replace(/<\/?[^>]+(>|$)/g, '')) {
-                    this.value = htmlContent;
-                }
-                else {
-                    this.value = null;
-                }
-                break;
+            // case ControlType.TEXT_EDITOR:
+            //   const htmlContent = this.metaform.get(
+            //     this.control.configuration.key
+            //   )?.value;
+            //   if (htmlContent?.replace(/<\/?[^>]+(>|$)/g, '')) {
+            //     this.value = htmlContent;
+            //   } else {
+            //     this.value = null;
+            //   }
+            //   break;
             case ControlType.SWITCH:
                 this.value = {
                     isBoolean: typeof this.metaform.get(this.control.configuration.key)?.value ===
@@ -5345,7 +5346,7 @@ class ReadOnlyInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i2$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$8.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500\"\n      [attr.data-cy]=\"'input-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n      [innerHTML]=\"value\"\n    ></div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n      [attr.data-cy]=\"'textarea-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n      [innerHTML]=\"value\"\n    ></div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$8.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 // SerachCardComponent,
                 CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$6.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$6.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
 }
@@ -5366,7 +5367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         PanelModule,
                         ButtonModule,
                         StripHtmlPipe
-                    ], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"] }]
+                    ], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500\"\n      [attr.data-cy]=\"'input-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n      [innerHTML]=\"value\"\n    ></div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n      [attr.data-cy]=\"'textarea-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n      [innerHTML]=\"value\"\n    ></div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i2$1.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
                 type: Input
             }], metaform: [{