@fuentis/phoenix-ui 0.0.9-alpha.402 → 0.0.9-alpha.404

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.
@@ -1234,7 +1234,7 @@ class StatusHeaderComponent {
1234
1234
  type;
1235
1235
  name = '';
1236
1236
  title = '';
1237
- icon = '';
1237
+ tag;
1238
1238
  enableQuickPick = false;
1239
1239
  actions = [];
1240
1240
  panelState = false;
@@ -1259,7 +1259,7 @@ class StatusHeaderComponent {
1259
1259
  this.onCloseEvent.emit();
1260
1260
  }
1261
1261
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1262
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { type: "type", name: "name", title: "title", icon: "icon", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div class=\"flex align-items-center pt-2 gap-2 w-full\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\">\n </phoenix-quick-pick>\n }\n\n @if (type) {\n <span class=\"text-xl font-semibold text-gray-500\"\n [ngClass]=\"{ 'ml-3': !enableQuickPick }\">\n {{ type }} :\n </span>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span class=\"text-xl font-semibold\"\n [pTooltip]=\"name.length > 40 ? name : undefined\"\n [ngClass]=\"{ 'ml-3': !enableQuickPick && !type }\">\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 class=\"text-base text-gray-500\"\n [pTooltip]=\"title.length > 20 ? title : undefined\">\n {{ title.length > 20 ? (title | slice: 0:20) + '\u2026' : title }}\n </span>\n }\n\n <!-- ICON on the far right -->\n @if (icon) {\n <i class=\"{{ icon }} ml-auto text-gray-500 text-xl cursor-pointer\">\n </i>\n }\n</div>", 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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "ngmodule", type: TranslateModule }, { 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: TieredMenuModule }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1262
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { type: "type", name: "name", title: "title", tag: "tag", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div class=\"flex align-items-center pt-2 gap-2 w-full\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\">\n </phoenix-quick-pick>\n }\n\n @if (type) {\n <span class=\"text-xl font-semibold text-gray-500\"\n [ngClass]=\"{ 'ml-3': !enableQuickPick }\">\n {{ type }} :\n </span>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span class=\"text-xl font-semibold\"\n [pTooltip]=\"name.length > 40 ? name : undefined\"\n [ngClass]=\"{ 'ml-3': !enableQuickPick && !type }\">\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 class=\"text-base text-gray-500\"\n [pTooltip]=\"title.length > 20 ? title : undefined\">\n {{ title.length > 20 ? (title | slice: 0:20) + '\u2026' : title }}\n </span>\n }\n\n <!-- TAG -->\n @if (tag) {\n <p-tag\n class=\"ml-auto\"\n [icon]=\"tag.icon\"\n [value]=\"tag.text\"\n [severity]=\"tag.variant || 'info'\">\n </p-tag>\n }\n</div>", 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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "ngmodule", type: TranslateModule }, { 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: TieredMenuModule }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1263
1263
  }
1264
1264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusHeaderComponent, decorators: [{
1265
1265
  type: Component,
@@ -1271,7 +1271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1271
1271
  TooltipModule,
1272
1272
  TieredMenuModule,
1273
1273
  QuickPickComponent,
1274
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center pt-2 gap-2 w-full\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\">\n </phoenix-quick-pick>\n }\n\n @if (type) {\n <span class=\"text-xl font-semibold text-gray-500\"\n [ngClass]=\"{ 'ml-3': !enableQuickPick }\">\n {{ type }} :\n </span>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span class=\"text-xl font-semibold\"\n [pTooltip]=\"name.length > 40 ? name : undefined\"\n [ngClass]=\"{ 'ml-3': !enableQuickPick && !type }\">\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 class=\"text-base text-gray-500\"\n [pTooltip]=\"title.length > 20 ? title : undefined\">\n {{ title.length > 20 ? (title | slice: 0:20) + '\u2026' : title }}\n </span>\n }\n\n <!-- ICON on the far right -->\n @if (icon) {\n <i class=\"{{ icon }} ml-auto text-gray-500 text-xl cursor-pointer\">\n </i>\n }\n</div>", 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"] }]
1274
+ TagModule
1275
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center pt-2 gap-2 w-full\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\">\n </phoenix-quick-pick>\n }\n\n @if (type) {\n <span class=\"text-xl font-semibold text-gray-500\"\n [ngClass]=\"{ 'ml-3': !enableQuickPick }\">\n {{ type }} :\n </span>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span class=\"text-xl font-semibold\"\n [pTooltip]=\"name.length > 40 ? name : undefined\"\n [ngClass]=\"{ 'ml-3': !enableQuickPick && !type }\">\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 class=\"text-base text-gray-500\"\n [pTooltip]=\"title.length > 20 ? title : undefined\">\n {{ title.length > 20 ? (title | slice: 0:20) + '\u2026' : title }}\n </span>\n }\n\n <!-- TAG -->\n @if (tag) {\n <p-tag\n class=\"ml-auto\"\n [icon]=\"tag.icon\"\n [value]=\"tag.text\"\n [severity]=\"tag.variant || 'info'\">\n </p-tag>\n }\n</div>", 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"] }]
1275
1276
  }], propDecorators: { onQuickPickClickEmiter: [{
1276
1277
  type: Output
1277
1278
  }], onToggleClickEmmiter: [{
@@ -1284,7 +1285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1284
1285
  type: Input
1285
1286
  }], title: [{
1286
1287
  type: Input
1287
- }], icon: [{
1288
+ }], tag: [{
1288
1289
  type: Input
1289
1290
  }], enableQuickPick: [{
1290
1291
  type: Input