@updevs/components 1.0.0-alpha.50 → 1.0.0-alpha.51
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.
|
@@ -16,10 +16,10 @@ export class PricingCardsComponent {
|
|
|
16
16
|
this.selected.emit(item);
|
|
17
17
|
}
|
|
18
18
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PricingCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PricingCardsComponent, selector: "upd-pricing-cards", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "directive", type: i2.CardHeaderDirective, selector: "ng-template[updCardHeader]" }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5.BadgeComponent, selector: "upd-badge", inputs: ["config", "bgColor", "textColor", "text", "isOutline", "isPill", "isNotification", "isBlinking", "customClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PricingCardsComponent, selector: "upd-pricing-cards", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col-lg col-sm-6\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "directive", type: i2.CardHeaderDirective, selector: "ng-template[updCardHeader]" }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5.BadgeComponent, selector: "upd-badge", inputs: ["config", "bgColor", "textColor", "text", "isOutline", "isPill", "isNotification", "isBlinking", "customClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20
20
|
}
|
|
21
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PricingCardsComponent, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
|
-
args: [{ selector: 'upd-pricing-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
23
|
+
args: [{ selector: 'upd-pricing-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col-lg col-sm-6\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
24
24
|
}] });
|
|
25
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJpY2luZy1jYXJkcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcHJpY2luZy1jYXJkcy9zcmMvcHJpY2luZy1jYXJkcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcHJpY2luZy1jYXJkcy9zcmMvcHJpY2luZy1jYXJkcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFGLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUM7Ozs7Ozs7QUFVMUMsTUFBTSxPQUFPLHFCQUFxQjtJQU5sQztRQU9hLFVBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFvQixDQUFDO1FBQzNDLGFBQVEsR0FBRyxNQUFNLEVBQWtCLENBQUM7UUFFcEMsZ0JBQVcsR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7S0FLOUM7SUFIRyxZQUFZLENBQUMsSUFBb0I7UUFDN0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDN0IsQ0FBQzs4R0FSUSxxQkFBcUI7a0dBQXJCLHFCQUFxQiwrTkNYbEMsc3RGQXFEQTs7MkZEMUNhLHFCQUFxQjtrQkFOakMsU0FBUzsrQkFDSSxtQkFBbUIsbUJBR1osdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGluamVjdCwgaW5wdXQsIG91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGV4dFNlcnZpY2UgfSBmcm9tICdAdXBkZXZzL3Nkayc7XG5cbmltcG9ydCB7IFByaWNlSXRlbU1vZGVsIH0gZnJvbSAnLi9tb2RlbHMvcHJpY2UtaXRlbS5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndXBkLXByaWNpbmctY2FyZHMnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9wcmljaW5nLWNhcmRzLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybDogJy4vcHJpY2luZy1jYXJkcy5jb21wb25lbnQuc2NzcycsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgUHJpY2luZ0NhcmRzQ29tcG9uZW50IHtcbiAgICByZWFkb25seSBpdGVtcyA9IGlucHV0LnJlcXVpcmVkPFByaWNlSXRlbU1vZGVsW10+KCk7XG4gICAgcmVhZG9ubHkgc2VsZWN0ZWQgPSBvdXRwdXQ8UHJpY2VJdGVtTW9kZWw+KCk7XG5cbiAgICByZWFkb25seSB0ZXh0U2VydmljZSA9IGluamVjdChUZXh0U2VydmljZSk7XG5cbiAgICBzZWxlY3RPcHRpb24oaXRlbTogUHJpY2VJdGVtTW9kZWwpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZC5lbWl0KGl0ZW0pO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJyb3cgcm93LWNhcmRzXCI+XG4gICAgQGZvciAoaXRlbSBvZiBpdGVtcygpOyB0cmFjayBpdGVtLmlkKSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb2wtbGcgY29sLXNtLTZcIj5cbiAgICAgICAgICAgIDx1cGQtY2FyZCBbcmliYm9uQmFja2dyb3VuZF09XCIhIWl0ZW0ucmliYm9uSWNvbiA/IGl0ZW0uaGlnaGxpZ2h0Q29sb3IgOiB1bmRlZmluZWRcIiBbcmliYm9uSWNvbl09XCJpdGVtLnJpYmJvbkljb25cIlxuICAgICAgICAgICAgICAgIFtyaWJib25TdHlsZV09XCJpdGVtLnJpYmJvblN0eWxlIHx8ICd0b3AnXCIgW3N0YXR1c0JhY2tncm91bmRdPVwiaXRlbS5oaWdobGlnaHRDb2xvclwiIFt1c2VMaWdodEhlYWRlcl09XCJ0cnVlXCI+XG4gICAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlIHVwZENhcmRIZWFkZXI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXVwcGVyY2FzZSB0ZXh0LXNlY29uZGFyeSBmdy1ib2xkXCI+e3sgaXRlbS50aXRsZSB9fTwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IFtjbGFzcy5tZS02XT1cIiEhaXRlbS5yaWJib25JY29uXCIgY2xhc3M9XCJtcy1hdXRvIGQtZmxleCBnYXAtMVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgQGZvciAodGFnIG9mIGl0ZW0udGFnczsgdHJhY2sgdGFnLnRleHQudGV4dCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1cGQtYmFkZ2UgW2JnQ29sb3JdPVwidGFnLmJhY2tncm91bmRDb2xvclwiIFt0ZXh0XT1cInRhZy50ZXh0XCI+PC91cGQtYmFkZ2U+XG4gICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGlzcGxheS01IGZ3LWJvbGQgbWItM1wiPnt7IGl0ZW0ucHJpY2UgfX08L2Rpdj5cblxuICAgICAgICAgICAgICAgIEBpZiAoKGl0ZW0uZ3JvdXBlZEZlYXR1cmVzPy5sZW5ndGggfHwgMCkgPiAwKSB7XG4gICAgICAgICAgICAgICAgICAgIEBmb3IgKGdyb3VwIG9mIGl0ZW0uZ3JvdXBlZEZlYXR1cmVzOyB0cmFjayBncm91cC5uYW1lKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiYmctc3VyZmFjZS10ZXJ0aWFyeVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwic3ViaGVhZGVyXCI+e3sgZ3JvdXAubmFtZSB9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJmZWF0dXJlc1RwbFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cIntmZWF0dXJlczogZ3JvdXAuZmVhdHVyZXN9XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9IEBlbHNlIHtcbiAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJmZWF0dXJlc1RwbFwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ZmVhdHVyZXM6IGl0ZW0uZmVhdHVyZXN9XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRleHQtY2VudGVyIG10LTRcIj5cbiAgICAgICAgICAgICAgICAgICAgPHVwZC1idXR0b24gKGNsaWNrZWQpPVwic2VsZWN0T3B0aW9uKGl0ZW0pXCIgY3VzdG9tQ2xhc3Nlcz1cInctMTAwXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtjb2xvclN0eWxlXT1cIiEhaXRlbS5oaWdobGlnaHRDb2xvciA/IGl0ZW0uaGlnaGxpZ2h0Q29sb3IgOiB1bmRlZmluZWRcIiBbaXNEaXNhYmxlZF09XCIhIWl0ZW0uY3VycmVudFRleHRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7IHRleHRTZXJ2aWNlLmdldFRleHQoISFpdGVtLmN1cnJlbnRUZXh0ID8gaXRlbS5jdXJyZW50VGV4dCA6IGl0ZW0uY2hvb3NlVGhpc1RleHQpIH19XG4gICAgICAgICAgICAgICAgICAgIDwvdXBkLWJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvdXBkLWNhcmQ+XG4gICAgICAgIDwvZGl2PlxuICAgIH1cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2ZlYXR1cmVzVHBsIGxldC1mZWF0dXJlcz1cImZlYXR1cmVzXCI+XG4gICAgPHVsIGNsYXNzPVwibGlzdC11bnN0eWxlZCBsaC1sZ1wiPlxuICAgICAgICBAZm9yIChmZWF0dXJlIG9mIGZlYXR1cmVzOyB0cmFjayBmZWF0dXJlLnRleHQpIHtcbiAgICAgICAgICAgIDxsaSBbY2xhc3MuZnctYm9sZF09XCJmZWF0dXJlLmlzSGlnaGxpZ2h0ZWRcIj5cbiAgICAgICAgICAgICAgICBAaWYgKGZlYXR1cmUuaXNJbmNsdWRlZCkge1xuICAgICAgICAgICAgICAgICAgICA8dXBkLWljb24gdGFibGVySWNvbj1cImNoZWNrXCIgY29sb3JDbGFzcz1cInRleHQtc3VjY2Vzc1wiPjwvdXBkLWljb24+XG4gICAgICAgICAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgIDx1cGQtaWNvbiB0YWJsZXJJY29uPVwieFwiIGNvbG9yQ2xhc3M9XCJ0ZXh0LWRhbmdlclwiPjwvdXBkLWljb24+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwibXMtMlwiPnt7IGZlYXR1cmUudGV4dCB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDwvbGk+XG4gICAgICAgIH1cbiAgICA8L3VsPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
|
|
@@ -22,11 +22,11 @@ class PricingCardsComponent {
|
|
|
22
22
|
this.selected.emit(item);
|
|
23
23
|
}
|
|
24
24
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PricingCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PricingCardsComponent, selector: "upd-pricing-cards", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "directive", type: i2.CardHeaderDirective, selector: "ng-template[updCardHeader]" }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5.BadgeComponent, selector: "upd-badge", inputs: ["config", "bgColor", "textColor", "text", "isOutline", "isPill", "isNotification", "isBlinking", "customClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PricingCardsComponent, selector: "upd-pricing-cards", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col-lg col-sm-6\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "directive", type: i2.CardHeaderDirective, selector: "ng-template[updCardHeader]" }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5.BadgeComponent, selector: "upd-badge", inputs: ["config", "bgColor", "textColor", "text", "isOutline", "isPill", "isNotification", "isBlinking", "customClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26
26
|
}
|
|
27
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PricingCardsComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
|
-
args: [{ selector: 'upd-pricing-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
29
|
+
args: [{ selector: 'upd-pricing-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col-lg col-sm-6\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
30
30
|
}] });
|
|
31
31
|
|
|
32
32
|
class UpdPricingCardsModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"updevs-components-pricing-cards.mjs","sources":["../../../../libs/components/pricing-cards/src/pricing-cards.component.ts","../../../../libs/components/pricing-cards/src/pricing-cards.component.html","../../../../libs/components/pricing-cards/src/upd-pricing-cards.module.ts","../../../../libs/components/pricing-cards/src/updevs-components-pricing-cards.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\n\nimport { PriceItemModel } from './models/price-item.model';\n\n@Component({\n selector: 'upd-pricing-cards',\n templateUrl: './pricing-cards.component.html',\n styleUrl: './pricing-cards.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PricingCardsComponent {\n readonly items = input.required<PriceItemModel[]>();\n readonly selected = output<PriceItemModel>();\n\n readonly textService = inject(TextService);\n\n selectOption(item: PriceItemModel): void {\n this.selected.emit(item);\n }\n}\n","<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdCardModule } from '@updevs/components/card';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdBadgeModule } from '@updevs/components/badge';\n\nimport { PricingCardsComponent } from './pricing-cards.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdCardModule,\n UpdIconsModule,\n UpdButtonModule,\n UpdBadgeModule\n ],\n declarations: [\n PricingCardsComponent\n ],\n exports: [\n PricingCardsComponent\n ]\n})\nexport class UpdPricingCardsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;MAWa,qBAAqB,CAAA;AANlC,IAAA,WAAA,GAAA;AAOa,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAoB;QAC1C,IAAQ,CAAA,QAAA,GAAG,MAAM,EAAkB;AAEnC,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;AAK7C;AAHG,IAAA,YAAY,CAAC,IAAoB,EAAA;AAC7B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;8GAPnB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,+NCXlC,
|
|
1
|
+
{"version":3,"file":"updevs-components-pricing-cards.mjs","sources":["../../../../libs/components/pricing-cards/src/pricing-cards.component.ts","../../../../libs/components/pricing-cards/src/pricing-cards.component.html","../../../../libs/components/pricing-cards/src/upd-pricing-cards.module.ts","../../../../libs/components/pricing-cards/src/updevs-components-pricing-cards.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\n\nimport { PriceItemModel } from './models/price-item.model';\n\n@Component({\n selector: 'upd-pricing-cards',\n templateUrl: './pricing-cards.component.html',\n styleUrl: './pricing-cards.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PricingCardsComponent {\n readonly items = input.required<PriceItemModel[]>();\n readonly selected = output<PriceItemModel>();\n\n readonly textService = inject(TextService);\n\n selectOption(item: PriceItemModel): void {\n this.selected.emit(item);\n }\n}\n","<div class=\"row row-cards\">\n @for (item of items(); track item.id) {\n <div class=\"col-lg col-sm-6\">\n <upd-card [ribbonBackground]=\"!!item.ribbonIcon ? item.highlightColor : undefined\" [ribbonIcon]=\"item.ribbonIcon\"\n [ribbonStyle]=\"item.ribbonStyle || 'top'\" [statusBackground]=\"item.highlightColor\" [useLightHeader]=\"true\">\n <ng-template updCardHeader>\n <div class=\"text-uppercase text-secondary fw-bold\">{{ item.title }}</div>\n <div [class.me-6]=\"!!item.ribbonIcon\" class=\"ms-auto d-flex gap-1\">\n @for (tag of item.tags; track tag.text.text) {\n <upd-badge [bgColor]=\"tag.backgroundColor\" [text]=\"tag.text\"></upd-badge>\n }\n </div>\n </ng-template>\n\n <div class=\"display-5 fw-bold mb-3\">{{ item.price }}</div>\n\n @if ((item.groupedFeatures?.length || 0) > 0) {\n @for (group of item.groupedFeatures; track group.name) {\n <div class=\"bg-surface-tertiary\">\n <span class=\"subheader\">{{ group.name }}</span>\n </div>\n <ng-container [ngTemplateOutlet]=\"featuresTpl\"\n [ngTemplateOutletContext]=\"{features: group.features}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"featuresTpl\" [ngTemplateOutletContext]=\"{features: item.features}\"></ng-container>\n }\n\n <div class=\"text-center mt-4\">\n <upd-button (clicked)=\"selectOption(item)\" customClasses=\"w-100\"\n [colorStyle]=\"!!item.highlightColor ? item.highlightColor : undefined\" [isDisabled]=\"!!item.currentText\">\n {{ textService.getText(!!item.currentText ? item.currentText : item.chooseThisText) }}\n </upd-button>\n </div>\n </upd-card>\n </div>\n }\n</div>\n\n<ng-template #featuresTpl let-features=\"features\">\n <ul class=\"list-unstyled lh-lg\">\n @for (feature of features; track feature.text) {\n <li [class.fw-bold]=\"feature.isHighlighted\">\n @if (feature.isIncluded) {\n <upd-icon tablerIcon=\"check\" colorClass=\"text-success\"></upd-icon>\n } @else {\n <upd-icon tablerIcon=\"x\" colorClass=\"text-danger\"></upd-icon>\n }\n <span class=\"ms-2\">{{ feature.text }}</span>\n </li>\n }\n </ul>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdCardModule } from '@updevs/components/card';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdBadgeModule } from '@updevs/components/badge';\n\nimport { PricingCardsComponent } from './pricing-cards.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdCardModule,\n UpdIconsModule,\n UpdButtonModule,\n UpdBadgeModule\n ],\n declarations: [\n PricingCardsComponent\n ],\n exports: [\n PricingCardsComponent\n ]\n})\nexport class UpdPricingCardsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@updevs/components",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.51",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^18.0.1 || ^19.0.0",
|
|
6
6
|
"@angular/core": "^18.0.1 || ^19.0.0",
|
|
@@ -40,11 +40,11 @@
|
|
|
40
40
|
"esm": "./esm2022/button/updevs-components-button.mjs",
|
|
41
41
|
"default": "./fesm2022/updevs-components-button.mjs"
|
|
42
42
|
},
|
|
43
|
-
"./
|
|
44
|
-
"types": "./
|
|
45
|
-
"esm2022": "./esm2022/
|
|
46
|
-
"esm": "./esm2022/
|
|
47
|
-
"default": "./fesm2022/updevs-components-
|
|
43
|
+
"./drag-and-drop": {
|
|
44
|
+
"types": "./drag-and-drop/index.d.ts",
|
|
45
|
+
"esm2022": "./esm2022/drag-and-drop/updevs-components-drag-and-drop.mjs",
|
|
46
|
+
"esm": "./esm2022/drag-and-drop/updevs-components-drag-and-drop.mjs",
|
|
47
|
+
"default": "./fesm2022/updevs-components-drag-and-drop.mjs"
|
|
48
48
|
},
|
|
49
49
|
"./calendar": {
|
|
50
50
|
"types": "./calendar/index.d.ts",
|
|
@@ -52,11 +52,11 @@
|
|
|
52
52
|
"esm": "./esm2022/calendar/updevs-components-calendar.mjs",
|
|
53
53
|
"default": "./fesm2022/updevs-components-calendar.mjs"
|
|
54
54
|
},
|
|
55
|
-
"./
|
|
56
|
-
"types": "./
|
|
57
|
-
"esm2022": "./esm2022/
|
|
58
|
-
"esm": "./esm2022/
|
|
59
|
-
"default": "./fesm2022/updevs-components-
|
|
55
|
+
"./card": {
|
|
56
|
+
"types": "./card/index.d.ts",
|
|
57
|
+
"esm2022": "./esm2022/card/updevs-components-card.mjs",
|
|
58
|
+
"esm": "./esm2022/card/updevs-components-card.mjs",
|
|
59
|
+
"default": "./fesm2022/updevs-components-card.mjs"
|
|
60
60
|
},
|
|
61
61
|
"./dropdown": {
|
|
62
62
|
"types": "./dropdown/index.d.ts",
|
|
@@ -70,23 +70,17 @@
|
|
|
70
70
|
"esm": "./esm2022/form/updevs-components-form.mjs",
|
|
71
71
|
"default": "./fesm2022/updevs-components-form.mjs"
|
|
72
72
|
},
|
|
73
|
-
"./layout": {
|
|
74
|
-
"types": "./layout/index.d.ts",
|
|
75
|
-
"esm2022": "./esm2022/layout/updevs-components-layout.mjs",
|
|
76
|
-
"esm": "./esm2022/layout/updevs-components-layout.mjs",
|
|
77
|
-
"default": "./fesm2022/updevs-components-layout.mjs"
|
|
78
|
-
},
|
|
79
73
|
"./link": {
|
|
80
74
|
"types": "./link/index.d.ts",
|
|
81
75
|
"esm2022": "./esm2022/link/updevs-components-link.mjs",
|
|
82
76
|
"esm": "./esm2022/link/updevs-components-link.mjs",
|
|
83
77
|
"default": "./fesm2022/updevs-components-link.mjs"
|
|
84
78
|
},
|
|
85
|
-
"./
|
|
86
|
-
"types": "./
|
|
87
|
-
"esm2022": "./esm2022/
|
|
88
|
-
"esm": "./esm2022/
|
|
89
|
-
"default": "./fesm2022/updevs-components-
|
|
79
|
+
"./layout": {
|
|
80
|
+
"types": "./layout/index.d.ts",
|
|
81
|
+
"esm2022": "./esm2022/layout/updevs-components-layout.mjs",
|
|
82
|
+
"esm": "./esm2022/layout/updevs-components-layout.mjs",
|
|
83
|
+
"default": "./fesm2022/updevs-components-layout.mjs"
|
|
90
84
|
},
|
|
91
85
|
"./modal": {
|
|
92
86
|
"types": "./modal/index.d.ts",
|
|
@@ -94,6 +88,12 @@
|
|
|
94
88
|
"esm": "./esm2022/modal/updevs-components-modal.mjs",
|
|
95
89
|
"default": "./fesm2022/updevs-components-modal.mjs"
|
|
96
90
|
},
|
|
91
|
+
"./list": {
|
|
92
|
+
"types": "./list/index.d.ts",
|
|
93
|
+
"esm2022": "./esm2022/list/updevs-components-list.mjs",
|
|
94
|
+
"esm": "./esm2022/list/updevs-components-list.mjs",
|
|
95
|
+
"default": "./fesm2022/updevs-components-list.mjs"
|
|
96
|
+
},
|
|
97
97
|
"./paginator": {
|
|
98
98
|
"types": "./paginator/index.d.ts",
|
|
99
99
|
"esm2022": "./esm2022/paginator/updevs-components-paginator.mjs",
|
|
@@ -142,18 +142,18 @@
|
|
|
142
142
|
"esm": "./esm2022/form-controls/file-upload/updevs-components-form-controls-file-upload.mjs",
|
|
143
143
|
"default": "./fesm2022/updevs-components-form-controls-file-upload.mjs"
|
|
144
144
|
},
|
|
145
|
-
"./form-controls/radio": {
|
|
146
|
-
"types": "./form-controls/radio/index.d.ts",
|
|
147
|
-
"esm2022": "./esm2022/form-controls/radio/updevs-components-form-controls-radio.mjs",
|
|
148
|
-
"esm": "./esm2022/form-controls/radio/updevs-components-form-controls-radio.mjs",
|
|
149
|
-
"default": "./fesm2022/updevs-components-form-controls-radio.mjs"
|
|
150
|
-
},
|
|
151
145
|
"./form-controls/input": {
|
|
152
146
|
"types": "./form-controls/input/index.d.ts",
|
|
153
147
|
"esm2022": "./esm2022/form-controls/input/updevs-components-form-controls-input.mjs",
|
|
154
148
|
"esm": "./esm2022/form-controls/input/updevs-components-form-controls-input.mjs",
|
|
155
149
|
"default": "./fesm2022/updevs-components-form-controls-input.mjs"
|
|
156
150
|
},
|
|
151
|
+
"./form-controls/radio": {
|
|
152
|
+
"types": "./form-controls/radio/index.d.ts",
|
|
153
|
+
"esm2022": "./esm2022/form-controls/radio/updevs-components-form-controls-radio.mjs",
|
|
154
|
+
"esm": "./esm2022/form-controls/radio/updevs-components-form-controls-radio.mjs",
|
|
155
|
+
"default": "./fesm2022/updevs-components-form-controls-radio.mjs"
|
|
156
|
+
},
|
|
157
157
|
"./form-controls/select": {
|
|
158
158
|
"types": "./form-controls/select/index.d.ts",
|
|
159
159
|
"esm2022": "./esm2022/form-controls/select/updevs-components-form-controls-select.mjs",
|