@fuentis/phoenix-ui 0.0.9-alpha.664 → 0.0.9-alpha.666

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -9001,18 +9001,18 @@ class ReadOnlyInputV2Component {
             null);
     }, ...(ngDevMode ? [{ debugName: "ssLabel" }] : []));
     /**
-     * Multi-select option label resolver (MS_OPTION).
-     * Joins multiple labels into a single string with truncation after maxItems.
+     * Multi-select option labels (MS_OPTION), resolved to display strings — the
+     * full list, in order. The read-only view renders these stacked (one per line);
+     * {@link msLabel} joins/truncates them for compact single-string contexts.
      */
-    msLabel = computed(() => {
+    msLabels = computed(() => {
         const v = this._v();
         if (!Array.isArray(v) || v.length === 0)
-            return null;
+            return [];
         const suffix = this.getLangSuffix();
         const key = `labelKeyVal${suffix}`;
-        const maxItems = 4;
         const opts = this.field.configuration.options ?? [];
-        const labels = v
+        return v
             .map((x) => {
             // Object value: resolve localized label from DTO fields.
             if (x !== null && typeof x === 'object') {
@@ -9024,8 +9024,16 @@ class ReadOnlyInputV2Component {
         })
             .filter((x) => x !== null && x !== undefined && String(x).trim() !== '')
             .map((x) => String(x));
+    }, ...(ngDevMode ? [{ debugName: "msLabels" }] : []));
+    /**
+     * Multi-select option label resolver (MS_OPTION).
+     * Joins multiple labels into a single string with truncation after maxItems.
+     */
+    msLabel = computed(() => {
+        const labels = this.msLabels();
         if (!labels.length)
             return null;
+        const maxItems = 4;
         return labels.length <= maxItems
             ? labels.join(', ')
             : `${labels.slice(0, maxItems).join(', ')} ...`;
@@ -9058,7 +9066,7 @@ class ReadOnlyInputV2Component {
         return String(v);
     }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputV2Component, isStandalone: true, selector: "phoenix-read-only-input-v2", inputs: { field: "field", form: "form" }, ngImport: i0, template: "@switch (type) {\n\n  @case ('TEXT_EDITOR') {\n    @if (displayText()) {\n      <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('TEXT_AREA') {\n    @if (displayText()) {\n      <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n        {{ displayText() | stripHtmlSafe }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SWITCH') {\n    @if (bool() !== null) {\n      <div class=\"mt-2 mb-2 font-semibold text-500\">\n        {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('CHECKBOX') {\n    @if (bool() !== null) {\n      <div class=\"mt-2 mb-2 font-semibold text-500\">\n        {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('DATE') {\n    @if (dateValue()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ dateValue() | date }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('START_DUE_DATE') {\n    @if (startDue()) {\n      <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n        <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n        <div class=\"flex align-items-center p-2\">\n          <i class=\"pi pi-arrow-right text-sm\"></i>\n        </div>\n        <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('ASSIGN') {\n    @if (assign()?.name) {\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n                {{ assign()?.name }}\n              </p>\n              <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n                {{ assign()?.function ?? '--' }}\n              </p>\n            </div>\n          </div>\n        </p-button>\n\n        <p-popover #op [dismissable]=\"true\">\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n              {{ assign()?.email ?? '--' }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i>\n              {{ assign()?.phone ?? '--' }}\n            </p>\n          </div>\n        </p-popover>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('UPLOAD') {\n    @if (upload()?.fileName) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ upload()?.fileName }}\n        @if (upload()?.size) {\n          <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('UPLOAD_DRAG_DROP') {\n    @if (upload()?.fileName) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ upload()?.fileName }}\n        @if (upload()?.size) {\n          <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SS_OPTION') {\n    @if (ssLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ ssLabel() | translate }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SS_OPTION_OBJECT_BASED') {\n    @if (ssLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ ssLabel() | translate }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('MS_OPTION') {\n    @if (msLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2 white-space-nowrap overflow-hidden\">\n        {{ msLabel() }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n  @case ('PASSWORD') {\n    @if (displayText()) {\n      <input\n        pInputText\n        type=\"password\"\n        class=\"w-full p-inputtext\"\n        [disabled]=\"true\"\n        [value]=\"displayText() ?? ''\"\n        autocomplete=\"off\"\n        aria-label=\"password\"\n      />\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @default {\n    @if (displayText()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ displayText() | stripHtmlSafe }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n}\n\n<ng-template #fallBack>\n  <div class=\"font-semibold text-500 mt-2 mb-2\">--</div>\n</ng-template>", 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 .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlSafePipe, name: "stripHtmlSafe" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputV2Component, isStandalone: true, selector: "phoenix-read-only-input-v2", inputs: { field: "field", form: "form" }, ngImport: i0, template: "@switch (type) {\n\n  @case ('TEXT_EDITOR') {\n    @if (displayText()) {\n      <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('TEXT_AREA') {\n    @if (displayText()) {\n      <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n        {{ displayText() | stripHtmlSafe }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SWITCH') {\n    @if (bool() !== null) {\n      <div class=\"mt-2 mb-2 font-semibold text-500\">\n        {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('CHECKBOX') {\n    @if (bool() !== null) {\n      <div class=\"mt-2 mb-2 font-semibold text-500\">\n        {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('DATE') {\n    @if (dateValue()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ dateValue() | date }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('START_DUE_DATE') {\n    @if (startDue()) {\n      <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n        <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n        <div class=\"flex align-items-center p-2\">\n          <i class=\"pi pi-arrow-right text-sm\"></i>\n        </div>\n        <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('ASSIGN') {\n    @if (assign()?.name) {\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n                {{ assign()?.name }}\n              </p>\n              <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n                {{ assign()?.function ?? '--' }}\n              </p>\n            </div>\n          </div>\n        </p-button>\n\n        <p-popover #op [dismissable]=\"true\">\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n              {{ assign()?.email ?? '--' }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i>\n              {{ assign()?.phone ?? '--' }}\n            </p>\n          </div>\n        </p-popover>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('UPLOAD') {\n    @if (upload()?.fileName) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ upload()?.fileName }}\n        @if (upload()?.size) {\n          <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('UPLOAD_DRAG_DROP') {\n    @if (upload()?.fileName) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ upload()?.fileName }}\n        @if (upload()?.size) {\n          <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SS_OPTION') {\n    @if (ssLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ ssLabel() | translate }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SS_OPTION_OBJECT_BASED') {\n    @if (ssLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ ssLabel() | translate }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('MS_OPTION') {\n    @if (msLabels().length) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        @for (label of msLabels(); track label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n  @case ('PASSWORD') {\n    @if (displayText()) {\n      <input\n        pInputText\n        type=\"password\"\n        class=\"w-full p-inputtext\"\n        [disabled]=\"true\"\n        [value]=\"displayText() ?? ''\"\n        autocomplete=\"off\"\n        aria-label=\"password\"\n      />\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @default {\n    @if (displayText()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ displayText() | stripHtmlSafe }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n}\n\n<ng-template #fallBack>\n  <div class=\"font-semibold text-500 mt-2 mb-2\">--</div>\n</ng-template>", 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 .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlSafePipe, name: "stripHtmlSafe" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputV2Component, decorators: [{
             type: Component,
@@ -9070,7 +9078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         PopoverModule,
                         StripHtmlSafePipe,
                         FileSizePipe,
-                    ], template: "@switch (type) {\n\n  @case ('TEXT_EDITOR') {\n    @if (displayText()) {\n      <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('TEXT_AREA') {\n    @if (displayText()) {\n      <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n        {{ displayText() | stripHtmlSafe }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SWITCH') {\n    @if (bool() !== null) {\n      <div class=\"mt-2 mb-2 font-semibold text-500\">\n        {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('CHECKBOX') {\n    @if (bool() !== null) {\n      <div class=\"mt-2 mb-2 font-semibold text-500\">\n        {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('DATE') {\n    @if (dateValue()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ dateValue() | date }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('START_DUE_DATE') {\n    @if (startDue()) {\n      <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n        <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n        <div class=\"flex align-items-center p-2\">\n          <i class=\"pi pi-arrow-right text-sm\"></i>\n        </div>\n        <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('ASSIGN') {\n    @if (assign()?.name) {\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n                {{ assign()?.name }}\n              </p>\n              <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n                {{ assign()?.function ?? '--' }}\n              </p>\n            </div>\n          </div>\n        </p-button>\n\n        <p-popover #op [dismissable]=\"true\">\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n              {{ assign()?.email ?? '--' }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i>\n              {{ assign()?.phone ?? '--' }}\n            </p>\n          </div>\n        </p-popover>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('UPLOAD') {\n    @if (upload()?.fileName) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ upload()?.fileName }}\n        @if (upload()?.size) {\n          <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('UPLOAD_DRAG_DROP') {\n    @if (upload()?.fileName) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ upload()?.fileName }}\n        @if (upload()?.size) {\n          <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SS_OPTION') {\n    @if (ssLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ ssLabel() | translate }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SS_OPTION_OBJECT_BASED') {\n    @if (ssLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ ssLabel() | translate }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('MS_OPTION') {\n    @if (msLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2 white-space-nowrap overflow-hidden\">\n        {{ msLabel() }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n  @case ('PASSWORD') {\n    @if (displayText()) {\n      <input\n        pInputText\n        type=\"password\"\n        class=\"w-full p-inputtext\"\n        [disabled]=\"true\"\n        [value]=\"displayText() ?? ''\"\n        autocomplete=\"off\"\n        aria-label=\"password\"\n      />\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @default {\n    @if (displayText()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ displayText() | stripHtmlSafe }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n}\n\n<ng-template #fallBack>\n  <div class=\"font-semibold text-500 mt-2 mb-2\">--</div>\n</ng-template>", 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 .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"] }]
+                    ], template: "@switch (type) {\n\n  @case ('TEXT_EDITOR') {\n    @if (displayText()) {\n      <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('TEXT_AREA') {\n    @if (displayText()) {\n      <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n        {{ displayText() | stripHtmlSafe }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SWITCH') {\n    @if (bool() !== null) {\n      <div class=\"mt-2 mb-2 font-semibold text-500\">\n        {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('CHECKBOX') {\n    @if (bool() !== null) {\n      <div class=\"mt-2 mb-2 font-semibold text-500\">\n        {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('DATE') {\n    @if (dateValue()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ dateValue() | date }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('START_DUE_DATE') {\n    @if (startDue()) {\n      <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n        <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n        <div class=\"flex align-items-center p-2\">\n          <i class=\"pi pi-arrow-right text-sm\"></i>\n        </div>\n        <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('ASSIGN') {\n    @if (assign()?.name) {\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n                {{ assign()?.name }}\n              </p>\n              <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n                {{ assign()?.function ?? '--' }}\n              </p>\n            </div>\n          </div>\n        </p-button>\n\n        <p-popover #op [dismissable]=\"true\">\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n              {{ assign()?.email ?? '--' }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i>\n              {{ assign()?.phone ?? '--' }}\n            </p>\n          </div>\n        </p-popover>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('UPLOAD') {\n    @if (upload()?.fileName) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ upload()?.fileName }}\n        @if (upload()?.size) {\n          <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('UPLOAD_DRAG_DROP') {\n    @if (upload()?.fileName) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ upload()?.fileName }}\n        @if (upload()?.size) {\n          <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SS_OPTION') {\n    @if (ssLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ ssLabel() | translate }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('SS_OPTION_OBJECT_BASED') {\n    @if (ssLabel()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ ssLabel() | translate }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @case ('MS_OPTION') {\n    @if (msLabels().length) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        @for (label of msLabels(); track label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n  @case ('PASSWORD') {\n    @if (displayText()) {\n      <input\n        pInputText\n        type=\"password\"\n        class=\"w-full p-inputtext\"\n        [disabled]=\"true\"\n        [value]=\"displayText() ?? ''\"\n        autocomplete=\"off\"\n        aria-label=\"password\"\n      />\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n\n  @default {\n    @if (displayText()) {\n      <div class=\"font-semibold text-500 mt-2 mb-2\">\n        {{ displayText() | stripHtmlSafe }}\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n    }\n  }\n}\n\n<ng-template #fallBack>\n  <div class=\"font-semibold text-500 mt-2 mb-2\">--</div>\n</ng-template>", 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 .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"] }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10216,8 +10224,36 @@ class MetaFormFieldV2Component {
         ctrl.markAsTouched();
         this.manualTick.update((v) => v + 1);
     }
+    /**
+     * Re-anchor the (body-appended) datepicker overlay to its input in viewport
+     * space. PrimeNG positions the body overlay with the page scroll added, so on
+     * a scrolled page — e.g. a modal opened after scrolling down — the panel drops
+     * by roughly the scroll amount. Pinning it `fixed` at the input's viewport
+     * rect keeps it correct regardless of scroll, and flips it up when there is
+     * not enough room below.
+     */
+    onDateShow() {
+        if (typeof document === 'undefined')
+            return;
+        requestAnimationFrame(() => {
+            const input = document.getElementById(this.key());
+            const panel = document.querySelector('.p-datepicker-panel');
+            if (!input || !panel)
+                return;
+            const r = input.getBoundingClientRect();
+            const gap = 2;
+            const panelHeight = panel.offsetHeight;
+            const spaceBelow = window.innerHeight - r.bottom;
+            panel.style.position = 'fixed';
+            panel.style.left = `${Math.round(r.left)}px`;
+            panel.style.top =
+                spaceBelow >= panelHeight || spaceBelow >= r.top
+                    ? `${Math.round(r.bottom + gap)}px`
+                    : `${Math.round(Math.max(gap, r.top - panelHeight - gap))}px`;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, disableForm: { classPropertyName: "disableForm", publicName: "disableForm", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\n      <label class=\"meta-label\" [attr.for]=\"key()\">\n        {{ userFriendlyMessage()! | translate }}\n        @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n      </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field()\" [form]=\"form()\"></phoenix-read-only-input-v2>\n      } @else {\n        @switch (type()) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.URL) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key()\" [formControlName]=\"key()\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key()\" [formControlName]=\"key()\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n          <p-datepicker\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\n          ></p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key()\"\n          [showClear]=\"true\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" display=\"chip\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\" [mandatory]=\"field().mandatory ?? false\"></phoenix-meta-timeperiod-v2>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key()\"\n          [attr.data-cy]=\"'start-due-' + key()\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key()\"\n          [options]=\"(field().configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key()\"\n          [items]=\"(field().configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field().configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key()\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key()\" [formControlName]=\"key()\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\">\n        }\n      }\n\n      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- V2 validation is always a calm gray note (never a red error). TIMEPERIOD\n         renders its own note (format guidance while typing), so skip it here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\n    <small class=\"block mt-1\" style=\"color: var(--p-text-muted-color, #6b7280)\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, disableForm: { classPropertyName: "disableForm", publicName: "disableForm", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\n      <label class=\"meta-label\" [attr.for]=\"key()\">\n        {{ userFriendlyMessage()! | translate }}\n        @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n      </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field()\" [form]=\"form()\"></phoenix-read-only-input-v2>\n      } @else {\n        @switch (type()) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.URL) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key()\" [formControlName]=\"key()\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key()\" [formControlName]=\"key()\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n          <p-datepicker\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onShow)=\"onDateShow()\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\n          ></p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key()\"\n          [showClear]=\"true\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" display=\"chip\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\" [mandatory]=\"field().mandatory ?? false\"></phoenix-meta-timeperiod-v2>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key()\"\n          [attr.data-cy]=\"'start-due-' + key()\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key()\"\n          [options]=\"(field().configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key()\"\n          [items]=\"(field().configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field().configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key()\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key()\" [formControlName]=\"key()\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\">\n        }\n      }\n\n      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- V2 validation is always a calm gray note (never a red error). TIMEPERIOD\n         renders its own note (format guidance while typing), so skip it here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\n    <small class=\"block mt-1\" style=\"color: var(--p-text-muted-color, #6b7280)\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
                 // PrimeNG 20 base inputs
                 InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: 
                 // Advanced / custom Phoenix fields
@@ -10255,7 +10291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaUploadComponentDragDrop,
                         // Read-only renderer used when page or field is in read-only mode
                         ReadOnlyInputV2Component,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\n      <label class=\"meta-label\" [attr.for]=\"key()\">\n        {{ userFriendlyMessage()! | translate }}\n        @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n      </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field()\" [form]=\"form()\"></phoenix-read-only-input-v2>\n      } @else {\n        @switch (type()) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.URL) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key()\" [formControlName]=\"key()\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key()\" [formControlName]=\"key()\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n          <p-datepicker\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\n          ></p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key()\"\n          [showClear]=\"true\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" display=\"chip\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\" [mandatory]=\"field().mandatory ?? false\"></phoenix-meta-timeperiod-v2>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key()\"\n          [attr.data-cy]=\"'start-due-' + key()\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key()\"\n          [options]=\"(field().configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key()\"\n          [items]=\"(field().configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field().configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key()\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key()\" [formControlName]=\"key()\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\">\n        }\n      }\n\n      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- V2 validation is always a calm gray note (never a red error). TIMEPERIOD\n         renders its own note (format guidance while typing), so skip it here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\n    <small class=\"block mt-1\" style=\"color: var(--p-text-muted-color, #6b7280)\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\n      <label class=\"meta-label\" [attr.for]=\"key()\">\n        {{ userFriendlyMessage()! | translate }}\n        @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n      </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field()\" [form]=\"form()\"></phoenix-read-only-input-v2>\n      } @else {\n        @switch (type()) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.URL) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key()\" [formControlName]=\"key()\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key()\" [formControlName]=\"key()\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n          <p-datepicker\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onShow)=\"onDateShow()\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\n          ></p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key()\"\n          [showClear]=\"true\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" display=\"chip\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\" [mandatory]=\"field().mandatory ?? false\"></phoenix-meta-timeperiod-v2>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key()\"\n          [attr.data-cy]=\"'start-due-' + key()\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key()\"\n          [options]=\"(field().configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key()\"\n          [items]=\"(field().configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field().configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key()\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key()\" [formControlName]=\"key()\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\">\n        }\n      }\n\n      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- V2 validation is always a calm gray note (never a red error). TIMEPERIOD\n         renders its own note (format guidance while typing), so skip it here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\n    <small class=\"block mt-1\" style=\"color: var(--p-text-muted-color, #6b7280)\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], disableForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableForm", required: false }] }] } });
 
 /**