@fuentis/phoenix-ui 0.0.9-alpha.669 → 0.0.9-alpha.670

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -8463,7 +8463,7 @@ class StatusBarComponent {
         width: 40,
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0 pb-3\">\n  @if (statusBarConfig) {\n    <div class=\"flex\">\n      @if (description) {\n        <div class=\"description flex\">\n          @if (statusBarConfig.icon) {\n            <div\n              class=\"type-icon flex justify-content-center align-items-center mr-3\"\n              [style.height]=\"iconStyle.height + 20 + 'px'\"\n              [style.width]=\"iconStyle.width + 20 + 'px'\"\n            >\n              <p-image\n                [src]=\"\n                  'assets/object_types/white/' +\n                  (statusBarConfig.icon || 'UNDEFINED') +\n                  '.svg'\n                \"\n                [height]=\"iconStyle.height.toString()\"\n                [width]=\"iconStyle.width.toString()\"\n              ></p-image>\n            </div>\n          }\n\n          <ul>\n            @for (attr of statusBarConfig.description; track attr.label) {\n              <li class=\"text-sm flex mb-1\">\n                <span class=\"mr-1 text-600 font-semibold\"\n                  >{{ attr.label | translate }}:</span\n                >\n                @if (attr.value) {\n                  <span>\n                    @if (attr.icon) {\n                      <i\n                        class=\"{{ attr.icon }} mr-1\"\n                        style=\"font-size: 0.8em\"\n                      ></i>\n                    }\n                    @switch (attr.type) {\n                      @case (\"DATE\") {\n                        <span>{{ attr.value | date: dateFormat }}</span>\n                      }\n                      @default {\n                        <span\n                          pTooltip=\"{{\n                            attr?.value?.length > 20 ? attr.value : ''\n                          }}\"\n                        >\n                          {{ attr.value | textLength: 20 }}\n                        </span>\n                      }\n                    }\n                  </span>\n                } @else {\n                  <span>--</span>\n                }\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      <div class=\"status-bar-attributes w-full flex gap-5\">\n        @for (attr of statusBarConfig.attributes; track attr.label) {\n          <div class=\"status-bar-attribute-item\">\n            <phoenix-status-attribute-display\n              [attr]=\"attr\"\n              [dateFormat]=\"dateFormat\"\n              (listItemClick)=\"onListItemClick.emit($event)\"\n            ></phoenix-status-attribute-display>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i6$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: StatusAttributeDisplayComponent, selector: "phoenix-status-attribute-display", inputs: ["attr", "dateFormat"], outputs: ["listItemClick"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0 pb-3\">\n  @if (statusBarConfig) {\n    <div class=\"flex\">\n      @if (description) {\n        <div class=\"description flex\">\n          @if (statusBarConfig.icon) {\n            <div\n              class=\"type-icon flex justify-content-center align-items-center mr-3\"\n              [style.height]=\"iconStyle.height + 20 + 'px'\"\n              [style.width]=\"iconStyle.width + 20 + 'px'\"\n            >\n              <p-image\n                [src]=\"\n                  'assets/object_types/white/' +\n                  (statusBarConfig.icon || 'UNDEFINED') +\n                  '.svg'\n                \"\n                [height]=\"iconStyle.height.toString()\"\n                [width]=\"iconStyle.width.toString()\"\n              ></p-image>\n            </div>\n          }\n\n          <ul>\n            @for (attr of statusBarConfig.description; track attr.label) {\n              <li class=\"text-sm flex mb-1\">\n                <span class=\"mr-1 text-600 font-semibold\"\n                  >{{ attr.label | translate }}:</span\n                >\n                @if (attr.value) {\n                  <span>\n                    @if (attr.icon) {\n                      <i\n                        class=\"{{ attr.icon }} mr-1\"\n                        style=\"font-size: 0.8em\"\n                      ></i>\n                    }\n                    @switch (attr.type) {\n                      @case (\"DATE\") {\n                        <span>{{ attr.value | date: dateFormat }}</span>\n                      }\n                      @default {\n                        <span\n                          pTooltip=\"{{\n                            attr?.value?.length > 20 ? attr.value : ''\n                          }}\"\n                        >\n                          {{ attr.value | textLength: 20 }}\n                        </span>\n                      }\n                    }\n                  </span>\n                } @else {\n                  <span>--</span>\n                }\n\n                @if (attr.popoverList?.length) {\n                  <i\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer ml-1\"\n                    style=\"font-size: 0.8rem; line-height: 1\"\n                    (mouseenter)=\"ctxPop.toggle($event)\"\n                    (mouseleave)=\"ctxPop.toggle($event)\"\n                  ></i>\n                  <p-popover #ctxPop [style]=\"{ maxWidth: '320px' }\">\n                    @if (attr.popoverTitle) {\n                      <div class=\"text-sm text-600 mb-1\">\n                        {{ attr.popoverTitle | translate }}\n                      </div>\n                    }\n                    <div class=\"flex flex-column gap-1\">\n                      @for (it of attr.popoverList; track $index) {\n                        <div class=\"text-sm\">{{ it }}</div>\n                      }\n                    </div>\n                  </p-popover>\n                }\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      <div class=\"status-bar-attributes w-full flex gap-5\">\n        @for (attr of statusBarConfig.attributes; track attr.label) {\n          <div class=\"status-bar-attribute-item\">\n            <phoenix-status-attribute-display\n              [attr]=\"attr\"\n              [dateFormat]=\"dateFormat\"\n              (listItemClick)=\"onListItemClick.emit($event)\"\n            ></phoenix-status-attribute-display>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i6$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: StatusAttributeDisplayComponent, selector: "phoenix-status-attribute-display", inputs: ["attr", "dateFormat"], outputs: ["listItemClick"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusBarComponent, decorators: [{
             type: Component,
@@ -8477,7 +8477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TextLength,
                         ButtonModule,
                         StatusAttributeDisplayComponent,
-                    ], template: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0 pb-3\">\n  @if (statusBarConfig) {\n    <div class=\"flex\">\n      @if (description) {\n        <div class=\"description flex\">\n          @if (statusBarConfig.icon) {\n            <div\n              class=\"type-icon flex justify-content-center align-items-center mr-3\"\n              [style.height]=\"iconStyle.height + 20 + 'px'\"\n              [style.width]=\"iconStyle.width + 20 + 'px'\"\n            >\n              <p-image\n                [src]=\"\n                  'assets/object_types/white/' +\n                  (statusBarConfig.icon || 'UNDEFINED') +\n                  '.svg'\n                \"\n                [height]=\"iconStyle.height.toString()\"\n                [width]=\"iconStyle.width.toString()\"\n              ></p-image>\n            </div>\n          }\n\n          <ul>\n            @for (attr of statusBarConfig.description; track attr.label) {\n              <li class=\"text-sm flex mb-1\">\n                <span class=\"mr-1 text-600 font-semibold\"\n                  >{{ attr.label | translate }}:</span\n                >\n                @if (attr.value) {\n                  <span>\n                    @if (attr.icon) {\n                      <i\n                        class=\"{{ attr.icon }} mr-1\"\n                        style=\"font-size: 0.8em\"\n                      ></i>\n                    }\n                    @switch (attr.type) {\n                      @case (\"DATE\") {\n                        <span>{{ attr.value | date: dateFormat }}</span>\n                      }\n                      @default {\n                        <span\n                          pTooltip=\"{{\n                            attr?.value?.length > 20 ? attr.value : ''\n                          }}\"\n                        >\n                          {{ attr.value | textLength: 20 }}\n                        </span>\n                      }\n                    }\n                  </span>\n                } @else {\n                  <span>--</span>\n                }\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      <div class=\"status-bar-attributes w-full flex gap-5\">\n        @for (attr of statusBarConfig.attributes; track attr.label) {\n          <div class=\"status-bar-attribute-item\">\n            <phoenix-status-attribute-display\n              [attr]=\"attr\"\n              [dateFormat]=\"dateFormat\"\n              (listItemClick)=\"onListItemClick.emit($event)\"\n            ></phoenix-status-attribute-display>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\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: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0 pb-3\">\n  @if (statusBarConfig) {\n    <div class=\"flex\">\n      @if (description) {\n        <div class=\"description flex\">\n          @if (statusBarConfig.icon) {\n            <div\n              class=\"type-icon flex justify-content-center align-items-center mr-3\"\n              [style.height]=\"iconStyle.height + 20 + 'px'\"\n              [style.width]=\"iconStyle.width + 20 + 'px'\"\n            >\n              <p-image\n                [src]=\"\n                  'assets/object_types/white/' +\n                  (statusBarConfig.icon || 'UNDEFINED') +\n                  '.svg'\n                \"\n                [height]=\"iconStyle.height.toString()\"\n                [width]=\"iconStyle.width.toString()\"\n              ></p-image>\n            </div>\n          }\n\n          <ul>\n            @for (attr of statusBarConfig.description; track attr.label) {\n              <li class=\"text-sm flex mb-1\">\n                <span class=\"mr-1 text-600 font-semibold\"\n                  >{{ attr.label | translate }}:</span\n                >\n                @if (attr.value) {\n                  <span>\n                    @if (attr.icon) {\n                      <i\n                        class=\"{{ attr.icon }} mr-1\"\n                        style=\"font-size: 0.8em\"\n                      ></i>\n                    }\n                    @switch (attr.type) {\n                      @case (\"DATE\") {\n                        <span>{{ attr.value | date: dateFormat }}</span>\n                      }\n                      @default {\n                        <span\n                          pTooltip=\"{{\n                            attr?.value?.length > 20 ? attr.value : ''\n                          }}\"\n                        >\n                          {{ attr.value | textLength: 20 }}\n                        </span>\n                      }\n                    }\n                  </span>\n                } @else {\n                  <span>--</span>\n                }\n\n                @if (attr.popoverList?.length) {\n                  <i\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer ml-1\"\n                    style=\"font-size: 0.8rem; line-height: 1\"\n                    (mouseenter)=\"ctxPop.toggle($event)\"\n                    (mouseleave)=\"ctxPop.toggle($event)\"\n                  ></i>\n                  <p-popover #ctxPop [style]=\"{ maxWidth: '320px' }\">\n                    @if (attr.popoverTitle) {\n                      <div class=\"text-sm text-600 mb-1\">\n                        {{ attr.popoverTitle | translate }}\n                      </div>\n                    }\n                    <div class=\"flex flex-column gap-1\">\n                      @for (it of attr.popoverList; track $index) {\n                        <div class=\"text-sm\">{{ it }}</div>\n                      }\n                    </div>\n                  </p-popover>\n                }\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      <div class=\"status-bar-attributes w-full flex gap-5\">\n        @for (attr of statusBarConfig.attributes; track attr.label) {\n          <div class=\"status-bar-attribute-item\">\n            <phoenix-status-attribute-display\n              [attr]=\"attr\"\n              [dateFormat]=\"dateFormat\"\n              (listItemClick)=\"onListItemClick.emit($event)\"\n            ></phoenix-status-attribute-display>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\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: { statusBarConfig: [{
                 type: Input
             }], iconEnable: [{