@ascentgl/ads-ui 22.7.0 → 22.8.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.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, input, output, computed, inject, model, signal, viewChild,
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, input, output, computed, effect, inject, model, signal, viewChild, HostListener, ElementRef, ViewChild, Directive, EventEmitter, Output, InjectionToken, DestroyRef, HostBinding, Pipe, contentChild, TemplateRef, Inject, Optional, Injectable, ChangeDetectorRef, Renderer2, viewChildren, booleanAttribute, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgTemplateOutlet, NgStyle, DOCUMENT, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@ascentgl/ads-icons';
|
|
6
6
|
import { AdsIconComponent, AdsIconRegistry } from '@ascentgl/ads-icons';
|
|
7
|
-
import { adsIconUserCircle, adsIconBell, adsIconMenuMoreInfo, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconStarFull, adsIconUsers, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker,
|
|
7
|
+
import { adsIconUserCircle, adsIconBell, adsIconMenuMoreInfo, adsIconChevronRight, adsIconCross, adsIconCheck, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconStarFull, adsIconUsers, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconDropdownArrow, adsIconDuplicate, adsIconBookmarkAlt, adsIconRedo, adsIconCrossCircleOutline, adsIconChevronUp, adsIconDrag, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconTableFilter, adsIconFilter, adsIconArrowUpAndDown, adsIconListView, adsIconGridView, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew, adsIconPencil, adsIconFileAdd, adsIconCanceledShipment } from '@ascentgl/ads-icons/icons';
|
|
8
8
|
import { MatBadge } from '@angular/material/badge';
|
|
9
9
|
import * as i1$2 from '@angular/router';
|
|
10
10
|
import { RouterModule, RouterLinkActive, RouterLink, NavigationStart, RouterOutlet } from '@angular/router';
|
|
@@ -426,15 +426,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
426
426
|
type: Input
|
|
427
427
|
}] } });
|
|
428
428
|
|
|
429
|
-
class AdsTagContainerComponent {
|
|
430
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTagContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
431
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: AdsTagContainerComponent, isStandalone: true, selector: "ads-tag-container", ngImport: i0, template: "<div class=\"tag-container\">\n <ng-content></ng-content>\n</div>\n", styles: [".tag-container{display:flex;justify-content:flex-end;align-items:flex-start;gap:16px;flex-wrap:wrap;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
432
|
-
}
|
|
433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTagContainerComponent, decorators: [{
|
|
434
|
-
type: Component,
|
|
435
|
-
args: [{ selector: 'ads-tag-container', imports: [CommonModule], template: "<div class=\"tag-container\">\n <ng-content></ng-content>\n</div>\n", styles: [".tag-container{display:flex;justify-content:flex-end;align-items:flex-start;gap:16px;flex-wrap:wrap;height:24px}\n"] }]
|
|
436
|
-
}] });
|
|
437
|
-
|
|
438
429
|
/** @ignore */
|
|
439
430
|
const HEX_COLOR_SHORT_REGEX = /^#([0-9a-f]{3})$/i;
|
|
440
431
|
/** @ignore */
|
|
@@ -608,6 +599,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
608
599
|
args: [{ selector: 'ads-tag', imports: [CommonModule, AdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"tag\"\n [class.clickable]=\"clickable()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(),\n color: getTextColor(),\n 'border-width': borderWidth() + 'px',\n 'border-style': borderWidth() > 0 ? 'solid' : 'none',\n 'border-color': getBorderColor(),\n width: width(),\n }\"\n>\n <ng-content></ng-content>\n <span class=\"tag-text\" [style.color]=\"getTextColor()\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n @if (removable()) {\n <ads-icon\n [id]=\"'ads-tag-' + id()\"\n name=\"cross\"\n size=\"xxxxs\"\n (click)=\"onRemove()\"\n [stroke]=\"getIconStroke()\"\n />\n }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}.tag.clickable{cursor:pointer}\n"] }]
|
|
609
600
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }, { type: i0.ElementRef }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], borderWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderWidth", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: true }] }], remove: [{ type: i0.Output, args: ["remove"] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
610
601
|
|
|
602
|
+
/**
|
|
603
|
+
* A selectable rate/quote option card (ADS-328/329/330).
|
|
604
|
+
*
|
|
605
|
+
* Presentational and domain-agnostic: the heading, sub-heading, price and tag
|
|
606
|
+
* are inputs, and the lower details line is projected via `<ng-content>`.
|
|
607
|
+
*
|
|
608
|
+
* Supports the five design states — default, hover, pressed (`:active`),
|
|
609
|
+
* active (`selected`) and `disabled`. On the disabled state the tag switches to
|
|
610
|
+
* a muted treatment and its icon color changes accordingly.
|
|
611
|
+
*/
|
|
612
|
+
class AdsRateOptionCardComponent {
|
|
613
|
+
constructor(registry) {
|
|
614
|
+
this.registry = registry;
|
|
615
|
+
/** Primary heading (e.g. the carrier name) */
|
|
616
|
+
this.heading = input.required(/* @ts-ignore */
|
|
617
|
+
...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
|
|
618
|
+
/** Secondary line under the heading (e.g. the service mode) */
|
|
619
|
+
this.subheading = input(/* @ts-ignore */
|
|
620
|
+
...(ngDevMode ? [undefined, { debugName: "subheading" }] : /* istanbul ignore next */ []));
|
|
621
|
+
/** Formatted price string shown on the right (e.g. `"$487.50"`) */
|
|
622
|
+
this.price = input(/* @ts-ignore */
|
|
623
|
+
...(ngDevMode ? [undefined, { debugName: "price" }] : /* istanbul ignore next */ []));
|
|
624
|
+
/** Show the selection check indicator after the price */
|
|
625
|
+
this.showCheckIcon = input(true, /* @ts-ignore */
|
|
626
|
+
...(ngDevMode ? [{ debugName: "showCheckIcon" }] : /* istanbul ignore next */ []));
|
|
627
|
+
/** Optional tag rendered next to the heading */
|
|
628
|
+
this.tag = input(null, /* @ts-ignore */
|
|
629
|
+
...(ngDevMode ? [{ debugName: "tag" }] : /* istanbul ignore next */ []));
|
|
630
|
+
/** Marks the card as the active/selected option */
|
|
631
|
+
this.selected = input(false, /* @ts-ignore */
|
|
632
|
+
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
633
|
+
/** Disables interaction and mutes the card (including the tag icon color) */
|
|
634
|
+
this.disabled = input(false, /* @ts-ignore */
|
|
635
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
636
|
+
/** Stable id echoed back on activation and used to build child element ids */
|
|
637
|
+
this.cardId = input('rate-option', /* @ts-ignore */
|
|
638
|
+
...(ngDevMode ? [{ debugName: "cardId" }] : /* istanbul ignore next */ []));
|
|
639
|
+
/** Emitted with the `cardId` when the card is activated by click or keyboard */
|
|
640
|
+
this.activate = output();
|
|
641
|
+
/** Border color of the tag (only visible in the disabled treatment). */
|
|
642
|
+
this.tagBorderColor = Colors.Light;
|
|
643
|
+
/** Tag background — flips to a neutral surface when disabled. */
|
|
644
|
+
this.tagBackground = computed(() => this.disabled() ? Colors.White : (this.tag()?.color ?? Colors.Success), /* @ts-ignore */
|
|
645
|
+
...(ngDevMode ? [{ debugName: "tagBackground" }] : /* istanbul ignore next */ []));
|
|
646
|
+
/** Tag text color — flips to dark when disabled. */
|
|
647
|
+
this.tagTextColor = computed(() => this.disabled() ? Colors.Dark : (this.tag()?.textColor ?? Colors.White), /* @ts-ignore */
|
|
648
|
+
...(ngDevMode ? [{ debugName: "tagTextColor" }] : /* istanbul ignore next */ []));
|
|
649
|
+
/** Tag border width — only drawn in the disabled treatment. */
|
|
650
|
+
this.tagBorderWidth = computed(() => (this.disabled() ? 1 : 0), /* @ts-ignore */
|
|
651
|
+
...(ngDevMode ? [{ debugName: "tagBorderWidth" }] : /* istanbul ignore next */ []));
|
|
652
|
+
/** Tag icon stroke color — `dark` when disabled, otherwise the tag's `iconStroke` (default `white`). */
|
|
653
|
+
this.tagIconStroke = computed(() => this.tag()?.iconStroke ?? 'white', /* @ts-ignore */
|
|
654
|
+
...(ngDevMode ? [{ debugName: "tagIconStroke" }] : /* istanbul ignore next */ []));
|
|
655
|
+
/** Tag icon theme/fill color — `dark` when disabled, otherwise the tag's `iconTheme` (unset by default). */
|
|
656
|
+
this.tagIconTheme = computed(() => this.tag()?.iconTheme, /* @ts-ignore */
|
|
657
|
+
...(ngDevMode ? [{ debugName: "tagIconTheme" }] : /* istanbul ignore next */ []));
|
|
658
|
+
// Check-mark shown inside the selection indicator.
|
|
659
|
+
this.registry.register(adsIconCheck);
|
|
660
|
+
// Register any custom tag icon supplied by the consumer.
|
|
661
|
+
effect(() => {
|
|
662
|
+
const icon = this.tag()?.icon;
|
|
663
|
+
if (icon) {
|
|
664
|
+
this.registry.register(icon);
|
|
665
|
+
}
|
|
666
|
+
});
|
|
667
|
+
}
|
|
668
|
+
/** @ignore */
|
|
669
|
+
onActivate(event) {
|
|
670
|
+
if (this.disabled()) {
|
|
671
|
+
return;
|
|
672
|
+
}
|
|
673
|
+
// keydown.space scrolls the page by default; suppress that so keyboard
|
|
674
|
+
// activation only selects the card.
|
|
675
|
+
event?.preventDefault();
|
|
676
|
+
this.activate.emit(this.cardId());
|
|
677
|
+
}
|
|
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:pointer;outline:none;transition:border-color .15s ease,background-color .15s ease}:host:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):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):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
|
+
}
|
|
681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsRateOptionCardComponent, decorators: [{
|
|
682
|
+
type: Component,
|
|
683
|
+
args: [{ selector: 'ads-rate-option-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AdsTagComponent, AdsIconComponent], host: {
|
|
684
|
+
class: 'rate-option-card',
|
|
685
|
+
'[class.rate-option-card-selected]': 'selected()',
|
|
686
|
+
'[class.rate-option-card-disabled]': 'disabled()',
|
|
687
|
+
'[attr.role]': "'button'",
|
|
688
|
+
'[attr.tabindex]': 'disabled() ? null : 0',
|
|
689
|
+
'[attr.aria-pressed]': 'selected()',
|
|
690
|
+
'[attr.aria-disabled]': 'disabled() ? true : null',
|
|
691
|
+
'[attr.data-test]': "'rate-option-card-' + cardId()",
|
|
692
|
+
'(click)': 'onActivate()',
|
|
693
|
+
'(keydown.enter)': 'onActivate($event)',
|
|
694
|
+
'(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:pointer;outline:none;transition:border-color .15s ease,background-color .15s ease}:host:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):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):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
|
+
}], 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
|
+
|
|
698
|
+
class AdsTagContainerComponent {
|
|
699
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTagContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
700
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: AdsTagContainerComponent, isStandalone: true, selector: "ads-tag-container", ngImport: i0, template: "<div class=\"tag-container\">\n <ng-content></ng-content>\n</div>\n", styles: [".tag-container{display:flex;justify-content:flex-end;align-items:flex-start;gap:16px;flex-wrap:wrap;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
701
|
+
}
|
|
702
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTagContainerComponent, decorators: [{
|
|
703
|
+
type: Component,
|
|
704
|
+
args: [{ selector: 'ads-tag-container', imports: [CommonModule], template: "<div class=\"tag-container\">\n <ng-content></ng-content>\n</div>\n", styles: [".tag-container{display:flex;justify-content:flex-end;align-items:flex-start;gap:16px;flex-wrap:wrap;height:24px}\n"] }]
|
|
705
|
+
}] });
|
|
706
|
+
|
|
611
707
|
class CreateTagHelper {
|
|
612
708
|
static trimString(tagName) {
|
|
613
709
|
return tagName.trim().toLowerCase();
|
|
@@ -11416,5 +11512,5 @@ function provideAdsUi(config) {
|
|
|
11416
11512
|
* Generated bundle index. Do not edit.
|
|
11417
11513
|
*/
|
|
11418
11514
|
|
|
11419
|
-
export { AdsArchitectureLogoComponent, AdsAscentLogoComponent, AdsAvatarComponent, AdsBaselineWidgetComponent, AdsBreadcrumbComponent, AdsBubbleComponent, AdsButtonComponent, AdsButtonContainerComponent, AdsCardComponent, AdsCheckboxComponent, AdsChipComponent, AdsColumnSortFilterMenuComponent, AdsCreateTagComponent, AdsCurrencyFieldComponent, AdsCustomHeaderComponent, AdsCustomerPortalLogoComponent, AdsCxaLogoComponent, AdsDatepickerComponent, AdsDatetimepickerComponent, AdsDragAndDropListComponent, AdsDropdownComponent, AdsErrorPageCodeComponent, AdsErrorPageComponent, AdsExpansionPanelComponent, AdsFilterMenuComponent, AdsFooterComponent, AdsFooterContainerComponent, AdsGenericLogoComponent, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHistoryStepperComponent, AdsHorizontalNavBarComponent, AdsHorizontalStepperComponent, AdsIconButtonComponent, AdsIconHoverComponent, AdsInputComponent, AdsInputDropdownComponent, AdsInternationalPhoneFieldComponent, AdsLinkButtonComponent, AdsMainMenuComponent, AdsMenuDropDownComponent, AdsMenuDropDownTriggerDirective, AdsModalComponent, AdsMultiSelectDropdownComponent, AdsNavMenuComponent, AdsNavigationCollapseHandleComponent, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationItemComponent, AdsNavigationItemsContainerComponent, AdsNumericBadgeComponent, AdsNumericStepperComponent, AdsOrgDisplayTextComponent, AdsPeakEssentialsLogoComponent, AdsPeakMarketplaceLogoComponent, AdsPeakOrderManagementLogoComponent, AdsPhoneFieldComponent, AdsPilotPayLogoComponent, AdsPrimaryLogoComponent, AdsProgressBarComponent, AdsProgressIndicatorSpinnerComponent, AdsProgressSpinnerComponent, AdsProgressStepperComponent, AdsRadioButtonComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
|
|
11515
|
+
export { AdsArchitectureLogoComponent, AdsAscentLogoComponent, AdsAvatarComponent, AdsBaselineWidgetComponent, AdsBreadcrumbComponent, AdsBubbleComponent, AdsButtonComponent, AdsButtonContainerComponent, AdsCardComponent, AdsCheckboxComponent, AdsChipComponent, AdsColumnSortFilterMenuComponent, AdsCreateTagComponent, AdsCurrencyFieldComponent, AdsCustomHeaderComponent, AdsCustomerPortalLogoComponent, AdsCxaLogoComponent, AdsDatepickerComponent, AdsDatetimepickerComponent, AdsDragAndDropListComponent, AdsDropdownComponent, AdsErrorPageCodeComponent, AdsErrorPageComponent, AdsExpansionPanelComponent, AdsFilterMenuComponent, AdsFooterComponent, AdsFooterContainerComponent, AdsGenericLogoComponent, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHistoryStepperComponent, AdsHorizontalNavBarComponent, AdsHorizontalStepperComponent, AdsIconButtonComponent, AdsIconHoverComponent, AdsInputComponent, AdsInputDropdownComponent, AdsInternationalPhoneFieldComponent, AdsLinkButtonComponent, AdsMainMenuComponent, AdsMenuDropDownComponent, AdsMenuDropDownTriggerDirective, AdsModalComponent, AdsMultiSelectDropdownComponent, AdsNavMenuComponent, AdsNavigationCollapseHandleComponent, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationItemComponent, AdsNavigationItemsContainerComponent, AdsNumericBadgeComponent, AdsNumericStepperComponent, AdsOrgDisplayTextComponent, AdsPeakEssentialsLogoComponent, AdsPeakMarketplaceLogoComponent, AdsPeakOrderManagementLogoComponent, AdsPhoneFieldComponent, AdsPilotPayLogoComponent, AdsPrimaryLogoComponent, AdsProgressBarComponent, AdsProgressIndicatorSpinnerComponent, AdsProgressSpinnerComponent, AdsProgressStepperComponent, AdsRadioButtonComponent, AdsRateOptionCardComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
|
|
11420
11516
|
//# sourceMappingURL=ascentgl-ads-ui.mjs.map
|