@fuentis/phoenix-ui 0.0.9-alpha.445 → 0.0.9-alpha.447

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.
Files changed (3) hide show
  1. package/fesm2022/fuentis-phoenix-ui.mjs +76 -30
  2. package/fesm2022/fuentis-phoenix-ui.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/fuentis-phoenix-ui.mjs CHANGED
@@ -144,19 +144,24 @@ class SidebarItemComponent {
144
144
  <li
145
145
  class="list-none flex align-items-center border-bottom-1 border-200"
146
146
  routerLinkActive="active-link"
147
- [routerLinkActiveOptions]="{ exact:false }"
147
+ [routerLinkActiveOptions]="{ exact: false }"
148
148
  >
149
149
  <!-- Visible link: user navigation goes to item.path -->
150
150
  <a
151
151
  class="p-button no-underline w-full justify-content-between surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
152
152
  [attr.data-cy]="'navigation-side-navigation-item-' + item.label"
153
153
  [routerLink]="item?.disabled ? null : item.path"
154
- [ngClass]="[ classname, item?.disabled ? 'opacity-50 cursor-not-allowed' : '' ]"
154
+ [ngClass]="[
155
+ classname,
156
+ item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
157
+ ]"
155
158
  [style.pointer-events]="item?.disabled ? 'none' : 'auto'"
156
159
  >
157
160
  <div class="flex align-items-center ">
158
161
  <img class="mr-2" width="28" [src]="item.icon" alt="" />
159
- <span class="text-primary font-bold pr-3 ">{{ item.label | translate }}</span>
162
+ <span class="text-primary font-bold pr-3 ">{{
163
+ item.label | translate
164
+ }}</span>
160
165
  </div>
161
166
 
162
167
  <p-button
@@ -185,7 +190,9 @@ class SidebarItemComponent {
185
190
  [popup]="true"
186
191
  >
187
192
  <ng-template #submenuheader let-item>
188
- <span class="text-400 text-sm font-semibold">{{ item.label | translate }}</span>
193
+ <span class="text-400 text-sm font-semibold">{{
194
+ item.label | translate
195
+ }}</span>
189
196
  </ng-template>
190
197
  <ng-template pTemplate="item" let-item>
191
198
  <a
@@ -222,29 +229,45 @@ class SidebarItemComponent {
222
229
  class="list-none flex align-items-center"
223
230
  [pTooltip]="item?.tooltip | translate"
224
231
  routerLinkActive="active-link"
225
- [routerLinkActiveOptions]="{ exact:false }"
232
+ [routerLinkActiveOptions]="{ exact: false }"
226
233
  >
227
234
  <!-- Visible link: user navigation goes to item.path -->
228
235
  <a
229
236
  [attr.data-cy]="'navigation-side-navigation-item-' + item.label"
230
237
  [routerLink]="item?.disabled ? null : item.path"
231
238
  class="p-button no-underline w-full justify-content-start surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
232
- [ngClass]="[ classname, item?.disabled ? 'opacity-50 cursor-not-allowed' : '' ]"
239
+ [ngClass]="[
240
+ classname,
241
+ item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
242
+ ]"
233
243
  [style.pointer-events]="item?.disabled ? 'none' : 'auto'"
234
244
  >
235
- <div class="flex justify-content-between w-full" style="margin-left: 24px;">
245
+ <div
246
+ class="flex justify-content-between w-full"
247
+ style="margin-left: 24px;"
248
+ >
236
249
  <span style="font-size:13px" class="text-primary white-space-nowrap">
237
250
  {{ item.label | translate }}
238
251
  </span>
239
- @if(item.tag){
240
- <p-tag [style]="{ fontSize: '9px', padding: '2px 6px' }" severity="danger" [value]="item.tag" />
241
- }
242
- @if(item.lock){
243
- <p-tag [style]="{ fontSize: '9px', paddingRight: '3px' }" severity="warn" icon="pi pi-lock" />
244
- }
245
252
  </div>
246
253
  </a>
247
-
254
+ @if(item.tag){
255
+ <p-tag
256
+ [style]="{
257
+ fontSize: '9px',
258
+ padding: '2px 6px',
259
+
260
+ }"
261
+ severity="info"
262
+ [value]="item.tag | translate"
263
+ />
264
+ } @if(item.lock){
265
+ <p-tag
266
+ [style]="{ fontSize: '9px', paddingRight: '3px' }"
267
+ severity="warn"
268
+ icon="pi pi-lock"
269
+ />
270
+ }
248
271
  <!-- Hidden link: used ONLY to activate based on basePath -->
249
272
  <a
