@educarehq/solaris-components 0.7.1 → 0.7.2
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.
|
@@ -2595,6 +2595,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
2595
2595
|
args: [{ selector: 'solaris-notification-host', standalone: true, imports: [SolarisNotificationItemComponent, SolarisNotificationCenterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (position of positions; track position) {\n <section class=\"snh__stack\" [attr.data-position]=\"position\">\n @for (item of visibleByPosition(position); track item.id) {\n <solaris-notification-item [item]=\"item\" mode=\"toast\" />\n }\n </section>\n}\n\n@if (withCenter()) {\n <solaris-notification-center />\n}\n", styles: [":host{inset:0;position:fixed;pointer-events:none;z-index:var(--solaris-z-toast)}.snh__stack{display:flex;position:fixed;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);max-width:calc(100vw - var(--solaris-space-4) * 2)}.snh__stack[data-position=top-right]{top:0;right:0;align-items:flex-end}.snh__stack[data-position=top-left]{top:0;left:0;align-items:flex-start}.snh__stack[data-position=top-center]{top:0;left:50%;align-items:center;transform:translate(-50%)}.snh__stack[data-position=bottom-right]{right:0;bottom:0;align-items:flex-end}.snh__stack[data-position=bottom-left]{left:0;bottom:0;align-items:flex-start}.snh__stack[data-position=bottom-center]{left:50%;bottom:0;align-items:center;transform:translate(-50%)}\n"] }]
|
|
2596
2596
|
}], propDecorators: { withCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCenter", required: false }] }] } });
|
|
2597
2597
|
|
|
2598
|
+
class SolarisSkeleton {
|
|
2599
|
+
shape = input('rect', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
2600
|
+
width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
2601
|
+
height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
2602
|
+
radius = input('sm', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
2603
|
+
animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2604
|
+
resolvedWidth = computed(() => {
|
|
2605
|
+
if (this.width())
|
|
2606
|
+
return this.width();
|
|
2607
|
+
return this.shape() === 'circle' ? '1.1rem' : '100%';
|
|
2608
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
|
|
2609
|
+
resolvedHeight = computed(() => {
|
|
2610
|
+
if (this.height())
|
|
2611
|
+
return this.height();
|
|
2612
|
+
switch (this.shape()) {
|
|
2613
|
+
case 'line':
|
|
2614
|
+
return '1rem';
|
|
2615
|
+
case 'circle':
|
|
2616
|
+
return this.resolvedWidth();
|
|
2617
|
+
default:
|
|
2618
|
+
return '100%';
|
|
2619
|
+
}
|
|
2620
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
|
|
2621
|
+
resolvedRadius = computed(() => {
|
|
2622
|
+
if (this.shape() === 'circle')
|
|
2623
|
+
return 'var(--solaris-radius-full)';
|
|
2624
|
+
switch (this.radius()) {
|
|
2625
|
+
case 'none':
|
|
2626
|
+
return 'var(--solaris-radius-none)';
|
|
2627
|
+
case 'md':
|
|
2628
|
+
return 'var(--solaris-radius-md)';
|
|
2629
|
+
case 'lg':
|
|
2630
|
+
return 'var(--solaris-radius-lg)';
|
|
2631
|
+
case 'full':
|
|
2632
|
+
return 'var(--solaris-radius-full)';
|
|
2633
|
+
case 'inherit':
|
|
2634
|
+
return 'inherit';
|
|
2635
|
+
case 'sm':
|
|
2636
|
+
default:
|
|
2637
|
+
return 'var(--solaris-radius-sm)';
|
|
2638
|
+
}
|
|
2639
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedRadius" }] : /* istanbul ignore next */ []));
|
|
2640
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2641
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisSkeleton, isStandalone: true, selector: "solaris-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-shape": "shape()", "attr.data-animated": "animated()" }, classAttribute: "solaris-skeleton-host" }, ngImport: i0, template: "<span\n class=\"solaris-skeleton\"\n [style.inline-size]=\"resolvedWidth()\"\n [style.block-size]=\"resolvedHeight()\"\n [style.border-radius]=\"resolvedRadius()\"\n aria-hidden=\"true\"\n></span>\n", styles: [":host{display:block;min-inline-size:0}.solaris-skeleton{display:block;min-inline-size:0;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,var(--solaris-color-surface) 72%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-skeleton-shimmer var(--solaris-motion-duration-shimmer-slow) var(--solaris-motion-ease-linear) infinite}:host([data-animated=false]) .solaris-skeleton{animation:none}@media(prefers-reduced-motion:reduce){.solaris-skeleton{animation:none}}@keyframes solaris-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2642
|
+
}
|
|
2643
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSkeleton, decorators: [{
|
|
2644
|
+
type: Component,
|
|
2645
|
+
args: [{ selector: 'solaris-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2646
|
+
class: 'solaris-skeleton-host',
|
|
2647
|
+
'[attr.data-shape]': 'shape()',
|
|
2648
|
+
'[attr.data-animated]': 'animated()',
|
|
2649
|
+
}, template: "<span\n class=\"solaris-skeleton\"\n [style.inline-size]=\"resolvedWidth()\"\n [style.block-size]=\"resolvedHeight()\"\n [style.border-radius]=\"resolvedRadius()\"\n aria-hidden=\"true\"\n></span>\n", styles: [":host{display:block;min-inline-size:0}.solaris-skeleton{display:block;min-inline-size:0;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,var(--solaris-color-surface) 72%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-skeleton-shimmer var(--solaris-motion-duration-shimmer-slow) var(--solaris-motion-ease-linear) infinite}:host([data-animated=false]) .solaris-skeleton{animation:none}@media(prefers-reduced-motion:reduce){.solaris-skeleton{animation:none}}@keyframes solaris-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
2650
|
+
}], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
|
|
2651
|
+
|
|
2598
2652
|
class SolarisTooltipPanel {
|
|
2599
2653
|
text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
2600
2654
|
prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
|
|
@@ -4377,11 +4431,11 @@ class SolarisTableSkeleton {
|
|
|
4377
4431
|
return Array.from({ length: this.columns }, (_, i) => i);
|
|
4378
4432
|
}
|
|
4379
4433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTableSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4380
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisTableSkeleton, isStandalone: true, selector: "solaris-table-skeleton", inputs: { rows: "rows", columns: "columns", selectable: "selectable", gridTemplateColumns: "gridTemplateColumns" }, ngImport: i0, template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\n @for (r of rowsArray(); track r) {\n <div class=\"solaris-table-skeleton__row\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (c of colsArray(); track c; let i = $index) {\n <div class=\"solaris-table-skeleton__cell\" [class.is-first]=\"i === 0\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table-skeleton__select-prefix\">\n <
|
|
4434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisTableSkeleton, isStandalone: true, selector: "solaris-table-skeleton", inputs: { rows: "rows", columns: "columns", selectable: "selectable", gridTemplateColumns: "gridTemplateColumns" }, ngImport: i0, template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\n @for (r of rowsArray(); track r) {\n <div class=\"solaris-table-skeleton__row\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (c of colsArray(); track c; let i = $index) {\n <div class=\"solaris-table-skeleton__cell\" [class.is-first]=\"i === 0\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table-skeleton__select-prefix\">\n <solaris-skeleton class=\"sk sk--circle\" shape=\"circle\"></solaris-skeleton>\n </span>\n }\n\n <solaris-skeleton class=\"sk sk--line\" shape=\"line\"></solaris-skeleton>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".solaris-table-skeleton__row{display:grid;border-bottom:1px solid var(--solaris-color-border)}.solaris-table-skeleton__cell{min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.solaris-table-skeleton__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.sk{display:block}.sk--line{height:1rem;width:100%}.sk--circle{height:1.1rem;width:1.1rem}\n"], dependencies: [{ kind: "component", type: SolarisSkeleton, selector: "solaris-skeleton", inputs: ["shape", "width", "height", "radius", "animated"] }] });
|
|
4381
4435
|
}
|
|
4382
4436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTableSkeleton, decorators: [{
|
|
4383
4437
|
type: Component,
|
|
4384
|
-
args: [{ selector: 'solaris-table-skeleton', standalone: true, template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\n @for (r of rowsArray(); track r) {\n <div class=\"solaris-table-skeleton__row\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (c of colsArray(); track c; let i = $index) {\n <div class=\"solaris-table-skeleton__cell\" [class.is-first]=\"i === 0\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table-skeleton__select-prefix\">\n <
|
|
4438
|
+
args: [{ selector: 'solaris-table-skeleton', standalone: true, imports: [SolarisSkeleton], template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\n @for (r of rowsArray(); track r) {\n <div class=\"solaris-table-skeleton__row\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (c of colsArray(); track c; let i = $index) {\n <div class=\"solaris-table-skeleton__cell\" [class.is-first]=\"i === 0\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table-skeleton__select-prefix\">\n <solaris-skeleton class=\"sk sk--circle\" shape=\"circle\"></solaris-skeleton>\n </span>\n }\n\n <solaris-skeleton class=\"sk sk--line\" shape=\"line\"></solaris-skeleton>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".solaris-table-skeleton__row{display:grid;border-bottom:1px solid var(--solaris-color-border)}.solaris-table-skeleton__cell{min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.solaris-table-skeleton__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.sk{display:block}.sk--line{height:1rem;width:100%}.sk--circle{height:1.1rem;width:1.1rem}\n"] }]
|
|
4385
4439
|
}], propDecorators: { rows: [{
|
|
4386
4440
|
type: Input
|
|
4387
4441
|
}], columns: [{
|
|
@@ -6170,11 +6224,11 @@ class SolarisAvatar {
|
|
|
6170
6224
|
return String(value ?? '').trim();
|
|
6171
6225
|
}
|
|
6172
6226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatar, isStandalone: true, selector: "solaris-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, asButton: { classPropertyName: "asButton", publicName: "asButton", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (asButton()) {\n <button\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <span class=\"solaris-avatar__skeleton\" aria-hidden=\"true\"></span>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">\n {{ resolvedInitials() }}\n </span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </button>\n} @else {\n <span\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"rootRole()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <span class=\"solaris-avatar__skeleton\" aria-hidden=\"true\"></span>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </span>\n}\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar__body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-avatar__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar__label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar__placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar__placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar__placeholder-head,.solaris-avatar__placeholder-body{fill:currentColor}.solaris-avatar__overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar__overlay:empty{display:none}.solaris-avatar__overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar__skeleton{inline-size:100%;block-size:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,var(--solaris-color-white) 18%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-avatar-shimmer var(--solaris-motion-duration-shimmer-slow) var(--solaris-motion-ease-linear) infinite}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar__body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar__body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar__body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar__body,.solaris-avatar:disabled .solaris-avatar__body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar__overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white));--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-black));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}@keyframes solaris-avatar-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatar, isStandalone: true, selector: "solaris-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, asButton: { classPropertyName: "asButton", publicName: "asButton", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (asButton()) {\n <button\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">\n {{ resolvedInitials() }}\n </span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </button>\n} @else {\n <span\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"rootRole()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </span>\n}\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar__body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-avatar__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar__label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar__placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar__placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar__placeholder-head,.solaris-avatar__placeholder-body{fill:currentColor}.solaris-avatar__overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar__overlay:empty{display:none}.solaris-avatar__overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar__skeleton{inline-size:100%;block-size:100%;display:block}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar__body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar__body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar__body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar__body,.solaris-avatar:disabled .solaris-avatar__body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar__overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white));--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-black));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisSkeleton, selector: "solaris-skeleton", inputs: ["shape", "width", "height", "radius", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6174
6228
|
}
|
|
6175
6229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatar, decorators: [{
|
|
6176
6230
|
type: Component,
|
|
6177
|
-
args: [{ selector: 'solaris-avatar', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (asButton()) {\n <button\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <span class=\"solaris-avatar__skeleton\" aria-hidden=\"true\"></span>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">\n {{ resolvedInitials() }}\n </span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </button>\n} @else {\n <span\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"rootRole()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <span class=\"solaris-avatar__skeleton\" aria-hidden=\"true\"></span>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </span>\n}\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar__body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-avatar__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar__label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar__placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar__placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar__placeholder-head,.solaris-avatar__placeholder-body{fill:currentColor}.solaris-avatar__overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar__overlay:empty{display:none}.solaris-avatar__overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar__skeleton{inline-size:100%;block-size:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,var(--solaris-color-white) 18%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-avatar-shimmer var(--solaris-motion-duration-shimmer-slow) var(--solaris-motion-ease-linear) infinite}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar__body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar__body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar__body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar__body,.solaris-avatar:disabled .solaris-avatar__body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar__overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white));--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-black));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}@keyframes solaris-avatar-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
6231
|
+
args: [{ selector: 'solaris-avatar', standalone: true, imports: [NgClass, SolarisSkeleton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (asButton()) {\n <button\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">\n {{ resolvedInitials() }}\n </span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </button>\n} @else {\n <span\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"rootRole()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </span>\n}\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar__body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-avatar__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar__label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar__placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar__placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar__placeholder-head,.solaris-avatar__placeholder-body{fill:currentColor}.solaris-avatar__overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar__overlay:empty{display:none}.solaris-avatar__overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar__skeleton{inline-size:100%;block-size:100%;display:block}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar__body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar__body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar__body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar__body,.solaris-avatar:disabled .solaris-avatar__body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar__overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white));--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-black));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}\n"] }]
|
|
6178
6232
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], asButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "asButton", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], hostClass: [{
|
|
6179
6233
|
type: HostBinding,
|
|
6180
6234
|
args: ['class']
|
|
@@ -6337,6 +6391,9 @@ class SolarisCard {
|
|
|
6337
6391
|
radius = input(null, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
6338
6392
|
color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
6339
6393
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
6394
|
+
shadow = input(null, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
|
|
6395
|
+
background = input(null, ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
|
|
6396
|
+
borderColor = input(null, ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
|
|
6340
6397
|
invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6341
6398
|
selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6342
6399
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -6349,11 +6406,17 @@ class SolarisCard {
|
|
|
6349
6406
|
normalizedReservedInlineEnd = computed(() => {
|
|
6350
6407
|
return normalizeCardValue(this.reservedInlineEnd()) || null;
|
|
6351
6408
|
}, ...(ngDevMode ? [{ debugName: "normalizedReservedInlineEnd" }] : /* istanbul ignore next */ []));
|
|
6409
|
+
normalizedShadow = computed(() => this.normalize(this.shadow()), ...(ngDevMode ? [{ debugName: "normalizedShadow" }] : /* istanbul ignore next */ []));
|
|
6410
|
+
normalizedBackground = computed(() => this.normalize(this.background()), ...(ngDevMode ? [{ debugName: "normalizedBackground" }] : /* istanbul ignore next */ []));
|
|
6411
|
+
normalizedBorderColor = computed(() => this.normalize(this.borderColor()), ...(ngDevMode ? [{ debugName: "normalizedBorderColor" }] : /* istanbul ignore next */ []));
|
|
6352
6412
|
resolvedRadius = computed(() => resolveCardRadius(this.radius()), ...(ngDevMode ? [{ debugName: "resolvedRadius" }] : /* istanbul ignore next */ []));
|
|
6353
6413
|
customColor = computed(() => resolveCardCustomColor(this.color()), ...(ngDevMode ? [{ debugName: "customColor" }] : /* istanbul ignore next */ []));
|
|
6354
6414
|
colorKey = computed(() => resolveCardColorKey(this.color()), ...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
|
|
6415
|
+
normalize(value) {
|
|
6416
|
+
return String(value ?? '').trim();
|
|
6417
|
+
}
|
|
6355
6418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6356
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisCard, isStandalone: true, selector: "solaris-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, reservedInlineEnd: { classPropertyName: "reservedInlineEnd", publicName: "reservedInlineEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-interactive": "interactive() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "style.--solaris-card-radius": "resolvedRadius()", "style.--solaris-card-accent-custom": "customColor()", "style.--solaris-card-min-height": "normalizedMinHeight()", "style.--solaris-card-reserved-inline-end": "normalizedReservedInlineEnd()" }, classAttribute: "solaris-card-host" }, ngImport: i0, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg)}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: none;--solaris-card-shadow-hover: var(--solaris-shadow-xs);--solaris-card-shadow-selected: inset 0 0 0 .1rem color-mix(in srgb, var(--solaris-card-accent) 22%, transparent)}:host([data-selected=true][data-appearance=glass]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 14%,transparent);border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);background:var(--solaris-card-bg);border:1px solid var(--solaris-card-border);border-radius:var(--solaris-card-radius);box-shadow:var(--solaris-card-shadow)}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-hover);border-color:var(--solaris-card-border-hover);box-shadow:var(--solaris-card-shadow-hover)}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg)}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__media:not(:has(solaris-card-media,[solaris-card-media])){display:none}.solaris-card__eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card__title:not(:has([solaris-card-title])){display:none}.solaris-card__description:not(:has([solaris-card-description])){display:none}.solaris-card__meta:not(:has([solaris-card-meta])){display:none}.solaris-card__badge:not(:has([solaris-card-badge])){display:none}.solaris-card__footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card__actions:not(:has([solaris-card-actions])){display:none}.solaris-card__header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card__header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card__footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisCard, isStandalone: true, selector: "solaris-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, reservedInlineEnd: { classPropertyName: "reservedInlineEnd", publicName: "reservedInlineEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-interactive": "interactive() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "style.--solaris-card-radius": "resolvedRadius()", "style.--solaris-card-accent-custom": "customColor()", "style.--solaris-card-min-height": "normalizedMinHeight()", "style.--solaris-card-reserved-inline-end": "normalizedReservedInlineEnd()", "style.--solaris-card-bg-override": "normalizedBackground() || null", "style.--solaris-card-border-override": "normalizedBorderColor() || null", "style.--solaris-card-shadow-override": "normalizedShadow() || null" }, classAttribute: "solaris-card-host" }, ngImport: i0, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__body\">\n <div class=\"solaris-card__leading\">\n <ng-content select=\"solaris-card-leading, [solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-leading-size: 4rem;--solaris-card-leading-gap: var(--solaris-space-4);--solaris-card-leading-radius: var(--solaris-radius-lg)}.solaris-card__body{min-inline-size:0;display:flex;align-items:flex-start;gap:var(--solaris-card-leading-gap)}.solaris-card__leading{flex:0 0 var(--solaris-card-leading-size);inline-size:var(--solaris-card-leading-size);min-inline-size:var(--solaris-card-leading-size);display:inline-grid;place-items:center;line-height:0}.solaris-card__leading:not(:has(solaris-card-leading,[solaris-card-leading])){display:none}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: none;--solaris-card-shadow-hover: var(--solaris-shadow-xs);--solaris-card-shadow-selected: inset 0 0 0 .1rem color-mix(in srgb, var(--solaris-card-accent) 22%, transparent)}:host([data-selected=true][data-appearance=glass]) .solaris-card{background:var(--solaris-card-bg-override, color-mix(in srgb, var(--solaris-card-accent) 14%, transparent));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-selected));border-color:var(--solaris-card-border-override, var(--solaris-card-border-selected))}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);border-radius:var(--solaris-card-radius);background:var(--solaris-card-bg-override, var(--solaris-card-bg));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow));border:1px solid var(--solaris-card-border-override, var(--solaris-card-border))}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-override, var(--solaris-card-bg-hover));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-hover));border-color:var(--solaris-card-border-override, var(--solaris-card-border-hover))}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg-override, var(--solaris-card-bg))}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__media,.solaris-card__body{position:relative;z-index:var(--solaris-z-raised)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__media:not(:has(solaris-card-media,[solaris-card-media],.solaris-card-media)){display:none}.solaris-card__eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card__title:not(:has([solaris-card-title])){display:none}.solaris-card__description:not(:has([solaris-card-description])){display:none}.solaris-card__meta:not(:has([solaris-card-meta])){display:none}.solaris-card__badge:not(:has([solaris-card-badge])){display:none}.solaris-card__footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card__actions:not(:has([solaris-card-actions])){display:none}.solaris-card__header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card__header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card__footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6357
6420
|
}
|
|
6358
6421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCard, decorators: [{
|
|
6359
6422
|
type: Component,
|
|
@@ -6372,8 +6435,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6372
6435
|
'[style.--solaris-card-accent-custom]': 'customColor()',
|
|
6373
6436
|
'[style.--solaris-card-min-height]': 'normalizedMinHeight()',
|
|
6374
6437
|
'[style.--solaris-card-reserved-inline-end]': 'normalizedReservedInlineEnd()',
|
|
6375
|
-
}, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg)}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: none;--solaris-card-shadow-hover: var(--solaris-shadow-xs);--solaris-card-shadow-selected: inset 0 0 0 .1rem color-mix(in srgb, var(--solaris-card-accent) 22%, transparent)}:host([data-selected=true][data-appearance=glass]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 14%,transparent);border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);background:var(--solaris-card-bg);border:1px solid var(--solaris-card-border);border-radius:var(--solaris-card-radius);box-shadow:var(--solaris-card-shadow)}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-hover);border-color:var(--solaris-card-border-hover);box-shadow:var(--solaris-card-shadow-hover)}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg)}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__media:not(:has(solaris-card-media,[solaris-card-media])){display:none}.solaris-card__eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card__title:not(:has([solaris-card-title])){display:none}.solaris-card__description:not(:has([solaris-card-description])){display:none}.solaris-card__meta:not(:has([solaris-card-meta])){display:none}.solaris-card__badge:not(:has([solaris-card-badge])){display:none}.solaris-card__footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card__actions:not(:has([solaris-card-actions])){display:none}.solaris-card__header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card__header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card__footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"] }]
|
|
6376
|
-
|
|
6438
|
+
'[style.--solaris-card-bg-override]': 'normalizedBackground() || null',
|
|
6439
|
+
'[style.--solaris-card-border-override]': 'normalizedBorderColor() || null',
|
|
6440
|
+
'[style.--solaris-card-shadow-override]': 'normalizedShadow() || null',
|
|
6441
|
+
}, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__body\">\n <div class=\"solaris-card__leading\">\n <ng-content select=\"solaris-card-leading, [solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-leading-size: 4rem;--solaris-card-leading-gap: var(--solaris-space-4);--solaris-card-leading-radius: var(--solaris-radius-lg)}.solaris-card__body{min-inline-size:0;display:flex;align-items:flex-start;gap:var(--solaris-card-leading-gap)}.solaris-card__leading{flex:0 0 var(--solaris-card-leading-size);inline-size:var(--solaris-card-leading-size);min-inline-size:var(--solaris-card-leading-size);display:inline-grid;place-items:center;line-height:0}.solaris-card__leading:not(:has(solaris-card-leading,[solaris-card-leading])){display:none}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: none;--solaris-card-shadow-hover: var(--solaris-shadow-xs);--solaris-card-shadow-selected: inset 0 0 0 .1rem color-mix(in srgb, var(--solaris-card-accent) 22%, transparent)}:host([data-selected=true][data-appearance=glass]) .solaris-card{background:var(--solaris-card-bg-override, color-mix(in srgb, var(--solaris-card-accent) 14%, transparent));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-selected));border-color:var(--solaris-card-border-override, var(--solaris-card-border-selected))}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);border-radius:var(--solaris-card-radius);background:var(--solaris-card-bg-override, var(--solaris-card-bg));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow));border:1px solid var(--solaris-card-border-override, var(--solaris-card-border))}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-override, var(--solaris-card-bg-hover));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-hover));border-color:var(--solaris-card-border-override, var(--solaris-card-border-hover))}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg-override, var(--solaris-card-bg))}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__media,.solaris-card__body{position:relative;z-index:var(--solaris-z-raised)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__media:not(:has(solaris-card-media,[solaris-card-media],.solaris-card-media)){display:none}.solaris-card__eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card__title:not(:has([solaris-card-title])){display:none}.solaris-card__description:not(:has([solaris-card-description])){display:none}.solaris-card__meta:not(:has([solaris-card-meta])){display:none}.solaris-card__badge:not(:has([solaris-card-badge])){display:none}.solaris-card__footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card__actions:not(:has([solaris-card-actions])){display:none}.solaris-card__header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card__header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card__footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"] }]
|
|
6442
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], reservedInlineEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "reservedInlineEnd", required: false }] }] } });
|
|
6377
6443
|
|
|
6378
6444
|
class SolarisSelectionCard {
|
|
6379
6445
|
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
@@ -6383,6 +6449,9 @@ class SolarisSelectionCard {
|
|
|
6383
6449
|
radius = input(null, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
6384
6450
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
6385
6451
|
selectionIndicator = input('auto', ...(ngDevMode ? [{ debugName: "selectionIndicator" }] : /* istanbul ignore next */ []));
|
|
6452
|
+
shadow = input(null, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
|
|
6453
|
+
background = input(null, ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
|
|
6454
|
+
borderColor = input(null, ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
|
|
6386
6455
|
invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6387
6456
|
disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
|
|
6388
6457
|
transform: booleanAttribute });
|
|
@@ -6457,6 +6526,9 @@ class SolarisSelectionCard {
|
|
|
6457
6526
|
return null;
|
|
6458
6527
|
return 'var(--ssc-reserved-inline-end)';
|
|
6459
6528
|
}, ...(ngDevMode ? [{ debugName: "reservedInlineEnd" }] : /* istanbul ignore next */ []));
|
|
6529
|
+
normalizedBackground = computed(() => this.normalize(this.background()), ...(ngDevMode ? [{ debugName: "normalizedBackground" }] : /* istanbul ignore next */ []));
|
|
6530
|
+
normalizedBorderColor = computed(() => this.normalize(this.borderColor()), ...(ngDevMode ? [{ debugName: "normalizedBorderColor" }] : /* istanbul ignore next */ []));
|
|
6531
|
+
normalizedShadow = computed(() => this.normalize(this.shadow()), ...(ngDevMode ? [{ debugName: "normalizedShadow" }] : /* istanbul ignore next */ []));
|
|
6460
6532
|
constructor() {
|
|
6461
6533
|
effect(() => {
|
|
6462
6534
|
if (this.group)
|
|
@@ -6525,8 +6597,11 @@ class SolarisSelectionCard {
|
|
|
6525
6597
|
return false;
|
|
6526
6598
|
return !!target.closest(['[data-card-actions="true"]', '[solaris-card-actions]', '.solaris-card-slot--actions'].join(','));
|
|
6527
6599
|
}
|
|
6600
|
+
normalize(value) {
|
|
6601
|
+
return String(value ?? '').trim();
|
|
6602
|
+
}
|
|
6528
6603
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelectionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6529
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <span class=\"solaris-selection-card__floating-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </span>\n\n <solaris-card class=\"solaris-selection-card__card\" [orientation]=\"orientation()\" [size]=\"size()\" [radius]=\"radius()\"\n [appearance]=\"appearance()\" [color]=\"color()\" [selected]=\"selected()\" [invalid]=\"invalid()\" [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\" [minHeight]=\"minHeight()\" [reservedInlineEnd]=\"reservedInlineEnd()\">\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-actions]\" data-card-actions=\"true\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast);--ssc-badge-gap: var(--solaris-space-2);--ssc-badge-max-inline-size: 12rem;--ssc-badge-reserved-inline-size: 0rem}:host(:has([solaris-card-badge])){--ssc-badge-reserved-inline-size: 8rem;--ssc-reserved-inline-end: calc( var(--ssc-indicator-size) + var(--ssc-indicator-gap) + var(--ssc-badge-reserved-inline-size) + var(--ssc-badge-gap) )}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:var(--solaris-z-raised);pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card__indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card__indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card__indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}.solaris-selection-card__floating-badge{position:absolute;inset-block-start:calc(var(--ssc-indicator-top) + var(--ssc-indicator-size) / 2);inset-inline-end:calc(var(--ssc-indicator-end) + var(--ssc-indicator-size) + var(--ssc-badge-gap));transform:translateY(-50%);z-index:var(--solaris-z-raised);pointer-events:none;max-inline-size:var(--ssc-badge-max-inline-size);min-inline-size:0;line-height:0;align-items:center;display:inline-flex;justify-content:flex-end;--solaris-badge-min-height-sm: 1.8rem;--solaris-badge-min-height-md: 1.8rem;--solaris-badge-min-height-lg: 2rem;--solaris-badge-padding-block-sm: .1rem;--solaris-badge-padding-inline-sm: .5rem;--solaris-badge-padding-block-md: .1rem;--solaris-badge-padding-inline-md: .6rem;--solaris-badge-padding-block-lg: .15rem;--solaris-badge-padding-inline-lg: .7rem;--solaris-badge-line-height-override: var(--solaris-lh-tight)}.solaris-selection-card__floating-badge:not(:has([solaris-card-badge])){display:none}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "color", "appearance", "invalid", "selected", "disabled", "interactive", "minHeight", "reservedInlineEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <span class=\"solaris-selection-card__floating-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </span>\n\n <solaris-card class=\"solaris-selection-card__card\" [orientation]=\"orientation()\" [size]=\"size()\" [radius]=\"radius()\"\n [appearance]=\"appearance()\" [color]=\"color()\" [selected]=\"selected()\" [invalid]=\"invalid()\" [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\" [minHeight]=\"minHeight()\" [reservedInlineEnd]=\"reservedInlineEnd()\"\n [background]=\"background()\" [borderColor]=\"borderColor()\" [shadow]=\"shadow()\">\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-leading\">\n <ng-content select=\"solaris-card-leading\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-leading]\">\n <ng-content select=\"[solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-actions]\" data-card-actions=\"true\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast);--ssc-badge-gap: var(--solaris-space-2);--ssc-badge-max-inline-size: 12rem;--ssc-badge-reserved-inline-size: 0rem}:host(:has([solaris-card-badge])){--ssc-badge-reserved-inline-size: 8rem;--ssc-reserved-inline-end: calc( var(--ssc-indicator-size) + var(--ssc-indicator-gap) + var(--ssc-badge-reserved-inline-size) + var(--ssc-badge-gap) )}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:var(--solaris-z-raised);pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card__indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card__indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card__indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}.solaris-selection-card__floating-badge{position:absolute;inset-block-start:calc(var(--ssc-indicator-top) + var(--ssc-indicator-size) / 2);inset-inline-end:calc(var(--ssc-indicator-end) + var(--ssc-indicator-size) + var(--ssc-badge-gap));transform:translateY(-50%);z-index:var(--solaris-z-raised);pointer-events:none;max-inline-size:var(--ssc-badge-max-inline-size);min-inline-size:0;line-height:0;align-items:center;display:inline-flex;justify-content:flex-end;--solaris-badge-min-height-sm: 1.8rem;--solaris-badge-min-height-md: 1.8rem;--solaris-badge-min-height-lg: 2rem;--solaris-badge-padding-block-sm: .1rem;--solaris-badge-padding-inline-sm: .5rem;--solaris-badge-padding-block-md: .1rem;--solaris-badge-padding-inline-md: .6rem;--solaris-badge-padding-block-lg: .15rem;--solaris-badge-padding-inline-lg: .7rem;--solaris-badge-line-height-override: var(--solaris-lh-tight)}.solaris-selection-card__floating-badge:not(:has([solaris-card-badge])){display:none}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "color", "appearance", "shadow", "background", "borderColor", "invalid", "selected", "disabled", "interactive", "minHeight", "reservedInlineEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6530
6605
|
}
|
|
6531
6606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelectionCard, decorators: [{
|
|
6532
6607
|
type: Component,
|
|
@@ -6548,8 +6623,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6548
6623
|
'(click)': 'onHostClick($event)',
|
|
6549
6624
|
'(keydown)': 'onHostKeydown($event)',
|
|
6550
6625
|
'(blur)': 'onHostBlur()',
|
|
6551
|
-
}, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <span class=\"solaris-selection-card__floating-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </span>\n\n <solaris-card class=\"solaris-selection-card__card\" [orientation]=\"orientation()\" [size]=\"size()\" [radius]=\"radius()\"\n [appearance]=\"appearance()\" [color]=\"color()\" [selected]=\"selected()\" [invalid]=\"invalid()\" [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\" [minHeight]=\"minHeight()\" [reservedInlineEnd]=\"reservedInlineEnd()\">\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-actions]\" data-card-actions=\"true\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast);--ssc-badge-gap: var(--solaris-space-2);--ssc-badge-max-inline-size: 12rem;--ssc-badge-reserved-inline-size: 0rem}:host(:has([solaris-card-badge])){--ssc-badge-reserved-inline-size: 8rem;--ssc-reserved-inline-end: calc( var(--ssc-indicator-size) + var(--ssc-indicator-gap) + var(--ssc-badge-reserved-inline-size) + var(--ssc-badge-gap) )}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:var(--solaris-z-raised);pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card__indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card__indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card__indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}.solaris-selection-card__floating-badge{position:absolute;inset-block-start:calc(var(--ssc-indicator-top) + var(--ssc-indicator-size) / 2);inset-inline-end:calc(var(--ssc-indicator-end) + var(--ssc-indicator-size) + var(--ssc-badge-gap));transform:translateY(-50%);z-index:var(--solaris-z-raised);pointer-events:none;max-inline-size:var(--ssc-badge-max-inline-size);min-inline-size:0;line-height:0;align-items:center;display:inline-flex;justify-content:flex-end;--solaris-badge-min-height-sm: 1.8rem;--solaris-badge-min-height-md: 1.8rem;--solaris-badge-min-height-lg: 2rem;--solaris-badge-padding-block-sm: .1rem;--solaris-badge-padding-inline-sm: .5rem;--solaris-badge-padding-block-md: .1rem;--solaris-badge-padding-inline-md: .6rem;--solaris-badge-padding-block-lg: .15rem;--solaris-badge-padding-inline-lg: .7rem;--solaris-badge-line-height-override: var(--solaris-lh-tight)}.solaris-selection-card__floating-badge:not(:has([solaris-card-badge])){display:none}\n"] }]
|
|
6552
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], selectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionIndicator", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
|
|
6626
|
+
}, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <span class=\"solaris-selection-card__floating-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </span>\n\n <solaris-card class=\"solaris-selection-card__card\" [orientation]=\"orientation()\" [size]=\"size()\" [radius]=\"radius()\"\n [appearance]=\"appearance()\" [color]=\"color()\" [selected]=\"selected()\" [invalid]=\"invalid()\" [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\" [minHeight]=\"minHeight()\" [reservedInlineEnd]=\"reservedInlineEnd()\"\n [background]=\"background()\" [borderColor]=\"borderColor()\" [shadow]=\"shadow()\">\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-leading\">\n <ng-content select=\"solaris-card-leading\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-leading]\">\n <ng-content select=\"[solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-actions]\" data-card-actions=\"true\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast);--ssc-badge-gap: var(--solaris-space-2);--ssc-badge-max-inline-size: 12rem;--ssc-badge-reserved-inline-size: 0rem}:host(:has([solaris-card-badge])){--ssc-badge-reserved-inline-size: 8rem;--ssc-reserved-inline-end: calc( var(--ssc-indicator-size) + var(--ssc-indicator-gap) + var(--ssc-badge-reserved-inline-size) + var(--ssc-badge-gap) )}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:var(--solaris-z-raised);pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card__indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card__indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card__indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}.solaris-selection-card__floating-badge{position:absolute;inset-block-start:calc(var(--ssc-indicator-top) + var(--ssc-indicator-size) / 2);inset-inline-end:calc(var(--ssc-indicator-end) + var(--ssc-indicator-size) + var(--ssc-badge-gap));transform:translateY(-50%);z-index:var(--solaris-z-raised);pointer-events:none;max-inline-size:var(--ssc-badge-max-inline-size);min-inline-size:0;line-height:0;align-items:center;display:inline-flex;justify-content:flex-end;--solaris-badge-min-height-sm: 1.8rem;--solaris-badge-min-height-md: 1.8rem;--solaris-badge-min-height-lg: 2rem;--solaris-badge-padding-block-sm: .1rem;--solaris-badge-padding-inline-sm: .5rem;--solaris-badge-padding-block-md: .1rem;--solaris-badge-padding-inline-md: .6rem;--solaris-badge-padding-block-lg: .15rem;--solaris-badge-padding-inline-lg: .7rem;--solaris-badge-line-height-override: var(--solaris-lh-tight)}.solaris-selection-card__floating-badge:not(:has([solaris-card-badge])){display:none}\n"] }]
|
|
6627
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], selectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionIndicator", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
|
|
6553
6628
|
function inferStandaloneMode(indicator) {
|
|
6554
6629
|
switch (indicator) {
|
|
6555
6630
|
case 'radio':
|
|
@@ -6622,13 +6697,13 @@ class SolarisCardMedia {
|
|
|
6622
6697
|
return !this.loading() && this.variant() === 'image' && !!this.normalizedSrc();
|
|
6623
6698
|
}, ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
|
|
6624
6699
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardMedia, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6625
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisCardMedia, isStandalone: true, selector: "solaris-card-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, customRatio: { classPropertyName: "customRatio", publicName: "customRatio", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, objectPosition: { classPropertyName: "objectPosition", publicName: "objectPosition", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, overlayInset: { classPropertyName: "overlayInset", publicName: "overlayInset", isSignal: true, isRequired: false, transformFunction: null }, overlayPosition: { classPropertyName: "overlayPosition", publicName: "overlayPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "solaris-card-media-host" }, ngImport: i0, template: "<div\n class=\"solaris-card-media\"\n [class.is-loading]=\"loading()\"\n [class.is-disabled]=\"disabled()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-color]=\"color()\"\n [attr.data-ratio]=\"ratio()\"\n [attr.data-align]=\"align()\"\n [attr.data-radius]=\"radius()\"\n [attr.data-padding]=\"padding()\"\n [attr.data-overlay-position]=\"overlayPosition()\"\n [style.--solaris-card-media-fit]=\"fit()\"\n [style.--solaris-card-media-object-position]=\"objectPosition()\"\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\"\n>\n <div class=\"solaris-card-media__surface\">\n @if (loading()) {\n <
|
|
6700
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisCardMedia, isStandalone: true, selector: "solaris-card-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, customRatio: { classPropertyName: "customRatio", publicName: "customRatio", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, objectPosition: { classPropertyName: "objectPosition", publicName: "objectPosition", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, overlayInset: { classPropertyName: "overlayInset", publicName: "overlayInset", isSignal: true, isRequired: false, transformFunction: null }, overlayPosition: { classPropertyName: "overlayPosition", publicName: "overlayPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "solaris-card-media-host" }, ngImport: i0, template: "<div\n class=\"solaris-card-media\"\n [class.is-loading]=\"loading()\"\n [class.is-disabled]=\"disabled()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-color]=\"color()\"\n [attr.data-ratio]=\"ratio()\"\n [attr.data-align]=\"align()\"\n [attr.data-radius]=\"radius()\"\n [attr.data-padding]=\"padding()\"\n [attr.data-overlay-position]=\"overlayPosition()\"\n [style.--solaris-card-media-fit]=\"fit()\"\n [style.--solaris-card-media-object-position]=\"objectPosition()\"\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\"\n>\n <div class=\"solaris-card-media__surface\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-card-media__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-card-media__image\"\n [src]=\"normalizedSrc()\"\n [alt]=\"normalizedAlt()\"\n decoding=\"async\"\n />\n } @else {\n <div class=\"solaris-card-media__content\">\n <ng-content></ng-content>\n </div>\n }\n\n <div class=\"solaris-card-media__overlay\">\n <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%}.solaris-card-media{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix(in srgb, var(--solaris-color-border) 78%, transparent);--solaris-card-media-tone: var(--solaris-color-surface-2);--solaris-card-media-tone-strong: var(--solaris-color-text);--solaris-card-media-tone-contrast: var(--solaris-color-text);--solaris-card-media-tone-border: var(--solaris-color-border);--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% );--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-radius: inherit;--solaris-card-media-object-position: center;--solaris-card-media-min-height: 6rem;--solaris-card-media-padding: var(--solaris-space-4);--solaris-card-media-overlay-inset: var(--solaris-space-3);display:block;position:relative;min-inline-size:0}.solaris-card-media__surface{display:grid;overflow:hidden;position:relative;min-inline-size:0;inline-size:100%;place-items:center;block-size:var(--solaris-card-media-height, auto);max-block-size:var(--solaris-card-media-max-height, none);min-block-size:var(--solaris-card-media-min-height-override, var(--solaris-card-media-min-height));border-radius:var(--solaris-card-media-radius);color:var(--solaris-card-media-fg-override, var(--solaris-card-media-fg));background:var(--solaris-card-media-bg-override, var(--solaris-card-media-bg));border:1px solid var(--solaris-card-media-border-override, var(--solaris-card-media-border));box-shadow:var(--solaris-card-media-shadow-override, var(--solaris-card-media-shadow))}.solaris-card-media[data-ratio=auto] .solaris-card-media__surface{aspect-ratio:auto}.solaris-card-media[data-ratio=none] .solaris-card-media__surface{aspect-ratio:auto;min-block-size:var(--solaris-card-media-min-height-override, 0)}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media__surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"3:2\"] .solaris-card-media__surface{aspect-ratio:3/2}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media__surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media__surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media__surface{aspect-ratio:21/9}.solaris-card-media[data-ratio=\"9:16\"] .solaris-card-media__surface{aspect-ratio:9/16}.solaris-card-media[data-ratio=\"3:4\"] .solaris-card-media__surface{aspect-ratio:3/4}.solaris-card-media[data-ratio=\"2:3\"] .solaris-card-media__surface{aspect-ratio:2/3}.solaris-card-media[data-ratio=custom] .solaris-card-media__surface{aspect-ratio:var(--solaris-card-media-custom-ratio, auto)}.solaris-card-media__skeleton{inline-size:100%;block-size:100%;min-block-size:inherit;display:block}.solaris-card-media__overlay{position:absolute;z-index:var(--solaris-z-raised);display:none;align-items:center;justify-content:center;gap:var(--solaris-space-2);pointer-events:none}.solaris-card-media__overlay:has([solaris-card-media-overlay]){display:inline-flex;pointer-events:auto}.solaris-card-media__overlay:empty{display:none}.solaris-card-media[data-overlay-position=top-start] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=top-center] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=top-end] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=center] .solaris-card-media__overlay{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.solaris-card-media[data-overlay-position=bottom-start] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=bottom-center] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=bottom-end] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}\n"], dependencies: [{ kind: "component", type: SolarisSkeleton, selector: "solaris-skeleton", inputs: ["shape", "width", "height", "radius", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6626
6701
|
}
|
|
6627
6702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardMedia, decorators: [{
|
|
6628
6703
|
type: Component,
|
|
6629
|
-
args: [{ selector: 'solaris-card-media', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6704
|
+
args: [{ selector: 'solaris-card-media', standalone: true, imports: [SolarisSkeleton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6630
6705
|
class: 'solaris-card-media-host',
|
|
6631
|
-
}, template: "<div\n class=\"solaris-card-media\"\n [class.is-loading]=\"loading()\"\n [class.is-disabled]=\"disabled()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-color]=\"color()\"\n [attr.data-ratio]=\"ratio()\"\n [attr.data-align]=\"align()\"\n [attr.data-radius]=\"radius()\"\n [attr.data-padding]=\"padding()\"\n [attr.data-overlay-position]=\"overlayPosition()\"\n [style.--solaris-card-media-fit]=\"fit()\"\n [style.--solaris-card-media-object-position]=\"objectPosition()\"\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\"\n>\n <div class=\"solaris-card-media__surface\">\n @if (loading()) {\n <
|
|
6706
|
+
}, template: "<div\n class=\"solaris-card-media\"\n [class.is-loading]=\"loading()\"\n [class.is-disabled]=\"disabled()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-color]=\"color()\"\n [attr.data-ratio]=\"ratio()\"\n [attr.data-align]=\"align()\"\n [attr.data-radius]=\"radius()\"\n [attr.data-padding]=\"padding()\"\n [attr.data-overlay-position]=\"overlayPosition()\"\n [style.--solaris-card-media-fit]=\"fit()\"\n [style.--solaris-card-media-object-position]=\"objectPosition()\"\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\"\n>\n <div class=\"solaris-card-media__surface\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-card-media__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-card-media__image\"\n [src]=\"normalizedSrc()\"\n [alt]=\"normalizedAlt()\"\n decoding=\"async\"\n />\n } @else {\n <div class=\"solaris-card-media__content\">\n <ng-content></ng-content>\n </div>\n }\n\n <div class=\"solaris-card-media__overlay\">\n <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%}.solaris-card-media{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix(in srgb, var(--solaris-color-border) 78%, transparent);--solaris-card-media-tone: var(--solaris-color-surface-2);--solaris-card-media-tone-strong: var(--solaris-color-text);--solaris-card-media-tone-contrast: var(--solaris-color-text);--solaris-card-media-tone-border: var(--solaris-color-border);--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% );--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-radius: inherit;--solaris-card-media-object-position: center;--solaris-card-media-min-height: 6rem;--solaris-card-media-padding: var(--solaris-space-4);--solaris-card-media-overlay-inset: var(--solaris-space-3);display:block;position:relative;min-inline-size:0}.solaris-card-media__surface{display:grid;overflow:hidden;position:relative;min-inline-size:0;inline-size:100%;place-items:center;block-size:var(--solaris-card-media-height, auto);max-block-size:var(--solaris-card-media-max-height, none);min-block-size:var(--solaris-card-media-min-height-override, var(--solaris-card-media-min-height));border-radius:var(--solaris-card-media-radius);color:var(--solaris-card-media-fg-override, var(--solaris-card-media-fg));background:var(--solaris-card-media-bg-override, var(--solaris-card-media-bg));border:1px solid var(--solaris-card-media-border-override, var(--solaris-card-media-border));box-shadow:var(--solaris-card-media-shadow-override, var(--solaris-card-media-shadow))}.solaris-card-media[data-ratio=auto] .solaris-card-media__surface{aspect-ratio:auto}.solaris-card-media[data-ratio=none] .solaris-card-media__surface{aspect-ratio:auto;min-block-size:var(--solaris-card-media-min-height-override, 0)}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media__surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"3:2\"] .solaris-card-media__surface{aspect-ratio:3/2}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media__surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media__surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media__surface{aspect-ratio:21/9}.solaris-card-media[data-ratio=\"9:16\"] .solaris-card-media__surface{aspect-ratio:9/16}.solaris-card-media[data-ratio=\"3:4\"] .solaris-card-media__surface{aspect-ratio:3/4}.solaris-card-media[data-ratio=\"2:3\"] .solaris-card-media__surface{aspect-ratio:2/3}.solaris-card-media[data-ratio=custom] .solaris-card-media__surface{aspect-ratio:var(--solaris-card-media-custom-ratio, auto)}.solaris-card-media__skeleton{inline-size:100%;block-size:100%;min-block-size:inherit;display:block}.solaris-card-media__overlay{position:absolute;z-index:var(--solaris-z-raised);display:none;align-items:center;justify-content:center;gap:var(--solaris-space-2);pointer-events:none}.solaris-card-media__overlay:has([solaris-card-media-overlay]){display:inline-flex;pointer-events:auto}.solaris-card-media__overlay:empty{display:none}.solaris-card-media[data-overlay-position=top-start] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=top-center] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=top-end] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=center] .solaris-card-media__overlay{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.solaris-card-media[data-overlay-position=bottom-start] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=bottom-center] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=bottom-end] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}\n"] }]
|
|
6632
6707
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], customRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRatio", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], objectPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectPosition", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], foreground: [{ type: i0.Input, args: [{ isSignal: true, alias: "foreground", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], overlayInset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayInset", required: false }] }], overlayPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
6633
6708
|
function normalizeCardMediaValue(value) {
|
|
6634
6709
|
return String(value ?? '').trim();
|
|
@@ -9012,5 +9087,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
9012
9087
|
* Generated bundle index. Do not edit.
|
|
9013
9088
|
*/
|
|
9014
9089
|
|
|
9015
|
-
export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_STEP_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective, SolarisCardMediaOverlayDirective, SolarisCardMetaDirective, SolarisCardTitleDirective, SolarisCarousel, SolarisCarouselOverlayDirective, SolarisCarouselSlideDirective, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDialogContainer, SolarisDialogRef, SolarisDialogService, SolarisDialogStepsContainer, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFloatingOverlayService, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisPresenceAvatar, SolarisRadio, SolarisRadioGroup, SolarisRichTooltipDirective, SolarisRichTooltipPanel, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSelectionCard, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, SolarisTooltipDirective, SolarisTooltipPanel, computeFloatingPosition, computePopoverPosition, normalizeCardValue, provideSolarisNotifications, repositionTooltipOverlay, resolveCardColorKey, resolveCardCustomColor, resolveCardRadius, uniqueId };
|
|
9090
|
+
export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_STEP_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective, SolarisCardMediaOverlayDirective, SolarisCardMetaDirective, SolarisCardTitleDirective, SolarisCarousel, SolarisCarouselOverlayDirective, SolarisCarouselSlideDirective, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDialogContainer, SolarisDialogRef, SolarisDialogService, SolarisDialogStepsContainer, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFloatingOverlayService, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisPresenceAvatar, SolarisRadio, SolarisRadioGroup, SolarisRichTooltipDirective, SolarisRichTooltipPanel, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSelectionCard, SolarisSkeleton, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, SolarisTooltipDirective, SolarisTooltipPanel, computeFloatingPosition, computePopoverPosition, normalizeCardValue, provideSolarisNotifications, repositionTooltipOverlay, resolveCardColorKey, resolveCardCustomColor, resolveCardRadius, uniqueId };
|
|
9016
9091
|
//# sourceMappingURL=educarehq-solaris-components.mjs.map
|