@fuentis/phoenix-ui 0.0.9-alpha.604 → 0.0.9-alpha.607

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -3758,16 +3758,23 @@ class WhiteSpaceValidator {
 }
 
 function noDangerousCharsValidator() {
-    // Blocks only specific dangerous characters: < > " = $ /
-    //[<>"=$/]/ This was before but some catalog name or description contains "/"" so when field is desibled we cannot save form
-    const dangerousCharsPattern = /[<>"=$]/;
+    const dangerousPatterns = [
+        /<\s*script/i, // <script tags
+        /<\s*\/\s*script/i, // </script>
+        /javascript\s*:/i, // javascript: protocol
+        /on\w+\s*=/i, // event handlers like onerror= onclick=
+        /<\s*iframe/i, // iframes
+        /<\s*img[^>]+onerror/i, // <img onerror=
+        /expression\s*\(/i, // CSS expression() attacks
+        /vbscript\s*:/i, // vbscript: protocol
+    ];
     return (control) => {
         const value = control.value;
         if (!value)
             return null;
-        return dangerousCharsPattern.test(String(value))
-            ? { dangerousChars: true }
-            : null;
+        const str = String(value);
+        const isdangerous = dangerousPatterns.some(pattern => pattern.test(str));
+        return isdangerous ? { dangerousChars: true } : null;
     };
 }
 
@@ -7935,6 +7942,7 @@ var StatusColType;
     StatusColType["DATE_ONLY"] = "DATE_ONLY";
     StatusColType["LIST"] = "LIST";
     StatusColType["COUNTRY"] = "COUNTRY";
+    StatusColType["COPY_TO_CLIPBOARD"] = "COPY_TO_CLIPBOARD";
 })(StatusColType || (StatusColType = {}));
 
 class StatusAttributeDisplayComponent {
@@ -7982,7 +7990,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 (\"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$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate),\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n\n      @if (attr?.tooltip?.length) {\n        <i\n          [attr.data-cy]=\"'status-togg-button-item'\"\n          class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n          style=\"font-size: 0.875rem; line-height: 1\"\n          (mouseenter)=\"popover.toggle($event)\"\n          (mouseleave)=\"popover.toggle($event)\"\n        ></i>\n      }\n    </div>\n\n    <!-- VALUE -->\n    @if (attr?.value) {\n      <!-- removed [ngSwitch]=\"attr.type\" because @switch handles it -->\n      <div style=\"white-space: nowrap\">\n        @switch (attr.type) {\n          @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)\"\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$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
             type: Component,
@@ -7994,7 +8002,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 (\"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)\"\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"] }]
         }], propDecorators: { attr: [{
                 type: Input
             }], dateFormat: [{