250
273
  [routerLink]="item.basePath || item.path"
@@ -273,19 +296,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
273
296
  <li
274
297
  class="list-none flex align-items-center border-bottom-1 border-200"
275
298
  routerLinkActive="active-link"
276
- [routerLinkActiveOptions]="{ exact:false }"
299
+ [routerLinkActiveOptions]="{ exact: false }"
277
300
  >
278
301
  <!-- Visible link: user navigation goes to item.path -->
279
302
  <a
280
303
  class="p-button no-underline w-full justify-content-between surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
281
304
  [attr.data-cy]="'navigation-side-navigation-item-' + item.label"
282
305
  [routerLink]="item?.disabled ? null : item.path"
283
- [ngClass]="[ classname, item?.disabled ? 'opacity-50 cursor-not-allowed' : '' ]"
306
+ [ngClass]="[
307
+ classname,
308
+ item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
309
+ ]"
284
310
  [style.pointer-events]="item?.disabled ? 'none' : 'auto'"
285
311
  >
286
312
  <div class="flex align-items-center ">
287
313
  <img class="mr-2" width="28" [src]="item.icon" alt="" />
288
- <span class="text-primary font-bold pr-3 ">{{ item.label | translate }}</span>
314
+ <span class="text-primary font-bold pr-3 ">{{
315
+ item.label | translate
316
+ }}</span>
289
317
  </div>
290
318
 
291
319
  <p-button
@@ -314,7 +342,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
314
342
  [popup]="true"
315
343
  >
316
344
  <ng-template #submenuheader let-item>
317
- <span class="text-400 text-sm font-semibold">{{ item.label | translate }}</span>
345
+ <span class="text-400 text-sm font-semibold">{{
346
+ item.label | translate
347
+ }}</span>
318
348
  </ng-template>
319
349
  <ng-template pTemplate="item" let-item>
320
350
  <a
@@ -351,29 +381,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
351
381
  class="list-none flex align-items-center"
352
382
  [pTooltip]="item?.tooltip | translate"
353
383
  routerLinkActive="active-link"
354
- [routerLinkActiveOptions]="{ exact:false }"
384
+ [routerLinkActiveOptions]="{ exact: false }"
355
385
  >
356
386
  <!-- Visible link: user navigation goes to item.path -->
357
387
  <a
358
388
  [attr.data-cy]="'navigation-side-navigation-item-' + item.label"
359
389
  [routerLink]="item?.disabled ? null : item.path"
360
390
  class="p-button no-underline w-full justify-content-start surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
361
- [ngClass]="[ classname, item?.disabled ? 'opacity-50 cursor-not-allowed' : '' ]"
391
+ [ngClass]="[
392
+ classname,
393
+ item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
394
+ ]"
362
395
  [style.pointer-events]="item?.disabled ? 'none' : 'auto'"
363
396
  >
364
- <div class="flex justify-content-between w-full" style="margin-left: 24px;">
397
+ <div
398
+ class="flex justify-content-between w-full"
399
+ style="margin-left: 24px;"
400
+ >
365
401
  <span style="font-size:13px" class="text-primary white-space-nowrap">
366
402
  {{ item.label | translate }}
367
403
  </span>
368
- @if(item.tag){
369
- <p-tag [style]="{ fontSize: '9px', padding: '2px 6px' }" severity="danger" [value]="item.tag" />
370
- }
371
- @if(item.lock){
372
- <p-tag [style]="{ fontSize: '9px', paddingRight: '3px' }" severity="warn" icon="pi pi-lock" />
373
- }
374
404
  </div>
375
405
  </a>
376
-
406
+ @if(item.tag){
407
+ <p-tag
408
+ [style]="{
409
+ fontSize: '9px',
410
+ padding: '2px 6px',
411
+
412
+ }"
413
+ severity="info"
414
+ [value]="item.tag | translate"
415
+ />
416
+ } @if(item.lock){
417
+ <p-tag
418
+ [style]="{ fontSize: '9px', paddingRight: '3px' }"
419
+ severity="warn"
420
+ icon="pi pi-lock"
421
+ />
422
+ }
377
423
  <!-- Hidden link: used ONLY to activate based on basePath -->
378
424
  <a
379
425
  [routerLink]="item.basePath || item.path"
@@ -1338,7 +1384,7 @@ class ContexObjectComponent {
1338
1384
  }
1339
1385
  }
