@fuentis/phoenix-ui 0.0.9-alpha.263 → 0.0.9-alpha.265

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -77,10 +77,12 @@ import * as i1$4 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
 import * as i3$7 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i2$6 from 'primeng/editor';
+import * as i2$7 from 'primeng/editor';
 import { EditorModule } from 'primeng/editor';
 import * as i1$3 from 'primeng/dynamicdialog';
 import { DialogService } from 'primeng/dynamicdialog';
+import * as i2$6 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
 import * as i3$4 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import * as i3$5 from 'primeng/inputnumber';
@@ -3419,7 +3421,7 @@ class MetaCalendarComponent extends BaseMetaField {
             },
         ], usesInheritance: true, ngImport: i0, template: ` <div [hidden]="control?.hidden">
     <phoenix-meta-label [control]="control"></phoenix-meta-label>
-    <p-calendar
+    <p-datepicker
       [attr.data-cy]="'calendar-' + control?.id"
       (onSelect)="onChanged(value)"
       [style]="{ width: '100%' }"
@@ -3433,9 +3435,9 @@ class MetaCalendarComponent extends BaseMetaField {
       [showTime]="control.configuration.showTime"
       [hourFormat]="'24'"
       [appendTo]="'body'"
-    ></p-calendar>
+    ></p-datepicker>
     <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
-  </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$4.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
+  </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaCalendarComponent, decorators: [{
             type: Component,
@@ -3445,9 +3447,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MetaLabelComponent,
                         FormsModule,
                         InlineFieldError,
+                        DatePickerModule,
                     ], template: ` <div [hidden]="control?.hidden">
     <phoenix-meta-label [control]="control"></phoenix-meta-label>
-    <p-calendar
+    <p-datepicker
       [attr.data-cy]="'calendar-' + control?.id"
       (onSelect)="onChanged(value)"
       [style]="{ width: '100%' }"
@@ -3461,7 +3464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
       [showTime]="control.configuration.showTime"
       [hourFormat]="'24'"
       [appendTo]="'body'"
