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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1346,7 +1346,7 @@ class StatusHeaderComponent {
1346
1346
  this.onCloseEvent.emit();
1347
1347
  }
1348
1348
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1349
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { type: "type", items: "items", name: "name", title: "title", tag: "tag", tags: "tags", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div class=\"flex justify-content-between p-2\">\n <div class=\"flex align-items-center gap-2 w-full\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"\n >\n </phoenix-quick-pick>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span\n class=\"text-xl font-semibold\"\n [pTooltip]=\"name.length > 40 ? name : undefined\"\n >\n {{ name.length > 60 ? (name | slice: 0 : 60) + \"\u2026\" : name }}\n </span>\n }\n\n <!-- TITLE with tooltip and truncation -->\n @if (title) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"title.length > 20 ? title : undefined\"\n >\n {{ title.length > 20 ? (title | slice: 0 : 20) + \"\u2026\" : title }}\n </span>\n }\n\n <!-- Type goes here -->\n <!-- @if (type.text) {\n <p-tag\n [value]=\"type?.text\"\n [style]=\"{\n border: '2px solid var(--surface-300)',\n background: 'transparent',\n color: 'var(--text-color)',\n 'font-size': '11px',\n padding: '2px 4px',\n width: 'fit-content',\n 'white-space': 'nowrap'\n }\"\n ></p-tag>\n } -->\n </div>\n\n <!-- <div class=\"flex gap-1 align-items-center\">\n @for (tag of tags; track $index) {\n <p-tag\n [pTooltip]=\"tag?.tooltip ? (tag.tooltip! | translate) : undefined\"\n [value]=\"tag?.value || '--'\"\n [severity]=\"tag.variant || 'info'\"\n [icon]=\"tag?.icon || 'pi pi-check'\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n 'white-space': 'nowrap'\n }\"\n [ngStyle]=\"\n tag?.color\n ? {\n 'background-color': tag.color + '36',\n color: tag.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div> -->\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { 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: TieredMenuModule }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }, { kind: "ngmodule", type: TagModule }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1349
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { type: "type", items: "items", name: "name", title: "title", tag: "tag", tags: "tags", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div class=\"flex justify-content-between p-2\">\n <div class=\"flex align-items-center gap-2 w-full\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"\n >\n </phoenix-quick-pick>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span\n class=\"text-xl font-semibold\"\n [pTooltip]=\"name.length > 40 ? name : undefined\"\n >\n {{ name.length > 60 ? (name | slice: 0 : 60) + \"\u2026\" : name }}\n </span>\n }\n\n <!-- TITLE with tooltip and truncation -->\n @if (title) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"title.length > 20 ? title : undefined\"\n >\n {{ title.length > 20 ? (title | slice: 0 : 20) + \"\u2026\" : title }}\n </span>\n }\n\n <!-- Neutral type/category tag in the identity line (optional) -->\n @if (tag?.text) {\n <p-tag\n [value]=\"tag?.text\"\n [pTooltip]=\"tag?.tooltip ? (tag!.tooltip! | translate) : undefined\"\n [style]=\"{\n border: '2px solid var(--surface-300)',\n background: 'transparent',\n color: 'var(--text-color)',\n 'font-size': '11px',\n padding: '2px 4px',\n width: 'fit-content',\n 'white-space': 'nowrap'\n }\"\n ></p-tag>\n }\n </div>\n\n <!-- <div class=\"flex gap-1 align-items-center\">\n @for (tag of tags; track $index) {\n <p-tag\n [pTooltip]=\"tag?.tooltip ? (tag.tooltip! | translate) : undefined\"\n [value]=\"tag?.value || '--'\"\n [severity]=\"tag.variant || 'info'\"\n [icon]=\"tag?.icon || 'pi pi-check'\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n 'white-space': 'nowrap'\n }\"\n [ngStyle]=\"\n tag?.color\n ? {\n 'background-color': tag.color + '36',\n color: tag.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div> -->\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { 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: TieredMenuModule }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1350
1350
  }
1351
1351
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusHeaderComponent, decorators: [{
1352
1352
  type: Component,
@@ -1359,7 +1359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1359
1359
  TieredMenuModule,
1360
1360
  QuickPickComponent,
1361
1361
  TagModule,
1362
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex justify-content-between p-2\">\n <div class=\"flex align-items-center gap-2 w-full\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"\n >\n </phoenix-quick-pick>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span\n class=\"text-xl font-semibold\"\n [pTooltip]=\"name.length > 40 ? name : undefined\"\n >\n {{ name.length > 60 ? (name | slice: 0 : 60) + \"\u2026\" : name }}\n </span>\n }\n\n <!-- TITLE with tooltip and truncation -->\n @if (title) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"title.length > 20 ? title : undefined\"\n >\n {{ title.length > 20 ? (title | slice: 0 : 20) + \"\u2026\" : title }}\n </span>\n }\n\n <!-- Type goes here -->\n <!-- @if (type.text) {\n <p-tag\n [value]=\"type?.text\"\n [style]=\"{\n border: '2px solid var(--surface-300)',\n background: 'transparent',\n color: 'var(--text-color)',\n 'font-size': '11px',\n padding: '2px 4px',\n width: 'fit-content',\n 'white-space': 'nowrap'\n }\"\n ></p-tag>\n } -->\n </div>\n\n <!-- <div class=\"flex gap-1 align-items-center\">\n @for (tag of tags; track $index) {\n <p-tag\n [pTooltip]=\"tag?.tooltip ? (tag.tooltip! | translate) : undefined\"\n [value]=\"tag?.value || '--'\"\n [severity]=\"tag.variant || 'info'\"\n [icon]=\"tag?.icon || 'pi pi-check'\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n 'white-space': 'nowrap'\n }\"\n [ngStyle]=\"\n tag?.color\n ? {\n 'background-color': tag.color + '36',\n color: tag.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div> -->\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
1362
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex justify-content-between p-2\">\n <div class=\"flex align-items-center gap-2 w-full\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"\n >\n </phoenix-quick-pick>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span\n class=\"text-xl font-semibold\"\n [pTooltip]=\"name.length > 40 ? name : undefined\"\n >\n {{ name.length > 60 ? (name | slice: 0 : 60) + \"\u2026\" : name }}\n </span>\n }\n\n <!-- TITLE with tooltip and truncation -->\n @if (title) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"title.length > 20 ? title : undefined\"\n >\n {{ title.length > 20 ? (title | slice: 0 : 20) + \"\u2026\" : title }}\n </span>\n }\n\n <!-- Neutral type/category tag in the identity line (optional) -->\n @if (tag?.text) {\n <p-tag\n [value]=\"tag?.text\"\n [pTooltip]=\"tag?.tooltip ? (tag!.tooltip! | translate) : undefined\"\n [style]=\"{\n border: '2px solid var(--surface-300)',\n background: 'transparent',\n color: 'var(--text-color)',\n 'font-size': '11px',\n padding: '2px 4px',\n width: 'fit-content',\n 'white-space': 'nowrap'\n }\"\n ></p-tag>\n }\n </div>\n\n <!-- <div class=\"flex gap-1 align-items-center\">\n @for (tag of tags; track $index) {\n <p-tag\n [pTooltip]=\"tag?.tooltip ? (tag.tooltip! | translate) : undefined\"\n [value]=\"tag?.value || '--'\"\n [severity]=\"tag.variant || 'info'\"\n [icon]=\"tag?.icon || 'pi pi-check'\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n 'white-space': 'nowrap'\n }\"\n [ngStyle]=\"\n tag?.color\n ? {\n 'background-color': tag.color + '36',\n color: tag.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div> -->\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
1363
1363
  }], propDecorators: { onQuickPickClickEmiter: [{
1364
1364
  type: Output
1365
1365
  }], onToggleClickEmmiter: [{