@ascentgl/ads-ui 22.8.0 → 22.9.0
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.
|
@@ -676,7 +676,7 @@ class AdsRateOptionCardComponent {
|
|
|
676
676
|
this.activate.emit(this.cardId());
|
|
677
677
|
}
|
|
678
678
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsRateOptionCardComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
679
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsRateOptionCardComponent, isStandalone: true, selector: "ads-rate-option-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, showCheckIcon: { classPropertyName: "showCheckIcon", publicName: "showCheckIcon", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cardId: { classPropertyName: "cardId", publicName: "cardId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { listeners: { "click": "onActivate()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class.rate-option-card-selected": "selected()", "class.rate-option-card-disabled": "disabled()", "attr.role": "'button'", "attr.tabindex": "disabled() ? null : 0", "attr.aria-pressed": "selected()", "attr.aria-disabled": "disabled() ? true : null", "attr.data-test": "'rate-option-card-' + cardId()" }, classAttribute: "rate-option-card" }, ngImport: i0, template: "<div class=\"rate-option-card-header\">\n <div class=\"rate-option-card-info\">\n <div class=\"rate-option-card-title-row\">\n <span class=\"rate-option-card-title\" [attr.data-test]=\"cardId() + '-heading'\">{{ heading() }}</span>\n\n @let t = tag();\n @if (t) {\n <ads-tag\n class=\"rate-option-card-tag\"\n [id]=\"cardId() + '-tag'\"\n [color]=\"tagBackground()\"\n [textColor]=\"tagTextColor()\"\n [borderWidth]=\"tagBorderWidth()\"\n [borderColor]=\"tagBorderColor\"\n [tag]=\"t.label\"\n [removable]=\"false\"\n >\n @if (t.icon) {\n <ads-icon\n class=\"rate-option-card-tag-icon\"\n [name]=\"t.icon.name\"\n [stroke]=\"tagIconStroke()\"\n [theme]=\"tagIconTheme()\"\n size=\"xxs\"\n />\n }\n </ads-tag>\n }\n </div>\n\n @if (subheading(); as sub) {\n <span class=\"rate-option-card-subtitle\">{{ sub }}</span>\n }\n </div>\n\n <div class=\"rate-option-card-price-row\">\n @if (price(); as p) {\n <span class=\"rate-option-card-price\" [attr.data-test]=\"cardId() + '-price'\">{{ p }}</span>\n }\n @if (showCheckIcon()) {\n <span class=\"rate-option-card-indicator\" aria-hidden=\"true\">\n <ads-icon class=\"rate-option-card-indicator-check\" name=\"check\" size=\"xxxs\" stroke=\"white\" />\n </span>\n }\n </div>\n</div>\n\n<div class=\"rate-option-card-footer\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;gap:32px;padding:16px;border:1px solid var(--color-light);border-radius:5px;background-color:var(--color-white);cursor:
|
|
679
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsRateOptionCardComponent, isStandalone: true, selector: "ads-rate-option-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, showCheckIcon: { classPropertyName: "showCheckIcon", publicName: "showCheckIcon", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cardId: { classPropertyName: "cardId", publicName: "cardId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { listeners: { "click": "onActivate()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class.rate-option-card-selected": "selected()", "class.rate-option-card-disabled": "disabled()", "class.rate-option-card-static": "!showCheckIcon()", "attr.role": "'button'", "attr.tabindex": "disabled() ? null : 0", "attr.aria-pressed": "selected()", "attr.aria-disabled": "disabled() ? true : null", "attr.data-test": "'rate-option-card-' + cardId()" }, classAttribute: "rate-option-card" }, ngImport: i0, template: "<div class=\"rate-option-card-header\">\n <div class=\"rate-option-card-info\">\n <div class=\"rate-option-card-title-row\">\n <span class=\"rate-option-card-title\" [attr.data-test]=\"cardId() + '-heading'\">{{ heading() }}</span>\n\n @let t = tag();\n @if (t) {\n <ads-tag\n class=\"rate-option-card-tag\"\n [id]=\"cardId() + '-tag'\"\n [color]=\"tagBackground()\"\n [textColor]=\"tagTextColor()\"\n [borderWidth]=\"tagBorderWidth()\"\n [borderColor]=\"tagBorderColor\"\n [tag]=\"t.label\"\n [removable]=\"false\"\n >\n @if (t.icon) {\n <ads-icon\n class=\"rate-option-card-tag-icon\"\n [name]=\"t.icon.name\"\n [stroke]=\"tagIconStroke()\"\n [theme]=\"tagIconTheme()\"\n size=\"xxs\"\n />\n }\n </ads-tag>\n }\n </div>\n\n @if (subheading(); as sub) {\n <span class=\"rate-option-card-subtitle\">{{ sub }}</span>\n }\n </div>\n\n <div class=\"rate-option-card-price-row\">\n @if (price(); as p) {\n <span class=\"rate-option-card-price\" [attr.data-test]=\"cardId() + '-price'\">{{ p }}</span>\n }\n @if (showCheckIcon()) {\n <span class=\"rate-option-card-indicator\" aria-hidden=\"true\">\n <ads-icon class=\"rate-option-card-indicator-check\" name=\"check\" size=\"xxxs\" stroke=\"white\" />\n </span>\n }\n </div>\n</div>\n\n<div class=\"rate-option-card-footer\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;gap:32px;padding:16px;border:1px solid var(--color-light);border-radius:5px;background-color:var(--color-white);cursor:default;outline:none;transition:border-color .15s ease,background-color .15s ease}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static){cursor:pointer}:host:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static):hover:not(:active){background-color:var(--color-light-30);border-color:var(--color-light)}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static):active{background-color:var(--color-light-80);border-color:var(--color-light)}:host.rate-option-card-selected:not(.rate-option-card-disabled){background-color:var(--color-secondary-10);border-color:var(--color-secondary)}:host.rate-option-card-disabled{background-color:var(--color-muted-30);border-color:var(--color-light)}:host.rate-option-card-disabled .rate-option-card-title,:host.rate-option-card-disabled .rate-option-card-price{color:var(--color-medium-50)}:host.rate-option-card-disabled .rate-option-card-subtitle,:host.rate-option-card-disabled .rate-option-card-footer{color:var(--color-medium-30)}.rate-option-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.rate-option-card-info{display:flex;flex-direction:column;gap:4px;min-width:0}.rate-option-card-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rate-option-card-title{font-size:1.125rem;font-weight:600;line-height:23px;color:var(--color-dark)}.rate-option-card-subtitle{font-size:.75rem;line-height:16px;color:var(--color-medium)}.rate-option-card-tag-icon{display:inline-flex}.rate-option-card-price-row{display:flex;align-items:center;gap:8px;white-space:nowrap}.rate-option-card-price{font-size:1.5rem;font-weight:600;line-height:31px;color:var(--color-dark)}.rate-option-card-indicator{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:24px;height:24px;flex-shrink:0;border:2px solid var(--color-light);border-radius:50%;background-color:transparent;transition:background-color .15s ease,border-color .15s ease}.rate-option-card-indicator-check{opacity:0;transition:opacity .15s ease}:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):hover:not(:active) .rate-option-card-indicator{background-color:var(--color-secondary-10);border-color:var(--color-secondary-10)}:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):hover:not(:active) .rate-option-card-indicator-check{opacity:1}:host(.rate-option-card-selected:not(.rate-option-card-disabled)) .rate-option-card-indicator,:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):active .rate-option-card-indicator{background-color:var(--color-secondary);border-color:var(--color-secondary)}:host(.rate-option-card-selected:not(.rate-option-card-disabled)) .rate-option-card-indicator-check,:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):active .rate-option-card-indicator-check{opacity:1}:host(.rate-option-card-disabled) .rate-option-card-indicator{border-color:var(--color-light);background-color:transparent}.rate-option-card-footer{display:flex;align-items:center;gap:8px;font-size:.75rem;line-height:16px;color:var(--color-medium)}:host ::ng-deep .rate-option-card-footer strong{color:var(--color-dark);font-weight:600}:host(.rate-option-card-disabled) ::ng-deep .rate-option-card-footer strong{color:var(--color-medium-50)}\n"], dependencies: [{ kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "textColor", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
680
680
|
}
|
|
681
681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsRateOptionCardComponent, decorators: [{
|
|
682
682
|
type: Component,
|
|
@@ -684,6 +684,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
684
684
|
class: 'rate-option-card',
|
|
685
685
|
'[class.rate-option-card-selected]': 'selected()',
|
|
686
686
|
'[class.rate-option-card-disabled]': 'disabled()',
|
|
687
|
+
// When the selection indicator is hidden the card is display-only: no hover/
|
|
688
|
+
// press affordance and a default cursor.
|
|
689
|
+
'[class.rate-option-card-static]': '!showCheckIcon()',
|
|
687
690
|
'[attr.role]': "'button'",
|
|
688
691
|
'[attr.tabindex]': 'disabled() ? null : 0',
|
|
689
692
|
'[attr.aria-pressed]': 'selected()',
|
|
@@ -692,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
692
695
|
'(click)': 'onActivate()',
|
|
693
696
|
'(keydown.enter)': 'onActivate($event)',
|
|
694
697
|
'(keydown.space)': 'onActivate($event)',
|
|
695
|
-
}, template: "<div class=\"rate-option-card-header\">\n <div class=\"rate-option-card-info\">\n <div class=\"rate-option-card-title-row\">\n <span class=\"rate-option-card-title\" [attr.data-test]=\"cardId() + '-heading'\">{{ heading() }}</span>\n\n @let t = tag();\n @if (t) {\n <ads-tag\n class=\"rate-option-card-tag\"\n [id]=\"cardId() + '-tag'\"\n [color]=\"tagBackground()\"\n [textColor]=\"tagTextColor()\"\n [borderWidth]=\"tagBorderWidth()\"\n [borderColor]=\"tagBorderColor\"\n [tag]=\"t.label\"\n [removable]=\"false\"\n >\n @if (t.icon) {\n <ads-icon\n class=\"rate-option-card-tag-icon\"\n [name]=\"t.icon.name\"\n [stroke]=\"tagIconStroke()\"\n [theme]=\"tagIconTheme()\"\n size=\"xxs\"\n />\n }\n </ads-tag>\n }\n </div>\n\n @if (subheading(); as sub) {\n <span class=\"rate-option-card-subtitle\">{{ sub }}</span>\n }\n </div>\n\n <div class=\"rate-option-card-price-row\">\n @if (price(); as p) {\n <span class=\"rate-option-card-price\" [attr.data-test]=\"cardId() + '-price'\">{{ p }}</span>\n }\n @if (showCheckIcon()) {\n <span class=\"rate-option-card-indicator\" aria-hidden=\"true\">\n <ads-icon class=\"rate-option-card-indicator-check\" name=\"check\" size=\"xxxs\" stroke=\"white\" />\n </span>\n }\n </div>\n</div>\n\n<div class=\"rate-option-card-footer\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;gap:32px;padding:16px;border:1px solid var(--color-light);border-radius:5px;background-color:var(--color-white);cursor:
|
|
698
|
+
}, template: "<div class=\"rate-option-card-header\">\n <div class=\"rate-option-card-info\">\n <div class=\"rate-option-card-title-row\">\n <span class=\"rate-option-card-title\" [attr.data-test]=\"cardId() + '-heading'\">{{ heading() }}</span>\n\n @let t = tag();\n @if (t) {\n <ads-tag\n class=\"rate-option-card-tag\"\n [id]=\"cardId() + '-tag'\"\n [color]=\"tagBackground()\"\n [textColor]=\"tagTextColor()\"\n [borderWidth]=\"tagBorderWidth()\"\n [borderColor]=\"tagBorderColor\"\n [tag]=\"t.label\"\n [removable]=\"false\"\n >\n @if (t.icon) {\n <ads-icon\n class=\"rate-option-card-tag-icon\"\n [name]=\"t.icon.name\"\n [stroke]=\"tagIconStroke()\"\n [theme]=\"tagIconTheme()\"\n size=\"xxs\"\n />\n }\n </ads-tag>\n }\n </div>\n\n @if (subheading(); as sub) {\n <span class=\"rate-option-card-subtitle\">{{ sub }}</span>\n }\n </div>\n\n <div class=\"rate-option-card-price-row\">\n @if (price(); as p) {\n <span class=\"rate-option-card-price\" [attr.data-test]=\"cardId() + '-price'\">{{ p }}</span>\n }\n @if (showCheckIcon()) {\n <span class=\"rate-option-card-indicator\" aria-hidden=\"true\">\n <ads-icon class=\"rate-option-card-indicator-check\" name=\"check\" size=\"xxxs\" stroke=\"white\" />\n </span>\n }\n </div>\n</div>\n\n<div class=\"rate-option-card-footer\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;gap:32px;padding:16px;border:1px solid var(--color-light);border-radius:5px;background-color:var(--color-white);cursor:default;outline:none;transition:border-color .15s ease,background-color .15s ease}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static){cursor:pointer}:host:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static):hover:not(:active){background-color:var(--color-light-30);border-color:var(--color-light)}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static):active{background-color:var(--color-light-80);border-color:var(--color-light)}:host.rate-option-card-selected:not(.rate-option-card-disabled){background-color:var(--color-secondary-10);border-color:var(--color-secondary)}:host.rate-option-card-disabled{background-color:var(--color-muted-30);border-color:var(--color-light)}:host.rate-option-card-disabled .rate-option-card-title,:host.rate-option-card-disabled .rate-option-card-price{color:var(--color-medium-50)}:host.rate-option-card-disabled .rate-option-card-subtitle,:host.rate-option-card-disabled .rate-option-card-footer{color:var(--color-medium-30)}.rate-option-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.rate-option-card-info{display:flex;flex-direction:column;gap:4px;min-width:0}.rate-option-card-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rate-option-card-title{font-size:1.125rem;font-weight:600;line-height:23px;color:var(--color-dark)}.rate-option-card-subtitle{font-size:.75rem;line-height:16px;color:var(--color-medium)}.rate-option-card-tag-icon{display:inline-flex}.rate-option-card-price-row{display:flex;align-items:center;gap:8px;white-space:nowrap}.rate-option-card-price{font-size:1.5rem;font-weight:600;line-height:31px;color:var(--color-dark)}.rate-option-card-indicator{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:24px;height:24px;flex-shrink:0;border:2px solid var(--color-light);border-radius:50%;background-color:transparent;transition:background-color .15s ease,border-color .15s ease}.rate-option-card-indicator-check{opacity:0;transition:opacity .15s ease}:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):hover:not(:active) .rate-option-card-indicator{background-color:var(--color-secondary-10);border-color:var(--color-secondary-10)}:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):hover:not(:active) .rate-option-card-indicator-check{opacity:1}:host(.rate-option-card-selected:not(.rate-option-card-disabled)) .rate-option-card-indicator,:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):active .rate-option-card-indicator{background-color:var(--color-secondary);border-color:var(--color-secondary)}:host(.rate-option-card-selected:not(.rate-option-card-disabled)) .rate-option-card-indicator-check,:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):active .rate-option-card-indicator-check{opacity:1}:host(.rate-option-card-disabled) .rate-option-card-indicator{border-color:var(--color-light);background-color:transparent}.rate-option-card-footer{display:flex;align-items:center;gap:8px;font-size:.75rem;line-height:16px;color:var(--color-medium)}:host ::ng-deep .rate-option-card-footer strong{color:var(--color-dark);font-weight:600}:host(.rate-option-card-disabled) ::ng-deep .rate-option-card-footer strong{color:var(--color-medium-50)}\n"] }]
|
|
696
699
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], subheading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheading", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }], showCheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckIcon", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardId", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
|
|
697
700
|
|
|
698
701
|
class AdsTagContainerComponent {
|