-    ></p-calendar>
+    ></p-datepicker>
     <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
   </div>`, providers: [
                         {
@@ -4825,7 +4828,7 @@ class MetaTextEditorComponent extends BaseMetaField {
         [ctrl]="ctrl"
       ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [":is() .p-editor-container .p-editor-content .ql-editor{min-height:120px}:is() .ql-image{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$6.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: TextareaModule }] });
+  `, isInline: true, styles: [":is() .p-editor-container .p-editor-content .ql-editor{min-height:120px}:is() .ql-image{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$7.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: TextareaModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaTextEditorComponent, decorators: [{
             type: Component,
@@ -5366,7 +5369,7 @@ class ReadOnlyInputComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i2$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n      [attr.data-cy]=\"'textarea-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$8.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 // SerachCardComponent,
-                CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$6.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$6.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
+                CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$6.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$7.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
             type: Component,
@@ -6024,7 +6027,7 @@ class StatusAttributeDisplayComponent {
         return label ? label.trim().split(/\s+/).length > 2 : false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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-center gap-1\">\n      <label class=\"font-semibold text-600\" [ngClass]=\"{\n        'wrap-label': isMultiWordLabel(attr.label | translate),\n        'nowrap-label': !isMultiWordLabel(attr.label | translate)\n      }\">\n        {{ attr.label | translate }}\n      </label>\n      <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\">\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n      <!-- STRING -->\n    <ng-container *ngSwitchCase=\"'STRING'\">\n      <!-- If URL exist, render as link -->\n      <a *ngIf=\"attr.url; else plainText\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n        [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n      >\n        {{ attr.value | textLength: 20 }}\n      </a>\n      <!-- Pnly text if url doesn't exist -->\n      <ng-template #plainText>\n        <span\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength: 20 }}\n        </span>\n      </ng-template>\n    </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n      </span>\n\n      <!-- LINK -->\n      <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n        {{ attr.value || '--' }}\n      </a>\n\n      <!-- PERSON -->\n      <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n        <div class=\"person-avatar\">\n          {{ attr?.value?.charAt(0)?.toUpperCase() || '-' }}\n        </div>\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20\n            ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n            : undefined\"\n        >\n          <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n            {{\n              ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n            }}\u2026\n          </ng-container>\n          <ng-template #fullText>\n            {{\n              ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n            }}\n          </ng-template>\n        </div>\n      </div>\n\n      <!-- LIST -->\n      <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n        <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || '--' }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div 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    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">\n          {{ item.label }}:\n        </div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n                class=\"text-blue-500 underline\">\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 *ngIf=\"item.value; else empty\" class=\"text-sm\"\n                style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\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-2 truncate\">\n                  <div class=\"person-avatar\">\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\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                <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n\n          </ng-container>\n        </div>\n\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 class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\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 class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n              <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.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:5px 5px 5px 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%}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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-center gap-1\">\n      <label class=\"font-semibold text-600\" [ngClass]=\"{\n        'wrap-label': isMultiWordLabel(attr.label | translate),\n        'nowrap-label': !isMultiWordLabel(attr.label | translate)\n      }\">\n        {{ attr.label | translate }}\n      </label>\n      <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\">\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n      <!-- STRING -->\n    <ng-container *ngSwitchCase=\"'STRING'\">\n      <!-- If URL exist, render as link -->\n      <a *ngIf=\"attr.url; else plainText\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n        [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n      >\n        {{ attr.value | textLength: 20 }}\n      </a>\n      <!-- Pnly text if url doesn't exist -->\n      <ng-template #plainText>\n        <span\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength: 20 }}\n        </span>\n      </ng-template>\n    </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        <i class=\"pi pi-calendar text-blue-900\"></i>\n        {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n      </span>\n\n      <!-- LINK -->\n      <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n        {{ attr.value || '--' }}\n      </a>\n\n      <!-- PERSON -->\n      <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n        <div class=\"person-avatar\">\n          {{ attr?.value?.charAt(0)?.toUpperCase() || '-' }}\n        </div>\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20\n            ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n            : undefined\"\n        >\n          <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n            {{\n              ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n            }}\u2026\n          </ng-container>\n          <ng-template #fullText>\n            {{\n              ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n            }}\n          </ng-template>\n        </div>\n      </div>\n\n      <!-- LIST -->\n      <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n        <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || '--' }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div 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    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">\n          {{ item.label }}:\n        </div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n                class=\"text-blue-500 underline\">\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 *ngIf=\"item.value; else empty\" class=\"text-sm\"\n                style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\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-2 truncate\">\n                  <div class=\"person-avatar\">\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\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                <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n\n          </ng-container>\n        </div>\n\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 class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\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 class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n              <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.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:5px 5px 5px 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%}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
             type: Component,
@@ -6037,7 +6040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         AvatarModule,
                         FirstLetterPipe,
                         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-center gap-1\">\n      <label class=\"font-semibold text-600\" [ngClass]=\"{\n        'wrap-label': isMultiWordLabel(attr.label | translate),\n        'nowrap-label': !isMultiWordLabel(attr.label | translate)\n      }\">\n        {{ attr.label | translate }}\n      </label>\n      <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\">\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n      <!-- STRING -->\n    <ng-container *ngSwitchCase=\"'STRING'\">\n      <!-- If URL exist, render as link -->\n      <a *ngIf=\"attr.url; else plainText\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n        [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n      >\n        {{ attr.value | textLength: 20 }}\n      </a>\n      <!-- Pnly text if url doesn't exist -->\n      <ng-template #plainText>\n        <span\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength: 20 }}\n        </span>\n      </ng-template>\n    </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n      </span>\n\n      <!-- LINK -->\n      <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n        {{ attr.value || '--' }}\n      </a>\n\n      <!-- PERSON -->\n      <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n        <div class=\"person-avatar\">\n          {{ attr?.value?.charAt(0)?.toUpperCase() || '-' }}\n        </div>\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20\n            ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n            : undefined\"\n        >\n          <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n            {{\n              ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n            }}\u2026\n          </ng-container>\n          <ng-template #fullText>\n            {{\n              ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n            }}\n          </ng-template>\n        </div>\n      </div>\n\n      <!-- LIST -->\n      <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n        <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || '--' }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div 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    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">\n          {{ item.label }}:\n        </div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n                class=\"text-blue-500 underline\">\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 *ngIf=\"item.value; else empty\" class=\"text-sm\"\n                style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\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-2 truncate\">\n                  <div class=\"person-avatar\">\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\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                <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n\n          </ng-container>\n        </div>\n\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 class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\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 class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n              <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.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:5px 5px 5px 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%}.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}\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-center gap-1\">\n      <label class=\"font-semibold text-600\" [ngClass]=\"{\n        'wrap-label': isMultiWordLabel(attr.label | translate),\n        'nowrap-label': !isMultiWordLabel(attr.label | translate)\n      }\">\n        {{ attr.label | translate }}\n      </label>\n      <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\">\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n      <!-- STRING -->\n    <ng-container *ngSwitchCase=\"'STRING'\">\n      <!-- If URL exist, render as link -->\n      <a *ngIf=\"attr.url; else plainText\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n        [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n      >\n        {{ attr.value | textLength: 20 }}\n      </a>\n      <!-- Pnly text if url doesn't exist -->\n      <ng-template #plainText>\n        <span\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength: 20 }}\n        </span>\n      </ng-template>\n    </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        <i class=\"pi pi-calendar text-blue-900\"></i>\n        {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n      </span>\n\n      <!-- LINK -->\n      <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n        {{ attr.value || '--' }}\n      </a>\n\n      <!-- PERSON -->\n      <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n        <div class=\"person-avatar\">\n          {{ attr?.value?.charAt(0)?.toUpperCase() || '-' }}\n        </div>\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20\n            ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n            : undefined\"\n        >\n          <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n            {{\n              ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n            }}\u2026\n          </ng-container>\n          <ng-template #fullText>\n            {{\n              ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n            }}\n          </ng-template>\n        </div>\n      </div>\n\n      <!-- LIST -->\n      <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n        <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || '--' }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div 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    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">\n          {{ item.label }}:\n        </div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n                class=\"text-blue-500 underline\">\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 *ngIf=\"item.value; else empty\" class=\"text-sm\"\n                style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\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-2 truncate\">\n                  <div class=\"person-avatar\">\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\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                <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n\n          </ng-container>\n        </div>\n\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 class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\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 class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n              <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.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:5px 5px 5px 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%}.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}\n"] }]
         }], propDecorators: { attr: [{
                 type: Input
             }], dateFormat: [{