@fuentis/phoenix-ui 0.0.9-alpha.590 → 0.0.9-alpha.592
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.
|
@@ -610,7 +610,7 @@ class CardComponent {
|
|
|
610
610
|
return title && title.length > 40;
|
|
611
611
|
}
|
|
612
612
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "phoenix-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, cardActions: { classPropertyName: "cardActions", publicName: "cardActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardEventEmmiter: "cardEventEmmiter" }, viewQueries: [{ propertyName: "descEl", first: true, predicate: ["descEl"], descendants: true }], ngImport: i0, template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for(item of card()[
|
|
613
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "phoenix-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, cardActions: { classPropertyName: "cardActions", publicName: "cardActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardEventEmmiter: "cardEventEmmiter" }, viewQueries: [{ propertyName: "descEl", first: true, predicate: ["descEl"], descendants: true }], ngImport: i0, template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\" style=\"height: 30px\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for (item of card()[\"footerData\"]; track item.key; let i = $index) {\n @if (item?.value) {\n <p-tag\n [icon]=\"item?.icon\"\n [severity]=\"item?.severity || 'info'\"\n [value]=\"item.value\"\n />\n } @else {\n <span>--</span>\n }\n }\n </div>\n </ng-template>\n</p-card>\n", styles: ["::ng-deep .phoenix-card-tooltip{max-width:500px!important;white-space:normal!important;word-wrap:break-word!important}.card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: ActionsComponent, selector: "pho-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i8.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] });
|
|
614
614
|
}
|
|
615
615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
|
|
616
616
|
type: Component,
|
|
@@ -624,7 +624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
624
624
|
TagModule,
|
|
625
625
|
DividerModule,
|
|
626
626
|
TooltipModule,
|
|
627
|
-
], template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for(item of card()[
|
|
627
|
+
], template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\" style=\"height: 30px\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for (item of card()[\"footerData\"]; track item.key; let i = $index) {\n @if (item?.value) {\n <p-tag\n [icon]=\"item?.icon\"\n [severity]=\"item?.severity || 'info'\"\n [value]=\"item.value\"\n />\n } @else {\n <span>--</span>\n }\n }\n </div>\n </ng-template>\n</p-card>\n", styles: ["::ng-deep .phoenix-card-tooltip{max-width:500px!important;white-space:normal!important;word-wrap:break-word!important}.card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}\n"] }]
|
|
628
628
|
}], propDecorators: { card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: true }] }], cardEventEmmiter: [{ type: i0.Output, args: ["cardEventEmmiter"] }], cardActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardActions", required: false }] }], descEl: [{
|
|
629
629
|
type: ViewChild,
|
|
630
630
|
args: ['descEl']
|
|
@@ -9165,8 +9165,8 @@ class MetaSwitchV2Component {
|
|
|
9165
9165
|
dataCy;
|
|
9166
9166
|
cdr = inject(ChangeDetectorRef);
|
|
9167
9167
|
/**
|
|
9168
|
-
* Current boolean value.
|
|
9169
|
-
*
|
|
9168
|
+
* Current boolean value stored inside the component.
|
|
9169
|
+
* This value is synchronized with the parent FormControl through CVA.
|
|
9170
9170
|
*/
|
|
9171
9171
|
value = false;
|
|
9172
9172
|
/**
|
|
@@ -9221,18 +9221,22 @@ class MetaSwitchV2Component {
|
|
|
9221
9221
|
* Handler for switch change.
|
|
9222
9222
|
* Propagates value to the parent form control.
|
|
9223
9223
|
*
|
|
9224
|
-
*
|
|
9224
|
+
* Important note:
|
|
9225
|
+
* We intentionally use [ngModel] instead of [(ngModel)] in the template.
|
|
9226
|
+
* Two-way binding would update the local value BEFORE this handler runs,
|
|
9227
|
+
* which would prevent correct change detection and CVA propagation.
|
|
9225
9228
|
*/
|
|
9226
9229
|
onSwitchChange(next) {
|
|
9227
9230
|
if (this.disabled)
|
|
9228
9231
|
return;
|
|
9229
9232
|
const normalized = this.normalizeBool(next);
|
|
9230
|
-
|
|
9231
|
-
|
|
9233
|
+
if (normalized !== this.value) {
|
|
9234
|
+
this.value = normalized;
|
|
9235
|
+
this.onChange(normalized);
|
|
9232
9236
|
this.cdr.markForCheck();
|
|
9233
9237
|
return;
|
|
9234
9238
|
}
|
|
9235
|
-
|
|
9239
|
+
// ensure the form control still receives the value
|
|
9236
9240
|
this.onChange(normalized);
|
|
9237
9241
|
this.cdr.markForCheck();
|
|
9238
9242
|
}
|
|
@@ -9274,7 +9278,7 @@ class MetaSwitchV2Component {
|
|
|
9274
9278
|
], ngImport: i0, template: `
|
|
9275
9279
|
<p-toggleSwitch
|
|
9276
9280
|
class="phoenix-switch-v2"
|
|
9277
|
-
[
|
|
9281
|
+
[ngModel]="value"
|
|
9278
9282
|
(ngModelChange)="onSwitchChange($event)"
|
|
9279
9283
|
(onBlur)="handleBlur()"
|
|
9280
9284
|
[disabled]="disabled"
|
|
@@ -9288,7 +9292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
9288
9292
|
args: [{ selector: 'phoenix-meta-switch-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, ToggleSwitchModule], template: `
|
|
9289
9293
|
<p-toggleSwitch
|
|
9290
9294
|
class="phoenix-switch-v2"
|
|
9291
|
-
[
|
|
9295
|
+
[ngModel]="value"
|
|
9292
9296
|
(ngModelChange)="onSwitchChange($event)"
|
|
9293
9297
|
(onBlur)="handleBlur()"
|
|
9294
9298
|
[disabled]="disabled"
|