@fuentis/phoenix-ui 0.0.9-alpha.576 → 0.0.9-alpha.578

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -4524,8 +4524,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class MetaCalendarComponent extends BaseMetaField {
+    onModelChange(val) {
+        if (!val) {
+            this.onChanged(null);
+            return;
+        }
+        const showTime = !!this.control?.configuration?.showTime;
+        if (!showTime) {
+            const normalized = new Date(val.getFullYear(), val.getMonth(), val.getDate(), 12, 0, 0, 0);
+            this.value = normalized;
+            this.parentForm?.controls?.[this.control.configuration.key]?.setValue(normalized, {
+                emitEvent: false,
+            });
+            this.onChanged(normalized);
+            return;
+        }
+        this.onChanged(val);
+    }
     onDateClear() {
-        this.parentForm.controls[this.control.configuration.key].setValue(null);
+        this.parentForm.controls[this.control.configuration.key].setValue(null, { emitEvent: false });
+        this.value = null;
         this.onChanged(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -4542,7 +4560,7 @@ class MetaCalendarComponent extends BaseMetaField {
       <p-datepicker
         [attr.data-cy]="'calendar-' + control?.id"
         [(ngModel)]="value"
-        (ngModelChange)="onChanged($event)"
+        (ngModelChange)="onModelChange($event)"
         [style]="{ width: '100%' }"
         [disabled]="disable"
         [readonlyInput]="true"
@@ -4575,7 +4593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <p-datepicker
         [attr.data-cy]="'calendar-' + control?.id"
         [(ngModel)]="value"
-        (ngModelChange)="onChanged($event)"
+        (ngModelChange)="onModelChange($event)"
         [style]="{ width: '100%' }"
         [disabled]="disable"
         [readonlyInput]="true"
@@ -5731,43 +5749,48 @@ class MetaStartDueDateComponent {
     parentForm;
     ctrl;
     dr = inject(DestroyRef);
-    startDate;
-    endDate;
-    onChanged;
-    onTouched;
-    constructor() { }
+    startDate = null;
+    endDate = null;
+    onChanged = () => { };
+    onTouched = () => { };
     ngOnInit() {
-        this.ctrl = this.parentForm.get(this.control.configuration.key);
         this.ctrl = this.parentForm.get(this.control.configuration.key);
         if (this.control.mandatory)
-            this.ctrl.setValidators(this.ctrl.validator);
+            this.ctrl?.setValidators(this.ctrl?.validator);
         this.parentForm
             .get(this.control.configuration.key)
             ?.valueChanges.pipe(takeUntilDestroyed(this.dr))
-            .subscribe((r) => {
-            this.validateDates();
-        });
+            .subscribe(() => this.validateDates());
         this.validateDates();
     }
+    normalizeDateOnly(v) {
+        if (!v)
+            return null;
+        const d = v instanceof Date ? v : new Date(v);
+        if (isNaN(d.getTime()))
+            return null;
+        return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
+    }
     writeValue(obj) {
         if (obj) {
-            this.startDate = obj.startDate;
-            this.endDate = obj.endDate;
+            this.startDate = this.normalizeDateOnly(obj.startDate);
+            this.endDate = this.normalizeDateOnly(obj.endDate);
         }
         else {
             this.startDate = null;
             this.endDate = null;
         }
+        this.validateDates();
     }
     // Handle start date selection
     onStartDateSelect(event) {
-        this.startDate = event;
+        this.startDate = this.normalizeDateOnly(event);
         this.onChanged({ startDate: this.startDate, endDate: this.endDate });
         this.validateDates();
     }
     // Handle end date selection
     onEndDateSelect(event) {
-        this.endDate = event;
+        this.endDate = this.normalizeDateOnly(event);
         this.onChanged({ startDate: this.startDate, endDate: this.endDate });
         this.validateDates();
     }
@@ -5784,24 +5807,24 @@ class MetaStartDueDateComponent {
         this.validateDates();
     }
     validateDates() {
-        //Both dates are mandatory
+        const c = this.parentForm.get(this.control.configuration.key);
+        if (!c)
+            return;
+        // clear previous errors
+        c.setErrors(null);
+        // Both dates are mandatory
         if (this.control.mandatory && (!this.startDate || !this.endDate)) {
-            this.parentForm
-                .get(this.control.configuration.key)
-                ?.setErrors({ required: true });
-        }
-        else {
-            this.parentForm.get(this.control.configuration.key)?.setErrors(null);
+            c.setErrors({ required: true });
+            return;
         }
-        // End date must be after start date
-        if (this.startDate &&
-            this.endDate &&
-            this.startDate.setHours(0, 0, 0, 0) > this.endDate.setHours(0, 0, 0, 0)) {
-            this.parentForm
-                .get(this.control.configuration.key)
-                ?.setErrors({ dueDate: true });
+        if (this.startDate && this.endDate) {
+            const s = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate(), 12, 0, 0, 0).getTime();
+            const e = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate(), 12, 0, 0, 0).getTime();
+            if (s > e) {
+                c.setErrors({ dueDate: true });
+                return;
+            }
         }
-        //TBD: Scenario if only one date is mandatory
     }
     registerOnChange(fn) {
         this.onChanged = fn;
@@ -5916,7 +5939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: true,
                         },
                     ] }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
+        }], propDecorators: { control: [{
                 type: Input
             }], parentForm: [{
                 type: Input
@@ -7620,6 +7643,7 @@ var StatusColType;
     StatusColType["PERSON"] = "PERSON";
     StatusColType["LINK"] = "LINK";
     StatusColType["DATE"] = "DATE";
+    StatusColType["DATE_ONLY"] = "DATE_ONLY";
     StatusColType["LIST"] = "LIST";
     StatusColType["COUNTRY"] = "COUNTRY";
 })(StatusColType || (StatusColType = {}));
@@ -7654,7 +7678,7 @@ class StatusAttributeDisplayComponent {
         return (attr?.value?.charAt(0) || '-').toUpperCase();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate)\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n      <i\n        [attr.data-cy]=\"'status-togg-button-item'\"\n        *ngIf=\"attr?.tooltip?.length\"\n        class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1\"\n        (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\"\n      >\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div\n      *ngIf=\"attr?.value; else empty\"\n      [ngSwitch]=\"attr.type\"\n      style=\"white-space: nowrap\"\n    >\n      <!-- STRING -->\n      <ng-container *ngSwitchCase=\"'STRING'\">\n        <!-- If URL exist, render as link -->\n        <a\n          *ngIf=\"attr.url; else plainText\"\n          [href]=\"attr.url\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          class=\"text-blue-500 underline\"\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength : 20 }}\n          <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n        </a>\n        <!-- Pnly text if url doesn't exist -->\n        <ng-template #plainText>\n          <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n            {{ attr.value | textLength : 20 }}\n          </span>\n        </ng-template>\n      </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        <i class=\"pi pi-calendar text-blue-900\"></i>\n        {{\n          attr.value\n            ? (attr.value | date : attr.dateFormat ?? dateFormat)\n            : \"--\"\n        }}\n      </span>\n\n      <!-- LINK -->\n\n      <a\n        *ngSwitchCase=\"'LINK'\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n      >\n        {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n      </a>\n\n      <!-- PERSON -->\n      <div\n        class=\"person-wrap flex align-items-center gap-2\"\n        *ngSwitchCase=\"'PERSON'\"\n      >\n        <div class=\"person-avatar\">\n          {{ getPersonInitial(attr) }}\n        </div>\n\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"getPersonTooltip(attr)\"\n        >\n          {{ getPersonDisplayName(attr) }}\n        </div>\n      </div>\n\n      <!-- COUNTRY -->\n      <span *ngSwitchCase=\"'COUNTRY'\">\n        <span class=\"flex align-items-center gap-2\">\n          <img\n            src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n            [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n            style=\"width: 22px\"\n          />\n          <span\n            [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n          >\n            {{ attr.value?.name || attr.value?.code || \"--\" }}\n          </span>\n        </span>\n      </span>\n\n      <!-- LIST -->\n      <ul\n        *ngSwitchCase=\"'LIST'\"\n        class=\"list overflow-x-hidden\"\n        style=\"margin-top: 0.25rem\"\n      >\n        <li\n          *ngFor=\"let item of attr.value\"\n          [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\"\n          (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n        >\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || \"--\" }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div\n    style=\"\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      column-gap: 1rem;\n      row-gap: 0.5rem;\n      align-items: start;\n      width: 100%;\n    \"\n  >\n    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a\n                *ngIf=\"item.value; else empty\"\n                [href]=\"getFullUrl(item.value)\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"text-blue-500 underline\"\n              >\n                {{ item.label || \"Open\" }}\n              </a>\n            </ng-container>\n\n            <!-- STRING type: renders text with truncation and tooltip if too long -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n              <div\n                *ngIf=\"item.value; else empty\"\n                class=\"text-sm\"\n                style=\"\n                  white-space: normal;\n                  word-break: break-word;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n            </ng-container>\n\n            <!-- DATE type: formatted date or fallback -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n              <span *ngIf=\"item.value; else empty\">\n                {{ item.value | date : dateFormat }}\n              </span>\n            </ng-container>\n\n            <!-- PERSON type: shows initial avatar and name if value exists -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n              <ng-container *ngIf=\"item.value; else empty\">\n                <span class=\"person-wrap flex items-center gap-1 truncate\">\n                  <div\n                    class=\"person-avatar small\"\n                    style=\"font-size: 0.875rem; line-height: 1\"\n                  >\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              </ng-container>\n            </ng-container>\n\n            <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"item.value; else empty\">\n                <div class=\"flex gap-2\">\n                  <span> {{ item.value }} </span>\n                  <phoenix-tag\n                    [customColor]=\"item.value2 || ''\"\n                    [content]=\"item.value1 || ''\"\n                  >\n                  </phoenix-tag>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n  <ng-container *ngFor=\"let item of attr?.tooltip\">\n    <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n      <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n        <div>\n          <!-- Label -->\n          <div\n            class=\"font-sm text-600 truncate mb-1\"\n            [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n          >\n            {{ item.label }}\n          </div>\n          <!-- Avatar and person name/date -->\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n            <div>\n              <div\n                class=\"text-blue-800 font-sm\"\n                style=\"\n                  word-break: break-word;\n                  white-space: normal;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n              <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate)\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n\n      @if (attr?.tooltip?.length) {\n        <i\n          [attr.data-cy]=\"'status-togg-button-item'\"\n          class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n          style=\"font-size: 0.875rem; line-height: 1\"\n          (mouseenter)=\"popover.toggle($event)\"\n          (mouseleave)=\"popover.toggle($event)\"\n        ></i>\n      }\n    </div>\n\n    <!-- VALUE -->\n    @if (attr?.value) {\n      <!-- removed [ngSwitch]=\"attr.type\" because @switch handles it -->\n      <div style=\"white-space: nowrap\">\n        @switch (attr.type) {\n\n          @case ('STRING') {\n            @if (attr.url) {\n              <a\n                [href]=\"attr.url\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"text-blue-500 underline\"\n                [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n              >\n                {{ attr.value | textLength : 20 }}\n                <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n              </a>\n            } @else {\n              <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n                {{ attr.value | textLength : 20 }}\n              </span>\n            }\n          }\n\n          @case ('DATE') {\n            <span>\n              <i class=\"pi pi-calendar text-blue-900\"></i>\n              {{\n                attr.value\n                  ? (attr.value | date : attr.dateFormat ?? dateFormat)\n                  : \"--\"\n              }}\n            </span>\n          }\n\n          @case ('DATE_ONLY') {\n            <span>\n              <i class=\"pi pi-calendar text-blue-900\"></i>\n              {{\n                attr.value\n                  ? (attr.value | date : 'dd.MM.yyyy')\n                  : \"--\"\n              }}\n            </span>\n          }\n\n          @case ('LINK') {\n            <a\n              [href]=\"attr.url\"\n              target=\"_blank\"\n              rel=\"noopener\"\n              class=\"text-blue-500 underline\"\n            >\n              {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n            </a>\n          }\n\n          @case ('PERSON') {\n            <div class=\"person-wrap flex align-items-center gap-2\">\n              <div class=\"person-avatar\">\n                {{ getPersonInitial(attr) }}\n              </div>\n\n              <div\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n                [pTooltip]=\"getPersonTooltip(attr)\"\n              >\n                {{ getPersonDisplayName(attr) }}\n              </div>\n            </div>\n          }\n\n          @case ('COUNTRY') {\n            <span>\n              <span class=\"flex align-items-center gap-2\">\n                <img\n                  src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                  [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n                  style=\"width: 22px\"\n                />\n                <span\n                  [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n                >\n                  {{ attr.value?.name || attr.value?.code || \"--\" }}\n                </span>\n              </span>\n            </span>\n          }\n\n          @case ('LIST') {\n            <ul class=\"list overflow-x-hidden\" style=\"margin-top: 0.25rem\">\n              @for (item of attr.value; track $index) {\n                <li\n                  [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n                  class=\"white-space-nowrap mb-1 cursor-pointer\"\n                  (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n                >\n                  <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n                    {{ item.name | textLength : 20 }}\n                  </span>\n                  <i class=\"pi pi-link ml-1 text-sm\"></i>\n                </li>\n              }\n            </ul>\n          }\n\n          @default {\n            <span [style.color]=\"attr.color\" class=\"text-xl\">\n              {{ attr.value || \"--\" }}\n            </span>\n          }\n        }\n      </div>\n    } @else {\n      <span>--</span>\n    }\n  </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n  <div\n    style=\"\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      column-gap: 1rem;\n      row-gap: 0.5rem;\n      align-items: start;\n      width: 100%;\n    \"\n  >\n    @for (item of attr?.tooltip; track $index) {\n      @if (item.type !== statusTooltipType.DATE_PERSON) {\n        <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n        <div class=\"text-sm text-left break-words\">\n          @switch (item?.type || statusTooltipType.TAG) {\n\n            @case ('LINK') {\n              @if (item.value) {\n                <a\n                  [href]=\"getFullUrl(item.value)\"\n                  target=\"_blank\"\n                  rel=\"noopener\"\n                  class=\"text-blue-500 underline\"\n                >\n                  {{ item.label || \"Open\" }}\n                </a>\n              } @else {\n                <span>--</span>\n              }\n            }\n\n            @case (statusTooltipType.STRING) {\n              @if (item.value) {\n                <div\n                  class=\"text-sm\"\n                  style=\"\n                    white-space: normal;\n                    word-break: break-word;\n                    overflow-wrap: break-word;\n                  \"\n                >\n                  {{ item.value }}\n                </div>\n              } @else {\n                <span>--</span>\n              }\n            }\n\n            @case (statusTooltipType.DATE) {\n              @if (item.value) {\n                <span>{{ item.value | date : dateFormat }}</span>\n              } @else {\n                <span>--</span>\n              }\n            }\n\n            @case (statusTooltipType.PERSON) {\n              @if (item.value) {\n                <span class=\"person-wrap flex items-center gap-1 truncate\">\n                  <div\n                    class=\"person-avatar small\"\n                    style=\"font-size: 0.875rem; line-height: 1\"\n                  >\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              } @else {\n                <span>--</span>\n              }\n            }\n\n            @default {\n              @if (item.value) {\n                <div class=\"flex gap-2\">\n                  <span>{{ item.value }}</span>\n                  <phoenix-tag\n                    [customColor]=\"item.value2 || ''\"\n                    [content]=\"item.value1 || ''\"\n                  ></phoenix-tag>\n                </div>\n              } @else {\n                <span>--</span>\n              }\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n\n  @for (item of attr?.tooltip; track $index) {\n    @if (item.type === statusTooltipType.DATE_PERSON) {\n      @if (item.value) {\n        <div>\n          <div\n            class=\"font-sm text-600 truncate mb-1\"\n            [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n          >\n            {{ item.label }}\n          </div>\n\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n\n            <div>\n              <div\n                class=\"text-blue-800 font-sm\"\n                style=\"\n                  word-break: break-word;\n                  white-space: normal;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n              <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <div class=\"text-sm\">--</div>\n      }\n    }\n  }\n</p-popover>", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
             type: Component,
@@ -7666,7 +7690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TranslateModule,
                         AvatarModule,
                         TextLength,
-                    ], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate)\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n      <i\n        [attr.data-cy]=\"'status-togg-button-item'\"\n        *ngIf=\"attr?.tooltip?.length\"\n        class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1\"\n        (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\"\n      >\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div\n      *ngIf=\"attr?.value; else empty\"\n      [ngSwitch]=\"attr.type\"\n      style=\"white-space: nowrap\"\n    >\n      <!-- STRING -->\n      <ng-container *ngSwitchCase=\"'STRING'\">\n        <!-- If URL exist, render as link -->\n        <a\n          *ngIf=\"attr.url; else plainText\"\n          [href]=\"attr.url\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          class=\"text-blue-500 underline\"\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength : 20 }}\n          <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n        </a>\n        <!-- Pnly text if url doesn't exist -->\n        <ng-template #plainText>\n          <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n            {{ attr.value | textLength : 20 }}\n          </span>\n        </ng-template>\n      </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        <i class=\"pi pi-calendar text-blue-900\"></i>\n        {{\n          attr.value\n            ? (attr.value | date : attr.dateFormat ?? dateFormat)\n            : \"--\"\n        }}\n      </span>\n\n      <!-- LINK -->\n\n      <a\n        *ngSwitchCase=\"'LINK'\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n      >\n        {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n      </a>\n\n      <!-- PERSON -->\n      <div\n        class=\"person-wrap flex align-items-center gap-2\"\n        *ngSwitchCase=\"'PERSON'\"\n      >\n        <div class=\"person-avatar\">\n          {{ getPersonInitial(attr) }}\n        </div>\n\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"getPersonTooltip(attr)\"\n        >\n          {{ getPersonDisplayName(attr) }}\n        </div>\n      </div>\n\n      <!-- COUNTRY -->\n      <span *ngSwitchCase=\"'COUNTRY'\">\n        <span class=\"flex align-items-center gap-2\">\n          <img\n            src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n            [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n            style=\"width: 22px\"\n          />\n          <span\n            [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n          >\n            {{ attr.value?.name || attr.value?.code || \"--\" }}\n          </span>\n        </span>\n      </span>\n\n      <!-- LIST -->\n      <ul\n        *ngSwitchCase=\"'LIST'\"\n        class=\"list overflow-x-hidden\"\n        style=\"margin-top: 0.25rem\"\n      >\n        <li\n          *ngFor=\"let item of attr.value\"\n          [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\"\n          (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n        >\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || \"--\" }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div\n    style=\"\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      column-gap: 1rem;\n      row-gap: 0.5rem;\n      align-items: start;\n      width: 100%;\n    \"\n  >\n    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a\n                *ngIf=\"item.value; else empty\"\n                [href]=\"getFullUrl(item.value)\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"text-blue-500 underline\"\n              >\n                {{ item.label || \"Open\" }}\n              </a>\n            </ng-container>\n\n            <!-- STRING type: renders text with truncation and tooltip if too long -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n              <div\n                *ngIf=\"item.value; else empty\"\n                class=\"text-sm\"\n                style=\"\n                  white-space: normal;\n                  word-break: break-word;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n            </ng-container>\n\n            <!-- DATE type: formatted date or fallback -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n              <span *ngIf=\"item.value; else empty\">\n                {{ item.value | date : dateFormat }}\n              </span>\n            </ng-container>\n\n            <!-- PERSON type: shows initial avatar and name if value exists -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n              <ng-container *ngIf=\"item.value; else empty\">\n                <span class=\"person-wrap flex items-center gap-1 truncate\">\n                  <div\n                    class=\"person-avatar small\"\n                    style=\"font-size: 0.875rem; line-height: 1\"\n                  >\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              </ng-container>\n            </ng-container>\n\n            <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"item.value; else empty\">\n                <div class=\"flex gap-2\">\n                  <span> {{ item.value }} </span>\n                  <phoenix-tag\n                    [customColor]=\"item.value2 || ''\"\n                    [content]=\"item.value1 || ''\"\n                  >\n                  </phoenix-tag>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n  <ng-container *ngFor=\"let item of attr?.tooltip\">\n    <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n      <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n        <div>\n          <!-- Label -->\n          <div\n            class=\"font-sm text-600 truncate mb-1\"\n            [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n          >\n            {{ item.label }}\n          </div>\n          <!-- Avatar and person name/date -->\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n            <div>\n              <div\n                class=\"text-blue-800 font-sm\"\n                style=\"\n                  word-break: break-word;\n                  white-space: normal;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n              <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
+                    ], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate)\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n\n      @if (attr?.tooltip?.length) {\n        <i\n          [attr.data-cy]=\"'status-togg-button-item'\"\n          class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n          style=\"font-size: 0.875rem; line-height: 1\"\n          (mouseenter)=\"popover.toggle($event)\"\n          (mouseleave)=\"popover.toggle($event)\"\n        ></i>\n      }\n    </div>\n\n    <!-- VALUE -->\n    @if (attr?.value) {\n      <!-- removed [ngSwitch]=\"attr.type\" because @switch handles it -->\n      <div style=\"white-space: nowrap\">\n        @switch (attr.type) {\n\n          @case ('STRING') {\n            @if (attr.url) {\n              <a\n                [href]=\"attr.url\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"text-blue-500 underline\"\n                [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n              >\n                {{ attr.value | textLength : 20 }}\n                <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n              </a>\n            } @else {\n              <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n                {{ attr.value | textLength : 20 }}\n              </span>\n            }\n          }\n\n          @case ('DATE') {\n            <span>\n              <i class=\"pi pi-calendar text-blue-900\"></i>\n              {{\n                attr.value\n                  ? (attr.value | date : attr.dateFormat ?? dateFormat)\n                  : \"--\"\n              }}\n            </span>\n          }\n\n          @case ('DATE_ONLY') {\n            <span>\n              <i class=\"pi pi-calendar text-blue-900\"></i>\n              {{\n                attr.value\n                  ? (attr.value | date : 'dd.MM.yyyy')\n                  : \"--\"\n              }}\n            </span>\n          }\n\n          @case ('LINK') {\n            <a\n              [href]=\"attr.url\"\n              target=\"_blank\"\n              rel=\"noopener\"\n              class=\"text-blue-500 underline\"\n            >\n              {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n            </a>\n          }\n\n          @case ('PERSON') {\n            <div class=\"person-wrap flex align-items-center gap-2\">\n              <div class=\"person-avatar\">\n                {{ getPersonInitial(attr) }}\n              </div>\n\n              <div\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n                [pTooltip]=\"getPersonTooltip(attr)\"\n              >\n                {{ getPersonDisplayName(attr) }}\n              </div>\n            </div>\n          }\n\n          @case ('COUNTRY') {\n            <span>\n              <span class=\"flex align-items-center gap-2\">\n                <img\n                  src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                  [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n                  style=\"width: 22px\"\n                />\n                <span\n                  [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n                >\n                  {{ attr.value?.name || attr.value?.code || \"--\" }}\n                </span>\n              </span>\n            </span>\n          }\n\n          @case ('LIST') {\n            <ul class=\"list overflow-x-hidden\" style=\"margin-top: 0.25rem\">\n              @for (item of attr.value; track $index) {\n                <li\n                  [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n                  class=\"white-space-nowrap mb-1 cursor-pointer\"\n                  (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n                >\n                  <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n                    {{ item.name | textLength : 20 }}\n                  </span>\n                  <i class=\"pi pi-link ml-1 text-sm\"></i>\n                </li>\n              }\n            </ul>\n          }\n\n          @default {\n            <span [style.color]=\"attr.color\" class=\"text-xl\">\n              {{ attr.value || \"--\" }}\n            </span>\n          }\n        }\n      </div>\n    } @else {\n      <span>--</span>\n    }\n  </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n  <div\n    style=\"\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      column-gap: 1rem;\n      row-gap: 0.5rem;\n      align-items: start;\n      width: 100%;\n    \"\n  >\n    @for (item of attr?.tooltip; track $index) {\n      @if (item.type !== statusTooltipType.DATE_PERSON) {\n        <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n        <div class=\"text-sm text-left break-words\">\n          @switch (item?.type || statusTooltipType.TAG) {\n\n            @case ('LINK') {\n              @if (item.value) {\n                <a\n                  [href]=\"getFullUrl(item.value)\"\n                  target=\"_blank\"\n                  rel=\"noopener\"\n                  class=\"text-blue-500 underline\"\n                >\n                  {{ item.label || \"Open\" }}\n                </a>\n              } @else {\n                <span>--</span>\n              }\n            }\n\n            @case (statusTooltipType.STRING) {\n              @if (item.value) {\n                <div\n                  class=\"text-sm\"\n                  style=\"\n                    white-space: normal;\n                    word-break: break-word;\n                    overflow-wrap: break-word;\n                  \"\n                >\n                  {{ item.value }}\n                </div>\n              } @else {\n                <span>--</span>\n              }\n            }\n\n            @case (statusTooltipType.DATE) {\n              @if (item.value) {\n                <span>{{ item.value | date : dateFormat }}</span>\n              } @else {\n                <span>--</span>\n              }\n            }\n\n            @case (statusTooltipType.PERSON) {\n              @if (item.value) {\n                <span class=\"person-wrap flex items-center gap-1 truncate\">\n                  <div\n                    class=\"person-avatar small\"\n                    style=\"font-size: 0.875rem; line-height: 1\"\n                  >\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              } @else {\n                <span>--</span>\n              }\n            }\n\n            @default {\n              @if (item.value) {\n                <div class=\"flex gap-2\">\n                  <span>{{ item.value }}</span>\n                  <phoenix-tag\n                    [customColor]=\"item.value2 || ''\"\n                    [content]=\"item.value1 || ''\"\n                  ></phoenix-tag>\n                </div>\n              } @else {\n                <span>--</span>\n              }\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n\n  @for (item of attr?.tooltip; track $index) {\n    @if (item.type === statusTooltipType.DATE_PERSON) {\n      @if (item.value) {\n        <div>\n          <div\n            class=\"font-sm text-600 truncate mb-1\"\n            [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n          >\n            {{ item.label }}\n          </div>\n\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n\n            <div>\n              <div\n                class=\"text-blue-800 font-sm\"\n                style=\"\n                  word-break: break-word;\n                  white-space: normal;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n              <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <div class=\"text-sm\">--</div>\n      }\n    }\n  }\n</p-popover>", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
         }], propDecorators: { attr: [{
                 type: Input
             }], dateFormat: [{
@@ -8729,8 +8753,8 @@ class MetaStartDueDateV2Component {
      * NOTE: "YYYY-MM-DD" strings are parsed as local dates to avoid timezone day-shifts.
      */
     writeValue(v) {
-        this.startDate = this.parseToDate(v?.startDate ?? null);
-        this.endDate = this.parseToDate(v?.endDate ?? null);
+        this.startDate = this.normalizeDateOnly(this.parseToDate(v?.startDate ?? null));
+        this.endDate = this.normalizeDateOnly(this.parseToDate(v?.endDate ?? null));
         // OnPush: ensure UI reflects external value writes (patchValue/setValue)
         this.cdr.markForCheck();
     }
@@ -8770,7 +8794,7 @@ class MetaStartDueDateV2Component {
     onStartChange(d) {
         if (this.disabled)
             return;
-        this.startDate = d ?? null;
+        this.startDate = this.normalizeDateOnly(d ?? null);
         this.emitChange();
     }
     /**
@@ -8780,7 +8804,7 @@ class MetaStartDueDateV2Component {
     onEndChange(d) {
         if (this.disabled)
             return;
-        this.endDate = d ?? null;
+        this.endDate = this.normalizeDateOnly(d ?? null);
         this.emitChange();
     }
     /**
@@ -8819,13 +8843,20 @@ class MetaStartDueDateV2Component {
             const y = Number(m[1]);
             const mo = Number(m[2]) - 1;
             const d = Number(m[3]);
-            const local = new Date(y, mo, d);
+            const local = new Date(y, mo, d, 12, 0, 0, 0);
             return isNaN(local.getTime()) ? null : local;
         }
         // ISO / other -> fallback
         const dt = new Date(s);
         return isNaN(dt.getTime()) ? null : dt;
     }
+    normalizeDateOnly(d) {
+        if (!d)
+            return null;
+        if (isNaN(d.getTime()))
+            return null;
+        return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaStartDueDateV2Component, isStandalone: true, selector: "phoenix-meta-start-due-date-v2", inputs: { dataCy: "dataCy", disable: "disable" }, providers: [
             {
@@ -9597,8 +9628,31 @@ class MetaFormFieldV2Component {
     isCheckbox() {
         return this.type === this.MetaFieldType.CHECKBOX;
     }
+    onDateSelected(val) {
+        const ctrl = this.ctrl();
+        if (!ctrl)
+            return;
+        const d = val instanceof Date ? val : (val ? new Date(val) : null);
+        if (!d || isNaN(d.getTime()))
+            return;
+        const normalized = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
+        // set without re-triggering loops
+        ctrl.setValue(normalized, { emitEvent: false });
+        ctrl.markAsDirty();
+        ctrl.markAsTouched();
+        this.cdr.markForCheck();
+    }
+    onDateCleared() {
+        const ctrl = this.ctrl();
+        if (!ctrl)
+            return;
+        ctrl.setValue(null, { emitEvent: false });
+        ctrl.markAsDirty();
+        ctrl.markAsTouched();
+        this.cdr.markForCheck();
+    }
     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: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!isCheckbox()\"\n    [class.align-items-center]=\"isCheckbox()\"\n    [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\"\n  >\n\n    @if (userFriendlyMessage() && !isCheckbox()) {\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 [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\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\">\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\">\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\">\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 [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\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    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.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: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!isCheckbox()\"\n    [class.align-items-center]=\"isCheckbox()\"\n    [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\"\n  >\n\n    @if (userFriendlyMessage() && !isCheckbox()) {\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\">\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\">\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\">\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 [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\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    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.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$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$8.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$6.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$3.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$5.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
@@ -9639,7 +9693,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()\"\n    [class.align-items-center]=\"isCheckbox()\"\n    [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\"\n  >\n\n    @if (userFriendlyMessage() && !isCheckbox()) {\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 [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\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\">\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\">\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\">\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 [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\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    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", 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()\"\n    [class.align-items-center]=\"isCheckbox()\"\n    [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\"\n  >\n\n    @if (userFriendlyMessage() && !isCheckbox()) {\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\">\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\">\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\">\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 [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\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    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", 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: Input,
                 args: [{ required: true }]