1340
1386
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ContexObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1341
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2 w-full\">\n @if (ctxBackRoute?.length) {\n <button\n pButton\n type=\"button\"\n icon=\"pi pi-arrow-left\"\n class=\"p-button-text ml-1\"\n (click)=\"onBackClick()\"\n ></button>\n } @if (ctxType) {\n <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n } @if (ctxName) {\n <span\n class=\"text-xl font-semibold ml-3\"\n [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n >\n {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n </span>\n } @if (ctxTitle) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n >\n {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n </span>\n } @if (ctxTags?.length) {\n <div class=\"flex align-items-center gap-2 ml-3\">\n @for (tag of ctxTags; track tag.text) {\n <p-tag\n [value]=\"tag.text\"\n [severity]=\"tag.variant || 'info'\"\n [icon]=\"tag.icon\"\n [style]=\"{\n 'font-size': '11px',\n 'padding': '3px 8px',\n 'width': 'fit-content',\n }\"\n [ngStyle]=\"\n tag.color\n ? {\n 'background-color': tag.color + '66',\n color: tag.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div>\n }\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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { 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: TagModule }, { kind: "component", type: i3$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1387
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2 w-full\">\n @if (ctxBackRoute?.length) {\n <button\n pButton\n type=\"button\"\n icon=\"pi pi-arrow-left\"\n class=\"p-button-text ml-1\"\n (click)=\"onBackClick()\"\n ></button>\n } @if (ctxType) {\n <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n } @if (ctxName) {\n <span\n class=\"text-xl font-semibold ml-3 text-primary\"\n [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n >\n {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n </span>\n } @if (ctxTitle) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n >\n {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n </span>\n } @if (ctxTags?.length) {\n <div class=\"flex align-items-center gap-2 ml-3\">\n @for (tag of ctxTags; track tag.text) {\n <p-tag\n [value]=\"tag.text\"\n [severity]=\"tag.variant || 'info'\"\n [icon]=\"tag.icon\"\n [style]=\"{\n 'font-size': '11px',\n 'padding': '3px 8px',\n 'width': 'fit-content',\n }\"\n [ngStyle]=\"\n tag.color\n ? {\n 'background-color': tag.color + '66',\n color: tag.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div>\n }\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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { 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: TagModule }, { kind: "component", type: i3$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1342
1388
  }
1343
1389
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ContexObjectComponent, decorators: [{
1344
1390
  type: Component,
@@ -1348,7 +1394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1348
1394
  TranslateModule,
1349
1395
  TooltipModule,
1350
1396
  TagModule,
1351
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2 w-full\">\n @if (ctxBackRoute?.length) {\n <button\n pButton\n type=\"button\"\n icon=\"pi pi-arrow-left\"\n class=\"p-button-text ml-1\"\n (click)=\"onBackClick()\"\n ></button>\n } @if (ctxType) {\n <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n } @if (ctxName) {\n <span\n class=\"text-xl font-semibold ml-3\"\n [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n >\n {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n </span>\n } @if (ctxTitle) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n >\n {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n </span>\n } @if (ctxTags?.length) {\n <div class=\"flex align-items-center gap-2 ml-3\">\n @for (tag of ctxTags; track tag.text) {\n <p-tag\n [value]=\"tag.text\"\n [severity]=\"tag.variant || 'info'\"\n [icon]=\"tag.icon\"\n [style]=\"{\n 'font-size': '11px',\n 'padding': '3px 8px',\n 'width': 'fit-content',\n }\"\n [ngStyle]=\"\n tag.color\n ? {\n 'background-color': tag.color + '66',\n color: tag.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div>\n }\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"] }]
1397
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2 w-full\">\n @if (ctxBackRoute?.length) {\n <button\n pButton\n type=\"button\"\n icon=\"pi pi-arrow-left\"\n class=\"p-button-text ml-1\"\n (click)=\"onBackClick()\"\n ></button>\n } @if (ctxType) {\n <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n } @if (ctxName) {\n <span\n class=\"text-xl font-semibold ml-3 text-primary\"\n [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n >\n {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n </span>\n } @if (ctxTitle) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n >\n {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n </span>\n } @if (ctxTags?.length) {\n <div class=\"flex align-items-center gap-2 ml-3\">\n @for (tag of ctxTags; track tag.text) {\n <p-tag\n [value]=\"tag.text\"\n [severity]=\"tag.variant || 'info'\"\n [icon]=\"tag.icon\"\n [style]=\"{\n 'font-size': '11px',\n 'padding': '3px 8px',\n 'width': 'fit-content',\n }\"\n [ngStyle]=\"\n tag.color\n ? {\n 'background-color': tag.color + '66',\n color: tag.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div>\n }\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"] }]
1352
1398
  }], propDecorators: { config: [{
1353
1399
  type: Input
1354
1400
  }] } });