@fuentis/phoenix-ui 0.0.9-alpha.665 → 0.0.9-alpha.667

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1552,7 +1552,7 @@ class ContexObjectComponent {
         return '/' + path.replace(/^\/+/, '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContexObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config", dateFormat: "dateFormat", dateOnlyFormat: "dateOnlyFormat" }, viewQueries: [{ propertyName: "tagPopovers", predicate: ["tagPop"], descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center gap-2 w-full\">\n  @if (ctxBackRoute?.length) {\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-arrow-left\"\n    class=\"p-button-text ml-1\"\n    (click)=\"onBackClick()\"\n  ></button>\n  } @if (ctxType) {\n  <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n  } @if (ctxName) {\n  <span\n    class=\"text-xl font-semibold text-primary\"\n    [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n  >\n    {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n  </span>\n  } @if (ctxTitle) {\n  <span\n    class=\"text-base text-gray-500\"\n    [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n  >\n    {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n  </span>\n  } @if (ctxTags.length) {\n  <div class=\"flex align-items-center gap-2 ml-3\">\n    @for (item of displayTags; track $index) {\n    <div class=\"tag-group-wrapper\">\n      <div\n        class=\"tag-popover-trigger\"\n        (mouseenter)=\"onTagPopoverEnter($event, tagPop)\"\n        (mouseleave)=\"onTagPopoverLeave($event, tagPop)\"\n      >\n        <p-tag\n          [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n          [severity]=\"$any(item.tag.variant || 'info')\"\n          [icon]=\"item.tag.icon\"\n          [style]=\"{\n                'font-size': '11px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n              }\"\n          [ngStyle]=\"\n                item.tag.color\n                  ? {\n                      'background-color': item.tag.color + '36',\n                      color: item.tag.color,\n                    }\n                  : null\n              \"\n        ></p-tag>\n      </div>\n      <p-popover #tagPop [style]=\"{ maxWidth: '400px' }\">\n        @if (item.remainingCount === 0) {\n          <div>\n            <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n            <span>{{ item.tag.text }} </span>\n          </div>\n        } @else {\n          @if (item.tag.label) {\n            <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n          }\n          <div class=\"flex flex-wrap gap-1\">\n            @for (gt of item.groupedTags; track $index) {\n              <p-tag\n                [value]=\"gt.text\"\n                [severity]=\"$any(gt.variant || 'info')\"\n                [icon]=\"gt.icon\"\n                [style]=\"{\n                      'font-size': '11px',\n                      padding: '3px 8px',\n                      width: 'fit-content',\n                    }\"\n                [ngStyle]=\"\n                      gt.color\n                        ? {\n                            'background-color': gt.color + '36',\n                            color: gt.color,\n                          }\n                        : null\n                    \"\n              ></p-tag>\n            }\n          </div>\n        }\n      </p-popover>\n    </div>\n    } @for (label of ctxLabels; track label.text) {\n    <span\n      [style]=\"{\n            'font-size': '11px',\n            padding: '3px 8px',\n            width: 'fit-content',\n          }\"\n    >\n      {{ label.text }}\n    </span>\n    }\n  </div>\n\n  }\n  <!-- Other Info items -->\n  <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n    <span\n      class=\"cursor-pointer ml-3\"\n      (mouseenter)=\"pop.toggle($event)\"\n      (mouseleave)=\"pop.toggle($event)\"\n    >\n      <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n      <span class=\"text-sm\">{{\n        attr.value | date : attr.dateFormat || dateOnlyFormat\n      }}</span>\n    </span>\n    <p-popover #pop [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\">\n                    {{ item.value1 | date : dateFormat }}\n                  </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  </ng-container>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-popover-trigger{display:inline-flex;cursor:pointer}.tag-group-wrapper .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.person-wrap{display:flex;align-items:center;padding:0}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config", dateFormat: "dateFormat", dateOnlyFormat: "dateOnlyFormat" }, viewQueries: [{ propertyName: "tagPopovers", predicate: ["tagPop"], descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center gap-2 w-full\">\n  @if (ctxBackRoute?.length) {\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-arrow-left\"\n    class=\"p-button-text ml-1\"\n    (click)=\"onBackClick()\"\n  ></button>\n  } @if (ctxType) {\n  <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n  } @if (ctxName) {\n  <span\n    class=\"text-xl font-semibold text-primary\"\n    [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n  >\n    {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n  </span>\n  } @if (ctxTitle) {\n  <span\n    class=\"text-base text-gray-500\"\n    [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n  >\n    {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n  </span>\n  } @if (ctxTags.length) {\n  <div class=\"flex align-items-center gap-2 ml-3\">\n    @for (item of displayTags; track $index) {\n    <div class=\"tag-group-wrapper\">\n      <div\n        class=\"tag-popover-trigger\"\n        (mouseenter)=\"onTagPopoverEnter($event, tagPop)\"\n        (mouseleave)=\"onTagPopoverLeave($event, tagPop)\"\n      >\n        <p-tag\n          [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n          [severity]=\"$any(item.tag.variant || 'info')\"\n          [icon]=\"item.tag.icon\"\n          [style]=\"{\n                'font-size': '11px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n              }\"\n          [ngStyle]=\"\n                item.tag.color\n                  ? {\n                      'background-color': item.tag.color + '36',\n                      color: item.tag.color,\n                    }\n                  : null\n              \"\n        ></p-tag>\n      </div>\n      <p-popover #tagPop [style]=\"{ maxWidth: '400px' }\">\n        @if (item.remainingCount === 0) {\n          <div>\n            <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n            <span>{{ item.tag.text }} </span>\n          </div>\n        } @else {\n          @if (item.tag.label) {\n            <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n          }\n          <div class=\"flex flex-wrap gap-1\">\n            @for (gt of item.groupedTags; track $index) {\n              <p-tag\n                [value]=\"gt.text\"\n                [severity]=\"$any(gt.variant || 'info')\"\n                [icon]=\"gt.icon\"\n                [style]=\"{\n                      'font-size': '11px',\n                      padding: '3px 8px',\n                      width: 'fit-content',\n                    }\"\n                [ngStyle]=\"\n                      gt.color\n                        ? {\n                            'background-color': gt.color + '36',\n                            color: gt.color,\n                          }\n                        : null\n                    \"\n              ></p-tag>\n            }\n          </div>\n        }\n      </p-popover>\n    </div>\n    } @for (label of ctxLabels; track label.text) {\n    <span\n      [style]=\"{\n            'font-size': '11px',\n            padding: '3px 8px',\n            width: 'fit-content',\n          }\"\n    >\n      {{ label.text }}\n    </span>\n    }\n  </div>\n\n  }\n  <!-- Other Info items -->\n  <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n    <span\n      class=\"cursor-pointer ml-3\"\n      (mouseenter)=\"pop.toggle($event)\"\n      (mouseleave)=\"pop.toggle($event)\"\n    >\n      <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n      <span class=\"text-sm\">{{\n        attr.value | date : attr.dateFormat || dateOnlyFormat\n      }}</span>\n    </span>\n    <p-popover #pop [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 (omitted for a label-less info line) -->\n            <div *ngIf=\"item.label\" class=\"text-sm text-600 text-left\">\n              {{ item.label }}:\n            </div>\n\n            <!-- Tooltip value rendering -->\n            <div\n              class=\"text-sm text-left break-words\"\n              [style.grid-column]=\"item.label ? null : '1 / -1'\"\n            >\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 ?? 0) > 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\">\n                    {{ item.value1 | date : dateFormat }}\n                  </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  </ng-container>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-popover-trigger{display:inline-flex;cursor:pointer}.tag-group-wrapper .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.person-wrap{display:flex;align-items:center;padding:0}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContexObjectComponent, decorators: [{
             type: Component,
@@ -1565,7 +1565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AvatarModule,
                         PopoverModule,
                         TagComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2 w-full\">\n  @if (ctxBackRoute?.length) {\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-arrow-left\"\n    class=\"p-button-text ml-1\"\n    (click)=\"onBackClick()\"\n  ></button>\n  } @if (ctxType) {\n  <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n  } @if (ctxName) {\n  <span\n    class=\"text-xl font-semibold text-primary\"\n    [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n  >\n    {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n  </span>\n  } @if (ctxTitle) {\n  <span\n    class=\"text-base text-gray-500\"\n    [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n  >\n    {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n  </span>\n  } @if (ctxTags.length) {\n  <div class=\"flex align-items-center gap-2 ml-3\">\n    @for (item of displayTags; track $index) {\n    <div class=\"tag-group-wrapper\">\n      <div\n        class=\"tag-popover-trigger\"\n        (mouseenter)=\"onTagPopoverEnter($event, tagPop)\"\n        (mouseleave)=\"onTagPopoverLeave($event, tagPop)\"\n      >\n        <p-tag\n          [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n          [severity]=\"$any(item.tag.variant || 'info')\"\n          [icon]=\"item.tag.icon\"\n          [style]=\"{\n                'font-size': '11px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n              }\"\n          [ngStyle]=\"\n                item.tag.color\n                  ? {\n                      'background-color': item.tag.color + '36',\n                      color: item.tag.color,\n                    }\n                  : null\n              \"\n        ></p-tag>\n      </div>\n      <p-popover #tagPop [style]=\"{ maxWidth: '400px' }\">\n        @if (item.remainingCount === 0) {\n          <div>\n            <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n            <span>{{ item.tag.text }} </span>\n          </div>\n        } @else {\n          @if (item.tag.label) {\n            <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n          }\n          <div class=\"flex flex-wrap gap-1\">\n            @for (gt of item.groupedTags; track $index) {\n              <p-tag\n                [value]=\"gt.text\"\n                [severity]=\"$any(gt.variant || 'info')\"\n                [icon]=\"gt.icon\"\n                [style]=\"{\n                      'font-size': '11px',\n                      padding: '3px 8px',\n                      width: 'fit-content',\n                    }\"\n                [ngStyle]=\"\n                      gt.color\n                        ? {\n                            'background-color': gt.color + '36',\n                            color: gt.color,\n                          }\n                        : null\n                    \"\n              ></p-tag>\n            }\n          </div>\n        }\n      </p-popover>\n    </div>\n    } @for (label of ctxLabels; track label.text) {\n    <span\n      [style]=\"{\n            'font-size': '11px',\n            padding: '3px 8px',\n            width: 'fit-content',\n          }\"\n    >\n      {{ label.text }}\n    </span>\n    }\n  </div>\n\n  }\n  <!-- Other Info items -->\n  <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n    <span\n      class=\"cursor-pointer ml-3\"\n      (mouseenter)=\"pop.toggle($event)\"\n      (mouseleave)=\"pop.toggle($event)\"\n    >\n      <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n      <span class=\"text-sm\">{{\n        attr.value | date : attr.dateFormat || dateOnlyFormat\n      }}</span>\n    </span>\n    <p-popover #pop [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\">\n                    {{ item.value1 | date : dateFormat }}\n                  </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  </ng-container>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-popover-trigger{display:inline-flex;cursor:pointer}.tag-group-wrapper .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.person-wrap{display:flex;align-items:center;padding:0}.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}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2 w-full\">\n  @if (ctxBackRoute?.length) {\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-arrow-left\"\n    class=\"p-button-text ml-1\"\n    (click)=\"onBackClick()\"\n  ></button>\n  } @if (ctxType) {\n  <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n  } @if (ctxName) {\n  <span\n    class=\"text-xl font-semibold text-primary\"\n    [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n  >\n    {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n  </span>\n  } @if (ctxTitle) {\n  <span\n    class=\"text-base text-gray-500\"\n    [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n  >\n    {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n  </span>\n  } @if (ctxTags.length) {\n  <div class=\"flex align-items-center gap-2 ml-3\">\n    @for (item of displayTags; track $index) {\n    <div class=\"tag-group-wrapper\">\n      <div\n        class=\"tag-popover-trigger\"\n        (mouseenter)=\"onTagPopoverEnter($event, tagPop)\"\n        (mouseleave)=\"onTagPopoverLeave($event, tagPop)\"\n      >\n        <p-tag\n          [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n          [severity]=\"$any(item.tag.variant || 'info')\"\n          [icon]=\"item.tag.icon\"\n          [style]=\"{\n                'font-size': '11px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n              }\"\n          [ngStyle]=\"\n                item.tag.color\n                  ? {\n                      'background-color': item.tag.color + '36',\n                      color: item.tag.color,\n                    }\n                  : null\n              \"\n        ></p-tag>\n      </div>\n      <p-popover #tagPop [style]=\"{ maxWidth: '400px' }\">\n        @if (item.remainingCount === 0) {\n          <div>\n            <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n            <span>{{ item.tag.text }} </span>\n          </div>\n        } @else {\n          @if (item.tag.label) {\n            <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n          }\n          <div class=\"flex flex-wrap gap-1\">\n            @for (gt of item.groupedTags; track $index) {\n              <p-tag\n                [value]=\"gt.text\"\n                [severity]=\"$any(gt.variant || 'info')\"\n                [icon]=\"gt.icon\"\n                [style]=\"{\n                      'font-size': '11px',\n                      padding: '3px 8px',\n                      width: 'fit-content',\n                    }\"\n                [ngStyle]=\"\n                      gt.color\n                        ? {\n                            'background-color': gt.color + '36',\n                            color: gt.color,\n                          }\n                        : null\n                    \"\n              ></p-tag>\n            }\n          </div>\n        }\n      </p-popover>\n    </div>\n    } @for (label of ctxLabels; track label.text) {\n    <span\n      [style]=\"{\n            'font-size': '11px',\n            padding: '3px 8px',\n            width: 'fit-content',\n          }\"\n    >\n      {{ label.text }}\n    </span>\n    }\n  </div>\n\n  }\n  <!-- Other Info items -->\n  <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n    <span\n      class=\"cursor-pointer ml-3\"\n      (mouseenter)=\"pop.toggle($event)\"\n      (mouseleave)=\"pop.toggle($event)\"\n    >\n      <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n      <span class=\"text-sm\">{{\n        attr.value | date : attr.dateFormat || dateOnlyFormat\n      }}</span>\n    </span>\n    <p-popover #pop [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 (omitted for a label-less info line) -->\n            <div *ngIf=\"item.label\" class=\"text-sm text-600 text-left\">\n              {{ item.label }}:\n            </div>\n\n            <!-- Tooltip value rendering -->\n            <div\n              class=\"text-sm text-left break-words\"\n              [style.grid-column]=\"item.label ? null : '1 / -1'\"\n            >\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 ?? 0) > 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\">\n                    {{ item.value1 | date : dateFormat }}\n                  </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  </ng-container>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-popover-trigger{display:inline-flex;cursor:pointer}.tag-group-wrapper .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.person-wrap{display:flex;align-items:center;padding:0}.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}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], dateFormat: [{
@@ -8428,7 +8428,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: "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          @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              {{ attr.value ? (attr.value | date: \"dd.MM.yyyy\") : \"--\" }}\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]=\"\n                    attr.value?.name?.length > 20 ? attr.value?.name : null\n                  \"\n                >\n                  {{ attr.value?.name || attr.value?.code || \"--\" }}\n                </span>\n              </span>\n            </span>\n          }\n\n          @case (\"COPY_TO_CLIPBOARD\") {\n            <div class=\"flex align-items-center gap-1\">\n              <i\n                class=\"pi pi-copy text-blue-900 cursor-pointer\"\n                (click)=\"copyToClipboard(attr?.value1,attr?.value2)\"\n              ></i>\n              <span>{{ attr.value || \"--\" }}</span>\n            </div>\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            @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.COPY_TO_CLIPBOARD) {\n              <div class=\"flex\">\n                <i\n                  class=\"pi pi-copy text-blue-900\"\n                  (click)=\"copyToClipboard(item?.value1)\"\n                ></i>\n                <span>\n                  {{ item?.value ? item.value : \"--\" }}\n                </span>\n              </div>\n            }\n\n            @case (statusTooltipType.DATE_ONLY) {\n              <span>\n                <i class=\"pi pi-calendar text-blue-900\"></i>\n                {{ item.value ? (item.value | date: \"dd.MM.yyyy\") : \"--\" }}\n              </span>\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>\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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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$2.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$2.DatePipe, name: "date" }, { kind: "pipe", type: i4$2.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          @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              {{ attr.value ? (attr.value | date: \"dd.MM.yyyy\") : \"--\" }}\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]=\"\n                    attr.value?.name?.length > 20 ? attr.value?.name : null\n                  \"\n                >\n                  {{ attr.value?.name || attr.value?.code || \"--\" }}\n                </span>\n              </span>\n            </span>\n          }\n\n          @case (\"COPY_TO_CLIPBOARD\") {\n            <div class=\"flex align-items-center gap-1\">\n              <i\n                class=\"pi pi-copy text-blue-900 cursor-pointer\"\n                (click)=\"copyToClipboard(attr?.value1,attr?.value2)\"\n              ></i>\n              <span>{{ attr.value || \"--\" }}</span>\n            </div>\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        @if (item.label) {\n          <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n        }\n\n        <div\n          class=\"text-sm text-left break-words\"\n          [style.grid-column]=\"item.label ? null : '1 / -1'\"\n        >\n          @switch (item?.type || statusTooltipType.TAG) {\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.COPY_TO_CLIPBOARD) {\n              <div class=\"flex\">\n                <i\n                  class=\"pi pi-copy text-blue-900\"\n                  (click)=\"copyToClipboard(item?.value1)\"\n                ></i>\n                <span>\n                  {{ item?.value ? item.value : \"--\" }}\n                </span>\n              </div>\n            }\n\n            @case (statusTooltipType.DATE_ONLY) {\n              <span>\n                <i class=\"pi pi-calendar text-blue-900\"></i>\n                {{ item.value ? (item.value | date: \"dd.MM.yyyy\") : \"--\" }}\n              </span>\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 ?? 0) > 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>\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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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$2.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$2.DatePipe, name: "date" }, { kind: "pipe", type: i4$2.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,
@@ -8440,7 +8440,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\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          @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              {{ attr.value ? (attr.value | date: \"dd.MM.yyyy\") : \"--\" }}\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]=\"\n                    attr.value?.name?.length > 20 ? attr.value?.name : null\n                  \"\n                >\n                  {{ attr.value?.name || attr.value?.code || \"--\" }}\n                </span>\n              </span>\n            </span>\n          }\n\n          @case (\"COPY_TO_CLIPBOARD\") {\n            <div class=\"flex align-items-center gap-1\">\n              <i\n                class=\"pi pi-copy text-blue-900 cursor-pointer\"\n                (click)=\"copyToClipboard(attr?.value1,attr?.value2)\"\n              ></i>\n              <span>{{ attr.value || \"--\" }}</span>\n            </div>\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            @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.COPY_TO_CLIPBOARD) {\n              <div class=\"flex\">\n                <i\n                  class=\"pi pi-copy text-blue-900\"\n                  (click)=\"copyToClipboard(item?.value1)\"\n                ></i>\n                <span>\n                  {{ item?.value ? item.value : \"--\" }}\n                </span>\n              </div>\n            }\n\n            @case (statusTooltipType.DATE_ONLY) {\n              <span>\n                <i class=\"pi pi-calendar text-blue-900\"></i>\n                {{ item.value ? (item.value | date: \"dd.MM.yyyy\") : \"--\" }}\n              </span>\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>\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          @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              {{ attr.value ? (attr.value | date: \"dd.MM.yyyy\") : \"--\" }}\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]=\"\n                    attr.value?.name?.length > 20 ? attr.value?.name : null\n                  \"\n                >\n                  {{ attr.value?.name || attr.value?.code || \"--\" }}\n                </span>\n              </span>\n            </span>\n          }\n\n          @case (\"COPY_TO_CLIPBOARD\") {\n            <div class=\"flex align-items-center gap-1\">\n              <i\n                class=\"pi pi-copy text-blue-900 cursor-pointer\"\n                (click)=\"copyToClipboard(attr?.value1,attr?.value2)\"\n              ></i>\n              <span>{{ attr.value || \"--\" }}</span>\n            </div>\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        @if (item.label) {\n          <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n        }\n\n        <div\n          class=\"text-sm text-left break-words\"\n          [style.grid-column]=\"item.label ? null : '1 / -1'\"\n        >\n          @switch (item?.type || statusTooltipType.TAG) {\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.COPY_TO_CLIPBOARD) {\n              <div class=\"flex\">\n                <i\n                  class=\"pi pi-copy text-blue-900\"\n                  (click)=\"copyToClipboard(item?.value1)\"\n                ></i>\n                <span>\n                  {{ item?.value ? item.value : \"--\" }}\n                </span>\n              </div>\n            }\n\n            @case (statusTooltipType.DATE_ONLY) {\n              <span>\n                <i class=\"pi pi-calendar text-blue-900\"></i>\n                {{ item.value ? (item.value | date: \"dd.MM.yyyy\") : \"--\" }}\n              </span>\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 ?? 0) > 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>\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"] }]
         }], propDecorators: { attr: [{
                 type: Input
             }], dateFormat: [{
@@ -10224,8 +10224,36 @@ class MetaFormFieldV2Component {
         ctrl.markAsTouched();
         this.manualTick.update((v) => v + 1);
     }
+    /**
+     * Re-anchor the (body-appended) datepicker overlay to its input in viewport
+     * space. PrimeNG positions the body overlay with the page scroll added, so on
+     * a scrolled page — e.g. a modal opened after scrolling down — the panel drops
+     * by roughly the scroll amount. Pinning it `fixed` at the input's viewport
+     * rect keeps it correct regardless of scroll, and flips it up when there is
+     * not enough room below.
+     */
+    onDateShow() {
+        if (typeof document === 'undefined')
+            return;
+        requestAnimationFrame(() => {
+            const input = document.getElementById(this.key());
+            const panel = document.querySelector('.p-datepicker-panel');
+            if (!input || !panel)
+                return;
+            const r = input.getBoundingClientRect();
+            const gap = 2;
+            const panelHeight = panel.offsetHeight;
+            const spaceBelow = window.innerHeight - r.bottom;
+            panel.style.position = 'fixed';
+            panel.style.left = `${Math.round(r.left)}px`;
+            panel.style.top =
+                spaceBelow >= panelHeight || spaceBelow >= r.top
+                    ? `${Math.round(r.bottom + gap)}px`
+                    : `${Math.round(Math.max(gap, r.top - panelHeight - gap))}px`;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, disableForm: { classPropertyName: "disableForm", publicName: "disableForm", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\n      <label class=\"meta-label\" [attr.for]=\"key()\">\n        {{ userFriendlyMessage()! | translate }}\n        @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n      </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field()\" [form]=\"form()\"></phoenix-read-only-input-v2>\n      } @else {\n        @switch (type()) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.URL) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key()\" [formControlName]=\"key()\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key()\" [formControlName]=\"key()\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n          <p-datepicker\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\n          ></p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key()\"\n          [showClear]=\"true\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" display=\"chip\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\" [mandatory]=\"field().mandatory ?? false\"></phoenix-meta-timeperiod-v2>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key()\"\n          [attr.data-cy]=\"'start-due-' + key()\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key()\"\n          [options]=\"(field().configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key()\"\n          [items]=\"(field().configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field().configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key()\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key()\" [formControlName]=\"key()\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\">\n        }\n      }\n\n      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- V2 validation is always a calm gray note (never a red error). TIMEPERIOD\n         renders its own note (format guidance while typing), so skip it here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\n    <small class=\"block mt-1\" style=\"color: var(--p-text-muted-color, #6b7280)\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, disableForm: { classPropertyName: "disableForm", publicName: "disableForm", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\n      <label class=\"meta-label\" [attr.for]=\"key()\">\n        {{ userFriendlyMessage()! | translate }}\n        @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n      </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field()\" [form]=\"form()\"></phoenix-read-only-input-v2>\n      } @else {\n        @switch (type()) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.URL) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key()\" [formControlName]=\"key()\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key()\" [formControlName]=\"key()\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n          <p-datepicker\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onShow)=\"onDateShow()\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\n          ></p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key()\"\n          [showClear]=\"true\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" display=\"chip\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\" [mandatory]=\"field().mandatory ?? false\"></phoenix-meta-timeperiod-v2>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key()\"\n          [attr.data-cy]=\"'start-due-' + key()\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key()\"\n          [options]=\"(field().configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key()\"\n          [items]=\"(field().configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field().configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key()\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key()\" [formControlName]=\"key()\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\">\n        }\n      }\n\n      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- V2 validation is always a calm gray note (never a red error). TIMEPERIOD\n         renders its own note (format guidance while typing), so skip it here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\n    <small class=\"block mt-1\" style=\"color: var(--p-text-muted-color, #6b7280)\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
                 // PrimeNG 20 base inputs
                 InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: 
                 // Advanced / custom Phoenix fields
@@ -10263,7 +10291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaUploadComponentDragDrop,
                         // Read-only renderer used when page or field is in read-only mode
                         ReadOnlyInputV2Component,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\n      <label class=\"meta-label\" [attr.for]=\"key()\">\n        {{ userFriendlyMessage()! | translate }}\n        @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n      </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field()\" [form]=\"form()\"></phoenix-read-only-input-v2>\n      } @else {\n        @switch (type()) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.URL) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key()\" [formControlName]=\"key()\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key()\" [formControlName]=\"key()\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n          <p-datepicker\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\n          ></p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key()\"\n          [showClear]=\"true\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" display=\"chip\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\" [mandatory]=\"field().mandatory ?? false\"></phoenix-meta-timeperiod-v2>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key()\"\n          [attr.data-cy]=\"'start-due-' + key()\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key()\"\n          [options]=\"(field().configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key()\"\n          [items]=\"(field().configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field().configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key()\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key()\" [formControlName]=\"key()\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\">\n        }\n      }\n\n      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- V2 validation is always a calm gray note (never a red error). TIMEPERIOD\n         renders its own note (format guidance while typing), so skip it here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\n    <small class=\"block mt-1\" style=\"color: var(--p-text-muted-color, #6b7280)\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\n      <label class=\"meta-label\" [attr.for]=\"key()\">\n        {{ userFriendlyMessage()! | translate }}\n        @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n      </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field()\" [form]=\"form()\"></phoenix-read-only-input-v2>\n      } @else {\n        @switch (type()) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.URL) {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key()\" [formControlName]=\"key()\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key()\" [formControlName]=\"key()\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n          <p-datepicker\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onShow)=\"onDateShow()\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\n          ></p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key()\"\n          [showClear]=\"true\" appendTo=\"body\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key()\" [options]=\"field().configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key()\" [showClear]=\"false\" display=\"chip\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\" [mandatory]=\"field().mandatory ?? false\"></phoenix-meta-timeperiod-v2>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key()\"\n          [attr.data-cy]=\"'start-due-' + key()\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key()\"\n          [options]=\"(field().configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key()\"\n          [items]=\"(field().configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field().configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key()\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\"\n          [parentForm]=\"form()\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key()\" [formControlName]=\"key()\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key()\" [formControlName]=\"key()\">\n        }\n      }\n\n      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- V2 validation is always a calm gray note (never a red error). TIMEPERIOD\n         renders its own note (format guidance while typing), so skip it here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\n    <small class=\"block mt-1\" style=\"color: var(--p-text-muted-color, #6b7280)\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], disableForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableForm", required: false }] }] } });
 
 /**