@fuentis/phoenix-ui 0.0.9-alpha.401 → 0.0.9-alpha.403

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,6 +1234,7 @@ class StatusHeaderComponent {
1234
1234
  type;
1235
1235
  name = '';
1236
1236
  title = '';
1237
+ tag;
1237
1238
  enableQuickPick = false;
1238
1239
  actions = [];
1239
1240
  panelState = false;
@@ -1258,7 +1259,7 @@ class StatusHeaderComponent {
1258
1259
  this.onCloseEvent.emit();
1259
1260
  }
1260
1261
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1261
- 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", 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\">\n @if (enableQuickPick) {\n <phoenix-quick-pick (onBack)=\"onToggleClick('back')\" (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"></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 }} : </span>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span class=\"text-xl font-semibold\" [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\n <!-- TITLE with tooltip and truncation -->\n @if (title) {\n <span class=\"text-base text-gray-500\" [pTooltip]=\"title.length > 20 ? title : undefined\">\n {{ title.length > 20 ? (title | slice: 0:20) + '\u2026' : title }}\n </span>\n }\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 objekat -->\n @if (tag) {\n <div class=\"ml-auto flex align-items-center gap-2 bg-gray-100 px-3 py-1 rounded-2xl\">\n @if (tag.icon) {\n <i class=\"{{ tag.icon }} text-gray-600 text-sm\"></i>\n }\n @if (tag.text) {\n <span class=\"text-sm font-medium text-gray-700\">{{ tag.text }}</span>\n }\n </div>\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
1263
  }
1263
1264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusHeaderComponent, decorators: [{
1264
1265
  type: Component,
@@ -1270,7 +1271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1270
1271
  TooltipModule,
1271
1272
  TieredMenuModule,
1272
1273
  QuickPickComponent,
1273
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center pt-2 gap-2\">\n @if (enableQuickPick) {\n <phoenix-quick-pick (onBack)=\"onToggleClick('back')\" (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"></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 }} : </span>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span class=\"text-xl font-semibold\" [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\n <!-- TITLE with tooltip and truncation -->\n @if (title) {\n <span class=\"text-base text-gray-500\" [pTooltip]=\"title.length > 20 ? title : undefined\">\n {{ title.length > 20 ? (title | slice: 0:20) + '\u2026' : title }}\n </span>\n }\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
+ ], 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 objekat -->\n @if (tag) {\n <div class=\"ml-auto flex align-items-center gap-2 bg-gray-100 px-3 py-1 rounded-2xl\">\n @if (tag.icon) {\n <i class=\"{{ tag.icon }} text-gray-600 text-sm\"></i>\n }\n @if (tag.text) {\n <span class=\"text-sm font-medium text-gray-700\">{{ tag.text }}</span>\n }\n </div>\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
1275
  }], propDecorators: { onQuickPickClickEmiter: [{
1275
1276
  type: Output
1276
1277
  }], onToggleClickEmmiter: [{
@@ -1283,6 +1284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1283
1284
  type: Input
1284
1285
  }], title: [{
1285
1286
  type: Input
1287
+ }], tag: [{
1288
+ type: Input
1286
1289
  }], enableQuickPick: [{
1287
1290
  type: Input
1288
1291
  }], actions: [{