@educarehq/solaris-components 0.6.5 → 0.6.6
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.
|
@@ -6536,7 +6536,7 @@ class SolarisSelectionCard {
|
|
|
6536
6536
|
return !!target.closest(['[data-card-actions="true"]', '[solaris-card-actions]', '.solaris-card-slot--actions'].join(','));
|
|
6537
6537
|
}
|
|
6538
6538
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelectionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6539
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <solaris-card\n class=\"solaris-selection-card__card\"\n [orientation]=\"orientation()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [appearance]=\"appearance()\"\n [color]=\"color()\"\n [selected]=\"selected()\"\n [invalid]=\"invalid()\"\n [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\"\n [minHeight]=\"minHeight()\"\n [reservedInlineEnd]=\"reservedInlineEnd()\"\n >\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-badge]\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div\n class=\"solaris-selection-card__slot\"\n ngProjectAs=\"[solaris-card-actions]\"\n data-card-actions=\"true\"\n >\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .55rem;--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap))}:host([data-size=sm]){--ssc-indicator-size: 1.8rem;--ssc-indicator-dot-size: .7rem;--ssc-indicator-check-size: 1.1rem;--ssc-indicator-check-weight: .07rem;--ssc-indicator-icon-dot-size: .5rem;--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.25rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .55rem;--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: 2.4rem;--ssc-indicator-dot-size: .95rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .09rem;--ssc-indicator-icon-dot-size: .65rem;--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:1;pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;box-sizing:border-box;line-height:1;color:transparent;background:transparent;border:1px solid var(--solaris-card-border, var(--solaris-color-border));transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{display:block;flex:0 0 auto;inline-size:var(--ssc-indicator-dot-size);block-size:var(--ssc-indicator-dot-size);border-radius:var(--solaris-radius-full);opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{background:var(--ssc-accent)}.solaris-selection-card__indicator-icon-dot{inline-size:var(--ssc-indicator-icon-dot-size);block-size:var(--ssc-indicator-icon-dot-size);background:var(--solaris-color-primary-contrast)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;opacity:0;transform:scale(.45);transform-origin:center;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot,.solaris-selection-card__indicator-check{opacity:0;transform:scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{background:var(--ssc-accent);border-color:var(--ssc-accent);color:var(--solaris-color-primary-contrast);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--solaris-color-primary-contrast) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "color", "appearance", "invalid", "selected", "disabled", "interactive", "minHeight", "reservedInlineEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <solaris-card\n class=\"solaris-selection-card__card\"\n [orientation]=\"orientation()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [appearance]=\"appearance()\"\n [color]=\"color()\"\n [selected]=\"selected()\"\n [invalid]=\"invalid()\"\n [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\"\n [minHeight]=\"minHeight()\"\n [reservedInlineEnd]=\"reservedInlineEnd()\"\n >\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-badge]\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div\n class=\"solaris-selection-card__slot\"\n ngProjectAs=\"[solaris-card-actions]\"\n data-card-actions=\"true\"\n >\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap))}:host([data-size=sm]){--ssc-indicator-size: 1.8rem;--ssc-indicator-dot-size: .7rem;--ssc-indicator-check-size: 1.1rem;--ssc-indicator-check-weight: .07rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.25rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: 2.4rem;--ssc-indicator-dot-size: .95rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .09rem;--ssc-indicator-icon-dot-size: .8rem;--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:1;pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);aspect-ratio:1/1;flex:0 0 auto;position:relative;place-items:center;display:inline-grid;box-sizing:border-box;line-height:0;color:transparent;background:transparent;border:1px solid var(--solaris-card-border, var(--solaris-color-border));transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-radius-full);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{background:var(--ssc-accent);block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size)}.solaris-selection-card__indicator-icon-dot{block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size);background:var(--solaris-color-primary-contrast)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;opacity:0;transform:scale(.45);transform-origin:center;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{background:var(--ssc-accent);border-color:var(--ssc-accent);color:var(--solaris-color-primary-contrast);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--solaris-color-primary-contrast) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "color", "appearance", "invalid", "selected", "disabled", "interactive", "minHeight", "reservedInlineEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6540
6540
|
}
|
|
6541
6541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelectionCard, decorators: [{
|
|
6542
6542
|
type: Component,
|
|
@@ -6558,7 +6558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6558
6558
|
'(click)': 'onHostClick($event)',
|
|
6559
6559
|
'(keydown)': 'onHostKeydown($event)',
|
|
6560
6560
|
'(blur)': 'onHostBlur()',
|
|
6561
|
-
}, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <solaris-card\n class=\"solaris-selection-card__card\"\n [orientation]=\"orientation()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [appearance]=\"appearance()\"\n [color]=\"color()\"\n [selected]=\"selected()\"\n [invalid]=\"invalid()\"\n [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\"\n [minHeight]=\"minHeight()\"\n [reservedInlineEnd]=\"reservedInlineEnd()\"\n >\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-badge]\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div\n class=\"solaris-selection-card__slot\"\n ngProjectAs=\"[solaris-card-actions]\"\n data-card-actions=\"true\"\n >\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .
|
|
6561
|
+
}, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <solaris-card\n class=\"solaris-selection-card__card\"\n [orientation]=\"orientation()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [appearance]=\"appearance()\"\n [color]=\"color()\"\n [selected]=\"selected()\"\n [invalid]=\"invalid()\"\n [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\"\n [minHeight]=\"minHeight()\"\n [reservedInlineEnd]=\"reservedInlineEnd()\"\n >\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-badge]\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div\n class=\"solaris-selection-card__slot\"\n ngProjectAs=\"[solaris-card-actions]\"\n data-card-actions=\"true\"\n >\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap))}:host([data-size=sm]){--ssc-indicator-size: 1.8rem;--ssc-indicator-dot-size: .7rem;--ssc-indicator-check-size: 1.1rem;--ssc-indicator-check-weight: .07rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.25rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: 2.4rem;--ssc-indicator-dot-size: .95rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .09rem;--ssc-indicator-icon-dot-size: .8rem;--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:1;pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);aspect-ratio:1/1;flex:0 0 auto;position:relative;place-items:center;display:inline-grid;box-sizing:border-box;line-height:0;color:transparent;background:transparent;border:1px solid var(--solaris-card-border, var(--solaris-color-border));transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-radius-full);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{background:var(--ssc-accent);block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size)}.solaris-selection-card__indicator-icon-dot{block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size);background:var(--solaris-color-primary-contrast)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;opacity:0;transform:scale(.45);transform-origin:center;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{background:var(--ssc-accent);border-color:var(--ssc-accent);color:var(--solaris-color-primary-contrast);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--solaris-color-primary-contrast) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}\n"] }]
|
|
6562
6562
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], selectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionIndicator", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
|
|
6563
6563
|
function inferStandaloneMode(indicator) {
|
|
6564
6564
|
switch (indicator) {
|