@educarehq/solaris-ui 0.21.0 → 0.23.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,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef,
|
|
2
|
+
import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef, numberAttribute, afterNextRender, viewChildren, ApplicationRef } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
|
|
5
5
|
import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
@@ -1948,6 +1948,26 @@ const LAYOUT_ICONS = [
|
|
|
1948
1948
|
},
|
|
1949
1949
|
],
|
|
1950
1950
|
},
|
|
1951
|
+
{
|
|
1952
|
+
name: 'square-stack',
|
|
1953
|
+
viewBox: '0 0 24 24',
|
|
1954
|
+
fill: 'none',
|
|
1955
|
+
stroke: 'currentColor',
|
|
1956
|
+
strokeWidth: 2,
|
|
1957
|
+
strokeLinecap: 'round',
|
|
1958
|
+
strokeLinejoin: 'round',
|
|
1959
|
+
elements: [
|
|
1960
|
+
{
|
|
1961
|
+
type: 'path',
|
|
1962
|
+
d: 'M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2',
|
|
1963
|
+
},
|
|
1964
|
+
{
|
|
1965
|
+
type: 'path',
|
|
1966
|
+
d: 'M10 16c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2',
|
|
1967
|
+
},
|
|
1968
|
+
{ type: 'rect', x: 14, y: 14, width: 8, height: 8, rx: 2 },
|
|
1969
|
+
],
|
|
1970
|
+
},
|
|
1951
1971
|
];
|
|
1952
1972
|
|
|
1953
1973
|
const BRAND_ICONS = [
|
|
@@ -2727,6 +2747,114 @@ const DATA_ICONS = [
|
|
|
2727
2747
|
{ type: 'line', x1: 16, y1: 3, x2: 14, y2: 21 },
|
|
2728
2748
|
],
|
|
2729
2749
|
},
|
|
2750
|
+
{
|
|
2751
|
+
name: 'shopping-cart',
|
|
2752
|
+
viewBox: '0 0 24 24',
|
|
2753
|
+
fill: 'none',
|
|
2754
|
+
stroke: 'currentColor',
|
|
2755
|
+
strokeWidth: 2,
|
|
2756
|
+
strokeLinecap: 'round',
|
|
2757
|
+
strokeLinejoin: 'round',
|
|
2758
|
+
elements: [
|
|
2759
|
+
{
|
|
2760
|
+
type: 'path',
|
|
2761
|
+
d: 'm2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18',
|
|
2762
|
+
},
|
|
2763
|
+
{
|
|
2764
|
+
type: 'path',
|
|
2765
|
+
d: 'M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25',
|
|
2766
|
+
},
|
|
2767
|
+
{ type: 'circle', cx: 18, cy: 20, r: 2 },
|
|
2768
|
+
{ type: 'circle', cx: 8, cy: 20, r: 2 },
|
|
2769
|
+
],
|
|
2770
|
+
},
|
|
2771
|
+
{
|
|
2772
|
+
name: 'shopping-basket',
|
|
2773
|
+
viewBox: '0 0 24 24',
|
|
2774
|
+
fill: 'none',
|
|
2775
|
+
stroke: 'currentColor',
|
|
2776
|
+
strokeWidth: 2,
|
|
2777
|
+
strokeLinecap: 'round',
|
|
2778
|
+
strokeLinejoin: 'round',
|
|
2779
|
+
elements: [
|
|
2780
|
+
{ type: 'path', d: 'm15 11-1 9' },
|
|
2781
|
+
{ type: 'path', d: 'm19 11-4-7' },
|
|
2782
|
+
{ type: 'path', d: 'M2 11h20' },
|
|
2783
|
+
{
|
|
2784
|
+
type: 'path',
|
|
2785
|
+
d: 'm3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4',
|
|
2786
|
+
},
|
|
2787
|
+
{ type: 'path', d: 'M4.5 15.5h15' },
|
|
2788
|
+
{ type: 'path', d: 'm5 11 4-7' },
|
|
2789
|
+
{ type: 'path', d: 'm9 11 1 9' },
|
|
2790
|
+
],
|
|
2791
|
+
},
|
|
2792
|
+
{
|
|
2793
|
+
name: 'shopping-bag',
|
|
2794
|
+
viewBox: '0 0 24 24',
|
|
2795
|
+
fill: 'none',
|
|
2796
|
+
stroke: 'currentColor',
|
|
2797
|
+
strokeWidth: 2,
|
|
2798
|
+
strokeLinecap: 'round',
|
|
2799
|
+
strokeLinejoin: 'round',
|
|
2800
|
+
elements: [
|
|
2801
|
+
{ type: 'path', d: 'M16 10a4 4 0 0 1-8 0' },
|
|
2802
|
+
{ type: 'path', d: 'M3.103 6.034h17.794' },
|
|
2803
|
+
{
|
|
2804
|
+
type: 'path',
|
|
2805
|
+
d: 'M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z',
|
|
2806
|
+
},
|
|
2807
|
+
],
|
|
2808
|
+
},
|
|
2809
|
+
{
|
|
2810
|
+
name: 'wallet',
|
|
2811
|
+
viewBox: '0 0 24 24',
|
|
2812
|
+
fill: 'none',
|
|
2813
|
+
stroke: 'currentColor',
|
|
2814
|
+
strokeWidth: 2,
|
|
2815
|
+
strokeLinecap: 'round',
|
|
2816
|
+
strokeLinejoin: 'round',
|
|
2817
|
+
elements: [
|
|
2818
|
+
{
|
|
2819
|
+
type: 'path',
|
|
2820
|
+
d: 'M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1',
|
|
2821
|
+
},
|
|
2822
|
+
{
|
|
2823
|
+
type: 'path',
|
|
2824
|
+
d: 'M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4',
|
|
2825
|
+
},
|
|
2826
|
+
],
|
|
2827
|
+
},
|
|
2828
|
+
{
|
|
2829
|
+
name: 'globe-off',
|
|
2830
|
+
viewBox: '0 0 24 24',
|
|
2831
|
+
fill: 'none',
|
|
2832
|
+
stroke: 'currentColor',
|
|
2833
|
+
strokeWidth: 2,
|
|
2834
|
+
strokeLinecap: 'round',
|
|
2835
|
+
strokeLinejoin: 'round',
|
|
2836
|
+
elements: [
|
|
2837
|
+
{
|
|
2838
|
+
type: 'path',
|
|
2839
|
+
d: 'M10.114 4.462A14.5 14.5 0 0 1 12 2a10 10 0 0 1 9.313 13.643',
|
|
2840
|
+
},
|
|
2841
|
+
{
|
|
2842
|
+
type: 'path',
|
|
2843
|
+
d: 'M15.557 15.556A14.5 14.5 0 0 1 12 22 10 10 0 0 1 4.929 4.929',
|
|
2844
|
+
},
|
|
2845
|
+
{
|
|
2846
|
+
type: 'path',
|
|
2847
|
+
d: 'M15.892 10.234A14.5 14.5 0 0 0 12 2a10 10 0 0 0-3.643.687',
|
|
2848
|
+
},
|
|
2849
|
+
{ type: 'path', d: 'M17.656 12H22' },
|
|
2850
|
+
{
|
|
2851
|
+
type: 'path',
|
|
2852
|
+
d: 'M19.071 19.071A10 10 0 0 1 12 22 14.5 14.5 0 0 1 8.44 8.45',
|
|
2853
|
+
},
|
|
2854
|
+
{ type: 'path', d: 'M2 12h10' },
|
|
2855
|
+
{ type: 'path', d: 'm2 2 20 20' },
|
|
2856
|
+
],
|
|
2857
|
+
},
|
|
2730
2858
|
];
|
|
2731
2859
|
|
|
2732
2860
|
const SOLARIS_BUILT_IN_ICONS = [
|
|
@@ -2887,12 +3015,13 @@ class SolarisCardComponent {
|
|
|
2887
3015
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2888
3016
|
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
2889
3017
|
glassTexture = input('none', ...(ngDevMode ? [{ debugName: "glassTexture" }] : /* istanbul ignore next */ []));
|
|
3018
|
+
mediaPosition = input('top', ...(ngDevMode ? [{ debugName: "mediaPosition" }] : /* istanbul ignore next */ []));
|
|
2890
3019
|
themeService = inject(SolarisThemeService);
|
|
2891
3020
|
effectiveDensity = computed(() => {
|
|
2892
3021
|
return this.density() ?? this.themeService.density;
|
|
2893
3022
|
}, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
|
|
2894
3023
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2895
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: SolarisCardComponent, isStandalone: true, selector: "solaris-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, glassTexture: { classPropertyName: "glassTexture", publicName: "glassTexture", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-glass-texture": "appearance() === \"glass\" && glassTexture() !== \"none\" ? glassTexture() : null" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--solaris-card-shadow: none;--solaris-card-glass-blur: initial;--solaris-card-glass-background: initial;--solaris-card-glass-border-color: initial;--solaris-card-gap: var(--solaris-spacing-
|
|
3024
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: SolarisCardComponent, isStandalone: true, selector: "solaris-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, glassTexture: { classPropertyName: "glassTexture", publicName: "glassTexture", isSignal: true, isRequired: false, transformFunction: null }, mediaPosition: { classPropertyName: "mediaPosition", publicName: "mediaPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-media-position": "mediaPosition()", "attr.data-glass-texture": "appearance() === \"glass\" && glassTexture() !== \"none\" ? glassTexture() : null" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--solaris-card-shadow: none;--solaris-card-glass-blur: initial;--solaris-card-glass-background: initial;--solaris-card-glass-border-color: initial;--solaris-card-gap: var(--solaris-spacing-0);--solaris-card-glass-texture-opacity: initial;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-padding: var(--solaris-spacing-0);--solaris-card-color: var(--solaris-text-default);--solaris-card-header-gap: var(--solaris-spacing-0);--solaris-card-section-gap: var(--solaris-card-gap);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-section-padding: var(--solaris-card-padding);--solaris-card-footer-border-color: var(--solaris-border-subtle);--solaris-card-header-border-color: var(--solaris-border-subtle);--solaris-card-media-size: var(--solaris-spacing-12);gap:0;padding:0;display:flex;overflow:hidden;flex-direction:column;box-sizing:border-box;color:var(--solaris-card-color);box-shadow:var(--solaris-card-shadow);border-radius:var(--solaris-card-radius);background:var(--solaris-card-background);border:var(--solaris-card-border-width) solid var(--solaris-card-border-color)}:host([data-size=sm]){--solaris-card-media-size: var(--solaris-spacing-10)}:host([data-size=lg]){--solaris-card-media-size: var(--solaris-spacing-16)}:host([data-appearance=surface]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=outline]){--solaris-card-shadow: none;--solaris-card-background: transparent;--solaris-card-color: var(--solaris-text-default);--solaris-card-border-color: var(--solaris-border-default);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=tonal]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-subtle);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=glass]){--solaris-card-glass-blur: var(--solaris-glass-blur);--solaris-card-glass-texture-opacity: var(--solaris-glass-texture-opacity);--solaris-card-color: var(--solaris-text-glass);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-glass-border-color: var(--solaris-glass-border-color);--solaris-card-shadow: var(--solaris-glass-shadow);--solaris-card-glass-background: var(--solaris-glass-background);position:relative;isolation:isolate;box-shadow:var(--solaris-card-shadow);background:var(--solaris-card-glass-background);border-color:var(--solaris-card-glass-border-color);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass]):before{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);background:radial-gradient(circle at 72% 58%,rgba(255,110,24,.3607843137),transparent 34%),radial-gradient(circle at 22% 16%,rgba(255,255,255,.1803921569),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.1803921569),transparent 42%)}:host([data-appearance=glass][data-glass-texture=grooves]):after{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);opacity:var(--solaris-card-glass-texture-opacity);background-image:repeating-radial-gradient(circle at 0 0,var(--solaris-glass-border-color) 0,var(--solaris-glass-border-color) 1px,transparent 1px,transparent 4px)}:host([data-radius=none]){--solaris-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-card-radius: var(--solaris-radius-sm)}:host([data-radius=lg]){--solaris-card-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-card-radius: var(--solaris-radius-xl)}:host ::ng-deep .solaris-card-header,:host ::ng-deep .solaris-card-content,:host ::ng-deep .solaris-card-footer{box-sizing:border-box;padding-inline:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header{display:flex;flex-direction:column;padding-block:var(--solaris-card-section-padding) var(--solaris-spacing-0);gap:var(--solaris-card-header-gap)}:host ::ng-deep .solaris-card-header:only-child{padding-block-end:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-content{display:block;padding-block:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header+.solaris-card-content{padding-block-start:var(--solaris-card-section-gap)}:host ::ng-deep .solaris-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0);padding-block:var(--solaris-spacing-0) var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-footer:only-child{padding-block-start:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header[data-separator]{padding-block-end:var(--solaris-card-section-gap);border-bottom:var(--solaris-border-width-sm) solid var(--solaris-card-header-border-color)}:host ::ng-deep .solaris-card-footer[data-separator]{padding-block-start:var(--solaris-card-section-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-card-footer-border-color)}:host ::ng-deep .solaris-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-card-media:first-child{border-radius:var(--solaris-card-radius) var(--solaris-card-radius) 0 0}:host ::ng-deep .solaris-card-media:not(:first-child){border-radius:var(--solaris-radius-none)}:host ::ng-deep .solaris-card-media img,:host ::ng-deep .solaris-card-media video,:host ::ng-deep .solaris-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0)}:host ::ng-deep .solaris-card-title{color:var(--solaris-text-strong);font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);margin:var(--solaris-spacing-0)}:host ::ng-deep .solaris-card-description{margin:var(--solaris-spacing-0);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host([data-appearance=glass]) ::ng-deep .solaris-card-description{color:var(--solaris-text-glass)}:host ::ng-deep *+.solaris-card-description{margin-top:var(--solaris-spacing-0)}:host([data-media-position=start]){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch}:host([data-media-position=start]) ::ng-deep .solaris-card-media{grid-row:1/-1;grid-column:1;align-self:center;width:var(--solaris-card-media-size);height:var(--solaris-card-media-size);border-radius:var(--solaris-radius-md)}:host([data-media-position=start]) ::ng-deep .solaris-card-media img,:host([data-media-position=start]) ::ng-deep .solaris-card-media video,:host([data-media-position=start]) ::ng-deep .solaris-card-media picture{width:100%;height:100%;object-fit:cover}:host([data-media-position=start]) ::ng-deep .solaris-card-header,:host([data-media-position=start]) ::ng-deep .solaris-card-content,:host([data-media-position=start]) ::ng-deep .solaris-card-footer,:host([data-media-position=start]) ::ng-deep .solaris-card-actions{grid-column:2;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2896
3025
|
}
|
|
2897
3026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardComponent, decorators: [{
|
|
2898
3027
|
type: Component,
|
|
@@ -2901,13 +3030,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
2901
3030
|
'[attr.data-size]': 'size()',
|
|
2902
3031
|
'[attr.data-radius]': 'radius()',
|
|
2903
3032
|
'[attr.data-density]': 'effectiveDensity()',
|
|
3033
|
+
'[attr.data-media-position]': 'mediaPosition()',
|
|
2904
3034
|
'[attr.data-glass-texture]': 'appearance() === "glass" && glassTexture() !== "none" ? glassTexture() : null',
|
|
2905
|
-
}, template: "<ng-content />\n", styles: [":host{--solaris-card-shadow: none;--solaris-card-glass-blur: initial;--solaris-card-glass-background: initial;--solaris-card-glass-border-color: initial;--solaris-card-gap: var(--solaris-spacing-
|
|
2906
|
-
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], glassTexture: [{ type: i0.Input, args: [{ isSignal: true, alias: "glassTexture", required: false }] }] } });
|
|
3035
|
+
}, template: "<ng-content />\n", styles: [":host{--solaris-card-shadow: none;--solaris-card-glass-blur: initial;--solaris-card-glass-background: initial;--solaris-card-glass-border-color: initial;--solaris-card-gap: var(--solaris-spacing-0);--solaris-card-glass-texture-opacity: initial;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-padding: var(--solaris-spacing-0);--solaris-card-color: var(--solaris-text-default);--solaris-card-header-gap: var(--solaris-spacing-0);--solaris-card-section-gap: var(--solaris-card-gap);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-section-padding: var(--solaris-card-padding);--solaris-card-footer-border-color: var(--solaris-border-subtle);--solaris-card-header-border-color: var(--solaris-border-subtle);--solaris-card-media-size: var(--solaris-spacing-12);gap:0;padding:0;display:flex;overflow:hidden;flex-direction:column;box-sizing:border-box;color:var(--solaris-card-color);box-shadow:var(--solaris-card-shadow);border-radius:var(--solaris-card-radius);background:var(--solaris-card-background);border:var(--solaris-card-border-width) solid var(--solaris-card-border-color)}:host([data-size=sm]){--solaris-card-media-size: var(--solaris-spacing-10)}:host([data-size=lg]){--solaris-card-media-size: var(--solaris-spacing-16)}:host([data-appearance=surface]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=outline]){--solaris-card-shadow: none;--solaris-card-background: transparent;--solaris-card-color: var(--solaris-text-default);--solaris-card-border-color: var(--solaris-border-default);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=tonal]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-subtle);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=glass]){--solaris-card-glass-blur: var(--solaris-glass-blur);--solaris-card-glass-texture-opacity: var(--solaris-glass-texture-opacity);--solaris-card-color: var(--solaris-text-glass);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-glass-border-color: var(--solaris-glass-border-color);--solaris-card-shadow: var(--solaris-glass-shadow);--solaris-card-glass-background: var(--solaris-glass-background);position:relative;isolation:isolate;box-shadow:var(--solaris-card-shadow);background:var(--solaris-card-glass-background);border-color:var(--solaris-card-glass-border-color);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass]):before{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);background:radial-gradient(circle at 72% 58%,rgba(255,110,24,.3607843137),transparent 34%),radial-gradient(circle at 22% 16%,rgba(255,255,255,.1803921569),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.1803921569),transparent 42%)}:host([data-appearance=glass][data-glass-texture=grooves]):after{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);opacity:var(--solaris-card-glass-texture-opacity);background-image:repeating-radial-gradient(circle at 0 0,var(--solaris-glass-border-color) 0,var(--solaris-glass-border-color) 1px,transparent 1px,transparent 4px)}:host([data-radius=none]){--solaris-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-card-radius: var(--solaris-radius-sm)}:host([data-radius=lg]){--solaris-card-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-card-radius: var(--solaris-radius-xl)}:host ::ng-deep .solaris-card-header,:host ::ng-deep .solaris-card-content,:host ::ng-deep .solaris-card-footer{box-sizing:border-box;padding-inline:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header{display:flex;flex-direction:column;padding-block:var(--solaris-card-section-padding) var(--solaris-spacing-0);gap:var(--solaris-card-header-gap)}:host ::ng-deep .solaris-card-header:only-child{padding-block-end:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-content{display:block;padding-block:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header+.solaris-card-content{padding-block-start:var(--solaris-card-section-gap)}:host ::ng-deep .solaris-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0);padding-block:var(--solaris-spacing-0) var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-footer:only-child{padding-block-start:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header[data-separator]{padding-block-end:var(--solaris-card-section-gap);border-bottom:var(--solaris-border-width-sm) solid var(--solaris-card-header-border-color)}:host ::ng-deep .solaris-card-footer[data-separator]{padding-block-start:var(--solaris-card-section-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-card-footer-border-color)}:host ::ng-deep .solaris-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-card-media:first-child{border-radius:var(--solaris-card-radius) var(--solaris-card-radius) 0 0}:host ::ng-deep .solaris-card-media:not(:first-child){border-radius:var(--solaris-radius-none)}:host ::ng-deep .solaris-card-media img,:host ::ng-deep .solaris-card-media video,:host ::ng-deep .solaris-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0)}:host ::ng-deep .solaris-card-title{color:var(--solaris-text-strong);font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);margin:var(--solaris-spacing-0)}:host ::ng-deep .solaris-card-description{margin:var(--solaris-spacing-0);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host([data-appearance=glass]) ::ng-deep .solaris-card-description{color:var(--solaris-text-glass)}:host ::ng-deep *+.solaris-card-description{margin-top:var(--solaris-spacing-0)}:host([data-media-position=start]){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch}:host([data-media-position=start]) ::ng-deep .solaris-card-media{grid-row:1/-1;grid-column:1;align-self:center;width:var(--solaris-card-media-size);height:var(--solaris-card-media-size);border-radius:var(--solaris-radius-md)}:host([data-media-position=start]) ::ng-deep .solaris-card-media img,:host([data-media-position=start]) ::ng-deep .solaris-card-media video,:host([data-media-position=start]) ::ng-deep .solaris-card-media picture{width:100%;height:100%;object-fit:cover}:host([data-media-position=start]) ::ng-deep .solaris-card-header,:host([data-media-position=start]) ::ng-deep .solaris-card-content,:host([data-media-position=start]) ::ng-deep .solaris-card-footer,:host([data-media-position=start]) ::ng-deep .solaris-card-actions{grid-column:2;min-width:0}\n"] }]
|
|
3036
|
+
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], glassTexture: [{ type: i0.Input, args: [{ isSignal: true, alias: "glassTexture", required: false }] }], mediaPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaPosition", required: false }] }] } });
|
|
2907
3037
|
|
|
2908
3038
|
class SolarisCardHeaderDirective {
|
|
3039
|
+
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2909
3040
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2910
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
3041
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisCardHeaderDirective, isStandalone: true, selector: "[solaris-card-header]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-card-header" }, ngImport: i0 });
|
|
2911
3042
|
}
|
|
2912
3043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardHeaderDirective, decorators: [{
|
|
2913
3044
|
type: Directive,
|
|
@@ -2916,9 +3047,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
2916
3047
|
standalone: true,
|
|
2917
3048
|
host: {
|
|
2918
3049
|
class: 'solaris-card-header',
|
|
3050
|
+
'[attr.data-separator]': "separator() ? '' : null",
|
|
2919
3051
|
},
|
|
2920
3052
|
}]
|
|
2921
|
-
}] });
|
|
3053
|
+
}], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
|
|
2922
3054
|
|
|
2923
3055
|
class SolarisCardContentDirective {
|
|
2924
3056
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -2951,7 +3083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
2951
3083
|
}] });
|
|
2952
3084
|
|
|
2953
3085
|
class SolarisCardFooterDirective {
|
|
2954
|
-
separator = input(
|
|
3086
|
+
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2955
3087
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2956
3088
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisCardFooterDirective, isStandalone: true, selector: "[solaris-card-footer]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-card-footer" }, ngImport: i0 });
|
|
2957
3089
|
}
|
|
@@ -9044,6 +9176,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
9044
9176
|
}, template: "<label class=\"solaris-radio__label\" [for]=\"elementId()\">\n <input\n type=\"radio\"\n class=\"solaris-radio__input\"\n [id]=\"elementId()\"\n [checked]=\"_checked()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [required]=\"required\"\n [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n [attr.name]=\"effectiveName() ?? null\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n #inputElement\n />\n <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n @if (_checked()) {\n <span class=\"solaris-radio__dot\"></span>\n }\n </span>\n @if (hasProjectedContent()) {\n <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n <ng-content />\n </span>\n } @else if (labelText(); as text) {\n <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n {{ text }}\n </span>\n }\n</label>\n", styles: [":host{--solaris-radio-dot-color: transparent;--solaris-radio-background: transparent;--solaris-radio-ring-color: transparent;--solaris-radio-custom-surface: initial;--solaris-radio-custom-ring-color: initial;--solaris-radio-readonly-background: initial;--solaris-radio-custom-border-color: initial;--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-5);--solaris-radio-custom-indicator-color: initial;--solaris-radio-dot-size: var(--solaris-spacing-2);--solaris-radio-border-color: var(--solaris-primary-border);--solaris-radio-disabled-opacity: var(--solaris-opacity-50);--solaris-radio-label-font-size: var(--solaris-font-size-md);--solaris-radio-focus-ring-color: var(--solaris-primary-base);--solaris-radio-ring-width: var(--solaris-spacing-half);--solaris-radio-label-line-height: var(--solaris-line-height-md);outline:none;display:inline-flex;vertical-align:middle}.solaris-radio__label{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;display:inline-flex;gap:var(--solaris-radio-gap)}.solaris-radio__input{width:0;height:0;margin:0;opacity:0;padding:0;position:absolute;pointer-events:none}.solaris-radio__control{display:flex;flex-shrink:0;border-radius:50%;position:relative;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-radio-size);height:var(--solaris-radio-size);background:var(--solaris-radio-background);border:var(--solaris-radio-ring-width) solid var(--solaris-radio-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-radio__dot{display:block;border-radius:50%;box-sizing:border-box;width:var(--solaris-radio-dot-size);height:var(--solaris-radio-dot-size);background:var(--solaris-radio-dot-color)}.solaris-radio__label-text{color:inherit;font-size:var(--solaris-radio-label-font-size);line-height:var(--solaris-radio-label-line-height)}:host([data-size=sm]){--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-4);--solaris-radio-label-font-size: var(--solaris-font-size-sm);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 1.5);--solaris-radio-ring-width: var(--solaris-spacing-half);--solaris-radio-label-line-height: var(--solaris-line-height-sm)}:host([data-size=md]){--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-5);--solaris-radio-dot-size: var(--solaris-spacing-2);--solaris-radio-label-font-size: var(--solaris-font-size-md);--solaris-radio-ring-width: var(--solaris-spacing-half);--solaris-radio-label-line-height: var(--solaris-line-height-md)}:host([data-size=lg]){--solaris-radio-gap: var(--solaris-spacing-3);--solaris-radio-size: var(--solaris-spacing-6);--solaris-radio-label-font-size: var(--solaris-font-size-lg);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 2.5);--solaris-radio-label-line-height: var(--solaris-line-height-lg);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) * .75)}:host([data-density=compact]){--solaris-radio-gap: var(--solaris-spacing-1)}:host([data-density=normal]){--solaris-radio-gap: var(--solaris-spacing-2)}:host([data-density=comfortable]){--solaris-radio-gap: var(--solaris-spacing-3)}:host([data-appearance=outline]){--solaris-radio-background: transparent}:host([data-appearance=surface]){--solaris-radio-border-color: transparent;--solaris-radio-ring-width: var(--solaris-spacing-0);--solaris-radio-background: var(--solaris-surface-muted)}:host([data-appearance=surface][data-checked]){--solaris-radio-background: transparent;--solaris-radio-ring-width: var(--solaris-spacing-half)}:host([data-color=neutral]){--solaris-radio-border-color: var(--solaris-border-default)}:host([data-color=neutral][data-checked]){--solaris-radio-dot-color: var(--solaris-text-default);--solaris-radio-ring-color: var(--solaris-text-default);--solaris-radio-border-color: var(--solaris-text-default)}:host([data-color=primary]){--solaris-radio-border-color: var(--solaris-primary-border);--solaris-radio-focus-ring-color: var(--solaris-primary-base)}:host([data-color=primary][data-checked]){--solaris-radio-dot-color: var(--solaris-primary-base);--solaris-radio-ring-color: var(--solaris-primary-base);--solaris-radio-border-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-radio-border-color: var(--solaris-success-border);--solaris-radio-focus-ring-color: var(--solaris-success-base)}:host([data-color=success][data-checked]){--solaris-radio-dot-color: var(--solaris-success-base);--solaris-radio-ring-color: var(--solaris-success-base);--solaris-radio-border-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-radio-border-color: var(--solaris-warning-border);--solaris-radio-focus-ring-color: var(--solaris-warning-base)}:host([data-color=warning][data-checked]){--solaris-radio-dot-color: var(--solaris-warning-base);--solaris-radio-ring-color: var(--solaris-warning-base);--solaris-radio-border-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-radio-border-color: var(--solaris-danger-border);--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-color=danger][data-checked]){--solaris-radio-dot-color: var(--solaris-danger-base);--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-radio-border-color: var(--solaris-info-border);--solaris-radio-focus-ring-color: var(--solaris-info-base)}:host([data-color=info][data-checked]){--solaris-radio-dot-color: var(--solaris-info-base);--solaris-radio-ring-color: var(--solaris-info-base);--solaris-radio-border-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-radio-background: var(--solaris-radio-custom-surface);--solaris-radio-border-color: var(--solaris-radio-custom-border-color)}:host([data-color=custom][data-checked]){--solaris-radio-ring-color: var(--solaris-radio-custom-ring-color);--solaris-radio-border-color: var(--solaris-radio-custom-ring-color);--solaris-radio-dot-color: var(--solaris-radio-custom-indicator-color)}.solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-color=primary]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-primary-hover)}:host([data-color=success]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-success-hover)}:host([data-color=warning]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-warning-hover)}:host([data-color=danger]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-hover)}:host([data-color=info]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-info-hover)}.solaris-radio__input:focus-visible+.solaris-radio__control{outline-offset:var(--solaris-spacing-half);outline:var(--solaris-border-width-sm) solid var(--solaris-radio-focus-ring-color)}:host([data-invalid]){--solaris-radio-border-color: var(--solaris-danger-base);--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-invalid][data-checked]){--solaris-radio-dot-color: var(--solaris-danger-base);--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base)}:host([data-invalid]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-base)}:host([data-disabled]){--solaris-radio-disabled-opacity: var(--solaris-opacity-50)}:host([data-disabled]) .solaris-radio__label{cursor:not-allowed}:host([data-disabled]) .solaris-radio__control{opacity:var(--solaris-radio-disabled-opacity)}:host([data-disabled]) .solaris-radio__label-text{opacity:var(--solaris-radio-disabled-opacity)}:host([data-readonly]),:host([data-readonly][data-checked]){--solaris-radio-readonly-opacity: .65;--solaris-radio-dot-color: var(--solaris-text-muted);--solaris-radio-ring-color: var(--solaris-text-muted);--solaris-radio-border-color: var(--solaris-border-subtle)}:host([data-readonly]) .solaris-radio__label{cursor:not-allowed}:host([data-readonly]) .solaris-radio__control,:host([data-readonly]) .solaris-radio__label-text{opacity:var(--solaris-radio-readonly-opacity)}:host([data-readonly]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-readonly][data-checked]) .solaris-radio__control{border-color:var(--solaris-radio-ring-color);background:var(--solaris-radio-readonly-background)}:host([data-readonly][data-checked]) .solaris-radio__dot{background:var(--solaris-radio-dot-color)}\n"] }]
|
|
9045
9177
|
}], ctorParameters: () => [], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radioLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] } });
|
|
9046
9178
|
|
|
9179
|
+
class SolarisSelectionCardFooterDirective {
|
|
9180
|
+
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9181
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9182
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisSelectionCardFooterDirective, isStandalone: true, selector: "[solaris-selection-card-footer]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-selection-card-footer" }, ngImport: i0 });
|
|
9183
|
+
}
|
|
9184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardFooterDirective, decorators: [{
|
|
9185
|
+
type: Directive,
|
|
9186
|
+
args: [{
|
|
9187
|
+
selector: '[solaris-selection-card-footer]',
|
|
9188
|
+
standalone: true,
|
|
9189
|
+
host: {
|
|
9190
|
+
class: 'solaris-selection-card-footer',
|
|
9191
|
+
'[attr.data-separator]': "separator() ? '' : null",
|
|
9192
|
+
},
|
|
9193
|
+
}]
|
|
9194
|
+
}], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
|
|
9195
|
+
|
|
9196
|
+
class SolarisSelectionCardHeaderDirective {
|
|
9197
|
+
separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9198
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9199
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisSelectionCardHeaderDirective, isStandalone: true, selector: "[solaris-selection-card-header]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-selection-card-header" }, ngImport: i0 });
|
|
9200
|
+
}
|
|
9201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardHeaderDirective, decorators: [{
|
|
9202
|
+
type: Directive,
|
|
9203
|
+
args: [{
|
|
9204
|
+
selector: '[solaris-selection-card-header]',
|
|
9205
|
+
standalone: true,
|
|
9206
|
+
host: {
|
|
9207
|
+
class: 'solaris-selection-card-header',
|
|
9208
|
+
'[attr.data-separator]': "separator() ? '' : null",
|
|
9209
|
+
},
|
|
9210
|
+
}]
|
|
9211
|
+
}], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
|
|
9212
|
+
|
|
9047
9213
|
class SolarisSelectionCardMediaDirective {
|
|
9048
9214
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9049
9215
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: SolarisSelectionCardMediaDirective, isStandalone: true, selector: "[solaris-selection-card-media]", host: { classAttribute: "solaris-selection-card-media" }, ngImport: i0 });
|
|
@@ -9066,6 +9232,8 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
|
|
|
9066
9232
|
groupName = inject(SOLARIS_RADIO_GROUP_NAME, { optional: true }) ?? null;
|
|
9067
9233
|
inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
|
|
9068
9234
|
media = contentChild(SolarisSelectionCardMediaDirective, ...(ngDevMode ? [{ debugName: "media" }] : /* istanbul ignore next */ []));
|
|
9235
|
+
header = contentChild(SolarisSelectionCardHeaderDirective, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
|
|
9236
|
+
footer = contentChild(SolarisSelectionCardFooterDirective, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
|
|
9069
9237
|
_checked = signal(false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
|
|
9070
9238
|
_focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
|
|
9071
9239
|
_describedByIds = signal([], ...(ngDevMode ? [{ debugName: "_describedByIds" }] : /* istanbul ignore next */ []));
|
|
@@ -9088,6 +9256,9 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
|
|
|
9088
9256
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
9089
9257
|
radius = input('lg', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
9090
9258
|
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
9259
|
+
selection = input('radio', ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
|
|
9260
|
+
selectionPosition = input('start', ...(ngDevMode ? [{ debugName: "selectionPosition" }] : /* istanbul ignore next */ []));
|
|
9261
|
+
mediaPosition = input('top', ...(ngDevMode ? [{ debugName: "mediaPosition" }] : /* istanbul ignore next */ []));
|
|
9091
9262
|
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
9092
9263
|
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9093
9264
|
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -9097,12 +9268,16 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
|
|
|
9097
9268
|
themeService = inject(SolarisThemeService);
|
|
9098
9269
|
effectiveDensity = computed(() => this.density() ?? this.themeService.density, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
|
|
9099
9270
|
hasMedia = computed(() => this.media() !== undefined, ...(ngDevMode ? [{ debugName: "hasMedia" }] : /* istanbul ignore next */ []));
|
|
9271
|
+
hasFooter = computed(() => this.footer() !== undefined, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
9272
|
+
hasHeaderSeparator = computed(() => this.header()?.separator() ?? false, ...(ngDevMode ? [{ debugName: "hasHeaderSeparator" }] : /* istanbul ignore next */ []));
|
|
9273
|
+
hasFooterSeparator = computed(() => this.footer()?.separator() ?? false, ...(ngDevMode ? [{ debugName: "hasFooterSeparator" }] : /* istanbul ignore next */ []));
|
|
9274
|
+
isSwitchSelection = computed(() => this.selection() === 'switch', ...(ngDevMode ? [{ debugName: "isSwitchSelection" }] : /* istanbul ignore next */ []));
|
|
9100
9275
|
isEffectivelyDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
|
|
9101
9276
|
isEffectivelyReadonly = computed(() => this.readonlyInput() || this.cvaReadonly(), ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
|
|
9102
9277
|
isEffectivelyInvalid = computed(() => this.invalidInput() ?? false, ...(ngDevMode ? [{ debugName: "isEffectivelyInvalid" }] : /* istanbul ignore next */ []));
|
|
9103
9278
|
elementId = computed(() => resolveElementId(this.elementRef, 'solaris-selection-card'), ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
|
|
9104
9279
|
contentId = computed(() => `${this.elementId()}-content`, ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
|
|
9105
|
-
effectiveName = computed(() => this.name() ?? this.groupName, ...(ngDevMode ? [{ debugName: "effectiveName" }] : /* istanbul ignore next */ []));
|
|
9280
|
+
effectiveName = computed(() => this.name() ?? (this.isSwitchSelection() ? null : this.groupName), ...(ngDevMode ? [{ debugName: "effectiveName" }] : /* istanbul ignore next */ []));
|
|
9106
9281
|
ariaDescribedBy = computed(() => {
|
|
9107
9282
|
const ids = this._describedByIds();
|
|
9108
9283
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
@@ -9196,7 +9371,7 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
|
|
|
9196
9371
|
this.onTouched();
|
|
9197
9372
|
}
|
|
9198
9373
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisSelectionCardComponent, isStandalone: true, selector: "solaris-selection-card", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", changeEvent: "changeEvent" }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-checked": "_checked() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null", "attr.data-invalid": "isEffectivelyInvalid() ? \"\" : null", "attr.data-focused": "_focused() ? \"\" : null", "attr.data-has-media": "hasMedia() ? \"\" : null" }, classAttribute: "solaris-selection-card" }, providers: [
|
|
9374
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisSelectionCardComponent, isStandalone: true, selector: "solaris-selection-card", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectionPosition: { classPropertyName: "selectionPosition", publicName: "selectionPosition", isSignal: true, isRequired: false, transformFunction: null }, mediaPosition: { classPropertyName: "mediaPosition", publicName: "mediaPosition", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", changeEvent: "changeEvent" }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-selection": "selection()", "attr.data-selection-position": "selectionPosition()", "attr.data-media-position": "mediaPosition()", "attr.data-checked": "_checked() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null", "attr.data-invalid": "isEffectivelyInvalid() ? \"\" : null", "attr.data-focused": "_focused() ? \"\" : null", "attr.data-has-media": "hasMedia() ? \"\" : null", "attr.data-has-footer": "hasFooter() ? \"\" : null", "attr.data-header-separator": "hasHeaderSeparator() ? \"\" : null", "attr.data-footer-separator": "hasFooterSeparator() ? \"\" : null" }, classAttribute: "solaris-selection-card" }, providers: [
|
|
9200
9375
|
{
|
|
9201
9376
|
provide: NG_VALUE_ACCESSOR,
|
|
9202
9377
|
useExisting: forwardRef(() => SolarisSelectionCardComponent),
|
|
@@ -9210,7 +9385,7 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
|
|
|
9210
9385
|
provide: SOLARIS_RADIO_OPTION,
|
|
9211
9386
|
useExisting: forwardRef(() => SolarisSelectionCardComponent),
|
|
9212
9387
|
},
|
|
9213
|
-
], queries: [{ propertyName: "media", first: true, predicate: SolarisSelectionCardMediaDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input\n #inputElement\n type=\"radio\"\n class=\"solaris-selection-card__input\"\n [id]=\"elementId()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [required]=\"required\"\n [attr.name]=\"effectiveName() ?? null\"\n [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n [attr.aria-readonly]=\"isEffectivelyReadonly() ? 'true' : null\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n/>\n<div class=\"solaris-selection-card__surface\">\n <ng-content select=\"[solaris-selection-card-media]\" />\n <div class=\"solaris-selection-card__body\">\n <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n @if (_checked()) {\n <span class=\"solaris-selection-card__dot\"></span>\n }\n </span>\n <div class=\"solaris-selection-card__content\" [id]=\"contentId()\">\n <ng-content select=\"[solaris-selection-card-header]\" />\n <ng-content select=\"[solaris-selection-card-content]\" />\n <ng-content />\n <ng-content select=\"[solaris-selection-card-footer]\" />\n </div>\n </div>\n</div>\n", styles: [":host{--solaris-selection-card-gap: var(--solaris-spacing-4);--solaris-selection-card-radius: var(--solaris-radius-lg);--solaris-selection-card-padding: var(--solaris-spacing-6);--solaris-selection-card-color: var(--solaris-text-default);--solaris-selection-card-background: var(--solaris-surface-base);--solaris-selection-card-indicator-size: var(--solaris-spacing-5);--solaris-selection-card-border-color: var(--solaris-border-subtle);--solaris-selection-card-disabled-opacity: var(--solaris-opacity-50);--solaris-selection-card-border-width: var(--solaris-border-width-sm);--solaris-selection-card-indicator-dot-size: var(--solaris-spacing-2);--solaris-selection-card-hover-background: var(--solaris-surface-subtle);--solaris-selection-card-active-background: var(--solaris-surface-muted);--solaris-selection-card-focus-ring-color: var(--solaris-text-default);--solaris-selection-card-indicator-dot-color: var(--solaris-text-default);--solaris-selection-card-selected-background: var(--solaris-surface-muted);--solaris-selection-card-selected-border-color: var(--solaris-border-default);--solaris-selection-card-indicator-border-color: var( --solaris-border-default );--solaris-selection-card-glass-background: initial;--solaris-selection-card-glass-border-color: initial;--solaris-selection-card-custom-focus-ring-color: initial;--solaris-selection-card-custom-indicator-dot-color: initial;--solaris-selection-card-custom-selected-background: initial;--solaris-selection-card-custom-selected-border-color: initial;--solaris-selection-card-custom-indicator-border-color: initial;display:block;position:relative;box-sizing:border-box}.solaris-selection-card__input{inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;z-index:var(--solaris-z-index-content)}.solaris-selection-card__surface{overflow:hidden;position:relative;box-sizing:border-box;color:var(--solaris-selection-card-color);border-radius:var(--solaris-selection-card-radius);background:var(--solaris-selection-card-background);border:var(--solaris-selection-card-border-width) solid var(--solaris-selection-card-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__body{display:flex;min-height:var(--solaris-density-min-height);box-sizing:border-box;align-items:flex-start;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__content{flex:1;min-width:0}.solaris-selection-card__control{display:flex;flex-shrink:0;border-radius:50%;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-selection-card-indicator-size);height:var(--solaris-selection-card-indicator-size);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color)}:host([data-has-media]) .solaris-selection-card__control{top:var(--solaris-selection-card-padding);right:var(--solaris-selection-card-padding);position:absolute;background:var(--solaris-surface-base)}.solaris-selection-card__dot{display:block;border-radius:50%;width:var(--solaris-selection-card-indicator-dot-size);height:var(--solaris-selection-card-indicator-dot-size);background:var(--solaris-selection-card-indicator-dot-color)}:host ::ng-deep .solaris-selection-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-selection-card-media img,:host ::ng-deep .solaris-selection-card-media video,:host ::ng-deep .solaris-selection-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-selection-card-header{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host ::ng-deep .solaris-selection-card-content{display:block;margin-top:var(--solaris-selection-card-gap)}:host ::ng-deep .solaris-selection-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-2);margin-top:var(--solaris-selection-card-gap)}:host ::ng-deep .solaris-selection-card-footer[data-separator]{padding-top:var(--solaris-selection-card-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-selection-card-border-color)}:host ::ng-deep .solaris-selection-card-title{margin:0;color:var(--solaris-text-strong);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}:host ::ng-deep .solaris-selection-card-description{margin:0;color:var(--solaris-text-muted);font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}:host([data-size=sm]){--solaris-selection-card-gap: var(--solaris-spacing-3);--solaris-selection-card-padding: var(--solaris-spacing-4);--solaris-selection-card-indicator-size: var(--solaris-spacing-4);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 1.5 )}:host([data-size=lg]){--solaris-selection-card-gap: var(--solaris-spacing-5);--solaris-selection-card-padding: var(--solaris-spacing-8);--solaris-selection-card-indicator-size: var(--solaris-spacing-6);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 2.5 )}:host([data-density=compact]){--solaris-selection-card-gap: var(--solaris-density-gap-lg);--solaris-selection-card-padding: var(--solaris-density-padding-xl)}:host([data-density=comfortable]){--solaris-selection-card-gap: var(--solaris-density-gap-lg);--solaris-selection-card-padding: var(--solaris-density-padding-xl)}:host([data-radius=none]){--solaris-selection-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-selection-card-radius: var(--solaris-radius-sm)}:host([data-radius=xl]){--solaris-selection-card-radius: var(--solaris-radius-xl)}:host([data-appearance=outline]){--solaris-selection-card-background: transparent;--solaris-selection-card-border-color: var(--solaris-border-default)}:host([data-appearance=tonal]){--solaris-selection-card-background: var(--solaris-surface-subtle);--solaris-selection-card-border-color: var(--solaris-border-subtle)}:host([data-appearance=glass]) .solaris-selection-card__surface{--solaris-selection-card-color: var(--solaris-text-glass);--solaris-selection-card-glass-background: var(--solaris-glass-background);--solaris-selection-card-glass-border-color: var( --solaris-glass-border-color );isolation:isolate;background:var(--solaris-selection-card-glass-background);border-color:var(--solaris-selection-card-glass-border-color);box-shadow:var(--solaris-glass-shadow);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass][data-checked]) .solaris-selection-card__surface{background:var(--solaris-selection-card-background);border-color:var(--solaris-selection-card-border-color)}:host([data-appearance=glass]) ::ng-deep .solaris-selection-card-description{color:var(--solaris-text-glass)}:host([data-color=primary]){--solaris-selection-card-focus-ring-color: var(--solaris-primary-base);--solaris-selection-card-indicator-dot-color: var(--solaris-primary-base);--solaris-selection-card-selected-background: var(--solaris-primary-surface);--solaris-selection-card-selected-border-color: var(--solaris-primary-border);--solaris-selection-card-indicator-border-color: var( --solaris-primary-border )}:host([data-color=success]){--solaris-selection-card-focus-ring-color: var(--solaris-success-base);--solaris-selection-card-indicator-dot-color: var(--solaris-success-base);--solaris-selection-card-selected-background: var(--solaris-success-surface);--solaris-selection-card-selected-border-color: var(--solaris-success-border);--solaris-selection-card-indicator-border-color: var( --solaris-success-border )}:host([data-color=warning]){--solaris-selection-card-focus-ring-color: var(--solaris-warning-base);--solaris-selection-card-indicator-dot-color: var(--solaris-warning-base);--solaris-selection-card-selected-background: var(--solaris-warning-surface);--solaris-selection-card-selected-border-color: var(--solaris-warning-border);--solaris-selection-card-indicator-border-color: var( --solaris-warning-border )}:host([data-color=danger]){--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-selected-background: var(--solaris-danger-surface);--solaris-selection-card-selected-border-color: var(--solaris-danger-border);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-color=info]){--solaris-selection-card-focus-ring-color: var(--solaris-info-base);--solaris-selection-card-indicator-dot-color: var(--solaris-info-base);--solaris-selection-card-selected-background: var(--solaris-info-surface);--solaris-selection-card-selected-border-color: var(--solaris-info-border);--solaris-selection-card-indicator-border-color: var(--solaris-info-border)}:host([data-color=custom]){--solaris-selection-card-focus-ring-color: var( --solaris-selection-card-custom-focus-ring-color );--solaris-selection-card-indicator-dot-color: var( --solaris-selection-card-custom-indicator-dot-color );--solaris-selection-card-selected-background: var( --solaris-selection-card-custom-selected-background );--solaris-selection-card-selected-border-color: var( --solaris-selection-card-custom-selected-border-color );--solaris-selection-card-indicator-border-color: var( --solaris-selection-card-custom-indicator-border-color )}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:hover+.solaris-selection-card__surface{background:var(--solaris-selection-card-hover-background)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:active+.solaris-selection-card__surface{background:var(--solaris-selection-card-active-background)}:host([data-checked]){--solaris-selection-card-background: var( --solaris-selection-card-selected-background );--solaris-selection-card-border-color: var( --solaris-selection-card-selected-border-color )}.solaris-selection-card__input:focus-visible+.solaris-selection-card__surface{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-selection-card-focus-ring-color)}:host([data-invalid]){--solaris-selection-card-border-color: var(--solaris-danger-border);--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-disabled]) .solaris-selection-card__surface{cursor:not-allowed;opacity:var(--solaris-selection-card-disabled-opacity)}:host([data-readonly]) .solaris-selection-card__input{cursor:not-allowed}:host([data-readonly]) .solaris-selection-card__surface{cursor:default;opacity:var(--solaris-selection-card-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9388
|
+
], queries: [{ propertyName: "media", first: true, predicate: SolarisSelectionCardMediaDirective, descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: SolarisSelectionCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: SolarisSelectionCardFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input\n #inputElement\n [type]=\"isSwitchSelection() ? 'checkbox' : 'radio'\"\n [attr.role]=\"isSwitchSelection() ? 'switch' : null\"\n class=\"solaris-selection-card__input\"\n [id]=\"elementId()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [required]=\"required\"\n [attr.name]=\"effectiveName() ?? null\"\n [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n [attr.aria-readonly]=\"isEffectivelyReadonly() ? 'true' : null\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n/>\n<div class=\"solaris-selection-card__surface\">\n <ng-content select=\"[solaris-selection-card-media]\" />\n <div class=\"solaris-selection-card__body\">\n <div class=\"solaris-selection-card__top-row\">\n @if (!isSwitchSelection() && selectionPosition() === 'start') {\n <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n @if (_checked()) {\n <span class=\"solaris-selection-card__dot\"></span>\n }\n </span>\n }\n <div class=\"solaris-selection-card__header\">\n <ng-content select=\"[solaris-selection-card-header]\" />\n </div>\n @if (!isSwitchSelection() && selectionPosition() === 'end') {\n <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n @if (_checked()) {\n <span class=\"solaris-selection-card__dot\"></span>\n }\n </span>\n }\n </div>\n @if (hasHeaderSeparator()) {\n <div class=\"solaris-selection-card__separator\" aria-hidden=\"true\"></div>\n }\n <div class=\"solaris-selection-card__content\" [id]=\"contentId()\">\n <ng-content select=\"[solaris-selection-card-content]\" />\n <ng-content />\n </div>\n </div>\n @if (isSwitchSelection() || hasFooter()) {\n <div class=\"solaris-selection-card__footer\">\n @if (isSwitchSelection() && selectionPosition() === 'start') {\n <span class=\"solaris-selection-card__switch\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__switch-thumb\"></span>\n </span>\n }\n <ng-content select=\"[solaris-selection-card-footer]\" />\n @if (isSwitchSelection() && selectionPosition() === 'end') {\n <span class=\"solaris-selection-card__switch\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__switch-thumb\"></span>\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{--solaris-selection-card-gap: var(--solaris-spacing-0);--solaris-selection-card-radius: var(--solaris-radius-lg);--solaris-selection-card-padding: var(--solaris-spacing-0);--solaris-selection-card-color: var(--solaris-text-default);--solaris-selection-card-background: var(--solaris-surface-base);--solaris-selection-card-indicator-size: var(--solaris-spacing-5);--solaris-selection-card-border-color: var(--solaris-border-strong);--solaris-selection-card-disabled-opacity: var(--solaris-opacity-50);--solaris-selection-card-border-width: var(--solaris-border-width-sm);--solaris-selection-card-indicator-dot-size: var(--solaris-spacing-2);--solaris-selection-card-hover-background: var(--solaris-surface-subtle);--solaris-selection-card-active-background: var(--solaris-surface-muted);--solaris-selection-card-focus-ring-color: var(--solaris-text-default);--solaris-selection-card-indicator-dot-color: var(--solaris-text-default);--solaris-selection-card-selected-background: var(--solaris-surface-muted);--solaris-selection-card-selected-border-color: var(--solaris-border-default);--solaris-selection-card-header-border-color: var(--solaris-border-strong);--solaris-selection-card-footer-border-color: var(--solaris-border-strong);--solaris-selection-card-media-size: var(--solaris-spacing-12);--solaris-selection-card-switch-track-width: calc( var(--solaris-spacing-8) + var(--solaris-spacing-1) / 2 );--solaris-selection-card-switch-track-height: calc( var(--solaris-spacing-4) + var(--solaris-spacing-3) / 4 );--solaris-selection-card-switch-thumb-size: var(--solaris-spacing-3);--solaris-selection-card-switch-thumb-offset: var(--solaris-spacing-half);--solaris-selection-card-switch-track-background: var( --solaris-surface-muted );--solaris-selection-card-switch-thumb-background: var( --solaris-surface-raised );--solaris-selection-card-indicator-border-color: var( --solaris-border-default );--solaris-selection-card-glass-background: initial;--solaris-selection-card-glass-border-color: initial;--solaris-selection-card-custom-focus-ring-color: initial;--solaris-selection-card-custom-indicator-dot-color: initial;--solaris-selection-card-custom-selected-background: initial;--solaris-selection-card-custom-selected-border-color: initial;--solaris-selection-card-custom-indicator-border-color: initial;display:block;position:relative;box-sizing:border-box}.solaris-selection-card__input{inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;z-index:var(--solaris-z-index-content)}.solaris-selection-card__surface{overflow:hidden;position:relative;box-sizing:border-box;color:var(--solaris-selection-card-color);border-radius:var(--solaris-selection-card-radius);background:var(--solaris-selection-card-background);border:var(--solaris-selection-card-border-width) solid var(--solaris-selection-card-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__body{display:flex;min-height:var(--solaris-density-min-height);box-sizing:border-box;flex-direction:column;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__top-row{display:flex;align-items:flex-start;box-sizing:border-box;gap:var(--solaris-selection-card-gap)}.solaris-selection-card__header{flex:1;min-width:0}.solaris-selection-card__separator{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-selection-card-header-border-color)}.solaris-selection-card__content{flex:1;min-width:0}.solaris-selection-card__control{display:flex;flex-shrink:0;border-radius:50%;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-selection-card-indicator-size);height:var(--solaris-selection-card-indicator-size);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color)}:host([data-has-media]:not([data-media-position=start])) .solaris-selection-card__control{top:var(--solaris-selection-card-padding);right:var(--solaris-selection-card-padding);position:absolute;background:var(--solaris-surface-base)}.solaris-selection-card__footer{display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__footer:empty{display:none}:host([data-selection-position=end]) .solaris-selection-card__footer{justify-content:flex-end}:host ::ng-deep .solaris-selection-card__footer .solaris-selection-card-footer{flex:1;min-width:0;margin-top:var(--solaris-spacing-0)}.solaris-selection-card__switch{display:flex;flex-shrink:0;position:relative;align-items:center;box-sizing:border-box;width:var(--solaris-selection-card-switch-track-width);height:var(--solaris-selection-card-switch-track-height);background:var(--solaris-selection-card-switch-track-background);border-radius:calc(var(--solaris-selection-card-switch-track-height) / 2);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__switch-thumb{display:block;position:absolute;border-radius:50%;top:50%;transform:translateY(-50%);left:var(--solaris-selection-card-switch-thumb-offset);width:var(--solaris-selection-card-switch-thumb-size);height:var(--solaris-selection-card-switch-thumb-size);background:var(--solaris-selection-card-switch-thumb-background);transition:left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-checked]) .solaris-selection-card__switch-thumb{left:calc(100% - var(--solaris-selection-card-switch-thumb-size) - var(--solaris-selection-card-switch-thumb-offset))}.solaris-selection-card__dot{display:block;border-radius:50%;width:var(--solaris-selection-card-indicator-dot-size);height:var(--solaris-selection-card-indicator-dot-size);background:var(--solaris-selection-card-indicator-dot-color)}:host ::ng-deep .solaris-selection-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-selection-card-media img,:host ::ng-deep .solaris-selection-card-media video,:host ::ng-deep .solaris-selection-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-selection-card-header{display:flex;flex-direction:column;gap:var(--solaris-spacing-0)}:host ::ng-deep .solaris-selection-card-content{display:block;margin-top:var(--solaris-spacing-0)}:host ::ng-deep .solaris-selection-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0);margin-top:var(--solaris-spacing-0)}:host([data-footer-separator]) .solaris-selection-card__footer{border-top:var(--solaris-border-width-sm) solid var(--solaris-selection-card-footer-border-color)}:host ::ng-deep .solaris-selection-card-title{margin:0;color:var(--solaris-text-strong);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}:host ::ng-deep .solaris-selection-card-description{margin:0;color:var(--solaris-text-muted);font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}:host([data-size=sm]){--solaris-selection-card-media-size: var(--solaris-spacing-10);--solaris-selection-card-indicator-size: var(--solaris-spacing-4);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 1.5 )}:host([data-size=lg]){--solaris-selection-card-media-size: var(--solaris-spacing-16);--solaris-selection-card-indicator-size: var(--solaris-spacing-6);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 2.5 )}:host([data-media-position=start]) .solaris-selection-card__surface{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media{grid-row:1/-1;grid-column:1;align-self:center;width:var(--solaris-selection-card-media-size);height:var(--solaris-selection-card-media-size);margin:var(--solaris-selection-card-padding);margin-inline-end:var(--solaris-spacing-0);border-radius:var(--solaris-radius-md)}:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media img,:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media video,:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media picture{width:100%;height:100%;object-fit:cover}:host([data-media-position=start]) .solaris-selection-card__body{grid-column:2;min-width:0}:host([data-media-position=start]) .solaris-selection-card__footer{grid-column:2;min-width:0}:host([data-radius=none]){--solaris-selection-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-selection-card-radius: var(--solaris-radius-sm)}:host([data-radius=xl]){--solaris-selection-card-radius: var(--solaris-radius-xl)}:host([data-appearance=outline]){--solaris-selection-card-background: transparent;--solaris-selection-card-border-color: var(--solaris-border-default)}:host([data-appearance=tonal]){--solaris-selection-card-background: var(--solaris-surface-subtle);--solaris-selection-card-border-color: var(--solaris-border-subtle)}:host([data-appearance=glass]) .solaris-selection-card__surface{--solaris-selection-card-color: var(--solaris-text-glass);--solaris-selection-card-glass-background: var(--solaris-glass-background);--solaris-selection-card-glass-border-color: var( --solaris-glass-border-color );isolation:isolate;background:var(--solaris-selection-card-glass-background);border-color:var(--solaris-selection-card-glass-border-color);box-shadow:var(--solaris-glass-shadow);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass][data-checked]) .solaris-selection-card__surface{background:var(--solaris-selection-card-background);border-color:var(--solaris-selection-card-border-color)}:host([data-appearance=glass]) ::ng-deep .solaris-selection-card-description{color:var(--solaris-text-glass)}:host([data-color=primary]){--solaris-selection-card-focus-ring-color: var(--solaris-primary-base);--solaris-selection-card-indicator-dot-color: var(--solaris-primary-base);--solaris-selection-card-selected-background: var(--solaris-primary-surface);--solaris-selection-card-selected-border-color: var(--solaris-primary-border);--solaris-selection-card-indicator-border-color: var( --solaris-primary-border )}:host([data-color=success]){--solaris-selection-card-focus-ring-color: var(--solaris-success-base);--solaris-selection-card-indicator-dot-color: var(--solaris-success-base);--solaris-selection-card-selected-background: var(--solaris-success-surface);--solaris-selection-card-selected-border-color: var(--solaris-success-border);--solaris-selection-card-indicator-border-color: var( --solaris-success-border )}:host([data-color=warning]){--solaris-selection-card-focus-ring-color: var(--solaris-warning-base);--solaris-selection-card-indicator-dot-color: var(--solaris-warning-base);--solaris-selection-card-selected-background: var(--solaris-warning-surface);--solaris-selection-card-selected-border-color: var(--solaris-warning-border);--solaris-selection-card-indicator-border-color: var( --solaris-warning-border )}:host([data-color=danger]){--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-selected-background: var(--solaris-danger-surface);--solaris-selection-card-selected-border-color: var(--solaris-danger-border);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-color=info]){--solaris-selection-card-focus-ring-color: var(--solaris-info-base);--solaris-selection-card-indicator-dot-color: var(--solaris-info-base);--solaris-selection-card-selected-background: var(--solaris-info-surface);--solaris-selection-card-selected-border-color: var(--solaris-info-border);--solaris-selection-card-indicator-border-color: var(--solaris-info-border)}:host([data-color=custom]){--solaris-selection-card-focus-ring-color: var( --solaris-selection-card-custom-focus-ring-color );--solaris-selection-card-indicator-dot-color: var( --solaris-selection-card-custom-indicator-dot-color );--solaris-selection-card-selected-background: var( --solaris-selection-card-custom-selected-background );--solaris-selection-card-selected-border-color: var( --solaris-selection-card-custom-selected-border-color );--solaris-selection-card-indicator-border-color: var( --solaris-selection-card-custom-indicator-border-color )}:host([data-selection=switch][data-checked]) .solaris-selection-card__switch{background:var(--solaris-selection-card-focus-ring-color);border-color:var(--solaris-selection-card-focus-ring-color)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:hover+.solaris-selection-card__surface{background:var(--solaris-selection-card-hover-background)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:active+.solaris-selection-card__surface{background:var(--solaris-selection-card-active-background)}:host([data-checked]){--solaris-selection-card-background: var( --solaris-selection-card-selected-background );--solaris-selection-card-border-color: var( --solaris-selection-card-selected-border-color )}.solaris-selection-card__input:focus-visible+.solaris-selection-card__surface{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-selection-card-focus-ring-color)}:host([data-invalid]){--solaris-selection-card-border-color: var(--solaris-danger-border);--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-disabled]) .solaris-selection-card__surface{cursor:not-allowed;opacity:var(--solaris-selection-card-disabled-opacity)}:host([data-readonly]) .solaris-selection-card__input{cursor:not-allowed}:host([data-readonly]) .solaris-selection-card__surface{cursor:default;opacity:var(--solaris-selection-card-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9214
9389
|
}
|
|
9215
9390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardComponent, decorators: [{
|
|
9216
9391
|
type: Component,
|
|
@@ -9235,14 +9410,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
9235
9410
|
'[attr.data-size]': 'size()',
|
|
9236
9411
|
'[attr.data-radius]': 'radius()',
|
|
9237
9412
|
'[attr.data-density]': 'effectiveDensity()',
|
|
9413
|
+
'[attr.data-selection]': 'selection()',
|
|
9414
|
+
'[attr.data-selection-position]': 'selectionPosition()',
|
|
9415
|
+
'[attr.data-media-position]': 'mediaPosition()',
|
|
9238
9416
|
'[attr.data-checked]': '_checked() ? "" : null',
|
|
9239
9417
|
'[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
|
|
9240
9418
|
'[attr.data-readonly]': 'isEffectivelyReadonly() ? "" : null',
|
|
9241
9419
|
'[attr.data-invalid]': 'isEffectivelyInvalid() ? "" : null',
|
|
9242
9420
|
'[attr.data-focused]': '_focused() ? "" : null',
|
|
9243
9421
|
'[attr.data-has-media]': 'hasMedia() ? "" : null',
|
|
9244
|
-
}, template: "<input\n #inputElement\n type=\"radio\"\n class=\"solaris-selection-card__input\"\n [id]=\"elementId()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [required]=\"required\"\n [attr.name]=\"effectiveName() ?? null\"\n [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n [attr.aria-readonly]=\"isEffectivelyReadonly() ? 'true' : null\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n/>\n<div class=\"solaris-selection-card__surface\">\n <ng-content select=\"[solaris-selection-card-media]\" />\n <div class=\"solaris-selection-card__body\">\n <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n @if (_checked()) {\n <span class=\"solaris-selection-card__dot\"></span>\n }\n </span>\n <div class=\"solaris-selection-card__content\" [id]=\"contentId()\">\n <ng-content select=\"[solaris-selection-card-header]\" />\n <ng-content select=\"[solaris-selection-card-content]\" />\n <ng-content />\n <ng-content select=\"[solaris-selection-card-footer]\" />\n </div>\n </div>\n</div>\n", styles: [":host{--solaris-selection-card-gap: var(--solaris-spacing-4);--solaris-selection-card-radius: var(--solaris-radius-lg);--solaris-selection-card-padding: var(--solaris-spacing-6);--solaris-selection-card-color: var(--solaris-text-default);--solaris-selection-card-background: var(--solaris-surface-base);--solaris-selection-card-indicator-size: var(--solaris-spacing-5);--solaris-selection-card-border-color: var(--solaris-border-subtle);--solaris-selection-card-disabled-opacity: var(--solaris-opacity-50);--solaris-selection-card-border-width: var(--solaris-border-width-sm);--solaris-selection-card-indicator-dot-size: var(--solaris-spacing-2);--solaris-selection-card-hover-background: var(--solaris-surface-subtle);--solaris-selection-card-active-background: var(--solaris-surface-muted);--solaris-selection-card-focus-ring-color: var(--solaris-text-default);--solaris-selection-card-indicator-dot-color: var(--solaris-text-default);--solaris-selection-card-selected-background: var(--solaris-surface-muted);--solaris-selection-card-selected-border-color: var(--solaris-border-default);--solaris-selection-card-indicator-border-color: var( --solaris-border-default );--solaris-selection-card-glass-background: initial;--solaris-selection-card-glass-border-color: initial;--solaris-selection-card-custom-focus-ring-color: initial;--solaris-selection-card-custom-indicator-dot-color: initial;--solaris-selection-card-custom-selected-background: initial;--solaris-selection-card-custom-selected-border-color: initial;--solaris-selection-card-custom-indicator-border-color: initial;display:block;position:relative;box-sizing:border-box}.solaris-selection-card__input{inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;z-index:var(--solaris-z-index-content)}.solaris-selection-card__surface{overflow:hidden;position:relative;box-sizing:border-box;color:var(--solaris-selection-card-color);border-radius:var(--solaris-selection-card-radius);background:var(--solaris-selection-card-background);border:var(--solaris-selection-card-border-width) solid var(--solaris-selection-card-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__body{display:flex;min-height:var(--solaris-density-min-height);box-sizing:border-box;align-items:flex-start;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__content{flex:1;min-width:0}.solaris-selection-card__control{display:flex;flex-shrink:0;border-radius:50%;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-selection-card-indicator-size);height:var(--solaris-selection-card-indicator-size);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color)}:host([data-has-media]) .solaris-selection-card__control{top:var(--solaris-selection-card-padding);right:var(--solaris-selection-card-padding);position:absolute;background:var(--solaris-surface-base)}.solaris-selection-card__dot{display:block;border-radius:50%;width:var(--solaris-selection-card-indicator-dot-size);height:var(--solaris-selection-card-indicator-dot-size);background:var(--solaris-selection-card-indicator-dot-color)}:host ::ng-deep .solaris-selection-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-selection-card-media img,:host ::ng-deep .solaris-selection-card-media video,:host ::ng-deep .solaris-selection-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-selection-card-header{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host ::ng-deep .solaris-selection-card-content{display:block;margin-top:var(--solaris-selection-card-gap)}:host ::ng-deep .solaris-selection-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-2);margin-top:var(--solaris-selection-card-gap)}:host ::ng-deep .solaris-selection-card-footer[data-separator]{padding-top:var(--solaris-selection-card-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-selection-card-border-color)}:host ::ng-deep .solaris-selection-card-title{margin:0;color:var(--solaris-text-strong);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}:host ::ng-deep .solaris-selection-card-description{margin:0;color:var(--solaris-text-muted);font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}:host([data-size=sm]){--solaris-selection-card-gap: var(--solaris-spacing-3);--solaris-selection-card-padding: var(--solaris-spacing-4);--solaris-selection-card-indicator-size: var(--solaris-spacing-4);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 1.5 )}:host([data-size=lg]){--solaris-selection-card-gap: var(--solaris-spacing-5);--solaris-selection-card-padding: var(--solaris-spacing-8);--solaris-selection-card-indicator-size: var(--solaris-spacing-6);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 2.5 )}:host([data-density=compact]){--solaris-selection-card-gap: var(--solaris-density-gap-lg);--solaris-selection-card-padding: var(--solaris-density-padding-xl)}:host([data-density=comfortable]){--solaris-selection-card-gap: var(--solaris-density-gap-lg);--solaris-selection-card-padding: var(--solaris-density-padding-xl)}:host([data-radius=none]){--solaris-selection-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-selection-card-radius: var(--solaris-radius-sm)}:host([data-radius=xl]){--solaris-selection-card-radius: var(--solaris-radius-xl)}:host([data-appearance=outline]){--solaris-selection-card-background: transparent;--solaris-selection-card-border-color: var(--solaris-border-default)}:host([data-appearance=tonal]){--solaris-selection-card-background: var(--solaris-surface-subtle);--solaris-selection-card-border-color: var(--solaris-border-subtle)}:host([data-appearance=glass]) .solaris-selection-card__surface{--solaris-selection-card-color: var(--solaris-text-glass);--solaris-selection-card-glass-background: var(--solaris-glass-background);--solaris-selection-card-glass-border-color: var( --solaris-glass-border-color );isolation:isolate;background:var(--solaris-selection-card-glass-background);border-color:var(--solaris-selection-card-glass-border-color);box-shadow:var(--solaris-glass-shadow);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass][data-checked]) .solaris-selection-card__surface{background:var(--solaris-selection-card-background);border-color:var(--solaris-selection-card-border-color)}:host([data-appearance=glass]) ::ng-deep .solaris-selection-card-description{color:var(--solaris-text-glass)}:host([data-color=primary]){--solaris-selection-card-focus-ring-color: var(--solaris-primary-base);--solaris-selection-card-indicator-dot-color: var(--solaris-primary-base);--solaris-selection-card-selected-background: var(--solaris-primary-surface);--solaris-selection-card-selected-border-color: var(--solaris-primary-border);--solaris-selection-card-indicator-border-color: var( --solaris-primary-border )}:host([data-color=success]){--solaris-selection-card-focus-ring-color: var(--solaris-success-base);--solaris-selection-card-indicator-dot-color: var(--solaris-success-base);--solaris-selection-card-selected-background: var(--solaris-success-surface);--solaris-selection-card-selected-border-color: var(--solaris-success-border);--solaris-selection-card-indicator-border-color: var( --solaris-success-border )}:host([data-color=warning]){--solaris-selection-card-focus-ring-color: var(--solaris-warning-base);--solaris-selection-card-indicator-dot-color: var(--solaris-warning-base);--solaris-selection-card-selected-background: var(--solaris-warning-surface);--solaris-selection-card-selected-border-color: var(--solaris-warning-border);--solaris-selection-card-indicator-border-color: var( --solaris-warning-border )}:host([data-color=danger]){--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-selected-background: var(--solaris-danger-surface);--solaris-selection-card-selected-border-color: var(--solaris-danger-border);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-color=info]){--solaris-selection-card-focus-ring-color: var(--solaris-info-base);--solaris-selection-card-indicator-dot-color: var(--solaris-info-base);--solaris-selection-card-selected-background: var(--solaris-info-surface);--solaris-selection-card-selected-border-color: var(--solaris-info-border);--solaris-selection-card-indicator-border-color: var(--solaris-info-border)}:host([data-color=custom]){--solaris-selection-card-focus-ring-color: var( --solaris-selection-card-custom-focus-ring-color );--solaris-selection-card-indicator-dot-color: var( --solaris-selection-card-custom-indicator-dot-color );--solaris-selection-card-selected-background: var( --solaris-selection-card-custom-selected-background );--solaris-selection-card-selected-border-color: var( --solaris-selection-card-custom-selected-border-color );--solaris-selection-card-indicator-border-color: var( --solaris-selection-card-custom-indicator-border-color )}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:hover+.solaris-selection-card__surface{background:var(--solaris-selection-card-hover-background)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:active+.solaris-selection-card__surface{background:var(--solaris-selection-card-active-background)}:host([data-checked]){--solaris-selection-card-background: var( --solaris-selection-card-selected-background );--solaris-selection-card-border-color: var( --solaris-selection-card-selected-border-color )}.solaris-selection-card__input:focus-visible+.solaris-selection-card__surface{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-selection-card-focus-ring-color)}:host([data-invalid]){--solaris-selection-card-border-color: var(--solaris-danger-border);--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-disabled]) .solaris-selection-card__surface{cursor:not-allowed;opacity:var(--solaris-selection-card-disabled-opacity)}:host([data-readonly]) .solaris-selection-card__input{cursor:not-allowed}:host([data-readonly]) .solaris-selection-card__surface{cursor:default;opacity:var(--solaris-selection-card-disabled-opacity)}\n"] }]
|
|
9245
|
-
|
|
9422
|
+
'[attr.data-has-footer]': 'hasFooter() ? "" : null',
|
|
9423
|
+
'[attr.data-header-separator]': 'hasHeaderSeparator() ? "" : null',
|
|
9424
|
+
'[attr.data-footer-separator]': 'hasFooterSeparator() ? "" : null',
|
|
9425
|
+
}, template: "<input\n #inputElement\n [type]=\"isSwitchSelection() ? 'checkbox' : 'radio'\"\n [attr.role]=\"isSwitchSelection() ? 'switch' : null\"\n class=\"solaris-selection-card__input\"\n [id]=\"elementId()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [required]=\"required\"\n [attr.name]=\"effectiveName() ?? null\"\n [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n [attr.aria-readonly]=\"isEffectivelyReadonly() ? 'true' : null\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n/>\n<div class=\"solaris-selection-card__surface\">\n <ng-content select=\"[solaris-selection-card-media]\" />\n <div class=\"solaris-selection-card__body\">\n <div class=\"solaris-selection-card__top-row\">\n @if (!isSwitchSelection() && selectionPosition() === 'start') {\n <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n @if (_checked()) {\n <span class=\"solaris-selection-card__dot\"></span>\n }\n </span>\n }\n <div class=\"solaris-selection-card__header\">\n <ng-content select=\"[solaris-selection-card-header]\" />\n </div>\n @if (!isSwitchSelection() && selectionPosition() === 'end') {\n <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n @if (_checked()) {\n <span class=\"solaris-selection-card__dot\"></span>\n }\n </span>\n }\n </div>\n @if (hasHeaderSeparator()) {\n <div class=\"solaris-selection-card__separator\" aria-hidden=\"true\"></div>\n }\n <div class=\"solaris-selection-card__content\" [id]=\"contentId()\">\n <ng-content select=\"[solaris-selection-card-content]\" />\n <ng-content />\n </div>\n </div>\n @if (isSwitchSelection() || hasFooter()) {\n <div class=\"solaris-selection-card__footer\">\n @if (isSwitchSelection() && selectionPosition() === 'start') {\n <span class=\"solaris-selection-card__switch\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__switch-thumb\"></span>\n </span>\n }\n <ng-content select=\"[solaris-selection-card-footer]\" />\n @if (isSwitchSelection() && selectionPosition() === 'end') {\n <span class=\"solaris-selection-card__switch\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__switch-thumb\"></span>\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{--solaris-selection-card-gap: var(--solaris-spacing-0);--solaris-selection-card-radius: var(--solaris-radius-lg);--solaris-selection-card-padding: var(--solaris-spacing-0);--solaris-selection-card-color: var(--solaris-text-default);--solaris-selection-card-background: var(--solaris-surface-base);--solaris-selection-card-indicator-size: var(--solaris-spacing-5);--solaris-selection-card-border-color: var(--solaris-border-strong);--solaris-selection-card-disabled-opacity: var(--solaris-opacity-50);--solaris-selection-card-border-width: var(--solaris-border-width-sm);--solaris-selection-card-indicator-dot-size: var(--solaris-spacing-2);--solaris-selection-card-hover-background: var(--solaris-surface-subtle);--solaris-selection-card-active-background: var(--solaris-surface-muted);--solaris-selection-card-focus-ring-color: var(--solaris-text-default);--solaris-selection-card-indicator-dot-color: var(--solaris-text-default);--solaris-selection-card-selected-background: var(--solaris-surface-muted);--solaris-selection-card-selected-border-color: var(--solaris-border-default);--solaris-selection-card-header-border-color: var(--solaris-border-strong);--solaris-selection-card-footer-border-color: var(--solaris-border-strong);--solaris-selection-card-media-size: var(--solaris-spacing-12);--solaris-selection-card-switch-track-width: calc( var(--solaris-spacing-8) + var(--solaris-spacing-1) / 2 );--solaris-selection-card-switch-track-height: calc( var(--solaris-spacing-4) + var(--solaris-spacing-3) / 4 );--solaris-selection-card-switch-thumb-size: var(--solaris-spacing-3);--solaris-selection-card-switch-thumb-offset: var(--solaris-spacing-half);--solaris-selection-card-switch-track-background: var( --solaris-surface-muted );--solaris-selection-card-switch-thumb-background: var( --solaris-surface-raised );--solaris-selection-card-indicator-border-color: var( --solaris-border-default );--solaris-selection-card-glass-background: initial;--solaris-selection-card-glass-border-color: initial;--solaris-selection-card-custom-focus-ring-color: initial;--solaris-selection-card-custom-indicator-dot-color: initial;--solaris-selection-card-custom-selected-background: initial;--solaris-selection-card-custom-selected-border-color: initial;--solaris-selection-card-custom-indicator-border-color: initial;display:block;position:relative;box-sizing:border-box}.solaris-selection-card__input{inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;z-index:var(--solaris-z-index-content)}.solaris-selection-card__surface{overflow:hidden;position:relative;box-sizing:border-box;color:var(--solaris-selection-card-color);border-radius:var(--solaris-selection-card-radius);background:var(--solaris-selection-card-background);border:var(--solaris-selection-card-border-width) solid var(--solaris-selection-card-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__body{display:flex;min-height:var(--solaris-density-min-height);box-sizing:border-box;flex-direction:column;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__top-row{display:flex;align-items:flex-start;box-sizing:border-box;gap:var(--solaris-selection-card-gap)}.solaris-selection-card__header{flex:1;min-width:0}.solaris-selection-card__separator{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-selection-card-header-border-color)}.solaris-selection-card__content{flex:1;min-width:0}.solaris-selection-card__control{display:flex;flex-shrink:0;border-radius:50%;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-selection-card-indicator-size);height:var(--solaris-selection-card-indicator-size);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color)}:host([data-has-media]:not([data-media-position=start])) .solaris-selection-card__control{top:var(--solaris-selection-card-padding);right:var(--solaris-selection-card-padding);position:absolute;background:var(--solaris-surface-base)}.solaris-selection-card__footer{display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__footer:empty{display:none}:host([data-selection-position=end]) .solaris-selection-card__footer{justify-content:flex-end}:host ::ng-deep .solaris-selection-card__footer .solaris-selection-card-footer{flex:1;min-width:0;margin-top:var(--solaris-spacing-0)}.solaris-selection-card__switch{display:flex;flex-shrink:0;position:relative;align-items:center;box-sizing:border-box;width:var(--solaris-selection-card-switch-track-width);height:var(--solaris-selection-card-switch-track-height);background:var(--solaris-selection-card-switch-track-background);border-radius:calc(var(--solaris-selection-card-switch-track-height) / 2);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__switch-thumb{display:block;position:absolute;border-radius:50%;top:50%;transform:translateY(-50%);left:var(--solaris-selection-card-switch-thumb-offset);width:var(--solaris-selection-card-switch-thumb-size);height:var(--solaris-selection-card-switch-thumb-size);background:var(--solaris-selection-card-switch-thumb-background);transition:left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-checked]) .solaris-selection-card__switch-thumb{left:calc(100% - var(--solaris-selection-card-switch-thumb-size) - var(--solaris-selection-card-switch-thumb-offset))}.solaris-selection-card__dot{display:block;border-radius:50%;width:var(--solaris-selection-card-indicator-dot-size);height:var(--solaris-selection-card-indicator-dot-size);background:var(--solaris-selection-card-indicator-dot-color)}:host ::ng-deep .solaris-selection-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-selection-card-media img,:host ::ng-deep .solaris-selection-card-media video,:host ::ng-deep .solaris-selection-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-selection-card-header{display:flex;flex-direction:column;gap:var(--solaris-spacing-0)}:host ::ng-deep .solaris-selection-card-content{display:block;margin-top:var(--solaris-spacing-0)}:host ::ng-deep .solaris-selection-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0);margin-top:var(--solaris-spacing-0)}:host([data-footer-separator]) .solaris-selection-card__footer{border-top:var(--solaris-border-width-sm) solid var(--solaris-selection-card-footer-border-color)}:host ::ng-deep .solaris-selection-card-title{margin:0;color:var(--solaris-text-strong);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}:host ::ng-deep .solaris-selection-card-description{margin:0;color:var(--solaris-text-muted);font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}:host([data-size=sm]){--solaris-selection-card-media-size: var(--solaris-spacing-10);--solaris-selection-card-indicator-size: var(--solaris-spacing-4);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 1.5 )}:host([data-size=lg]){--solaris-selection-card-media-size: var(--solaris-spacing-16);--solaris-selection-card-indicator-size: var(--solaris-spacing-6);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 2.5 )}:host([data-media-position=start]) .solaris-selection-card__surface{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media{grid-row:1/-1;grid-column:1;align-self:center;width:var(--solaris-selection-card-media-size);height:var(--solaris-selection-card-media-size);margin:var(--solaris-selection-card-padding);margin-inline-end:var(--solaris-spacing-0);border-radius:var(--solaris-radius-md)}:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media img,:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media video,:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media picture{width:100%;height:100%;object-fit:cover}:host([data-media-position=start]) .solaris-selection-card__body{grid-column:2;min-width:0}:host([data-media-position=start]) .solaris-selection-card__footer{grid-column:2;min-width:0}:host([data-radius=none]){--solaris-selection-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-selection-card-radius: var(--solaris-radius-sm)}:host([data-radius=xl]){--solaris-selection-card-radius: var(--solaris-radius-xl)}:host([data-appearance=outline]){--solaris-selection-card-background: transparent;--solaris-selection-card-border-color: var(--solaris-border-default)}:host([data-appearance=tonal]){--solaris-selection-card-background: var(--solaris-surface-subtle);--solaris-selection-card-border-color: var(--solaris-border-subtle)}:host([data-appearance=glass]) .solaris-selection-card__surface{--solaris-selection-card-color: var(--solaris-text-glass);--solaris-selection-card-glass-background: var(--solaris-glass-background);--solaris-selection-card-glass-border-color: var( --solaris-glass-border-color );isolation:isolate;background:var(--solaris-selection-card-glass-background);border-color:var(--solaris-selection-card-glass-border-color);box-shadow:var(--solaris-glass-shadow);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass][data-checked]) .solaris-selection-card__surface{background:var(--solaris-selection-card-background);border-color:var(--solaris-selection-card-border-color)}:host([data-appearance=glass]) ::ng-deep .solaris-selection-card-description{color:var(--solaris-text-glass)}:host([data-color=primary]){--solaris-selection-card-focus-ring-color: var(--solaris-primary-base);--solaris-selection-card-indicator-dot-color: var(--solaris-primary-base);--solaris-selection-card-selected-background: var(--solaris-primary-surface);--solaris-selection-card-selected-border-color: var(--solaris-primary-border);--solaris-selection-card-indicator-border-color: var( --solaris-primary-border )}:host([data-color=success]){--solaris-selection-card-focus-ring-color: var(--solaris-success-base);--solaris-selection-card-indicator-dot-color: var(--solaris-success-base);--solaris-selection-card-selected-background: var(--solaris-success-surface);--solaris-selection-card-selected-border-color: var(--solaris-success-border);--solaris-selection-card-indicator-border-color: var( --solaris-success-border )}:host([data-color=warning]){--solaris-selection-card-focus-ring-color: var(--solaris-warning-base);--solaris-selection-card-indicator-dot-color: var(--solaris-warning-base);--solaris-selection-card-selected-background: var(--solaris-warning-surface);--solaris-selection-card-selected-border-color: var(--solaris-warning-border);--solaris-selection-card-indicator-border-color: var( --solaris-warning-border )}:host([data-color=danger]){--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-selected-background: var(--solaris-danger-surface);--solaris-selection-card-selected-border-color: var(--solaris-danger-border);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-color=info]){--solaris-selection-card-focus-ring-color: var(--solaris-info-base);--solaris-selection-card-indicator-dot-color: var(--solaris-info-base);--solaris-selection-card-selected-background: var(--solaris-info-surface);--solaris-selection-card-selected-border-color: var(--solaris-info-border);--solaris-selection-card-indicator-border-color: var(--solaris-info-border)}:host([data-color=custom]){--solaris-selection-card-focus-ring-color: var( --solaris-selection-card-custom-focus-ring-color );--solaris-selection-card-indicator-dot-color: var( --solaris-selection-card-custom-indicator-dot-color );--solaris-selection-card-selected-background: var( --solaris-selection-card-custom-selected-background );--solaris-selection-card-selected-border-color: var( --solaris-selection-card-custom-selected-border-color );--solaris-selection-card-indicator-border-color: var( --solaris-selection-card-custom-indicator-border-color )}:host([data-selection=switch][data-checked]) .solaris-selection-card__switch{background:var(--solaris-selection-card-focus-ring-color);border-color:var(--solaris-selection-card-focus-ring-color)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:hover+.solaris-selection-card__surface{background:var(--solaris-selection-card-hover-background)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:active+.solaris-selection-card__surface{background:var(--solaris-selection-card-active-background)}:host([data-checked]){--solaris-selection-card-background: var( --solaris-selection-card-selected-background );--solaris-selection-card-border-color: var( --solaris-selection-card-selected-border-color )}.solaris-selection-card__input:focus-visible+.solaris-selection-card__surface{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-selection-card-focus-ring-color)}:host([data-invalid]){--solaris-selection-card-border-color: var(--solaris-danger-border);--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-disabled]) .solaris-selection-card__surface{cursor:not-allowed;opacity:var(--solaris-selection-card-disabled-opacity)}:host([data-readonly]) .solaris-selection-card__input{cursor:not-allowed}:host([data-readonly]) .solaris-selection-card__surface{cursor:default;opacity:var(--solaris-selection-card-disabled-opacity)}\n"] }]
|
|
9426
|
+
}], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], media: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisSelectionCardMediaDirective), { isSignal: true }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisSelectionCardHeaderDirective), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisSelectionCardFooterDirective), { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selectionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionPosition", required: false }] }], mediaPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaPosition", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] } });
|
|
9246
9427
|
|
|
9247
9428
|
class SolarisSelectionCardContentDirective {
|
|
9248
9429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -9274,38 +9455,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
9274
9455
|
}]
|
|
9275
9456
|
}] });
|
|
9276
9457
|
|
|
9277
|
-
class SolarisSelectionCardFooterDirective {
|
|
9278
|
-
separator = input(false, ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
|
|
9279
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9280
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisSelectionCardFooterDirective, isStandalone: true, selector: "[solaris-selection-card-footer]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-selection-card-footer" }, ngImport: i0 });
|
|
9281
|
-
}
|
|
9282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardFooterDirective, decorators: [{
|
|
9283
|
-
type: Directive,
|
|
9284
|
-
args: [{
|
|
9285
|
-
selector: '[solaris-selection-card-footer]',
|
|
9286
|
-
standalone: true,
|
|
9287
|
-
host: {
|
|
9288
|
-
class: 'solaris-selection-card-footer',
|
|
9289
|
-
'[attr.data-separator]': "separator() ? '' : null",
|
|
9290
|
-
},
|
|
9291
|
-
}]
|
|
9292
|
-
}], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
|
|
9293
|
-
|
|
9294
|
-
class SolarisSelectionCardHeaderDirective {
|
|
9295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9296
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: SolarisSelectionCardHeaderDirective, isStandalone: true, selector: "[solaris-selection-card-header]", host: { classAttribute: "solaris-selection-card-header" }, ngImport: i0 });
|
|
9297
|
-
}
|
|
9298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardHeaderDirective, decorators: [{
|
|
9299
|
-
type: Directive,
|
|
9300
|
-
args: [{
|
|
9301
|
-
selector: '[solaris-selection-card-header]',
|
|
9302
|
-
standalone: true,
|
|
9303
|
-
host: {
|
|
9304
|
-
class: 'solaris-selection-card-header',
|
|
9305
|
-
},
|
|
9306
|
-
}]
|
|
9307
|
-
}] });
|
|
9308
|
-
|
|
9309
9458
|
class SolarisSelectionCardTitleDirective {
|
|
9310
9459
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9311
9460
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: SolarisSelectionCardTitleDirective, isStandalone: true, selector: "[solaris-selection-card-title]", host: { classAttribute: "solaris-selection-card-title" }, ngImport: i0 });
|