@educarehq/solaris-ui 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2042,33 +2042,28 @@ const BRAND_ICONS = [
|
|
|
2042
2042
|
},
|
|
2043
2043
|
{
|
|
2044
2044
|
name: 'android',
|
|
2045
|
-
viewBox: '
|
|
2045
|
+
viewBox: '0 0 413.137 413.137',
|
|
2046
2046
|
fill: 'none',
|
|
2047
2047
|
elements: [
|
|
2048
2048
|
{
|
|
2049
2049
|
type: 'path',
|
|
2050
|
-
fill: '#
|
|
2051
|
-
d: '
|
|
2050
|
+
fill: '#AAC148',
|
|
2051
|
+
d: 'M311.358,136.395H101.779c-4.662,0-8.441,3.779-8.441,8.441v175.749c0,4.662,3.779,8.441,8.441,8.441h37.363v59.228c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883v-59.228h34.803v59.228c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883v-59.228h37.882c4.662,0,8.441-3.779,8.441-8.441V144.836C319.799,140.174,316.02,136.395,311.358,136.395z',
|
|
2052
2052
|
},
|
|
2053
2053
|
{
|
|
2054
2054
|
type: 'path',
|
|
2055
|
-
fill: '#
|
|
2056
|
-
d: '
|
|
2055
|
+
fill: '#AAC148',
|
|
2056
|
+
d: 'M57.856,136.354L57.856,136.354c-13.742,0-24.883,11.14-24.883,24.883v101.065c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883V161.237C82.738,147.495,71.598,136.354,57.856,136.354z',
|
|
2057
2057
|
},
|
|
2058
2058
|
{
|
|
2059
2059
|
type: 'path',
|
|
2060
|
-
fill: '#
|
|
2061
|
-
d: '
|
|
2060
|
+
fill: '#AAC148',
|
|
2061
|
+
d: 'M355.281,136.354L355.281,136.354c-13.742,0-24.883,11.14-24.883,24.883v101.065c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883V161.237C380.164,147.495,369.024,136.354,355.281,136.354z',
|
|
2062
2062
|
},
|
|
2063
2063
|
{
|
|
2064
2064
|
type: 'path',
|
|
2065
|
-
fill: '#
|
|
2066
|
-
d: '
|
|
2067
|
-
},
|
|
2068
|
-
{
|
|
2069
|
-
type: 'path',
|
|
2070
|
-
fill: '#FFFFFF',
|
|
2071
|
-
d: 'M91.0681772,54.9226953 C87.4507168,54.9226953 84.4563973,57.9170105 84.4563973,61.5344795 C84.4563973,65.1519399 87.4507168,68.146255 91.0681772,68.146255 C94.6856376,68.146255 97.6799528,65.1519399 97.6799528,61.5344795 C97.6799528,57.9170105 94.6856376,54.9226953 91.0681772,54.9226953 L91.0681772,54.9226953 Z M164.205874,54.9226953 C160.588413,54.9226953 157.59409,57.9170105 157.59409,61.5344795 C157.59409,65.1519399 160.588413,68.146255 164.205874,68.146255 C167.823326,68.146255 170.817649,65.1519399 170.817649,61.5344795 C170.817649,57.9170105 167.823326,54.9226953 164.205874,54.9226953 L164.205874,54.9226953 Z',
|
|
2065
|
+
fill: '#AAC148',
|
|
2066
|
+
d: 'M103.475,124.069h205.692c5.366,0,9.368-4.943,8.266-10.195c-6.804-32.428-27.45-59.756-55.465-75.543l17.584-31.727c1.19-2.148,0.414-4.855-1.734-6.045c-2.153-1.193-4.856-0.414-6.046,1.734l-17.717,31.966c-14.511-6.734-30.683-10.495-47.734-10.495c-17.052,0-33.224,3.761-47.735,10.495L140.869,2.292c-1.191-2.149-3.898-2.924-6.045-1.734c-2.148,1.19-2.924,3.897-1.734,6.045l17.584,31.727c-28.015,15.788-48.661,43.115-55.465,75.544C94.106,119.126,98.108,124.069,103.475,124.069z M267.697,76.786c0,5.282-4.282,9.565-9.565,9.565c-5.282,0-9.565-4.282-9.565-9.565c0-5.282,4.282-9.565,9.565-9.565C263.415,67.221,267.697,71.504,267.697,76.786z M154.508,67.221c5.282,0,9.565,4.282,9.565,9.565c0,5.282-4.282,9.565-9.565,9.565c-5.282,0-9.565-4.282-9.565-9.565C144.943,71.504,149.225,67.221,154.508,67.221z',
|
|
2072
2067
|
},
|
|
2073
2068
|
],
|
|
2074
2069
|
},
|
|
@@ -2142,17 +2137,42 @@ class SolarisIconComponent {
|
|
|
2142
2137
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2143
2138
|
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2144
2139
|
decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
|
|
2140
|
+
inheritColor = input(true, ...(ngDevMode ? [{ debugName: "inheritColor" }] : /* istanbul ignore next */ []));
|
|
2145
2141
|
definition = computed(() => this.registry.getIcon(this.name()), ...(ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []));
|
|
2146
2142
|
isHidden = computed(() => this.decorative(), ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
|
|
2147
2143
|
accessibleLabel = computed(() => this.ariaLabel() ?? '', ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : /* istanbul ignore next */ []));
|
|
2148
2144
|
hasSemanticLabel = computed(() => !this.decorative() && !!this.ariaLabel(), ...(ngDevMode ? [{ debugName: "hasSemanticLabel" }] : /* istanbul ignore next */ []));
|
|
2145
|
+
hasOwnColors = computed(() => {
|
|
2146
|
+
const icon = this.definition();
|
|
2147
|
+
if (!icon)
|
|
2148
|
+
return false;
|
|
2149
|
+
if (icon.fill && icon.fill !== 'none') {
|
|
2150
|
+
return true;
|
|
2151
|
+
}
|
|
2152
|
+
return icon.elements.some((el) => 'fill' in el && !!el.fill);
|
|
2153
|
+
}, ...(ngDevMode ? [{ debugName: "hasOwnColors" }] : /* istanbul ignore next */ []));
|
|
2154
|
+
resolvedStroke = computed(() => {
|
|
2155
|
+
if (!this.inheritColor())
|
|
2156
|
+
return 'none';
|
|
2157
|
+
const icon = this.definition();
|
|
2158
|
+
if (icon?.stroke)
|
|
2159
|
+
return icon.stroke;
|
|
2160
|
+
if (this.hasOwnColors())
|
|
2161
|
+
return 'none';
|
|
2162
|
+
return 'currentColor';
|
|
2163
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedStroke" }] : /* istanbul ignore next */ []));
|
|
2164
|
+
resolvedStrokeWidth = computed(() => {
|
|
2165
|
+
if (this.resolvedStroke() === 'none')
|
|
2166
|
+
return 0;
|
|
2167
|
+
return this.definition()?.strokeWidth ?? 2;
|
|
2168
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedStrokeWidth" }] : /* istanbul ignore next */ []));
|
|
2149
2169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisIconComponent, isStandalone: true, selector: "solaris-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (definition(); as icon) {\n <svg\n width=\"100%\"\n height=\"100%\"\n [attr.viewBox]=\"icon.viewBox\"\n [attr.fill]=\"icon.fill ?? 'none'\"\n [attr.stroke]=\"
|
|
2170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisIconComponent, isStandalone: true, selector: "solaris-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, inheritColor: { classPropertyName: "inheritColor", publicName: "inheritColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (definition(); as icon) {\n <svg\n width=\"100%\"\n height=\"100%\"\n [attr.viewBox]=\"icon.viewBox\"\n [attr.fill]=\"icon.fill ?? 'none'\"\n [attr.stroke]=\"resolvedStroke()\"\n [attr.stroke-width]=\"resolvedStrokeWidth()\"\n [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n >\n @for (element of icon.elements; track $index) {\n @switch (element.type) {\n @case ('path') {\n <path\n [attr.d]=\"element.d\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"element.x1\"\n [attr.y1]=\"element.y1\"\n [attr.x2]=\"element.x2\"\n [attr.y2]=\"element.y2\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"element.points\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"element.points\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('circle') {\n <circle\n [attr.cx]=\"element.cx\"\n [attr.cy]=\"element.cy\"\n [attr.r]=\"element.r\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('rect') {\n <rect\n [attr.x]=\"element.x\"\n [attr.y]=\"element.y\"\n [attr.width]=\"element.width\"\n [attr.height]=\"element.height\"\n [attr.rx]=\"element.rx\"\n [attr.ry]=\"element.ry\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n }\n }\n </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2151
2171
|
}
|
|
2152
2172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisIconComponent, decorators: [{
|
|
2153
2173
|
type: Component,
|
|
2154
|
-
args: [{ selector: 'solaris-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (definition(); as icon) {\n <svg\n width=\"100%\"\n height=\"100%\"\n [attr.viewBox]=\"icon.viewBox\"\n [attr.fill]=\"icon.fill ?? 'none'\"\n [attr.stroke]=\"
|
|
2155
|
-
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
|
|
2174
|
+
args: [{ selector: 'solaris-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (definition(); as icon) {\n <svg\n width=\"100%\"\n height=\"100%\"\n [attr.viewBox]=\"icon.viewBox\"\n [attr.fill]=\"icon.fill ?? 'none'\"\n [attr.stroke]=\"resolvedStroke()\"\n [attr.stroke-width]=\"resolvedStrokeWidth()\"\n [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n >\n @for (element of icon.elements; track $index) {\n @switch (element.type) {\n @case ('path') {\n <path\n [attr.d]=\"element.d\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"element.x1\"\n [attr.y1]=\"element.y1\"\n [attr.x2]=\"element.x2\"\n [attr.y2]=\"element.y2\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"element.points\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"element.points\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('circle') {\n <circle\n [attr.cx]=\"element.cx\"\n [attr.cy]=\"element.cy\"\n [attr.r]=\"element.r\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n @case ('rect') {\n <rect\n [attr.x]=\"element.x\"\n [attr.y]=\"element.y\"\n [attr.width]=\"element.width\"\n [attr.height]=\"element.height\"\n [attr.rx]=\"element.rx\"\n [attr.ry]=\"element.ry\"\n [attr.fill]=\"element.fill ?? null\"\n [attr.stroke]=\"element.stroke ?? null\"\n [attr.stroke-width]=\"element.strokeWidth ?? null\"\n [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n />\n }\n }\n }\n </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"] }]
|
|
2175
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], inheritColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritColor", required: false }] }] } });
|
|
2156
2176
|
|
|
2157
2177
|
class SolarisBadgeComponent {
|
|
2158
2178
|
appearance = input('tonal', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
@@ -2400,7 +2420,7 @@ class SolarisAlertComponent {
|
|
|
2400
2420
|
this.dismissed.emit();
|
|
2401
2421
|
}
|
|
2402
2422
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2403
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisAlertComponent, isStandalone: true, selector: "solaris-alert", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, hasTitle: { classPropertyName: "hasTitle", publicName: "hasTitle", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "liveRole()", "attr.data-variant": "variant()", "attr.aria-live": "ariaLive()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-appearance": "appearance()", "attr.data-closable": "closable() ? \"\" : null", "attr.data-has-title": "hasTitle() ? \"\" : null" } }, ngImport: i0, template: "@if (showIcon()) {\n <div class=\"solaris-alert__icon\">\n <solaris-icon [name]=\"iconName()\" [decorative]=\"true\" />\n </div>\n}\n\n<div class=\"solaris-alert__content\">\n <ng-content />\n</div>\n\n@if (closable()) {\n <div class=\"solaris-alert__close-slot\">\n <button\n type=\"button\"\n class=\"solaris-alert__close\"\n [attr.aria-label]=\"closeButtonLabel()\"\n (click)=\"handleClose()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n </div>\n}\n", styles: [":host{--solaris-alert-icon-offset: -1px;--solaris-alert-close-offset: 0px;--solaris-alert-close-background: transparent;--solaris-alert-gap: var(--solaris-spacing-3);--solaris-alert-color: var(--solaris-info-text);--solaris-alert-radius: var(--solaris-radius-md);--solaris-alert-padding: var(--solaris-spacing-4);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-close-size: var(--solaris-spacing-4);--solaris-alert-content-gap: var(--solaris-spacing-1);--solaris-alert-actions-gap: var(--solaris-spacing-2);--solaris-alert-close-color: var(--solaris-text-muted);--solaris-alert-icon-size: var(--solaris-font-size-lg);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-border-color: var(--solaris-info-border);--solaris-alert-close-hover-background: #0000000f;--solaris-alert-border-width: var(--solaris-border-width-sm);--solaris-alert-close-icon-size: var(--solaris-font-size-md);--solaris-alert-description-color: var(--solaris-text-default);--solaris-alert-first-line-height: var(--solaris-line-height-md);--solaris-alert-first-line-font-size: var(--solaris-font-size-sm);display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-alert-gap);color:var(--solaris-alert-color);padding:var(--solaris-alert-padding);border-radius:var(--solaris-alert-radius);background:var(--solaris-alert-background);border:var(--solaris-alert-border-width) solid var(--solaris-alert-border-color)}:host([data-has-title]){--solaris-alert-icon-offset: 0px;--solaris-alert-close-offset: 0px;--solaris-alert-first-line-height: var(--solaris-line-height-sm);--solaris-alert-first-line-font-size: var(--solaris-font-size-md)}.solaris-alert__icon{display:grid;flex-shrink:0;position:relative;place-items:center;transform:translateY(-50%);width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size);color:var(--solaris-alert-icon-color);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);inset-block-start:calc(.5lh + var(--solaris-alert-icon-offset))}.solaris-alert__icon solaris-icon,.solaris-alert__icon svg{display:block;width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size)}.solaris-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-alert-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-alert__close:hover{background:var(--solaris-alert-close-hover-background)}.solaris-alert__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-alert__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;position:relative;place-items:center;box-sizing:border-box;inset-block-start:.5lh;transform:translateY(-50%);width:var(--solaris-alert-close-size);height:var(--solaris-alert-close-size);border-radius:var(--solaris-radius-sm);color:var(--solaris-alert-close-color);background:var(--solaris-alert-close-background);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size)}.solaris-alert__close solaris-icon,.solaris-alert__close svg{display:block;width:var(--solaris-alert-close-icon-size);height:var(--solaris-alert-close-icon-size)}::ng-deep .solaris-alert-title{margin:0;font-size:var(--solaris-font-size-md);color:var(--solaris-alert-title-color);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold)}::ng-deep .solaris-alert-description{margin:0;font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-alert-description-color)}::ng-deep .solaris-alert-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-alert-actions-gap);margin-block-start:var(--solaris-spacing-2)}::ng-deep .solaris-alert-title+.solaris-alert-description{margin-block-start:var(--solaris-alert-content-gap)}::ng-deep .solaris-alert__content>:first-child:not(.solaris-alert-title){margin-block-start:0}:host([data-radius=sm]){--solaris-alert-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-alert-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-alert-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-alert-radius: var(--solaris-radius-xl)}:host([data-density=compact]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=normal]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-lg);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-variant=neutral][data-appearance=tonal]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-border-subtle)}:host([data-variant=neutral][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-text-strong);--solaris-alert-icon-color: var(--solaris-text-strong);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-close-color: var(--solaris-text-strong);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-description-color: var(--solaris-text-inverse);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=info][data-appearance=tonal]){--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-info-on-solid);--solaris-alert-background: var(--solaris-info-base);--solaris-alert-icon-color: var(--solaris-info-on-solid);--solaris-alert-close-color: var(--solaris-info-on-solid);--solaris-alert-title-color: var(--solaris-info-on-solid);--solaris-alert-description-color: var(--solaris-info-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=success][data-appearance=tonal]){--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-background: var(--solaris-success-surface);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-success-on-solid);--solaris-alert-background: var(--solaris-success-base);--solaris-alert-icon-color: var(--solaris-success-on-solid);--solaris-alert-close-color: var(--solaris-success-on-solid);--solaris-alert-title-color: var(--solaris-success-on-solid);--solaris-alert-close-hover-background: #ffffff1f;--solaris-alert-description-color: var(--solaris-success-on-solid)}:host([data-variant=warning][data-appearance=tonal]){--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-warning-surface);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-warning-on-solid);--solaris-alert-background: var(--solaris-warning-base);--solaris-alert-close-hover-background: #0000001a;--solaris-alert-icon-color: var(--solaris-warning-on-solid);--solaris-alert-close-color: var(--solaris-warning-on-solid);--solaris-alert-title-color: var(--solaris-warning-on-solid);--solaris-alert-description-color: var(--solaris-warning-on-solid)}:host([data-variant=danger][data-appearance=tonal]){--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-danger-surface);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-danger-on-solid);--solaris-alert-background: var(--solaris-danger-base);--solaris-alert-icon-color: var(--solaris-danger-on-solid);--solaris-alert-close-color: var(--solaris-danger-on-solid);--solaris-alert-title-color: var(--solaris-danger-on-solid);--solaris-alert-description-color: var(--solaris-danger-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=custom]){--solaris-alert-color: var( --solaris-alert-custom-color, var(--solaris-text-default) );--solaris-alert-icon-color: var( --solaris-alert-custom-icon-color, var(--solaris-text-muted) );--solaris-alert-background: var( --solaris-alert-custom-background, var(--solaris-surface-base) );--solaris-alert-border-color: var( --solaris-alert-custom-border-color, var(--solaris-border-default) )}:host([data-appearance=solid]){--solaris-alert-border-width: 0}:host([data-appearance]:not([data-appearance=solid])){--solaris-alert-border-width: var(--solaris-border-width-sm)}@media(prefers-reduced-motion:reduce){.solaris-alert__close{transition:none}}:host-context([data-reduced-motion=true]) .solaris-alert__close{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2423
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisAlertComponent, isStandalone: true, selector: "solaris-alert", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, hasTitle: { classPropertyName: "hasTitle", publicName: "hasTitle", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "liveRole()", "attr.data-variant": "variant()", "attr.aria-live": "ariaLive()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-appearance": "appearance()", "attr.data-closable": "closable() ? \"\" : null", "attr.data-has-title": "hasTitle() ? \"\" : null" } }, ngImport: i0, template: "@if (showIcon()) {\n <div class=\"solaris-alert__icon\">\n <solaris-icon [name]=\"iconName()\" [decorative]=\"true\" />\n </div>\n}\n\n<div class=\"solaris-alert__content\">\n <ng-content />\n</div>\n\n@if (closable()) {\n <div class=\"solaris-alert__close-slot\">\n <button\n type=\"button\"\n class=\"solaris-alert__close\"\n [attr.aria-label]=\"closeButtonLabel()\"\n (click)=\"handleClose()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n </div>\n}\n", styles: [":host{--solaris-alert-icon-offset: -1px;--solaris-alert-close-offset: 0px;--solaris-alert-close-background: transparent;--solaris-alert-gap: var(--solaris-spacing-3);--solaris-alert-color: var(--solaris-info-text);--solaris-alert-radius: var(--solaris-radius-md);--solaris-alert-padding: var(--solaris-spacing-4);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-close-size: var(--solaris-spacing-4);--solaris-alert-content-gap: var(--solaris-spacing-1);--solaris-alert-actions-gap: var(--solaris-spacing-2);--solaris-alert-close-color: var(--solaris-text-muted);--solaris-alert-icon-size: var(--solaris-font-size-lg);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-border-color: var(--solaris-info-border);--solaris-alert-close-hover-background: #0000000f;--solaris-alert-border-width: var(--solaris-border-width-sm);--solaris-alert-close-icon-size: var(--solaris-font-size-md);--solaris-alert-description-color: var(--solaris-text-default);--solaris-alert-first-line-height: var(--solaris-line-height-md);--solaris-alert-first-line-font-size: var(--solaris-font-size-sm);display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-alert-gap);color:var(--solaris-alert-color);padding:var(--solaris-alert-padding);border-radius:var(--solaris-alert-radius);background:var(--solaris-alert-background);border:var(--solaris-alert-border-width) solid var(--solaris-alert-border-color)}:host([data-has-title]){--solaris-alert-icon-offset: 0px;--solaris-alert-close-offset: 0px;--solaris-alert-first-line-height: var(--solaris-line-height-sm);--solaris-alert-first-line-font-size: var(--solaris-font-size-md)}.solaris-alert__icon{display:grid;flex-shrink:0;position:relative;place-items:center;transform:translateY(-50%);width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size);color:var(--solaris-alert-icon-color);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);inset-block-start:calc(.5lh + var(--solaris-alert-icon-offset))}.solaris-alert__icon solaris-icon,.solaris-alert__icon svg{display:block;width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size)}.solaris-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-alert-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-alert__close:hover{background:var(--solaris-alert-close-hover-background)}.solaris-alert__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-alert__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;position:relative;place-items:center;box-sizing:border-box;inset-block-start:.5lh;transform:translateY(-50%);width:var(--solaris-alert-close-size);height:var(--solaris-alert-close-size);border-radius:var(--solaris-radius-sm);color:var(--solaris-alert-close-color);background:var(--solaris-alert-close-background);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size)}.solaris-alert__close solaris-icon,.solaris-alert__close svg{display:block;width:var(--solaris-alert-close-icon-size);height:var(--solaris-alert-close-icon-size)}::ng-deep .solaris-alert-title{margin:0;font-size:var(--solaris-font-size-md);color:var(--solaris-alert-title-color);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold)}::ng-deep .solaris-alert-description{margin:0;font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-alert-description-color)}::ng-deep .solaris-alert-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-alert-actions-gap);margin-block-start:var(--solaris-spacing-2)}::ng-deep .solaris-alert-title+.solaris-alert-description{margin-block-start:var(--solaris-alert-content-gap)}::ng-deep .solaris-alert__content>:first-child:not(.solaris-alert-title){margin-block-start:0}:host([data-radius=sm]){--solaris-alert-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-alert-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-alert-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-alert-radius: var(--solaris-radius-xl)}:host([data-density=compact]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=normal]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-lg);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-variant=neutral][data-appearance=tonal]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-border-subtle)}:host([data-variant=neutral][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-text-strong);--solaris-alert-icon-color: var(--solaris-text-strong);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-close-color: var(--solaris-text-strong);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-description-color: var(--solaris-text-inverse);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=info][data-appearance=tonal]){--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-info-on-solid);--solaris-alert-background: var(--solaris-info-base);--solaris-alert-icon-color: var(--solaris-info-on-solid);--solaris-alert-close-color: var(--solaris-info-on-solid);--solaris-alert-title-color: var(--solaris-info-on-solid);--solaris-alert-description-color: var(--solaris-info-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=success][data-appearance=tonal]){--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-background: var(--solaris-success-surface);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-success-on-solid);--solaris-alert-background: var(--solaris-success-base);--solaris-alert-icon-color: var(--solaris-success-on-solid);--solaris-alert-close-color: var(--solaris-success-on-solid);--solaris-alert-title-color: var(--solaris-success-on-solid);--solaris-alert-close-hover-background: #ffffff1f;--solaris-alert-description-color: var(--solaris-success-on-solid)}:host([data-variant=warning][data-appearance=tonal]){--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-warning-surface);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-warning-on-solid);--solaris-alert-background: var(--solaris-warning-base);--solaris-alert-close-hover-background: #0000001a;--solaris-alert-icon-color: var(--solaris-warning-on-solid);--solaris-alert-close-color: var(--solaris-warning-on-solid);--solaris-alert-title-color: var(--solaris-warning-on-solid);--solaris-alert-description-color: var(--solaris-warning-on-solid)}:host([data-variant=danger][data-appearance=tonal]){--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-danger-surface);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-danger-on-solid);--solaris-alert-background: var(--solaris-danger-base);--solaris-alert-icon-color: var(--solaris-danger-on-solid);--solaris-alert-close-color: var(--solaris-danger-on-solid);--solaris-alert-title-color: var(--solaris-danger-on-solid);--solaris-alert-description-color: var(--solaris-danger-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=custom]){--solaris-alert-color: var( --solaris-alert-custom-color, var(--solaris-text-default) );--solaris-alert-icon-color: var( --solaris-alert-custom-icon-color, var(--solaris-text-muted) );--solaris-alert-background: var( --solaris-alert-custom-background, var(--solaris-surface-base) );--solaris-alert-border-color: var( --solaris-alert-custom-border-color, var(--solaris-border-default) )}:host([data-appearance=solid]){--solaris-alert-border-width: 0}:host([data-appearance]:not([data-appearance=solid])){--solaris-alert-border-width: var(--solaris-border-width-sm)}@media(prefers-reduced-motion:reduce){.solaris-alert__close{transition:none}}:host-context([data-reduced-motion=true]) .solaris-alert__close{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2404
2424
|
}
|
|
2405
2425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAlertComponent, decorators: [{
|
|
2406
2426
|
type: Component,
|
|
@@ -3082,7 +3102,7 @@ class SolarisOptionComponent {
|
|
|
3082
3102
|
this.optionInteraction.emit({ option: this, event });
|
|
3083
3103
|
}
|
|
3084
3104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3085
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisOptionComponent, isStandalone: true, selector: "solaris-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", 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 }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showSelectionIndicator: { classPropertyName: "showSelectionIndicator", publicName: "showSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, optionId: { classPropertyName: "optionId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionInteraction: "optionInteraction" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-selected": "ariaSelected()", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.data-size": "size()", "attr.data-density": "effectiveDensity()", "attr.data-selected": "selected() ? \"\" : null", "attr.data-active": "effectiveActive() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-selection-mode": "effectiveSelectionMode()", "attr.data-show-indicator": "effectiveShowSelectionIndicator() ? \"\" : null", "attr.id": "elementId()", "style.display": "internalHidden() ? \"none\" : \"\"" } }, queries: [{ propertyName: "leadingSlot", first: true, predicate: SolarisOptionLeadingDirective, descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: SolarisOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: SolarisOptionDescriptionDirective, descendants: true, isSignal: true }, { propertyName: "metaSlot", first: true, predicate: SolarisOptionMetaDirective, descendants: true, isSignal: true }, { propertyName: "trailingSlot", first: true, predicate: SolarisOptionTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-option\">\n @if (leadingSlot()) {\n <div class=\"solaris-option__leading\">\n <ng-content select=\"[solaris-option-leading]\" />\n </div>\n }\n\n @if (showSelectionVisual()) {\n <div class=\"solaris-option__selection-indicator\" aria-hidden=\"true\">\n @if (isMultiCheckSelection()) {\n <span\n class=\"solaris-option__checkbox\"\n [class.solaris-option__checkbox--checked]=\"selected()\"\n >\n @if (selected()) {\n <span class=\"solaris-option__checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </span>\n }\n </div>\n }\n\n <div class=\"solaris-option__content\">\n <div class=\"solaris-option__label\">\n @if (labelSlot()) {\n <ng-content select=\"[solaris-option-label]\" />\n }\n <ng-content />\n @if (!labelSlot() && labelText(); as text) {\n <span class=\"solaris-option__label-text\">{{ text }}</span>\n }\n </div>\n\n @if (descriptionSlot()) {\n <div class=\"solaris-option__description\">\n <ng-content select=\"[solaris-option-description]\" />\n </div>\n } @else if (descriptionText(); as desc) {\n <div class=\"solaris-option__description\">\n <span class=\"solaris-option__description-text\">{{ desc }}</span>\n </div>\n }\n </div>\n\n @if (metaSlot()) {\n <div class=\"solaris-option__meta\">\n <ng-content select=\"[solaris-option-meta]\" />\n </div>\n }\n\n @if (trailingSlot() || selected()) {\n <div class=\"solaris-option__trailing\">\n <ng-content select=\"[solaris-option-trailing]\" />\n @if (selected()) {\n <span class=\"solaris-option__trailing-check\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{--solaris-option-min-height: 24px;--solaris-option-background: transparent;--solaris-option-gap: var(--solaris-spacing-2);--solaris-option-radius: var(--solaris-radius-sm);--solaris-option-padding-y: var(--solaris-spacing-2);--solaris-option-padding-x: var(--solaris-spacing-4);--solaris-option-meta-color: var(--solaris-text-muted);--solaris-option-indicator-size: var(--solaris-spacing-5);--solaris-option-label-color: var(--solaris-text-default);--solaris-option-meta-font-size: var(--solaris-font-size-sm);--solaris-option-disabled-opacity: var(--solaris-opacity-40);--solaris-option-selected-color: var(--solaris-primary-text);--solaris-option-description-color: var(--solaris-text-muted);--solaris-option-indicator-color: var(--solaris-primary-border);--solaris-option-hover-background: var(--solaris-surface-subtle);--solaris-option-active-background: var(--solaris-surface-muted);--solaris-option-description-font-size: var(--solaris-font-size-sm);--solaris-option-selected-background: var(--solaris-primary-surface);outline:none;display:block}.solaris-option{display:flex;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;box-sizing:border-box;gap:var(--solaris-option-gap);border-radius:var(--solaris-option-radius);background:var(--solaris-option-background);min-height:var(--solaris-option-min-height);padding:var(--solaris-option-padding-y) var(--solaris-option-padding-x);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-option__leading,.solaris-option__selection-indicator{display:flex;flex-shrink:0;align-items:center;justify-content:center}.solaris-option__check,.solaris-option__checkbox{display:flex;align-items:center;box-sizing:border-box;justify-content:center;border-radius:var(--solaris-radius-sm);width:var(--solaris-option-indicator-size);height:var(--solaris-option-indicator-size)}.solaris-option__check-icon,.solaris-option__checkbox-icon{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;padding:var(--solaris-spacing-half)}.solaris-option__checkbox{background:transparent;border:var(--solaris-border-width-sm) solid var(--solaris-option-indicator-color)}.solaris-option__checkbox--checked{color:var(--solaris-primary-text);background:var(--solaris-option-indicator-color);border-color:var(--solaris-option-indicator-color)}.solaris-option__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}.solaris-option__label{min-width:0;display:flex;align-items:center}.solaris-option__label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-option-label-color)}.solaris-option__description{min-width:0;display:flex;align-items:center}.solaris-option__description-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-option-description-color);font-size:var(--solaris-option-description-font-size)}.solaris-option__meta{display:flex;flex-shrink:0;align-items:center;color:var(--solaris-option-meta-color);font-size:var(--solaris-option-meta-font-size)}.solaris-option__trailing{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-option-gap)}.solaris-option__trailing-check{display:flex;align-items:center;justify-content:center;color:var(--solaris-success-base);width:var(--solaris-option-indicator-size);height:var(--solaris-option-indicator-size)}:host([data-selection-mode=single]) .solaris-option__check{border-radius:50%}:host([data-selection-mode=single]) .solaris-option__check-icon{padding:var(--solaris-spacing-half)}:host([data-size=sm]) .solaris-option__label-text{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm)}:host([data-size=sm]){--solaris-option-min-height: 32px;--solaris-option-gap: var(--solaris-spacing-1);--solaris-option-padding-x: var(--solaris-spacing-3);--solaris-option-indicator-size: var(--solaris-spacing-4);--solaris-option-meta-font-size: var(--solaris-font-size-xs);--solaris-option-description-font-size: var(--solaris-font-size-xs)}:host([data-size=md]) .solaris-option__label-text{font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-md)}:host([data-size=lg]) .solaris-option__label-text{font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-lg)}:host([data-size=lg]){--solaris-option-min-height: 48px;--solaris-option-gap: var(--solaris-spacing-3);--solaris-option-radius: var(--solaris-radius-md);--solaris-option-padding-y: var(--solaris-spacing-3);--solaris-option-padding-x: var(--solaris-spacing-5);--solaris-option-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]){--solaris-option-min-height: auto;--solaris-option-gap: var(--solaris-spacing-2);--solaris-option-padding-x: var(--solaris-spacing-3);--solaris-option-padding-y: var(--solaris-density-padding-sm)}:host([data-density=normal]){--solaris-option-min-height: auto;--solaris-option-gap: var(--solaris-spacing-3);--solaris-option-padding-x: var(--solaris-spacing-4);--solaris-option-padding-y: var(--solaris-density-padding-sm)}:host([data-density=comfortable]){--solaris-option-gap: var(--solaris-spacing-4)}:host(:not([data-disabled])) .solaris-option:hover{background:var(--solaris-option-hover-background)}:host(:not([data-disabled])) .solaris-option:active{background:var(--solaris-option-active-background)}:host([data-selected]:not([data-disabled])) .solaris-option{color:var(--solaris-option-selected-color);background:var(--solaris-option-selected-background)}:host([data-active]:not([data-disabled])) .solaris-option{background:var(--solaris-option-active-background)}:host([data-active][data-selected]:not([data-disabled])) .solaris-option{color:var(--solaris-option-selected-color);background:var(--solaris-option-selected-background)}:host([data-highlighted]) .solaris-option{outline-offset:calc(-1 * var(--solaris-spacing-1) / 2);outline:var(--solaris-border-width-sm) solid var(--solaris-primary-base)}:host([data-disabled]) .solaris-option{cursor:not-allowed;opacity:var(--solaris-option-disabled-opacity)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisOptionComponent, isStandalone: true, selector: "solaris-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", 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 }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showSelectionIndicator: { classPropertyName: "showSelectionIndicator", publicName: "showSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, optionId: { classPropertyName: "optionId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionInteraction: "optionInteraction" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-selected": "ariaSelected()", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.data-size": "size()", "attr.data-density": "effectiveDensity()", "attr.data-selected": "selected() ? \"\" : null", "attr.data-active": "effectiveActive() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-selection-mode": "effectiveSelectionMode()", "attr.data-show-indicator": "effectiveShowSelectionIndicator() ? \"\" : null", "attr.id": "elementId()", "style.display": "internalHidden() ? \"none\" : \"\"" } }, queries: [{ propertyName: "leadingSlot", first: true, predicate: SolarisOptionLeadingDirective, descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: SolarisOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: SolarisOptionDescriptionDirective, descendants: true, isSignal: true }, { propertyName: "metaSlot", first: true, predicate: SolarisOptionMetaDirective, descendants: true, isSignal: true }, { propertyName: "trailingSlot", first: true, predicate: SolarisOptionTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-option\">\n @if (leadingSlot()) {\n <div class=\"solaris-option__leading\">\n <ng-content select=\"[solaris-option-leading]\" />\n </div>\n }\n\n @if (showSelectionVisual()) {\n <div class=\"solaris-option__selection-indicator\" aria-hidden=\"true\">\n @if (isMultiCheckSelection()) {\n <span\n class=\"solaris-option__checkbox\"\n [class.solaris-option__checkbox--checked]=\"selected()\"\n >\n @if (selected()) {\n <span class=\"solaris-option__checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </span>\n }\n </div>\n }\n\n <div class=\"solaris-option__content\">\n <div class=\"solaris-option__label\">\n @if (labelSlot()) {\n <ng-content select=\"[solaris-option-label]\" />\n }\n <ng-content />\n @if (!labelSlot() && labelText(); as text) {\n <span class=\"solaris-option__label-text\">{{ text }}</span>\n }\n </div>\n\n @if (descriptionSlot()) {\n <div class=\"solaris-option__description\">\n <ng-content select=\"[solaris-option-description]\" />\n </div>\n } @else if (descriptionText(); as desc) {\n <div class=\"solaris-option__description\">\n <span class=\"solaris-option__description-text\">{{ desc }}</span>\n </div>\n }\n </div>\n\n @if (metaSlot()) {\n <div class=\"solaris-option__meta\">\n <ng-content select=\"[solaris-option-meta]\" />\n </div>\n }\n\n @if (trailingSlot() || selected()) {\n <div class=\"solaris-option__trailing\">\n <ng-content select=\"[solaris-option-trailing]\" />\n @if (selected()) {\n <span class=\"solaris-option__trailing-check\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{--solaris-option-min-height: 24px;--solaris-option-background: transparent;--solaris-option-gap: var(--solaris-spacing-2);--solaris-option-radius: var(--solaris-radius-sm);--solaris-option-padding-y: var(--solaris-spacing-2);--solaris-option-padding-x: var(--solaris-spacing-4);--solaris-option-meta-color: var(--solaris-text-muted);--solaris-option-indicator-size: var(--solaris-spacing-5);--solaris-option-label-color: var(--solaris-text-default);--solaris-option-meta-font-size: var(--solaris-font-size-sm);--solaris-option-disabled-opacity: var(--solaris-opacity-40);--solaris-option-selected-color: var(--solaris-primary-text);--solaris-option-description-color: var(--solaris-text-muted);--solaris-option-indicator-color: var(--solaris-primary-border);--solaris-option-hover-background: var(--solaris-surface-subtle);--solaris-option-active-background: var(--solaris-surface-muted);--solaris-option-description-font-size: var(--solaris-font-size-sm);--solaris-option-selected-background: var(--solaris-primary-surface);outline:none;display:block}.solaris-option{display:flex;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;box-sizing:border-box;gap:var(--solaris-option-gap);border-radius:var(--solaris-option-radius);background:var(--solaris-option-background);min-height:var(--solaris-option-min-height);padding:var(--solaris-option-padding-y) var(--solaris-option-padding-x);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-option__leading,.solaris-option__selection-indicator{display:flex;flex-shrink:0;align-items:center;justify-content:center}.solaris-option__check,.solaris-option__checkbox{display:flex;align-items:center;box-sizing:border-box;justify-content:center;border-radius:var(--solaris-radius-sm);width:var(--solaris-option-indicator-size);height:var(--solaris-option-indicator-size)}.solaris-option__check-icon,.solaris-option__checkbox-icon{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;padding:var(--solaris-spacing-half)}.solaris-option__checkbox{background:transparent;border:var(--solaris-border-width-sm) solid var(--solaris-option-indicator-color)}.solaris-option__checkbox--checked{color:var(--solaris-primary-text);background:var(--solaris-option-indicator-color);border-color:var(--solaris-option-indicator-color)}.solaris-option__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}.solaris-option__label{min-width:0;display:flex;align-items:center}.solaris-option__label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-option-label-color)}.solaris-option__description{min-width:0;display:flex;align-items:center}.solaris-option__description-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-option-description-color);font-size:var(--solaris-option-description-font-size)}.solaris-option__meta{display:flex;flex-shrink:0;align-items:center;color:var(--solaris-option-meta-color);font-size:var(--solaris-option-meta-font-size)}.solaris-option__trailing{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-option-gap)}.solaris-option__trailing-check{display:flex;align-items:center;justify-content:center;color:var(--solaris-success-base);width:var(--solaris-option-indicator-size);height:var(--solaris-option-indicator-size)}:host([data-selection-mode=single]) .solaris-option__check{border-radius:50%}:host([data-selection-mode=single]) .solaris-option__check-icon{padding:var(--solaris-spacing-half)}:host([data-size=sm]) .solaris-option__label-text{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm)}:host([data-size=sm]){--solaris-option-min-height: 32px;--solaris-option-gap: var(--solaris-spacing-1);--solaris-option-padding-x: var(--solaris-spacing-3);--solaris-option-indicator-size: var(--solaris-spacing-4);--solaris-option-meta-font-size: var(--solaris-font-size-xs);--solaris-option-description-font-size: var(--solaris-font-size-xs)}:host([data-size=md]) .solaris-option__label-text{font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-md)}:host([data-size=lg]) .solaris-option__label-text{font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-lg)}:host([data-size=lg]){--solaris-option-min-height: 48px;--solaris-option-gap: var(--solaris-spacing-3);--solaris-option-radius: var(--solaris-radius-md);--solaris-option-padding-y: var(--solaris-spacing-3);--solaris-option-padding-x: var(--solaris-spacing-5);--solaris-option-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]){--solaris-option-min-height: auto;--solaris-option-gap: var(--solaris-spacing-2);--solaris-option-padding-x: var(--solaris-spacing-3);--solaris-option-padding-y: var(--solaris-density-padding-sm)}:host([data-density=normal]){--solaris-option-min-height: auto;--solaris-option-gap: var(--solaris-spacing-3);--solaris-option-padding-x: var(--solaris-spacing-4);--solaris-option-padding-y: var(--solaris-density-padding-sm)}:host([data-density=comfortable]){--solaris-option-gap: var(--solaris-spacing-4)}:host(:not([data-disabled])) .solaris-option:hover{background:var(--solaris-option-hover-background)}:host(:not([data-disabled])) .solaris-option:active{background:var(--solaris-option-active-background)}:host([data-selected]:not([data-disabled])) .solaris-option{color:var(--solaris-option-selected-color);background:var(--solaris-option-selected-background)}:host([data-active]:not([data-disabled])) .solaris-option{background:var(--solaris-option-active-background)}:host([data-active][data-selected]:not([data-disabled])) .solaris-option{color:var(--solaris-option-selected-color);background:var(--solaris-option-selected-background)}:host([data-highlighted]) .solaris-option{outline-offset:calc(-1 * var(--solaris-spacing-1) / 2);outline:var(--solaris-border-width-sm) solid var(--solaris-primary-base)}:host([data-disabled]) .solaris-option{cursor:not-allowed;opacity:var(--solaris-option-disabled-opacity)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3086
3106
|
}
|
|
3087
3107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOptionComponent, decorators: [{
|
|
3088
3108
|
type: Component,
|
|
@@ -3213,6 +3233,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3213
3233
|
}]
|
|
3214
3234
|
}] });
|
|
3215
3235
|
|
|
3236
|
+
class SolarisFormLabelActionDirective {
|
|
3237
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormLabelActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3238
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisFormLabelActionDirective, isStandalone: true, selector: "[solaris-form-label-action]", host: { classAttribute: "solaris-form-label-action" }, ngImport: i0 });
|
|
3239
|
+
}
|
|
3240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormLabelActionDirective, decorators: [{
|
|
3241
|
+
type: Directive,
|
|
3242
|
+
args: [{
|
|
3243
|
+
selector: '[solaris-form-label-action]',
|
|
3244
|
+
standalone: true,
|
|
3245
|
+
host: {
|
|
3246
|
+
class: 'solaris-form-label-action',
|
|
3247
|
+
},
|
|
3248
|
+
}]
|
|
3249
|
+
}] });
|
|
3250
|
+
|
|
3216
3251
|
class SolarisFormControl {
|
|
3217
3252
|
}
|
|
3218
3253
|
|
|
@@ -3316,6 +3351,7 @@ class SolarisFormFieldComponent {
|
|
|
3316
3351
|
projectedError = contentChild(SolarisFormErrorComponent, ...(ngDevMode ? [{ debugName: "projectedError" }] : /* istanbul ignore next */ []));
|
|
3317
3352
|
projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
|
|
3318
3353
|
projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
|
|
3354
|
+
projectedLabelAction = contentChild(SolarisFormLabelActionDirective, ...(ngDevMode ? [{ debugName: "projectedLabelAction" }] : /* istanbul ignore next */ []));
|
|
3319
3355
|
formControl = contentChild(SolarisFormControl, ...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
|
|
3320
3356
|
formControlDirective = contentChild(FormControlDirective, ...(ngDevMode ? [{ debugName: "formControlDirective" }] : /* istanbul ignore next */ []));
|
|
3321
3357
|
formControlName = contentChild(FormControlName, ...(ngDevMode ? [{ debugName: "formControlName" }] : /* istanbul ignore next */ []));
|
|
@@ -3362,6 +3398,7 @@ class SolarisFormFieldComponent {
|
|
|
3362
3398
|
hasProjectedLabel = computed(() => !!this.projectedLabel(), ...(ngDevMode ? [{ debugName: "hasProjectedLabel" }] : /* istanbul ignore next */ []));
|
|
3363
3399
|
hasProjectedHint = computed(() => !!this.projectedHint(), ...(ngDevMode ? [{ debugName: "hasProjectedHint" }] : /* istanbul ignore next */ []));
|
|
3364
3400
|
hasProjectedError = computed(() => !!this.projectedError(), ...(ngDevMode ? [{ debugName: "hasProjectedError" }] : /* istanbul ignore next */ []));
|
|
3401
|
+
hasProjectedLabelAction = computed(() => !!this.projectedLabelAction(), ...(ngDevMode ? [{ debugName: "hasProjectedLabelAction" }] : /* istanbul ignore next */ []));
|
|
3365
3402
|
hasPrefixInput = input(undefined, { ...(ngDevMode ? { debugName: "hasPrefixInput" } : /* istanbul ignore next */ {}), alias: 'hasPrefix' });
|
|
3366
3403
|
hasSuffixInput = input(undefined, { ...(ngDevMode ? { debugName: "hasSuffixInput" } : /* istanbul ignore next */ {}), alias: 'hasSuffix' });
|
|
3367
3404
|
prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
@@ -3676,7 +3713,7 @@ class SolarisFormFieldComponent {
|
|
|
3676
3713
|
}
|
|
3677
3714
|
}
|
|
3678
3715
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3679
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisFormFieldComponent, isStandalone: true, selector: "solaris-form-field", inputs: { hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, requiredLabel: { classPropertyName: "requiredLabel", publicName: "requiredLabel", isSignal: true, isRequired: false, transformFunction: null }, optionalLabelKey: { classPropertyName: "optionalLabelKey", publicName: "optionalLabelKey", isSignal: true, isRequired: false, transformFunction: null }, requiredLabelKey: { classPropertyName: "requiredLabelKey", publicName: "requiredLabelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", 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 }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixInput: { classPropertyName: "hasPrefixInput", publicName: "hasPrefix", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixInput: { classPropertyName: "hasSuffixInput", publicName: "hasSuffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-radius": "radius()", "attr.data-bwignore": "\"true\"", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-control-type": "controlType()", "attr.data-control-resize": "controlResize()", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.data-focused": "isFocused() ? \"\" : null", "attr.data-has-prefix": "effectiveHasPrefix() ? \"\" : null", "attr.data-has-suffix": "effectiveHasSuffix() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null" } }, queries: [{ propertyName: "projectedLabel", first: true, predicate: SolarisFormLabelComponent, descendants: true, isSignal: true }, { propertyName: "projectedHint", first: true, predicate: SolarisFormHintComponent, descendants: true, isSignal: true }, { propertyName: "projectedError", first: true, predicate: SolarisFormErrorComponent, descendants: true, isSignal: true }, { propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }, { propertyName: "formControl", first: true, predicate: SolarisFormControl, descendants: true, isSignal: true }, { propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true, isSignal: true }, { propertyName: "formControlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }, { propertyName: "ngModelDir", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: "@if (labelText() || hasProjectedLabel()) {\n <div class=\"solaris-form-field__label-row\">\n @if (hasProjectedLabel()) {\n <ng-content select=\"solaris-form-label\" />\n } @else if (labelText()) {\n <label\n class=\"solaris-form-field__label\"\n [id]=\"labelId\"\n [for]=\"controlId ?? undefined\"\n >\n {{ labelText() }}\n </label>\n }\n @if (optional()) {\n <span\n class=\"solaris-form-field__optional-marker\"\n [attr.aria-label]=\"optionalLabelText()\"\n >\n {{ optionalLabelText() }}\n </span>\n }\n @if (showCharacterCounter()) {\n <span\n class=\"solaris-form-field__character-counter\"\n aria-live=\"polite\"\n [attr.aria-label]=\"characterCounterText()\"\n [attr.data-severity]=\"characterCounterSeverity()\"\n >\n {{ characterCounterText() }}\n </span>\n }\n </div>\n}\n\n<div class=\"solaris-form-field__control-wrapper\">\n <span\n class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n [attr.data-empty]=\"effectiveHasPrefix() ? null : ''\"\n >\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-prefix]\" />\n </span>\n\n <div class=\"solaris-form-field__control\">\n <ng-content />\n </div>\n\n <span\n class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n [attr.data-empty]=\"effectiveHasSuffix() ? null : ''\"\n >\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-suffix]\" />\n </span>\n</div>\n\n@if (showError() || showHint()) {\n <div class=\"solaris-form-field__message-row\">\n @if (showError()) {\n <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n @if (hasProjectedError()) {\n <ng-content select=\"solaris-form-error\" />\n } @else {\n {{ errorText() }}\n }\n </div>\n } @else if (showHint()) {\n <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n @if (hasProjectedHint()) {\n <ng-content select=\"solaris-form-hint\" />\n } @else {\n {{ hintText() }}\n }\n </div>\n }\n </div>\n}\n", styles: [":host{--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-control-color: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium);--solaris-form-field-control-border-width: var(--solaris-border-width-sm);display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label,::ng-deep .solaris-form-label{cursor:pointer;display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight)}.solaris-form-field__optional-marker{white-space:nowrap;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size)}.solaris-form-field__character-counter{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{display:flex;position:relative;align-items:stretch;box-sizing:border-box;gap:var(--solaris-form-field-control-gap);border-style:var(--solaris-border-style-default);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);border-width:var(--solaris-form-field-control-border-width);border-color:var(--solaris-form-field-control-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{flex:1;min-width:0;display:flex;align-items:center}.solaris-form-field__affix{min-width:0;display:flex;flex:0 0 auto;line-height:var(--solaris-line-height-none);cursor:default;align-self:stretch;align-items:center;box-sizing:border-box;justify-content:center}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{color:var(--solaris-form-field-prefix-color);inline-size:var(--solaris-form-field-control-height);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{border:0;flex:0 0 auto;color:inherit;line-height:var(--solaris-line-height-none);cursor:inherit;align-self:auto;align-items:center;display:inline-flex;justify-content:center}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{flex:0 0 auto;color:inherit;block-size:1em;inline-size:1em;font-size:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:128px;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{width:100%;min-width:0;resize:none;display:block}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;resize:both;min-width:128px;overflow:hidden;align-items:stretch;min-height:var(--solaris-form-field-control-height)}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{min-width:0;min-height:0;overflow:hidden;align-items:stretch}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{width:100%;height:100%;min-width:0;resize:none;min-height:0;display:block;flex:1 1 auto}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-density=compact]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-error-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-sm);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-error-font-size: var(--solaris-font-size-md);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-md);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );cursor:not-allowed;opacity:var(--solaris-form-field-disabled-opacity)}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3716
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisFormFieldComponent, isStandalone: true, selector: "solaris-form-field", inputs: { hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, requiredLabel: { classPropertyName: "requiredLabel", publicName: "requiredLabel", isSignal: true, isRequired: false, transformFunction: null }, optionalLabelKey: { classPropertyName: "optionalLabelKey", publicName: "optionalLabelKey", isSignal: true, isRequired: false, transformFunction: null }, requiredLabelKey: { classPropertyName: "requiredLabelKey", publicName: "requiredLabelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", 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 }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixInput: { classPropertyName: "hasPrefixInput", publicName: "hasPrefix", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixInput: { classPropertyName: "hasSuffixInput", publicName: "hasSuffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-radius": "radius()", "attr.data-bwignore": "\"true\"", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-control-type": "controlType()", "attr.data-control-resize": "controlResize()", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.data-focused": "isFocused() ? \"\" : null", "attr.data-has-prefix": "effectiveHasPrefix() ? \"\" : null", "attr.data-has-suffix": "effectiveHasSuffix() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null" } }, queries: [{ propertyName: "projectedLabel", first: true, predicate: SolarisFormLabelComponent, descendants: true, isSignal: true }, { propertyName: "projectedHint", first: true, predicate: SolarisFormHintComponent, descendants: true, isSignal: true }, { propertyName: "projectedError", first: true, predicate: SolarisFormErrorComponent, descendants: true, isSignal: true }, { propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }, { propertyName: "projectedLabelAction", first: true, predicate: SolarisFormLabelActionDirective, descendants: true, isSignal: true }, { propertyName: "formControl", first: true, predicate: SolarisFormControl, descendants: true, isSignal: true }, { propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true, isSignal: true }, { propertyName: "formControlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }, { propertyName: "ngModelDir", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"solaris-form-field__label-row\"\n [class.solaris-form-field__label-row--empty]=\"\n !labelText() && !hasProjectedLabel() && !hasProjectedLabelAction()\n \"\n>\n @if (hasProjectedLabel()) {\n <ng-content select=\"solaris-form-label\" />\n } @else if (labelText()) {\n <label\n class=\"solaris-form-field__label\"\n [id]=\"labelId\"\n [for]=\"controlId ?? undefined\"\n >\n {{ labelText() }}\n </label>\n }\n @if (optional()) {\n <span\n class=\"solaris-form-field__optional-marker\"\n [attr.aria-label]=\"optionalLabelText()\"\n >\n {{ optionalLabelText() }}\n </span>\n }\n @if (showCharacterCounter()) {\n <span\n class=\"solaris-form-field__character-counter\"\n aria-live=\"polite\"\n [attr.aria-label]=\"characterCounterText()\"\n [attr.data-severity]=\"characterCounterSeverity()\"\n >\n {{ characterCounterText() }}\n </span>\n }\n <ng-content select=\"[solaris-form-label-action]\" />\n</div>\n\n<div class=\"solaris-form-field__control-wrapper\">\n <span\n class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n [attr.data-empty]=\"effectiveHasPrefix() ? null : ''\"\n >\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-prefix]\" />\n </span>\n\n <div class=\"solaris-form-field__control\">\n <ng-content />\n </div>\n\n <span\n class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n [attr.data-empty]=\"effectiveHasSuffix() ? null : ''\"\n >\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-suffix]\" />\n </span>\n</div>\n\n@if (showError() || showHint()) {\n <div class=\"solaris-form-field__message-row\">\n @if (showError()) {\n <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n @if (hasProjectedError()) {\n <ng-content select=\"solaris-form-error\" />\n } @else {\n {{ errorText() }}\n }\n </div>\n } @else if (showHint()) {\n <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n @if (hasProjectedHint()) {\n <ng-content select=\"solaris-form-hint\" />\n } @else {\n {{ hintText() }}\n }\n </div>\n }\n </div>\n}\n", styles: [":host{--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-control-color: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium);--solaris-form-field-control-border-width: var(--solaris-border-width-sm);display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label-row--empty{display:none}.solaris-form-field__label,::ng-deep .solaris-form-label{cursor:pointer;display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight)}.solaris-form-field__optional-marker{white-space:nowrap;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size)}:host ::ng-deep .solaris-form-label-action{margin-inline-start:auto;white-space:nowrap}.solaris-form-field__character-counter{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{display:flex;position:relative;align-items:stretch;box-sizing:border-box;gap:var(--solaris-form-field-control-gap);border-style:var(--solaris-border-style-default);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);border-width:var(--solaris-form-field-control-border-width);border-color:var(--solaris-form-field-control-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{flex:1;min-width:0;display:flex;align-items:center}.solaris-form-field__affix{min-width:0;display:flex;flex:0 0 auto;line-height:var(--solaris-line-height-none);cursor:default;align-self:stretch;align-items:center;box-sizing:border-box;justify-content:center}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{color:var(--solaris-form-field-prefix-color);inline-size:var(--solaris-form-field-control-height);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{border:0;flex:0 0 auto;color:inherit;line-height:var(--solaris-line-height-none);cursor:inherit;align-self:auto;align-items:center;display:inline-flex;justify-content:center}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{flex:0 0 auto;color:inherit;block-size:1em;inline-size:1em;font-size:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:128px;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{width:100%;min-width:0;resize:none;display:block}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;resize:both;min-width:128px;overflow:hidden;align-items:stretch;min-height:var(--solaris-form-field-control-height)}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{min-width:0;min-height:0;overflow:hidden;align-items:stretch}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{width:100%;height:100%;min-width:0;resize:none;min-height:0;display:block;flex:1 1 auto}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-density=compact]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-error-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-sm);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-error-font-size: var(--solaris-font-size-md);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-md);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );cursor:not-allowed;opacity:var(--solaris-form-field-disabled-opacity)}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3680
3717
|
}
|
|
3681
3718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, decorators: [{
|
|
3682
3719
|
type: Component,
|
|
@@ -3697,8 +3734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3697
3734
|
'[attr.data-has-suffix]': 'effectiveHasSuffix() ? "" : null',
|
|
3698
3735
|
'[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
|
|
3699
3736
|
'[attr.data-readonly]': 'isEffectivelyReadonly() ? "" : null',
|
|
3700
|
-
}, template: "@if (labelText() || hasProjectedLabel()) {\n <div class=\"solaris-form-field__label-row\">\n @if (hasProjectedLabel()) {\n <ng-content select=\"solaris-form-label\" />\n } @else if (labelText()) {\n <label\n class=\"solaris-form-field__label\"\n [id]=\"labelId\"\n [for]=\"controlId ?? undefined\"\n >\n {{ labelText() }}\n </label>\n }\n @if (optional()) {\n <span\n class=\"solaris-form-field__optional-marker\"\n [attr.aria-label]=\"optionalLabelText()\"\n >\n {{ optionalLabelText() }}\n </span>\n }\n @if (showCharacterCounter()) {\n <span\n class=\"solaris-form-field__character-counter\"\n aria-live=\"polite\"\n [attr.aria-label]=\"characterCounterText()\"\n [attr.data-severity]=\"characterCounterSeverity()\"\n >\n {{ characterCounterText() }}\n </span>\n }\n </div>\n}\n\n<div class=\"solaris-form-field__control-wrapper\">\n <span\n class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n [attr.data-empty]=\"effectiveHasPrefix() ? null : ''\"\n >\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-prefix]\" />\n </span>\n\n <div class=\"solaris-form-field__control\">\n <ng-content />\n </div>\n\n <span\n class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n [attr.data-empty]=\"effectiveHasSuffix() ? null : ''\"\n >\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-suffix]\" />\n </span>\n</div>\n\n@if (showError() || showHint()) {\n <div class=\"solaris-form-field__message-row\">\n @if (showError()) {\n <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n @if (hasProjectedError()) {\n <ng-content select=\"solaris-form-error\" />\n } @else {\n {{ errorText() }}\n }\n </div>\n } @else if (showHint()) {\n <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n @if (hasProjectedHint()) {\n <ng-content select=\"solaris-form-hint\" />\n } @else {\n {{ hintText() }}\n }\n </div>\n }\n </div>\n}\n", styles: [":host{--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-control-color: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium);--solaris-form-field-control-border-width: var(--solaris-border-width-sm);display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label,::ng-deep .solaris-form-label{cursor:pointer;display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight)}.solaris-form-field__optional-marker{white-space:nowrap;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size)}.solaris-form-field__character-counter{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{display:flex;position:relative;align-items:stretch;box-sizing:border-box;gap:var(--solaris-form-field-control-gap);border-style:var(--solaris-border-style-default);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);border-width:var(--solaris-form-field-control-border-width);border-color:var(--solaris-form-field-control-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{flex:1;min-width:0;display:flex;align-items:center}.solaris-form-field__affix{min-width:0;display:flex;flex:0 0 auto;line-height:var(--solaris-line-height-none);cursor:default;align-self:stretch;align-items:center;box-sizing:border-box;justify-content:center}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{color:var(--solaris-form-field-prefix-color);inline-size:var(--solaris-form-field-control-height);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{border:0;flex:0 0 auto;color:inherit;line-height:var(--solaris-line-height-none);cursor:inherit;align-self:auto;align-items:center;display:inline-flex;justify-content:center}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{flex:0 0 auto;color:inherit;block-size:1em;inline-size:1em;font-size:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:128px;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{width:100%;min-width:0;resize:none;display:block}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;resize:both;min-width:128px;overflow:hidden;align-items:stretch;min-height:var(--solaris-form-field-control-height)}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{min-width:0;min-height:0;overflow:hidden;align-items:stretch}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{width:100%;height:100%;min-width:0;resize:none;min-height:0;display:block;flex:1 1 auto}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-density=compact]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-error-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-sm);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-error-font-size: var(--solaris-font-size-md);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-md);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );cursor:not-allowed;opacity:var(--solaris-form-field-disabled-opacity)}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"] }]
|
|
3701
|
-
}], ctorParameters: () => [], propDecorators: { hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], requiredLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabel", required: false }] }], optionalLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabelKey", required: false }] }], requiredLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], projectedLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormLabelComponent), { isSignal: true }] }], projectedHint: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormHintComponent), { isSignal: true }] }], projectedError: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormErrorComponent), { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], formControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormControl), { isSignal: true }] }], formControlDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlDirective), { isSignal: true }] }], formControlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }], ngModelDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgModel), { isSignal: true }] }], hasPrefixInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPrefix", required: false }] }], hasSuffixInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSuffix", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
|
|
3737
|
+
}, template: "<div\n class=\"solaris-form-field__label-row\"\n [class.solaris-form-field__label-row--empty]=\"\n !labelText() && !hasProjectedLabel() && !hasProjectedLabelAction()\n \"\n>\n @if (hasProjectedLabel()) {\n <ng-content select=\"solaris-form-label\" />\n } @else if (labelText()) {\n <label\n class=\"solaris-form-field__label\"\n [id]=\"labelId\"\n [for]=\"controlId ?? undefined\"\n >\n {{ labelText() }}\n </label>\n }\n @if (optional()) {\n <span\n class=\"solaris-form-field__optional-marker\"\n [attr.aria-label]=\"optionalLabelText()\"\n >\n {{ optionalLabelText() }}\n </span>\n }\n @if (showCharacterCounter()) {\n <span\n class=\"solaris-form-field__character-counter\"\n aria-live=\"polite\"\n [attr.aria-label]=\"characterCounterText()\"\n [attr.data-severity]=\"characterCounterSeverity()\"\n >\n {{ characterCounterText() }}\n </span>\n }\n <ng-content select=\"[solaris-form-label-action]\" />\n</div>\n\n<div class=\"solaris-form-field__control-wrapper\">\n <span\n class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n [attr.data-empty]=\"effectiveHasPrefix() ? null : ''\"\n >\n @if (prefix(); as prefixName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-prefix]\" />\n </span>\n\n <div class=\"solaris-form-field__control\">\n <ng-content />\n </div>\n\n <span\n class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n [attr.data-empty]=\"effectiveHasSuffix() ? null : ''\"\n >\n @if (suffix(); as suffixName) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-suffix]\" />\n </span>\n</div>\n\n@if (showError() || showHint()) {\n <div class=\"solaris-form-field__message-row\">\n @if (showError()) {\n <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n @if (hasProjectedError()) {\n <ng-content select=\"solaris-form-error\" />\n } @else {\n {{ errorText() }}\n }\n </div>\n } @else if (showHint()) {\n <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n @if (hasProjectedHint()) {\n <ng-content select=\"solaris-form-hint\" />\n } @else {\n {{ hintText() }}\n }\n </div>\n }\n </div>\n}\n", styles: [":host{--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-control-color: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium);--solaris-form-field-control-border-width: var(--solaris-border-width-sm);display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label-row--empty{display:none}.solaris-form-field__label,::ng-deep .solaris-form-label{cursor:pointer;display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight)}.solaris-form-field__optional-marker{white-space:nowrap;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size)}:host ::ng-deep .solaris-form-label-action{margin-inline-start:auto;white-space:nowrap}.solaris-form-field__character-counter{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{display:flex;position:relative;align-items:stretch;box-sizing:border-box;gap:var(--solaris-form-field-control-gap);border-style:var(--solaris-border-style-default);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);border-width:var(--solaris-form-field-control-border-width);border-color:var(--solaris-form-field-control-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{flex:1;min-width:0;display:flex;align-items:center}.solaris-form-field__affix{min-width:0;display:flex;flex:0 0 auto;line-height:var(--solaris-line-height-none);cursor:default;align-self:stretch;align-items:center;box-sizing:border-box;justify-content:center}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{color:var(--solaris-form-field-prefix-color);inline-size:var(--solaris-form-field-control-height);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{border:0;flex:0 0 auto;color:inherit;line-height:var(--solaris-line-height-none);cursor:inherit;align-self:auto;align-items:center;display:inline-flex;justify-content:center}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{flex:0 0 auto;color:inherit;block-size:1em;inline-size:1em;font-size:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:128px;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{width:100%;min-width:0;resize:none;display:block}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;resize:both;min-width:128px;overflow:hidden;align-items:stretch;min-height:var(--solaris-form-field-control-height)}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{min-width:0;min-height:0;overflow:hidden;align-items:stretch}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{width:100%;height:100%;min-width:0;resize:none;min-height:0;display:block;flex:1 1 auto}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-density=compact]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-error-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-sm);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-error-font-size: var(--solaris-font-size-md);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-md);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );cursor:not-allowed;opacity:var(--solaris-form-field-disabled-opacity)}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"] }]
|
|
3738
|
+
}], ctorParameters: () => [], propDecorators: { hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], requiredLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabel", required: false }] }], optionalLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabelKey", required: false }] }], requiredLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], projectedLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormLabelComponent), { isSignal: true }] }], projectedHint: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormHintComponent), { isSignal: true }] }], projectedError: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormErrorComponent), { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], projectedLabelAction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormLabelActionDirective), { isSignal: true }] }], formControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormControl), { isSignal: true }] }], formControlDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlDirective), { isSignal: true }] }], formControlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }], ngModelDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgModel), { isSignal: true }] }], hasPrefixInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPrefix", required: false }] }], hasSuffixInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSuffix", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
|
|
3702
3739
|
|
|
3703
3740
|
class SolarisFormFieldTriggerDirective {
|
|
3704
3741
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -4961,7 +4998,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4961
4998
|
provide: SolarisFormControl,
|
|
4962
4999
|
useExisting: forwardRef(() => SolarisSelectComponent),
|
|
4963
5000
|
},
|
|
4964
|
-
], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n #formFieldRef\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [hasPrefix]=\"!!prefix()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"panelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-prefix]\" />\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n @if (displayText()) {\n <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n } @else {\n <span class=\"solaris-select__placeholder\">{{\n placeholderText()\n }}</span>\n }\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n @if (canClear()) {\n <button\n type=\"button\"\n class=\"solaris-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n <solaris-icon\n class=\"solaris-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n </span>\n </div>\n\n <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-select__panel\"\n role=\"listbox\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (loading()) {\n <div class=\"solaris-select__loading\">\n <span class=\"solaris-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-select__no-results\">\n <span class=\"solaris-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-select__empty\">\n <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-placeholder-color: var(--solaris-text-muted);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5001
|
+
], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n #formFieldRef\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [hasPrefix]=\"!!prefix()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"panelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n @if (displayText()) {\n <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n } @else {\n <span class=\"solaris-select__placeholder\">{{\n placeholderText()\n }}</span>\n }\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n @if (canClear()) {\n <button\n type=\"button\"\n class=\"solaris-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n <solaris-icon\n class=\"solaris-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n </span>\n </div>\n\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-select__panel\"\n role=\"listbox\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (loading()) {\n <div class=\"solaris-select__loading\">\n <span class=\"solaris-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-select__no-results\">\n <span class=\"solaris-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-select__empty\">\n <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-placeholder-color: var(--solaris-text-muted);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4965
5002
|
}
|
|
4966
5003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, decorators: [{
|
|
4967
5004
|
type: Component,
|
|
@@ -4988,7 +5025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4988
5025
|
'[attr.data-open]': 'panelOpen() ? "" : null',
|
|
4989
5026
|
'[attr.aria-label]': 'ariaLabelText() ?? null',
|
|
4990
5027
|
'[attr.data-has-value]': 'hasValue() ? "" : null',
|
|
4991
|
-
}, template: "<solaris-form-field\n #formFieldRef\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [hasPrefix]=\"!!prefix()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"panelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content
|
|
5028
|
+
}, template: "<solaris-form-field\n #formFieldRef\n [class.solaris-select--panel-open]=\"panelOpen()\"\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [hasPrefix]=\"!!prefix()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"panelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n\n <div\n #triggerEl\n class=\"solaris-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"solaris-select__value\">\n @if (displayText()) {\n <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n } @else {\n <span class=\"solaris-select__placeholder\">{{\n placeholderText()\n }}</span>\n }\n </span>\n }\n\n <span class=\"solaris-select__actions\">\n @if (canClear()) {\n <button\n type=\"button\"\n class=\"solaris-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n <solaris-icon\n class=\"solaris-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n </span>\n </div>\n\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-select__panel\"\n role=\"listbox\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (loading()) {\n <div class=\"solaris-select__loading\">\n <span class=\"solaris-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-select__no-results\">\n <span class=\"solaris-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-select__empty\">\n <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-placeholder-color: var(--solaris-text-muted);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"] }]
|
|
4992
5029
|
}], ctorParameters: () => [], propDecorators: { popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SolarisPopoverTriggerDirective), { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], triggerElement: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], formFieldElement: [{ type: i0.ViewChild, args: ['formFieldRef', { isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionComponent), { ...{
|
|
4993
5030
|
descendants: true,
|
|
4994
5031
|
}, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
|
|
@@ -5006,7 +5043,7 @@ class SolarisTooltipPanelComponent {
|
|
|
5006
5043
|
this.cdr.markForCheck();
|
|
5007
5044
|
}
|
|
5008
5045
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5009
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTooltipPanelComponent, isStandalone: true, selector: "solaris-tooltip-panel", host: { classAttribute: "solaris-tooltip-panel" }, ngImport: i0, template: "<div\n class=\"solaris-tooltip-panel__container\"\n [attr.data-appearance]=\"data.appearance\"\n [attr.data-size]=\"data.size\"\n [attr.data-radius]=\"data.radius\"\n [attr.data-placement]=\"data.placement\"\n [id]=\"data.panelId\"\n [style.max-width]=\"data.maxWidth\"\n>\n @if (data.arrow) {\n <div class=\"solaris-tooltip-panel__arrow {{ data.arrowClass }}\"></div>\n }\n\n <div class=\"solaris-tooltip-panel__content\">\n @if (data.icon) {\n <solaris-icon\n [name]=\"data.icon\"\n [decorative]=\"data.iconDecorative\"\n class=\"solaris-tooltip-panel__icon\"\n />\n }\n\n <div class=\"solaris-tooltip-panel__text\">\n @if (data.title) {\n <div class=\"solaris-tooltip-panel__title\">{{ data.title }}</div>\n }\n\n @if (data.body) {\n <div class=\"solaris-tooltip-panel__body\">{{ data.body }}</div>\n }\n\n @if (data.contentTemplate) {\n <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" />\n }\n </div>\n </div>\n\n @if (data.closeable) {\n <button\n class=\"solaris-tooltip-panel__close\"\n type=\"button\"\n (click)=\"data.close()\"\n attr.aria-label=\"{{ data.closeLabel }}\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n</div>\n", styles: [".solaris-tooltip-panel{--solaris-tooltip-max-width: 512px;--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-gap: var(--solaris-spacing-5);--solaris-tooltip-shadow: var(--solaris-shadow-sm);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-color: var(--solaris-text-default);--solaris-tooltip-icon-size: var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs);--solaris-tooltip-padding-block: var(--solaris-spacing-3);--solaris-tooltip-padding-inline: var(--solaris-spacing-5);--solaris-tooltip-background: var(--solaris-surface-raised);--solaris-tooltip-offset: var(--solaris-spacing-half);outline:none;display:block}.solaris-tooltip-panel__container{--solaris-tooltip-background: var(--solaris-surface-raised);display:flex;outline:none;overflow:visible;position:relative;word-break:normal;white-space:normal;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-tooltip-gap);color:var(--solaris-tooltip-color);box-shadow:var(--solaris-tooltip-shadow);line-height:var(--solaris-line-height-md);max-width:var(--solaris-tooltip-max-width);border-radius:var(--solaris-tooltip-radius);background:var(--solaris-tooltip-background);padding-block:var(--solaris-tooltip-padding-block);padding-inline:var(--solaris-tooltip-padding-inline);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__arrow{--solaris-tooltip-arrow-outer-size: calc( var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-border-width) + var(--solaris-tooltip-border-width) );width:0;height:0;position:absolute;pointer-events:none}.solaris-tooltip-panel__arrow:before,.solaris-tooltip-panel__arrow:after{width:0;height:0;content:\"\";position:absolute;border-style:var(--solaris-border-style-default)}.solaris-tooltip-arrow--bottom{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--bottom:before,.solaris-tooltip-arrow--bottom:after{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--bottom:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--bottom:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-arrow--top{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--top:before,.solaris-tooltip-arrow--top:after{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--top:before{border-width:0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--top:after{border-width:0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--right{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--right:before,.solaris-tooltip-arrow--right:after{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--right:before{border-width:var(--solaris-tooltip-arrow-outer-size) 0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--right:after{border-width:var(--solaris-tooltip-arrow-size) 0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--left{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--left:before,.solaris-tooltip-arrow--left:after{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--left:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:transparent var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--left:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:transparent var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-panel__container[data-placement=top-start] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-start] .solaris-tooltip-arrow--top{left:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=top-end] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-end] .solaris-tooltip-arrow--top{left:auto;right:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-start] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-start] .solaris-tooltip-arrow--left{top:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-end] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-end] .solaris-tooltip-arrow--left{top:auto;bottom:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__content{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-tooltip-gap)}.solaris-tooltip-panel__icon{flex-shrink:0;display:inline-flex;margin-top:var(--solaris-tooltip-offset);font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__text{min-width:0;display:flex;gap:var(--solaris-tooltip-offset);flex-direction:column}.solaris-tooltip-panel__title{overflow:hidden;font-weight:var(--solaris-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.solaris-tooltip-panel__body{word-break:normal;white-space:normal}.solaris-tooltip-panel__close{opacity:var(--solaris-opacity-70);border:none;flex-shrink:0;color:inherit;cursor:pointer;background:none;padding:0;border-radius:50%;align-items:center;display:inline-flex;margin-top:var(--solaris-tooltip-offset);justify-content:center;font-size:var(--solaris-tooltip-icon-size);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__close:hover,.solaris-tooltip-panel__close:focus-visible{opacity:1}.solaris-tooltip-panel__container[data-appearance=outline]{--solaris-tooltip-border-color: var(--solaris-border-default);--solaris-tooltip-border-width: var(--solaris-border-width-sm);background:var(--solaris-tooltip-background);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__container[data-appearance=surface]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;border:0;background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-appearance=inverse]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-background: var(--solaris-text-default);border:0;color:var(--solaris-surface-raised);background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-size=sm]{padding-block:var(--solaris-spacing-2);padding-inline:var(--solaris-spacing-5);font-size:var(--solaris-font-size-xs);--solaris-tooltip-arrow-size: var(--solaris-font-size-2xs)}.solaris-tooltip-panel__container[data-size=md]{padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-6);font-size:var(--solaris-font-size-sm);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs)}.solaris-tooltip-panel__container[data-size=lg]{padding-block:var(--solaris-spacing-4);padding-inline:var(--solaris-spacing-8);font-size:var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-md)}.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__close{font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-xl);width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-2xl);width:var(--solaris-font-size-2xl);height:var(--solaris-font-size-2xl)}.solaris-tooltip-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-tooltip-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-tooltip-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}@media(prefers-reduced-motion:reduce){.solaris-tooltip-panel__close{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5046
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTooltipPanelComponent, isStandalone: true, selector: "solaris-tooltip-panel", host: { classAttribute: "solaris-tooltip-panel" }, ngImport: i0, template: "<div\n class=\"solaris-tooltip-panel__container\"\n [attr.data-appearance]=\"data.appearance\"\n [attr.data-size]=\"data.size\"\n [attr.data-radius]=\"data.radius\"\n [attr.data-placement]=\"data.placement\"\n [id]=\"data.panelId\"\n [style.max-width]=\"data.maxWidth\"\n>\n @if (data.arrow) {\n <div class=\"solaris-tooltip-panel__arrow {{ data.arrowClass }}\"></div>\n }\n\n <div class=\"solaris-tooltip-panel__content\">\n @if (data.icon) {\n <solaris-icon\n [name]=\"data.icon\"\n [decorative]=\"data.iconDecorative\"\n class=\"solaris-tooltip-panel__icon\"\n />\n }\n\n <div class=\"solaris-tooltip-panel__text\">\n @if (data.title) {\n <div class=\"solaris-tooltip-panel__title\">{{ data.title }}</div>\n }\n\n @if (data.body) {\n <div class=\"solaris-tooltip-panel__body\">{{ data.body }}</div>\n }\n\n @if (data.contentTemplate) {\n <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" />\n }\n </div>\n </div>\n\n @if (data.closeable) {\n <button\n class=\"solaris-tooltip-panel__close\"\n type=\"button\"\n (click)=\"data.close()\"\n attr.aria-label=\"{{ data.closeLabel }}\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n</div>\n", styles: [".solaris-tooltip-panel{--solaris-tooltip-max-width: 512px;--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-gap: var(--solaris-spacing-5);--solaris-tooltip-shadow: var(--solaris-shadow-sm);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-color: var(--solaris-text-default);--solaris-tooltip-icon-size: var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs);--solaris-tooltip-padding-block: var(--solaris-spacing-3);--solaris-tooltip-padding-inline: var(--solaris-spacing-5);--solaris-tooltip-background: var(--solaris-surface-raised);--solaris-tooltip-offset: var(--solaris-spacing-half);outline:none;display:block}.solaris-tooltip-panel__container{--solaris-tooltip-background: var(--solaris-surface-raised);display:flex;outline:none;overflow:visible;position:relative;word-break:normal;white-space:normal;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-tooltip-gap);color:var(--solaris-tooltip-color);box-shadow:var(--solaris-tooltip-shadow);line-height:var(--solaris-line-height-md);max-width:var(--solaris-tooltip-max-width);border-radius:var(--solaris-tooltip-radius);background:var(--solaris-tooltip-background);padding-block:var(--solaris-tooltip-padding-block);padding-inline:var(--solaris-tooltip-padding-inline);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__arrow{--solaris-tooltip-arrow-outer-size: calc( var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-border-width) + var(--solaris-tooltip-border-width) );width:0;height:0;position:absolute;pointer-events:none}.solaris-tooltip-panel__arrow:before,.solaris-tooltip-panel__arrow:after{width:0;height:0;content:\"\";position:absolute;border-style:var(--solaris-border-style-default)}.solaris-tooltip-arrow--bottom{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--bottom:before,.solaris-tooltip-arrow--bottom:after{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--bottom:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--bottom:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-arrow--top{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--top:before,.solaris-tooltip-arrow--top:after{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--top:before{border-width:0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--top:after{border-width:0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--right{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--right:before,.solaris-tooltip-arrow--right:after{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--right:before{border-width:var(--solaris-tooltip-arrow-outer-size) 0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--right:after{border-width:var(--solaris-tooltip-arrow-size) 0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--left{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--left:before,.solaris-tooltip-arrow--left:after{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--left:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:transparent var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--left:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:transparent var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-panel__container[data-placement=top-start] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-start] .solaris-tooltip-arrow--top{left:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=top-end] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-end] .solaris-tooltip-arrow--top{left:auto;right:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-start] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-start] .solaris-tooltip-arrow--left{top:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-end] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-end] .solaris-tooltip-arrow--left{top:auto;bottom:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__content{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-tooltip-gap)}.solaris-tooltip-panel__icon{flex-shrink:0;display:inline-flex;margin-top:var(--solaris-tooltip-offset);font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__text{min-width:0;display:flex;gap:var(--solaris-tooltip-offset);flex-direction:column}.solaris-tooltip-panel__title{overflow:hidden;font-weight:var(--solaris-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.solaris-tooltip-panel__body{word-break:normal;white-space:normal}.solaris-tooltip-panel__close{opacity:var(--solaris-opacity-70);border:none;flex-shrink:0;color:inherit;cursor:pointer;background:none;padding:0;border-radius:50%;align-items:center;display:inline-flex;margin-top:var(--solaris-tooltip-offset);justify-content:center;font-size:var(--solaris-tooltip-icon-size);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__close:hover,.solaris-tooltip-panel__close:focus-visible{opacity:1}.solaris-tooltip-panel__container[data-appearance=outline]{--solaris-tooltip-border-color: var(--solaris-border-default);--solaris-tooltip-border-width: var(--solaris-border-width-sm);background:var(--solaris-tooltip-background);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__container[data-appearance=surface]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;border:0;background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-appearance=inverse]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-background: var(--solaris-text-default);border:0;color:var(--solaris-surface-raised);background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-size=sm]{padding-block:var(--solaris-spacing-2);padding-inline:var(--solaris-spacing-5);font-size:var(--solaris-font-size-xs);--solaris-tooltip-arrow-size: var(--solaris-font-size-2xs)}.solaris-tooltip-panel__container[data-size=md]{padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-6);font-size:var(--solaris-font-size-sm);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs)}.solaris-tooltip-panel__container[data-size=lg]{padding-block:var(--solaris-spacing-4);padding-inline:var(--solaris-spacing-8);font-size:var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-md)}.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__close{font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-xl);width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-2xl);width:var(--solaris-font-size-2xl);height:var(--solaris-font-size-2xl)}.solaris-tooltip-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-tooltip-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-tooltip-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}@media(prefers-reduced-motion:reduce){.solaris-tooltip-panel__close{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5010
5047
|
}
|
|
5011
5048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTooltipPanelComponent, decorators: [{
|
|
5012
5049
|
type: Component,
|
|
@@ -6647,7 +6684,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
6647
6684
|
provide: SolarisFormControl,
|
|
6648
6685
|
useExisting: forwardRef(() => SolarisMultiSelectComponent),
|
|
6649
6686
|
},
|
|
6650
|
-
], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, isSignal: true }, { propertyName: "triggerContentRef", first: true, predicate: ["triggerContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n #formFieldRef\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [hasPrefix]=\"!!prefix()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"panelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-prefix]\" />\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n @if (hasValue()) {\n @if (showCountOnly()) {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n } @else {\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (autoShowOverflow()) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n '+ ' +\n autoOverflowCount() +\n ' ' +\n selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n }\n </div>\n }\n }\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n @if (!hasValue() && !(searchable() && panelOpen())) {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (hasValue()) {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (overflowCount() > 0) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n }\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n } @else {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n @if (canClear()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n </span>\n </div>\n\n <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-surface-hover: var(--solaris-surface-subtle);--solaris-primary-muted: var(--solaris-primary-surface);--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }, { kind: "directive", type: SolarisTooltipDirective, selector: "[solaris-tooltip], [solarisTooltip], [solarisTooltipFor]", inputs: ["solarisTooltip", "solarisTooltipKey", "solarisTooltipFor", "solarisTooltipTitle", "solarisTooltipTitleKey", "solarisTooltipIcon", "solarisTooltipIconDecorative", "solarisTooltipTrigger", "solarisTooltipPlacement", "solarisTooltipOffset", "solarisTooltipDisabled", "solarisTooltipCloseable", "solarisTooltipCloseLabel", "solarisTooltipCloseLabelKey", "solarisTooltipShowDelay", "solarisTooltipHideDelay", "solarisTooltipAppearance", "solarisTooltipSize", "solarisTooltipRadius", "solarisTooltipMaxWidth", "solarisTooltipArrow", "solarisTooltipOpen"], outputs: ["solarisTooltipOpened", "solarisTooltipClosed", "solarisTooltipOpenChange"], exportAs: ["solarisTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6687
|
+
], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, isSignal: true }, { propertyName: "triggerContentRef", first: true, predicate: ["triggerContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n #formFieldRef\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [hasPrefix]=\"!!prefix()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"panelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n @if (hasValue()) {\n @if (showCountOnly()) {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n } @else {\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (autoShowOverflow()) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n '+ ' +\n autoOverflowCount() +\n ' ' +\n selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n }\n </div>\n }\n }\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n @if (!hasValue() && !(searchable() && panelOpen())) {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (hasValue()) {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (overflowCount() > 0) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n }\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n } @else {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n @if (canClear()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n </span>\n </div>\n\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-surface-hover: var(--solaris-surface-subtle);--solaris-primary-muted: var(--solaris-primary-surface);--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }, { kind: "directive", type: SolarisTooltipDirective, selector: "[solaris-tooltip], [solarisTooltip], [solarisTooltipFor]", inputs: ["solarisTooltip", "solarisTooltipKey", "solarisTooltipFor", "solarisTooltipTitle", "solarisTooltipTitleKey", "solarisTooltipIcon", "solarisTooltipIconDecorative", "solarisTooltipTrigger", "solarisTooltipPlacement", "solarisTooltipOffset", "solarisTooltipDisabled", "solarisTooltipCloseable", "solarisTooltipCloseLabel", "solarisTooltipCloseLabelKey", "solarisTooltipShowDelay", "solarisTooltipHideDelay", "solarisTooltipAppearance", "solarisTooltipSize", "solarisTooltipRadius", "solarisTooltipMaxWidth", "solarisTooltipArrow", "solarisTooltipOpen"], outputs: ["solarisTooltipOpened", "solarisTooltipClosed", "solarisTooltipOpenChange"], exportAs: ["solarisTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6651
6688
|
}
|
|
6652
6689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMultiSelectComponent, decorators: [{
|
|
6653
6690
|
type: Component,
|
|
@@ -6675,7 +6712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6675
6712
|
'[attr.data-open]': 'panelOpen() ? "" : null',
|
|
6676
6713
|
'[attr.aria-label]': 'ariaLabelText() ?? null',
|
|
6677
6714
|
'[attr.data-has-value]': 'hasValue() ? "" : null',
|
|
6678
|
-
}, template: "<solaris-form-field\n #formFieldRef\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [hasPrefix]=\"!!prefix()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"panelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content select=\"[solaris-form-prefix]\" />\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n @if (hasValue()) {\n @if (showCountOnly()) {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n } @else {\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (autoShowOverflow()) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n '+ ' +\n autoOverflowCount() +\n ' ' +\n selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n }\n </div>\n }\n }\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n @if (!hasValue() && !(searchable() && panelOpen())) {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (hasValue()) {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (overflowCount() > 0) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n }\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n } @else {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n @if (canClear()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n </span>\n </div>\n\n <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-surface-hover: var(--solaris-surface-subtle);--solaris-primary-muted: var(--solaris-primary-surface);--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"] }]
|
|
6715
|
+
}, template: "<solaris-form-field\n #formFieldRef\n [control]=\"this\"\n [label]=\"labelText()\"\n [hint]=\"hintText()\"\n [error]=\"errorText()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [radius]=\"radius()\"\n [invalid]=\"isEffectivelyInvalid()\"\n [required]=\"requiredInput()\"\n [hasPrefix]=\"!!prefix()\"\n solaris-popover-trigger\n [solarisPopoverDisabled]=\"!canOpen()\"\n [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n [solarisPopoverAppearance]=\"popoverAppearance()\"\n [solarisPopoverPlacement]=\"'bottom'\"\n [solarisPopoverAlign]=\"'start'\"\n [solarisPopoverOffset]=\"0\"\n [solarisPopoverPadding]=\"'none'\"\n [solarisPopoverRadius]=\"radius()\"\n [solarisPopoverTopConnected]=\"true\"\n [solarisPopoverMinWidth]=\"panelMinWidth()\"\n [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n [solarisPopoverScrollStrategy]=\"'reposition'\"\n [solarisPopoverCloseOnEscape]=\"false\"\n [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n @if (prefix(); as iconName) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n\n <div\n #triggerEl\n class=\"solaris-multi-select__trigger\"\n [id]=\"elementId() + '--trigger'\"\n solaris-form-field-trigger\n role=\"combobox\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur()\"\n >\n <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n @if (displayMode() === 'auto') {\n @if (hasValue()) {\n @if (showCountOnly()) {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n } @else {\n <div\n class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n >\n @for (opt of autoVisibleChips(); track opt) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (autoShowOverflow()) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [solarisTooltip]=\"autoOverflowTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n '+ ' +\n autoOverflowCount() +\n ' ' +\n selectedLabels().join(', ')\n \"\n >+{{ autoOverflowCount() }}</span\n >\n }\n </div>\n }\n }\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n }\n @if (!hasValue() && !(searchable() && panelOpen())) {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n } @else {\n @if (searchable() && panelOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"solaris-multi-select__search-input\"\n [attr.placeholder]=\"searchPlaceholderText()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n (click)=\"$event.stopPropagation()\"\n role=\"searchbox\"\n autocomplete=\"off\"\n />\n } @else {\n @if (hasValue()) {\n @if (displayMode() === 'chips') {\n <div class=\"solaris-multi-select__chips\">\n @for (\n opt of selectedOptions().slice(0, maxVisibleChips());\n track opt\n ) {\n <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n <span class=\"solaris-multi-select__chip-label\">{{\n getOptionDisplayLabel(opt)\n }}</span>\n @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__chip-remove\"\n [attr.aria-label]=\"removeChipAriaLabel()\"\n (click)=\"removeChip(opt, $event)\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </span>\n }\n @if (overflowCount() > 0) {\n <span\n class=\"solaris-multi-select__chip-overflow\"\n [attr.aria-label]=\"\n '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n \"\n >\n {{ overflowText() }}\n </span>\n }\n </div>\n } @else if (displayMode() === 'comma') {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__value-text\">{{\n commaText()\n }}</span>\n </span>\n } @else {\n <span\n class=\"solaris-multi-select__chip\"\n [solarisTooltip]=\"countTooltipText()\"\n [solarisTooltipTrigger]=\"'hover'\"\n tabindex=\"0\"\n >\n <span class=\"solaris-multi-select__chip-label\">{{\n summaryText()\n }}</span>\n </span>\n }\n } @else {\n <span class=\"solaris-multi-select__value\">\n <span class=\"solaris-multi-select__placeholder\">{{\n placeholderText()\n }}</span>\n </span>\n }\n }\n }\n </div>\n\n <span class=\"solaris-multi-select__actions\">\n @if (canClear()) {\n <button\n type=\"button\"\n class=\"solaris-multi-select__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n\n <solaris-icon\n class=\"solaris-multi-select__dropdown-icon\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n size=\"sm\"\n />\n </span>\n </div>\n\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n <div\n class=\"solaris-multi-select__panel\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"'true'\"\n [attr.id]=\"panelId\"\n tabindex=\"-1\"\n (click)=\"onPanelClick($event)\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n @if (selectAll() && !loading()) {\n <div\n class=\"solaris-multi-select__select-all\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n (click)=\"handleSelectAll()\"\n (keydown.enter)=\"handleSelectAll()\"\n (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n [class.solaris-multi-select__select-all--readonly]=\"\n isEffectivelyReadonly()\n \"\n >\n <span\n class=\"solaris-multi-select__select-all-checkbox\"\n [class.solaris-multi-select__select-all-checkbox--checked]=\"\n isAllSelected()\n \"\n [class.solaris-multi-select__select-all-checkbox--partial]=\"\n isPartialSelected()\n \"\n >\n @if (isAllSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n } @else if (isPartialSelected()) {\n <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n <solaris-icon name=\"minus\" [decorative]=\"true\" />\n </span>\n }\n </span>\n <span class=\"solaris-multi-select__select-all-label\">{{\n selectAllLabelText()\n }}</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"solaris-multi-select__loading\">\n <span class=\"solaris-multi-select__loading-text\">{{\n loadingTextValue()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-multi-select__no-results\">\n <span class=\"solaris-multi-select__no-results-text\">{{\n noResultsTextValue()\n }}</span>\n </div>\n } @else if (showEmpty()) {\n <div class=\"solaris-multi-select__empty\">\n <span class=\"solaris-multi-select__empty-text\">{{\n emptyTextValue()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-multi-select__options\"\n [style.max-height]=\"panelMaxHeight()\"\n >\n <ng-content select=\"solaris-option, solaris-option-group\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-surface-hover: var(--solaris-surface-subtle);--solaris-primary-muted: var(--solaris-primary-surface);--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"] }]
|
|
6679
6716
|
}], ctorParameters: () => [], propDecorators: { popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SolarisPopoverTriggerDirective), { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], triggerElement: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], formFieldElement: [{ type: i0.ViewChild, args: ['formFieldRef', { isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionComponent), { ...{
|
|
6680
6717
|
descendants: true,
|
|
6681
6718
|
}, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
|
|
@@ -8805,9 +8842,13 @@ function hasSequentialChars(value, charset) {
|
|
|
8805
8842
|
// SECURITY_EXCEPTION_FILE: nativeElement.focus() is the standard DOM API to restore focus after toggle. No SSR-safe alternative exists for imperative focus. Same approach used by Angular CDK.
|
|
8806
8843
|
class SolarisPasswordFieldComponent {
|
|
8807
8844
|
translateService = inject(SolarisTranslateService);
|
|
8845
|
+
themeService = inject(SolarisThemeService);
|
|
8808
8846
|
inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
|
|
8809
8847
|
projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
|
|
8810
8848
|
projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
|
|
8849
|
+
effectiveDensity = computed(() => {
|
|
8850
|
+
return this.density() ?? this.themeService.density;
|
|
8851
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
|
|
8811
8852
|
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
8812
8853
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
8813
8854
|
labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
@@ -9063,7 +9104,7 @@ class SolarisPasswordFieldComponent {
|
|
|
9063
9104
|
this.visibleChange.emit(newVisible);
|
|
9064
9105
|
if (this.inputElementRef()) {
|
|
9065
9106
|
try {
|
|
9066
|
-
this.inputElementRef()
|
|
9107
|
+
this.inputElementRef()?.nativeElement.focus();
|
|
9067
9108
|
}
|
|
9068
9109
|
catch {
|
|
9069
9110
|
if (isDevMode()) {
|
|
@@ -9073,13 +9114,13 @@ class SolarisPasswordFieldComponent {
|
|
|
9073
9114
|
}
|
|
9074
9115
|
}
|
|
9075
9116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9076
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPasswordFieldComponent, isStandalone: true, selector: "solaris-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showRequirements: { classPropertyName: "showRequirements", publicName: "showRequirements", isSignal: true, isRequired: false, transformFunction: null }, showStrength: { classPropertyName: "showStrength", publicName: "showStrength", isSignal: true, isRequired: false, transformFunction: null }, policy: { classPropertyName: "policy", publicName: "policy", isSignal: true, isRequired: false, transformFunction: null }, validatePolicy: { classPropertyName: "validatePolicy", publicName: "validatePolicy", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, toggleShowLabel: { classPropertyName: "toggleShowLabel", publicName: "toggleShowLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleShowLabelKey: { classPropertyName: "toggleShowLabelKey", publicName: "toggleShowLabelKey", isSignal: true, isRequired: false, transformFunction: null }, toggleHideLabel: { classPropertyName: "toggleHideLabel", publicName: "toggleHideLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleHideLabelKey: { classPropertyName: "toggleHideLabelKey", publicName: "toggleHideLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, providers: [
|
|
9117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPasswordFieldComponent, isStandalone: true, selector: "solaris-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showRequirements: { classPropertyName: "showRequirements", publicName: "showRequirements", isSignal: true, isRequired: false, transformFunction: null }, showStrength: { classPropertyName: "showStrength", publicName: "showStrength", isSignal: true, isRequired: false, transformFunction: null }, policy: { classPropertyName: "policy", publicName: "policy", isSignal: true, isRequired: false, transformFunction: null }, validatePolicy: { classPropertyName: "validatePolicy", publicName: "validatePolicy", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, toggleShowLabel: { classPropertyName: "toggleShowLabel", publicName: "toggleShowLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleShowLabelKey: { classPropertyName: "toggleShowLabelKey", publicName: "toggleShowLabelKey", isSignal: true, isRequired: false, transformFunction: null }, toggleHideLabel: { classPropertyName: "toggleHideLabel", publicName: "toggleHideLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleHideLabelKey: { classPropertyName: "toggleHideLabelKey", publicName: "toggleHideLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { properties: { "attr.data-density": "effectiveDensity()" } }, providers: [
|
|
9077
9118
|
{
|
|
9078
9119
|
provide: NG_VALUE_ACCESSOR,
|
|
9079
9120
|
useExisting: forwardRef(() => SolarisPasswordFieldComponent),
|
|
9080
9121
|
multi: true,
|
|
9081
9122
|
},
|
|
9082
|
-
], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"density()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n>\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content
|
|
9123
|
+
], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"density()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n>\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [density]=\"density()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonly()\"\n [attr.id]=\"id() ?? null\"\n (focus)=\"onInputFocus()\"\n [value]=\"internalValue()\"\n (input)=\"onInput($event)\"\n [attr.name]=\"name() ?? null\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n @if (showToggle()) {\n <button\n type=\"button\"\n solaris-form-suffix\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"toggleLabel()\"\n [disabled]=\"isEffectivelyDisabled()\"\n class=\"solaris-password-field__toggle\"\n >\n <solaris-icon\n [decorative]=\"true\"\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n />\n </button>\n }\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n <div class=\"solaris-password-field__requirements\" role=\"list\">\n @for (req of requirementList(); track req.key) {\n <div\n class=\"solaris-password-field__requirement\"\n role=\"listitem\"\n [attr.data-met]=\"req.met\"\n >\n <solaris-icon\n class=\"solaris-password-field__requirement-icon\"\n [name]=\"req.met ? 'check' : 'x'\"\n [decorative]=\"true\"\n />\n <span class=\"solaris-password-field__requirement-label\">\n {{ req.label }}\n </span>\n </div>\n }\n </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n <div\n class=\"solaris-password-field__strength\"\n [attr.data-level]=\"strengthLevel()\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <div class=\"solaris-password-field__strength-bar\">\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"strengthLevel() !== 'empty'\"\n ></div>\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"\n strengthLevel() === 'medium' || strengthLevel() === 'strong'\n \"\n ></div>\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"strengthLevel() === 'strong'\"\n ></div>\n </div>\n <span class=\"solaris-password-field__strength-label\">\n {{ strengthLabelText() }}\n </span>\n </div>\n}\n", styles: [":host{--solaris-password-field-strength-height: 4px;--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var(--solaris-text-muted);--solaris-password-field-strength-bar-bg: var(--solaris-surface-muted);--solaris-password-field-strength-weak-color: var(--solaris-danger-text);--solaris-password-field-requirement-met-color: var(--solaris-success-text);--solaris-password-field-strength-medium-color: var(--solaris-warning-text);--solaris-password-field-strength-strong-color: var(--solaris-success-text);--solaris-password-field-requirement-unmet-color: var(--solaris-danger-text);display:block;box-sizing:border-box}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-density-font-size);height:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-half);min-width:64px;height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9083
9124
|
}
|
|
9084
9125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, decorators: [{
|
|
9085
9126
|
type: Component,
|
|
@@ -9095,7 +9136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9095
9136
|
useExisting: forwardRef(() => SolarisPasswordFieldComponent),
|
|
9096
9137
|
multi: true,
|
|
9097
9138
|
},
|
|
9098
|
-
], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
9139
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
9140
|
+
'[attr.data-density]': 'effectiveDensity()',
|
|
9141
|
+
}, template: "<solaris-form-field\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"density()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n>\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [density]=\"density()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonly()\"\n [attr.id]=\"id() ?? null\"\n (focus)=\"onInputFocus()\"\n [value]=\"internalValue()\"\n (input)=\"onInput($event)\"\n [attr.name]=\"name() ?? null\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n @if (showToggle()) {\n <button\n type=\"button\"\n solaris-form-suffix\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"toggleLabel()\"\n [disabled]=\"isEffectivelyDisabled()\"\n class=\"solaris-password-field__toggle\"\n >\n <solaris-icon\n [decorative]=\"true\"\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n />\n </button>\n }\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n <div class=\"solaris-password-field__requirements\" role=\"list\">\n @for (req of requirementList(); track req.key) {\n <div\n class=\"solaris-password-field__requirement\"\n role=\"listitem\"\n [attr.data-met]=\"req.met\"\n >\n <solaris-icon\n class=\"solaris-password-field__requirement-icon\"\n [name]=\"req.met ? 'check' : 'x'\"\n [decorative]=\"true\"\n />\n <span class=\"solaris-password-field__requirement-label\">\n {{ req.label }}\n </span>\n </div>\n }\n </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n <div\n class=\"solaris-password-field__strength\"\n [attr.data-level]=\"strengthLevel()\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <div class=\"solaris-password-field__strength-bar\">\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"strengthLevel() !== 'empty'\"\n ></div>\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"\n strengthLevel() === 'medium' || strengthLevel() === 'strong'\n \"\n ></div>\n <div\n class=\"solaris-password-field__strength-segment\"\n [attr.data-active]=\"strengthLevel() === 'strong'\"\n ></div>\n </div>\n <span class=\"solaris-password-field__strength-label\">\n {{ strengthLabelText() }}\n </span>\n </div>\n}\n", styles: [":host{--solaris-password-field-strength-height: 4px;--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var(--solaris-text-muted);--solaris-password-field-strength-bar-bg: var(--solaris-surface-muted);--solaris-password-field-strength-weak-color: var(--solaris-danger-text);--solaris-password-field-requirement-met-color: var(--solaris-success-text);--solaris-password-field-strength-medium-color: var(--solaris-warning-text);--solaris-password-field-strength-strong-color: var(--solaris-success-text);--solaris-password-field-requirement-unmet-color: var(--solaris-danger-text);display:block;box-sizing:border-box}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-density-font-size);height:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-half);min-width:64px;height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"] }]
|
|
9099
9142
|
}], ctorParameters: () => [], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], showRequirements: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequirements", required: false }] }], showStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStrength", required: false }] }], policy: [{ type: i0.Input, args: [{ isSignal: true, alias: "policy", required: false }] }], validatePolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatePolicy", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], toggleShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleShowLabel", required: false }] }], toggleShowLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleShowLabelKey", required: false }] }], toggleHideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleHideLabel", required: false }] }], toggleHideLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleHideLabelKey", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
|
|
9100
9143
|
|
|
9101
9144
|
const BASIC_EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
@@ -9368,7 +9411,7 @@ class SolarisEmailFieldComponent {
|
|
|
9368
9411
|
useExisting: forwardRef(() => SolarisEmailFieldComponent),
|
|
9369
9412
|
multi: true,
|
|
9370
9413
|
},
|
|
9371
|
-
], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"density()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n>\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content
|
|
9414
|
+
], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"density()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n>\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"density()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonly()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"id() ?? null\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9372
9415
|
}
|
|
9373
9416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEmailFieldComponent, decorators: [{
|
|
9374
9417
|
type: Component,
|
|
@@ -9376,6 +9419,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9376
9419
|
FormsModule,
|
|
9377
9420
|
SolarisFormFieldComponent,
|
|
9378
9421
|
SolarisInputDirective,
|
|
9422
|
+
SolarisFormPrefixDirective,
|
|
9423
|
+
SolarisFormSuffixDirective,
|
|
9379
9424
|
SolarisIconComponent,
|
|
9380
9425
|
], providers: [
|
|
9381
9426
|
{
|
|
@@ -9383,7 +9428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9383
9428
|
useExisting: forwardRef(() => SolarisEmailFieldComponent),
|
|
9384
9429
|
multi: true,
|
|
9385
9430
|
},
|
|
9386
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-form-field\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"density()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n>\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content
|
|
9431
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-form-field\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"density()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n>\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"density()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonly()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"id() ?? null\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"] }]
|
|
9387
9432
|
}], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidError: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidError", required: false }] }], requiredError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredError", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], invalidErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidErrorKey", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], allowedDomainError: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomainError", required: false }] }], blockedDomainError: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomainError", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], trimOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "trimOnBlur", required: false }] }], allowedDomainErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomainErrorKey", required: false }] }], blockedDomainErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomainErrorKey", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], normalizeLowercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalizeLowercase", required: false }] }], allowedDomains: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomains", required: false }] }], blockedDomains: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomains", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], validateDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateDomain", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
|
|
9388
9433
|
|
|
9389
9434
|
class SolarisSkeletonComponent {
|
|
@@ -10054,7 +10099,7 @@ class SolarisToastComponent {
|
|
|
10054
10099
|
return key;
|
|
10055
10100
|
}
|
|
10056
10101
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10057
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastComponent, isStandalone: true, selector: "solaris-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-variant": "hostDataVariant()", "attr.data-icon-size": "hostDataIconSize()", "attr.data-appearance": "hostDataAppearance()", "attr.data-media-shape": "hostDataMediaShape()", "attr.data-actions-align": "hostDataActionsAlign()", "attr.data-center-content": "centerContent()", "attr.data-actions-no-desc": "hasActionsNoDescription()" } }, ngImport: i0, template: "<div class=\"solaris-toast__root\">\n @if (showIcon()) {\n <div class=\"solaris-toast__media\">\n <div class=\"solaris-toast__icon\">\n <solaris-icon\n [name]=\"entry().resolvedIcon\"\n [decorative]=\"entry().options.iconDecorative !== false\"\n />\n </div>\n </div>\n }\n\n <div class=\"solaris-toast__content\">\n @if (showTitle()) {\n <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n }\n\n @if (showDescription()) {\n <div\n class=\"solaris-toast__description\"\n [class.solaris-toast__description--truncated]=\"isTruncated()\"\n [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n >\n {{ entry().resolvedDescription }}\n </div>\n }\n\n @if (showActions()) {\n <div class=\"solaris-toast__actions\">\n @for (action of entry().resolvedActions; track $index) {\n <button\n solaris-button\n [appearance]=\"action.appearance ?? 'ghost'\"\n [color]=\"action.color ?? 'neutral'\"\n size=\"sm\"\n [disabled]=\"action.disabled ?? false\"\n (click)=\"handleActionClick(action)\"\n >\n {{ action.label }}\n </button>\n }\n </div>\n }\n </div>\n\n <div class=\"solaris-toast__trailing\">\n @if (isExpandable()) {\n <button\n type=\"button\"\n class=\"solaris-toast__trailing-btn\"\n [attr.aria-label]=\"expandButtonLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggleExpanded()\"\n >\n <solaris-icon\n class=\"solaris-toast__expand-icon\"\n [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n }\n\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"solaris-toast__trailing-btn\"\n [attr.aria-label]=\"entry().resolvedCloseLabel\"\n (click)=\"handleDismiss()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n\n@if (showProgressBar()) {\n <div\n class=\"solaris-toast__progress\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"progressValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"\n isProcessProgress()\n ? translate('solaris.toast.progress')\n : translate('solaris.toast.remaining')\n \"\n >\n <div\n class=\"solaris-toast__progress-bar\"\n [style.width.%]=\"progressValue()\"\n ></div>\n </div>\n}\n\n@if (showCountdownText()) {\n <div class=\"solaris-toast__countdown-text\">\n <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n <button\n type=\"button\"\n class=\"solaris-toast__countdown-toggle\"\n (click)=\"togglePause()\"\n >\n {{ pauseButtonLabel() }}\n </button>\n </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-width: 800px;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-2);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10102
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastComponent, isStandalone: true, selector: "solaris-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-variant": "hostDataVariant()", "attr.data-icon-size": "hostDataIconSize()", "attr.data-appearance": "hostDataAppearance()", "attr.data-media-shape": "hostDataMediaShape()", "attr.data-actions-align": "hostDataActionsAlign()", "attr.data-center-content": "centerContent()", "attr.data-actions-no-desc": "hasActionsNoDescription()" } }, ngImport: i0, template: "<div class=\"solaris-toast__root\">\n @if (showIcon()) {\n <div class=\"solaris-toast__media\">\n <div class=\"solaris-toast__icon\">\n <solaris-icon\n [name]=\"entry().resolvedIcon\"\n [decorative]=\"entry().options.iconDecorative !== false\"\n />\n </div>\n </div>\n }\n\n <div class=\"solaris-toast__content\">\n @if (showTitle()) {\n <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n }\n\n @if (showDescription()) {\n <div\n class=\"solaris-toast__description\"\n [class.solaris-toast__description--truncated]=\"isTruncated()\"\n [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n >\n {{ entry().resolvedDescription }}\n </div>\n }\n\n @if (showActions()) {\n <div class=\"solaris-toast__actions\">\n @for (action of entry().resolvedActions; track $index) {\n <button\n solaris-button\n [appearance]=\"action.appearance ?? 'ghost'\"\n [color]=\"action.color ?? 'neutral'\"\n size=\"sm\"\n [disabled]=\"action.disabled ?? false\"\n (click)=\"handleActionClick(action)\"\n >\n {{ action.label }}\n </button>\n }\n </div>\n }\n </div>\n\n <div class=\"solaris-toast__trailing\">\n @if (isExpandable()) {\n <button\n type=\"button\"\n class=\"solaris-toast__trailing-btn\"\n [attr.aria-label]=\"expandButtonLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggleExpanded()\"\n >\n <solaris-icon\n class=\"solaris-toast__expand-icon\"\n [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n name=\"chevron-down\"\n [decorative]=\"true\"\n />\n </button>\n }\n\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"solaris-toast__trailing-btn\"\n [attr.aria-label]=\"entry().resolvedCloseLabel\"\n (click)=\"handleDismiss()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n </div>\n</div>\n\n@if (showProgressBar()) {\n <div\n class=\"solaris-toast__progress\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"progressValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"\n isProcessProgress()\n ? translate('solaris.toast.progress')\n : translate('solaris.toast.remaining')\n \"\n >\n <div\n class=\"solaris-toast__progress-bar\"\n [style.width.%]=\"progressValue()\"\n ></div>\n </div>\n}\n\n@if (showCountdownText()) {\n <div class=\"solaris-toast__countdown-text\">\n <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n <button\n type=\"button\"\n class=\"solaris-toast__countdown-toggle\"\n (click)=\"togglePause()\"\n >\n {{ pauseButtonLabel() }}\n </button>\n </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-width: 800px;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-2);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10058
10103
|
}
|
|
10059
10104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastComponent, decorators: [{
|
|
10060
10105
|
type: Component,
|
|
@@ -10176,7 +10221,7 @@ class SolarisDialogHeaderComponent {
|
|
|
10176
10221
|
this.dialogRef.close();
|
|
10177
10222
|
}
|
|
10178
10223
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogHeaderComponent, isStandalone: true, selector: "solaris-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "solaris-dialog-header" }, ngImport: i0, template: "<div class=\"solaris-dialog-header__start\">\n @if (hasIcon()) {\n <div class=\"solaris-dialog-header__icon\">\n <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n </div>\n }\n\n <div class=\"solaris-dialog-header__text\">\n @if (hasTitle()) {\n <h2 class=\"solaris-dialog-header__title\" id=\"solaris-dialog-title\">\n {{ title() }}\n </h2>\n }\n\n @if (hasDescription()) {\n <p\n class=\"solaris-dialog-header__description\"\n id=\"solaris-dialog-description\"\n >\n {{ description() }}\n </p>\n }\n </div>\n</div>\n\n@if (showCloseButton()) {\n <div class=\"solaris-dialog-header__end\">\n <button\n type=\"button\"\n class=\"solaris-dialog-header__close\"\n [attr.data-size]=\"size()\"\n [attr.aria-label]=\"resolvedCloseLabel()\"\n (click)=\"close()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n </div>\n}\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-4) var(--solaris-spacing-4) 0;--solaris-dialog-close-size: var(--solaris-font-size-lg);--solaris-dialog-close-icon-size: var(--solaris-font-size-lg);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);flex:1;min-width:0}.solaris-dialog-header__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--solaris-dialog-media-size);height:var(--solaris-dialog-media-size);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans);color:var(--solaris-text-strong)}.solaris-dialog-header__description{margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog-header__end{flex-shrink:0;display:flex;align-items:center}.solaris-dialog-header__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-dialog-close-size);height:var(--solaris-dialog-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-dialog-header__close:hover{color:var(--solaris-text-default)}.solaris-dialog-header__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-dialog-header__close solaris-icon,.solaris-dialog-header__close svg{display:block;width:var(--solaris-dialog-close-icon-size);height:var(--solaris-dialog-close-icon-size)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10224
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogHeaderComponent, isStandalone: true, selector: "solaris-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "solaris-dialog-header" }, ngImport: i0, template: "<div class=\"solaris-dialog-header__start\">\n @if (hasIcon()) {\n <div class=\"solaris-dialog-header__icon\">\n <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n </div>\n }\n\n <div class=\"solaris-dialog-header__text\">\n @if (hasTitle()) {\n <h2 class=\"solaris-dialog-header__title\" id=\"solaris-dialog-title\">\n {{ title() }}\n </h2>\n }\n\n @if (hasDescription()) {\n <p\n class=\"solaris-dialog-header__description\"\n id=\"solaris-dialog-description\"\n >\n {{ description() }}\n </p>\n }\n </div>\n</div>\n\n@if (showCloseButton()) {\n <div class=\"solaris-dialog-header__end\">\n <button\n type=\"button\"\n class=\"solaris-dialog-header__close\"\n [attr.data-size]=\"size()\"\n [attr.aria-label]=\"resolvedCloseLabel()\"\n (click)=\"close()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n </div>\n}\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-4) var(--solaris-spacing-4) 0;--solaris-dialog-close-size: var(--solaris-font-size-lg);--solaris-dialog-close-icon-size: var(--solaris-font-size-lg);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);flex:1;min-width:0}.solaris-dialog-header__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--solaris-dialog-media-size);height:var(--solaris-dialog-media-size);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans);color:var(--solaris-text-strong)}.solaris-dialog-header__description{margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog-header__end{flex-shrink:0;display:flex;align-items:center}.solaris-dialog-header__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-dialog-close-size);height:var(--solaris-dialog-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-dialog-header__close:hover{color:var(--solaris-text-default)}.solaris-dialog-header__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-dialog-header__close solaris-icon,.solaris-dialog-header__close svg{display:block;width:var(--solaris-dialog-close-icon-size);height:var(--solaris-dialog-close-icon-size)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10180
10225
|
}
|
|
10181
10226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogHeaderComponent, decorators: [{
|
|
10182
10227
|
type: Component,
|
|
@@ -10766,7 +10811,7 @@ class SolarisTabComponent {
|
|
|
10766
10811
|
return null;
|
|
10767
10812
|
}
|
|
10768
10813
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10769
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTabComponent, isStandalone: true, selector: "solaris-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, badgeLabelKey: { classPropertyName: "badgeLabelKey", publicName: "badgeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "tabId()", "attr.data-density": "density()", "attr.data-shape": "shape()", "attr.data-active": "isActive()", "attr.aria-controls": "panelId()", "attr.aria-selected": "isActive()", "attr.data-appearance": "appearance()", "attr.aria-label": "resolvedAriaLabel()", "attr.data-orientation": "orientation()", "attr.tabindex": "isActive() ? \"0\" : \"-1\"", "attr.data-disabled": "isComputedDisabled()", "attr.aria-disabled": "isComputedDisabled() || undefined" } }, ngImport: i0, template: "<span class=\"solaris-tab__inner\">\n @if (icon(); as iconName) {\n <solaris-icon\n class=\"solaris-tab__icon\"\n [name]=\"iconName\"\n [decorative]=\"iconDecorative()\"\n />\n }\n @if (resolvedLabel(); as labelText) {\n <span class=\"solaris-tab__label\">{{ labelText }}</span>\n }\n <ng-content />\n @if (computedBadge(); as badgeValue) {\n <solaris-badge\n class=\"solaris-tab__badge\"\n variant=\"count\"\n size=\"sm\"\n [attr.aria-label]=\"resolvedBadgeLabel()\"\n >\n {{ badgeValue }}\n </solaris-badge>\n }\n</span>\n", styles: [":host{--solaris-tab-gap: var(--solaris-spacing-2);--solaris-tab-padding-x: var(--solaris-spacing-3);--solaris-tab-padding-y: var(--solaris-spacing-2);--solaris-tab-color: var(--solaris-text-default);--solaris-tab-active-color: var(--solaris-primary-text);--solaris-tab-hover-background: var(--solaris-surface-subtle);--solaris-tab-active-background: var(--solaris-surface-base);--solaris-tab-radius: var(--solaris-radius-sm);--solaris-tab-font-size: var(--solaris-font-size-sm);--solaris-tab-font-weight: var(--solaris-font-weight-medium);--solaris-tab-icon-size: var(--solaris-spacing-4);--solaris-tab-badge-gap: var(--solaris-spacing-2);--solaris-tabs-indicator-color: var(--solaris-primary-base);--solaris-tabs-border-color: var(--solaris-border-subtle);--solaris-tabs-tab-active-background: var(--solaris-primary-surface);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;white-space:nowrap;display:inline-flex;text-decoration:none;background:transparent;gap:var(--solaris-tab-gap);color:var(--solaris-tab-color);padding:var(--solaris-tab-padding-y) var(--solaris-tab-padding-x);font:var(--solaris-tab-font-weight) var(--solaris-tab-font-size)/1 var(--solaris-font-family-sans);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host(:hover:not([data-disabled=true],[data-active=true])){background:var(--solaris-tab-hover-background)}:host(:focus-visible){outline-offset:var(--solaris-border-width-md);outline:var(--solaris-border-width-md) solid var(--solaris-primary-base)}:host([data-active=true]){color:var(--solaris-tab-active-color)}:host([data-disabled=true]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-orientation=vertical]){width:100%;display:flex;max-width:100%;box-sizing:border-box}.solaris-tab__inner{align-items:center;display:inline-flex;gap:var(--solaris-tab-gap)}.solaris-tab__icon{flex-shrink:0;width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}.solaris-tab__label{line-height:var(--solaris-line-height-md)}.solaris-tab__badge{flex-shrink:0}:host([data-density=compact]){--solaris-tab-gap: var(--solaris-spacing-1);--solaris-tab-padding-y: var(--solaris-spacing-1);--solaris-tab-padding-x: var(--solaris-spacing-2);--solaris-tab-icon-size: var(--solaris-spacing-3);--solaris-tab-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-tab-gap: var(--solaris-spacing-2);--solaris-tab-padding-y: var(--solaris-spacing-2);--solaris-tab-padding-x: var(--solaris-spacing-3);--solaris-tab-icon-size: var(--solaris-spacing-4);--solaris-tab-font-size: var(--solaris-font-size-sm)}:host([data-density=comfortable]){--solaris-tab-gap: var(--solaris-spacing-3);--solaris-tab-padding-y: var(--solaris-spacing-3);--solaris-tab-padding-x: var(--solaris-spacing-4);--solaris-tab-icon-size: var(--solaris-spacing-5);--solaris-tab-font-size: var(--solaris-font-size-md)}:host([data-shape=wide]){--solaris-tab-padding-x: calc(var(--solaris-density-padding-lg) * 2.5)}:host([data-appearance=underline]){--solaris-tab-radius: 0}:host([data-appearance=pills]){border-radius:var(--solaris-tab-radius);--solaris-tab-radius: var(--solaris-radius-full)}:host([data-appearance=pills]:hover:not([data-disabled=true],[data-active=true])){background:var(--solaris-tab-hover-background)}:host([data-appearance=pills][data-active=true]){color:var(--solaris-tab-active-color);background:var(--solaris-tabs-tab-active-background)}:host([data-appearance=enclosed]){margin-bottom:0;border:var(--solaris-border-width-sm) solid transparent;border-bottom:none;border-radius:var(--solaris-radius-sm) var(--solaris-radius-sm) 0 0}:host([data-appearance=enclosed][data-active=true]){background:var(--solaris-surface-base);border-color:var(--solaris-tabs-border-color)}:host-context([data-full-width=true]){flex:1;justify-content:center}@media(prefers-reduced-motion:reduce){:host{transition:none}}:host-context([data-reduced-motion=true]){transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisBadgeComponent, selector: "solaris-badge", inputs: ["appearance", "variant", "color", "radius", "density", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTabComponent, isStandalone: true, selector: "solaris-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, badgeLabelKey: { classPropertyName: "badgeLabelKey", publicName: "badgeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "tabId()", "attr.data-density": "density()", "attr.data-shape": "shape()", "attr.data-active": "isActive()", "attr.aria-controls": "panelId()", "attr.aria-selected": "isActive()", "attr.data-appearance": "appearance()", "attr.aria-label": "resolvedAriaLabel()", "attr.data-orientation": "orientation()", "attr.tabindex": "isActive() ? \"0\" : \"-1\"", "attr.data-disabled": "isComputedDisabled()", "attr.aria-disabled": "isComputedDisabled() || undefined" } }, ngImport: i0, template: "<span class=\"solaris-tab__inner\">\n @if (icon(); as iconName) {\n <solaris-icon\n class=\"solaris-tab__icon\"\n [name]=\"iconName\"\n [decorative]=\"iconDecorative()\"\n />\n }\n @if (resolvedLabel(); as labelText) {\n <span class=\"solaris-tab__label\">{{ labelText }}</span>\n }\n <ng-content />\n @if (computedBadge(); as badgeValue) {\n <solaris-badge\n class=\"solaris-tab__badge\"\n variant=\"count\"\n size=\"sm\"\n [attr.aria-label]=\"resolvedBadgeLabel()\"\n >\n {{ badgeValue }}\n </solaris-badge>\n }\n</span>\n", styles: [":host{--solaris-tab-gap: var(--solaris-spacing-2);--solaris-tab-padding-x: var(--solaris-spacing-3);--solaris-tab-padding-y: var(--solaris-spacing-2);--solaris-tab-color: var(--solaris-text-default);--solaris-tab-active-color: var(--solaris-primary-text);--solaris-tab-hover-background: var(--solaris-surface-subtle);--solaris-tab-active-background: var(--solaris-surface-base);--solaris-tab-radius: var(--solaris-radius-sm);--solaris-tab-font-size: var(--solaris-font-size-sm);--solaris-tab-font-weight: var(--solaris-font-weight-medium);--solaris-tab-icon-size: var(--solaris-spacing-4);--solaris-tab-badge-gap: var(--solaris-spacing-2);--solaris-tabs-indicator-color: var(--solaris-primary-base);--solaris-tabs-border-color: var(--solaris-border-subtle);--solaris-tabs-tab-active-background: var(--solaris-primary-surface);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;white-space:nowrap;display:inline-flex;text-decoration:none;background:transparent;gap:var(--solaris-tab-gap);color:var(--solaris-tab-color);padding:var(--solaris-tab-padding-y) var(--solaris-tab-padding-x);font:var(--solaris-tab-font-weight) var(--solaris-tab-font-size)/1 var(--solaris-font-family-sans);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host(:hover:not([data-disabled=true],[data-active=true])){background:var(--solaris-tab-hover-background)}:host(:focus-visible){outline-offset:var(--solaris-border-width-md);outline:var(--solaris-border-width-md) solid var(--solaris-primary-base)}:host([data-active=true]){color:var(--solaris-tab-active-color)}:host([data-disabled=true]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-orientation=vertical]){width:100%;display:flex;max-width:100%;box-sizing:border-box}.solaris-tab__inner{align-items:center;display:inline-flex;gap:var(--solaris-tab-gap)}.solaris-tab__icon{flex-shrink:0;width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}.solaris-tab__label{line-height:var(--solaris-line-height-md)}.solaris-tab__badge{flex-shrink:0}:host([data-density=compact]){--solaris-tab-gap: var(--solaris-spacing-1);--solaris-tab-padding-y: var(--solaris-spacing-1);--solaris-tab-padding-x: var(--solaris-spacing-2);--solaris-tab-icon-size: var(--solaris-spacing-3);--solaris-tab-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-tab-gap: var(--solaris-spacing-2);--solaris-tab-padding-y: var(--solaris-spacing-2);--solaris-tab-padding-x: var(--solaris-spacing-3);--solaris-tab-icon-size: var(--solaris-spacing-4);--solaris-tab-font-size: var(--solaris-font-size-sm)}:host([data-density=comfortable]){--solaris-tab-gap: var(--solaris-spacing-3);--solaris-tab-padding-y: var(--solaris-spacing-3);--solaris-tab-padding-x: var(--solaris-spacing-4);--solaris-tab-icon-size: var(--solaris-spacing-5);--solaris-tab-font-size: var(--solaris-font-size-md)}:host([data-shape=wide]){--solaris-tab-padding-x: calc(var(--solaris-density-padding-lg) * 2.5)}:host([data-appearance=underline]){--solaris-tab-radius: 0}:host([data-appearance=pills]){border-radius:var(--solaris-tab-radius);--solaris-tab-radius: var(--solaris-radius-full)}:host([data-appearance=pills]:hover:not([data-disabled=true],[data-active=true])){background:var(--solaris-tab-hover-background)}:host([data-appearance=pills][data-active=true]){color:var(--solaris-tab-active-color);background:var(--solaris-tabs-tab-active-background)}:host([data-appearance=enclosed]){margin-bottom:0;border:var(--solaris-border-width-sm) solid transparent;border-bottom:none;border-radius:var(--solaris-radius-sm) var(--solaris-radius-sm) 0 0}:host([data-appearance=enclosed][data-active=true]){background:var(--solaris-surface-base);border-color:var(--solaris-tabs-border-color)}:host-context([data-full-width=true]){flex:1;justify-content:center}@media(prefers-reduced-motion:reduce){:host{transition:none}}:host-context([data-reduced-motion=true]){transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "component", type: SolarisBadgeComponent, selector: "solaris-badge", inputs: ["appearance", "variant", "color", "radius", "density", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10770
10815
|
}
|
|
10771
10816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTabComponent, decorators: [{
|
|
10772
10817
|
type: Component,
|
|
@@ -11192,7 +11237,7 @@ class SolarisStepperComponent {
|
|
|
11192
11237
|
provide: SOLARIS_STEPPER,
|
|
11193
11238
|
useExisting: SolarisStepperComponent,
|
|
11194
11239
|
},
|
|
11195
|
-
], queries: [{ propertyName: "steps", predicate: SolarisStepComponent, isSignal: true }, { propertyName: "actions", first: true, predicate: SolarisStepperActionsComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-stepper__indicators\">\n @for (step of steps(); track step; let i = $index) {\n @if (showConnectors() && i > 0) {\n <div\n class=\"solaris-stepper__connector\"\n [class.solaris-stepper__connector--active]=\"i <= activeIndex()\"\n ></div>\n }\n\n <div\n class=\"solaris-stepper__step\"\n [class.solaris-stepper__step--active]=\"i === activeIndex()\"\n [class.solaris-stepper__step--clickable]=\"isStepClickable(step)\"\n [attr.data-status]=\"step.computedStatus()\"\n >\n @if (isStepClickable(step)) {\n <button\n type=\"button\"\n class=\"solaris-stepper__indicator-button\"\n (click)=\"goToStep(i)\"\n [attr.aria-current]=\"i === activeIndex() ? 'step' : undefined\"\n [attr.aria-disabled]=\"step.computedStatus() === 'disabled'\"\n >\n @if (step.icon(); as iconName) {\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n } @else if (step.showCheckIcon()) {\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n } @else if (step.showErrorIcon()) {\n <solaris-icon name=\"danger\" [decorative]=\"true\" />\n } @else if (showStepNumbers()) {\n <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n }\n </button>\n } @else {\n <span class=\"solaris-stepper__indicator-static\">\n @if (step.icon(); as iconName) {\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n } @else if (step.showCheckIcon()) {\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n } @else if (step.showErrorIcon()) {\n <solaris-icon name=\"danger\" [decorative]=\"true\" />\n } @else if (showStepNumbers()) {\n <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n }\n </span>\n }\n\n <div class=\"solaris-stepper__label-group\">\n <span class=\"solaris-stepper__label\">{{ step.resolvedLabel() }}</span>\n @if (step.resolvedDescription(); as desc) {\n <span class=\"solaris-stepper__description\">{{ desc }}</span>\n }\n </div>\n\n @if (showStepStatus()) {\n <span class=\"solaris-stepper__status-badge\">\n @if (step.resolvedOptionalLabel(); as optLabel) {\n <span class=\"solaris-stepper__optional-text\">{{ optLabel }}</span>\n }\n </span>\n }\n </div>\n }\n</div>\n\n<div\n class=\"solaris-stepper__content-panel\"\n [class.solaris-stepper__content-panel--fade]=\"contentTransition() === 'fade'\"\n [class.solaris-stepper__content-panel--slide-right]=\"\n contentTransition() === 'slide' && stepTransitionDirection() === 'next'\n \"\n [class.solaris-stepper__content-panel--slide-left]=\"\n contentTransition() === 'slide' && stepTransitionDirection() === 'previous'\n \"\n>\n <ng-content select=\"solaris-step\" />\n</div>\n\n<ng-content select=\"solaris-stepper-actions\" />\n", styles: [":host{--solaris-stepper-gap: var(--solaris-spacing-4);--solaris-stepper-card-shadow: var(--solaris-shadow-sm);--solaris-stepper-indicator-size: var(--solaris-spacing-8);--solaris-stepper-label-color: var(--solaris-text-default);--solaris-stepper-indicator-color: var(--solaris-text-subtle);--solaris-stepper-description-color: var(--solaris-text-muted);--solaris-stepper-card-background: var(--solaris-surface-base);--solaris-stepper-connector-color: var(--solaris-border-subtle);--solaris-stepper-connector-size: var(--solaris-border-width-md);--solaris-stepper-card-border-color: var(--solaris-border-subtle);--solaris-stepper-indicator-background: var(--solaris-surface-muted);--solaris-stepper-connector-active-color: var(--solaris-primary-base);--solaris-stepper-dashed-connector-color: var(--solaris-border-subtle);display:block}.solaris-stepper__indicators{display:flex;align-items:flex-start;gap:var(--solaris-stepper-gap)}:host([data-orientation=vertical]) .solaris-stepper__indicators{flex-direction:column}.solaris-stepper__connector{flex:1;min-width:var(--solaris-spacing-6);border-radius:var(--solaris-radius-full);height:var(--solaris-stepper-connector-size);background:var(--solaris-stepper-connector-color);margin-top:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-orientation=vertical]) .solaris-stepper__connector{flex:1;height:auto;margin-top:0;min-width:auto;min-height:var(--solaris-spacing-6);width:var(--solaris-stepper-connector-size);margin-left:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2)}.solaris-stepper__connector--active{background:var(--solaris-stepper-connector-active-color)}.solaris-stepper__step{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3)}.solaris-stepper__step--clickable{cursor:pointer}.solaris-stepper__indicator-button,.solaris-stepper__indicator-static{padding:0;border:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);width:var(--solaris-stepper-indicator-size);height:var(--solaris-stepper-indicator-size);color:var(--solaris-stepper-indicator-color);background:var(--solaris-stepper-indicator-background);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-stepper__indicator-button{cursor:pointer}.solaris-stepper__indicator-button:focus-visible{outline-offset:var(--solaris-spacing-half);outline:var(--solaris-spacing-half) solid var(--solaris-primary-base)}.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-static{color:var(--solaris-primary-text);background:var(--solaris-primary-base)}.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-static{color:var(--solaris-success-on-solid);background:var(--solaris-success-base)}.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-static{color:var(--solaris-danger-on-solid);background:var(--solaris-danger-base)}.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-static{opacity:var(--solaris-opacity-50);cursor:not-allowed}.solaris-stepper__step[data-status=disabled] .solaris-stepper__label{opacity:var(--solaris-opacity-50)}.solaris-stepper__number{font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans)}.solaris-stepper__label-group{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host([data-orientation=vertical]) .solaris-stepper__label-group{flex:1}.solaris-stepper__label{white-space:nowrap;color:var(--solaris-stepper-label-color);font:var(--solaris-font-weight-medium) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__description{white-space:nowrap;color:var(--solaris-stepper-description-color);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__status-badge{display:flex;align-items:center}.solaris-stepper__optional-text{color:var(--solaris-text-muted);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-subtle);padding:var(--solaris-spacing-1) var(--solaris-spacing-2);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/1 var(--solaris-font-family-sans)}.solaris-stepper__content-panel{padding-top:var(--solaris-spacing-6)}:host([data-orientation=horizontal]) .solaris-stepper__content-panel{max-width:100%}.solaris-stepper__content-panel--fade{animation:solaris-stepper-fade-in var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-right{animation:solaris-stepper-slide-in-right var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-left{animation:solaris-stepper-slide-in-left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__connector{display:none}:host([data-appearance=card]) .solaris-stepper__step{flex:1;text-align:center;align-items:center;flex-direction:column;padding:var(--solaris-spacing-4);border-radius:var(--solaris-radius-lg);box-shadow:var(--solaris-stepper-card-shadow);background:var(--solaris-stepper-card-background);border:var(--solaris-border-width-sm) solid var(--solaris-stepper-card-border-color);transition:box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__step--active{border-color:var(--solaris-primary-base);box-shadow:var(--solaris-shadow-focus, 0 0 0 1px var(--solaris-primary-base))}:host([data-appearance=card]) .solaris-stepper__indicators{gap:var(--solaris-stepper-gap)}:host([data-appearance=dashed]){--solaris-stepper-gap: 0}:host([data-appearance=dashed]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed]) .solaris-stepper__connector,:host([data-appearance=dashed]) .solaris-stepper__indicator-button,:host([data-appearance=dashed]) .solaris-stepper__indicator-static,:host([data-appearance=dashed]) .solaris-stepper__label-group,:host([data-appearance=dashed]) .solaris-stepper__status-badge{display:none}:host([data-appearance=dashed]) .solaris-stepper__step{flex:1;height:var(--solaris-spacing-2);min-width:var(--solaris-spacing-4);border-radius:var(--solaris-radius-full);background:var(--solaris-stepper-connector-color)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=completed]{background:var(--solaris-success-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=active]{background:var(--solaris-primary-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=error]{background:var(--solaris-danger-base)}:host([data-appearance=dashed]) .solaris-stepper__step--clickable{cursor:pointer}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__step{flex:none;height:auto;min-width:auto;width:var(--solaris-spacing-2);min-height:var(--solaris-spacing-4)}:host([data-size=sm]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-size=sm]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-size=lg]){--solaris-stepper-gap: var(--solaris-spacing-6);--solaris-stepper-indicator-size: var(--solaris-spacing-10)}:host([data-size=lg]) .solaris-stepper__label{font-size:var(--solaris-font-size-md)}:host([data-density=compact]){--solaris-stepper-gap: var(--solaris-spacing-2);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-density=compact]) .solaris-stepper__description{display:none}:host([data-density=compact]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-3)}:host([data-density=normal]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-8)}:host([data-density=normal]) .solaris-stepper__label{font-size:var(--solaris-font-size-sm)}:host([data-density=normal]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-4)}@media(prefers-reduced-motion:reduce){.solaris-stepper__content-panel--fade,.solaris-stepper__content-panel--slide-right,.solaris-stepper__content-panel--slide-left{animation:none}}@keyframes solaris-stepper-fade-in{0%{opacity:0}to{opacity:1}}@keyframes solaris-stepper-slide-in-right{0%{opacity:0;transform:translate(var(--solaris-spacing-4))}to{opacity:1;transform:translate(0)}}@keyframes solaris-stepper-slide-in-left{0%{opacity:0;transform:translate(calc(-1 * var(--solaris-spacing-4)))}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11240
|
+
], queries: [{ propertyName: "steps", predicate: SolarisStepComponent, isSignal: true }, { propertyName: "actions", first: true, predicate: SolarisStepperActionsComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-stepper__indicators\">\n @for (step of steps(); track step; let i = $index) {\n @if (showConnectors() && i > 0) {\n <div\n class=\"solaris-stepper__connector\"\n [class.solaris-stepper__connector--active]=\"i <= activeIndex()\"\n ></div>\n }\n\n <div\n class=\"solaris-stepper__step\"\n [class.solaris-stepper__step--active]=\"i === activeIndex()\"\n [class.solaris-stepper__step--clickable]=\"isStepClickable(step)\"\n [attr.data-status]=\"step.computedStatus()\"\n >\n @if (isStepClickable(step)) {\n <button\n type=\"button\"\n class=\"solaris-stepper__indicator-button\"\n (click)=\"goToStep(i)\"\n [attr.aria-current]=\"i === activeIndex() ? 'step' : undefined\"\n [attr.aria-disabled]=\"step.computedStatus() === 'disabled'\"\n >\n @if (step.icon(); as iconName) {\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n } @else if (step.showCheckIcon()) {\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n } @else if (step.showErrorIcon()) {\n <solaris-icon name=\"danger\" [decorative]=\"true\" />\n } @else if (showStepNumbers()) {\n <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n }\n </button>\n } @else {\n <span class=\"solaris-stepper__indicator-static\">\n @if (step.icon(); as iconName) {\n <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n } @else if (step.showCheckIcon()) {\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n } @else if (step.showErrorIcon()) {\n <solaris-icon name=\"danger\" [decorative]=\"true\" />\n } @else if (showStepNumbers()) {\n <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n }\n </span>\n }\n\n <div class=\"solaris-stepper__label-group\">\n <span class=\"solaris-stepper__label\">{{ step.resolvedLabel() }}</span>\n @if (step.resolvedDescription(); as desc) {\n <span class=\"solaris-stepper__description\">{{ desc }}</span>\n }\n </div>\n\n @if (showStepStatus()) {\n <span class=\"solaris-stepper__status-badge\">\n @if (step.resolvedOptionalLabel(); as optLabel) {\n <span class=\"solaris-stepper__optional-text\">{{ optLabel }}</span>\n }\n </span>\n }\n </div>\n }\n</div>\n\n<div\n class=\"solaris-stepper__content-panel\"\n [class.solaris-stepper__content-panel--fade]=\"contentTransition() === 'fade'\"\n [class.solaris-stepper__content-panel--slide-right]=\"\n contentTransition() === 'slide' && stepTransitionDirection() === 'next'\n \"\n [class.solaris-stepper__content-panel--slide-left]=\"\n contentTransition() === 'slide' && stepTransitionDirection() === 'previous'\n \"\n>\n <ng-content select=\"solaris-step\" />\n</div>\n\n<ng-content select=\"solaris-stepper-actions\" />\n", styles: [":host{--solaris-stepper-gap: var(--solaris-spacing-4);--solaris-stepper-card-shadow: var(--solaris-shadow-sm);--solaris-stepper-indicator-size: var(--solaris-spacing-8);--solaris-stepper-label-color: var(--solaris-text-default);--solaris-stepper-indicator-color: var(--solaris-text-subtle);--solaris-stepper-description-color: var(--solaris-text-muted);--solaris-stepper-card-background: var(--solaris-surface-base);--solaris-stepper-connector-color: var(--solaris-border-subtle);--solaris-stepper-connector-size: var(--solaris-border-width-md);--solaris-stepper-card-border-color: var(--solaris-border-subtle);--solaris-stepper-indicator-background: var(--solaris-surface-muted);--solaris-stepper-connector-active-color: var(--solaris-primary-base);--solaris-stepper-dashed-connector-color: var(--solaris-border-subtle);display:block}.solaris-stepper__indicators{display:flex;align-items:flex-start;gap:var(--solaris-stepper-gap)}:host([data-orientation=vertical]) .solaris-stepper__indicators{flex-direction:column}.solaris-stepper__connector{flex:1;min-width:var(--solaris-spacing-6);border-radius:var(--solaris-radius-full);height:var(--solaris-stepper-connector-size);background:var(--solaris-stepper-connector-color);margin-top:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-orientation=vertical]) .solaris-stepper__connector{flex:1;height:auto;margin-top:0;min-width:auto;min-height:var(--solaris-spacing-6);width:var(--solaris-stepper-connector-size);margin-left:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2)}.solaris-stepper__connector--active{background:var(--solaris-stepper-connector-active-color)}.solaris-stepper__step{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3)}.solaris-stepper__step--clickable{cursor:pointer}.solaris-stepper__indicator-button,.solaris-stepper__indicator-static{padding:0;border:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);width:var(--solaris-stepper-indicator-size);height:var(--solaris-stepper-indicator-size);color:var(--solaris-stepper-indicator-color);background:var(--solaris-stepper-indicator-background);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-stepper__indicator-button{cursor:pointer}.solaris-stepper__indicator-button:focus-visible{outline-offset:var(--solaris-spacing-half);outline:var(--solaris-spacing-half) solid var(--solaris-primary-base)}.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-static{color:var(--solaris-primary-text);background:var(--solaris-primary-base)}.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-static{color:var(--solaris-success-on-solid);background:var(--solaris-success-base)}.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-static{color:var(--solaris-danger-on-solid);background:var(--solaris-danger-base)}.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-static{opacity:var(--solaris-opacity-50);cursor:not-allowed}.solaris-stepper__step[data-status=disabled] .solaris-stepper__label{opacity:var(--solaris-opacity-50)}.solaris-stepper__number{font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans)}.solaris-stepper__label-group{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host([data-orientation=vertical]) .solaris-stepper__label-group{flex:1}.solaris-stepper__label{white-space:nowrap;color:var(--solaris-stepper-label-color);font:var(--solaris-font-weight-medium) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__description{white-space:nowrap;color:var(--solaris-stepper-description-color);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__status-badge{display:flex;align-items:center}.solaris-stepper__optional-text{color:var(--solaris-text-muted);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-subtle);padding:var(--solaris-spacing-1) var(--solaris-spacing-2);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/1 var(--solaris-font-family-sans)}.solaris-stepper__content-panel{padding-top:var(--solaris-spacing-6)}:host([data-orientation=horizontal]) .solaris-stepper__content-panel{max-width:100%}.solaris-stepper__content-panel--fade{animation:solaris-stepper-fade-in var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-right{animation:solaris-stepper-slide-in-right var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-left{animation:solaris-stepper-slide-in-left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__connector{display:none}:host([data-appearance=card]) .solaris-stepper__step{flex:1;text-align:center;align-items:center;flex-direction:column;padding:var(--solaris-spacing-4);border-radius:var(--solaris-radius-lg);box-shadow:var(--solaris-stepper-card-shadow);background:var(--solaris-stepper-card-background);border:var(--solaris-border-width-sm) solid var(--solaris-stepper-card-border-color);transition:box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__step--active{border-color:var(--solaris-primary-base);box-shadow:var(--solaris-shadow-focus, 0 0 0 1px var(--solaris-primary-base))}:host([data-appearance=card]) .solaris-stepper__indicators{gap:var(--solaris-stepper-gap)}:host([data-appearance=dashed]){--solaris-stepper-gap: 0}:host([data-appearance=dashed]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed]) .solaris-stepper__connector,:host([data-appearance=dashed]) .solaris-stepper__indicator-button,:host([data-appearance=dashed]) .solaris-stepper__indicator-static,:host([data-appearance=dashed]) .solaris-stepper__label-group,:host([data-appearance=dashed]) .solaris-stepper__status-badge{display:none}:host([data-appearance=dashed]) .solaris-stepper__step{flex:1;height:var(--solaris-spacing-2);min-width:var(--solaris-spacing-4);border-radius:var(--solaris-radius-full);background:var(--solaris-stepper-connector-color)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=completed]{background:var(--solaris-success-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=active]{background:var(--solaris-primary-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=error]{background:var(--solaris-danger-base)}:host([data-appearance=dashed]) .solaris-stepper__step--clickable{cursor:pointer}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__step{flex:none;height:auto;min-width:auto;width:var(--solaris-spacing-2);min-height:var(--solaris-spacing-4)}:host([data-size=sm]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-size=sm]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-size=lg]){--solaris-stepper-gap: var(--solaris-spacing-6);--solaris-stepper-indicator-size: var(--solaris-spacing-10)}:host([data-size=lg]) .solaris-stepper__label{font-size:var(--solaris-font-size-md)}:host([data-density=compact]){--solaris-stepper-gap: var(--solaris-spacing-2);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-density=compact]) .solaris-stepper__description{display:none}:host([data-density=compact]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-3)}:host([data-density=normal]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-8)}:host([data-density=normal]) .solaris-stepper__label{font-size:var(--solaris-font-size-sm)}:host([data-density=normal]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-4)}@media(prefers-reduced-motion:reduce){.solaris-stepper__content-panel--fade,.solaris-stepper__content-panel--slide-right,.solaris-stepper__content-panel--slide-left{animation:none}}@keyframes solaris-stepper-fade-in{0%{opacity:0}to{opacity:1}}@keyframes solaris-stepper-slide-in-right{0%{opacity:0;transform:translate(var(--solaris-spacing-4))}to{opacity:1;transform:translate(0)}}@keyframes solaris-stepper-slide-in-left{0%{opacity:0;transform:translate(calc(-1 * var(--solaris-spacing-4)))}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11196
11241
|
}
|
|
11197
11242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisStepperComponent, decorators: [{
|
|
11198
11243
|
type: Component,
|
|
@@ -11397,7 +11442,7 @@ class SolarisSegmentedItemComponent {
|
|
|
11397
11442
|
return null;
|
|
11398
11443
|
}
|
|
11399
11444
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSegmentedItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisSegmentedItemComponent, isStandalone: true, selector: "solaris-segmented-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "itemId()", "attr.data-selected": "isSelected()", "attr.data-disabled": "isComputedDisabled()", "attr.aria-checked": "isSelected()", "attr.aria-disabled": "isComputedDisabled() || undefined", "attr.aria-label": "resolvedAriaLabel() || undefined", "attr.tabindex": "isTabstop() ? \"0\" : \"-1\"", "class.solaris-segmented-item--icon-only": "isIconOnly()" } }, ngImport: i0, template: "<span class=\"solaris-segmented-item__inner\">\n @if (icon(); as iconName) {\n <solaris-icon\n class=\"solaris-segmented-item__icon\"\n [name]=\"iconName\"\n [decorative]=\"true\"\n />\n }\n @if (resolvedLabel(); as labelText) {\n <span class=\"solaris-segmented-item__label\">{{ labelText }}</span>\n }\n <ng-content />\n</span>\n", styles: [":host{--solaris-segmented-item-gap: var(--solaris-spacing-2);--solaris-segmented-item-radius: var(--solaris-radius-sm);--solaris-segmented-item-color: var(--solaris-text-default);--solaris-segmented-item-padding-y: var(--solaris-spacing-2);--solaris-segmented-item-padding-x: var(--solaris-spacing-2);--solaris-segmented-item-icon-size: var(--solaris-font-size-sm);--solaris-segmented-item-font-size: var(--solaris-font-size-sm);--solaris-segmented-item-selected-color: var(--solaris-text-strong);--solaris-segmented-item-font-weight: var(--solaris-font-weight-medium);--solaris-segmented-item-hover-background: var(--solaris-surface-subtle);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;white-space:nowrap;display:inline-flex;text-decoration:none;background:transparent;gap:var(--solaris-segmented-item-gap);z-index:var(--solaris-z-index-raised);color:var(--solaris-segmented-item-color);padding:var(--solaris-segmented-item-padding-y) var(--solaris-segmented-item-padding-x);font:var(--solaris-segmented-item-font-weight) var(--solaris-segmented-item-font-size)/1 var(--solaris-font-family-sans);border-radius:max(var(--solaris-segmented-radius) - var(--solaris-segmented-padding),var(--solaris-segmented-padding) - var(--solaris-segmented-radius));transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host(:hover:not([data-disabled=true],[data-selected=true])){background:var(--solaris-segmented-item-hover-background)}:host(.solaris-segmented-item--icon-only){--solaris-segmented-item-icon-size: calc(var(--solaris-font-size-md) * 1.2)}:host:not([data-selected=true],[data-disabled=true]){opacity:var(--solaris-opacity-50)}:host(:focus-visible){outline-offset:var(--solaris-border-width-md);border-radius:var(--solaris-segmented-item-radius);outline:var(--solaris-border-width-md) solid var(--solaris-primary-base)}:host([data-selected=true]){color:var(--solaris-segmented-item-selected-color)}:host([data-disabled=true]){opacity:var(--solaris-opacity-10);cursor:not-allowed}:host([data-disabled=true]:focus-visible){outline:none}:host([data-selected=true][data-disabled=true]){opacity:var(--solaris-opacity-40)}:host-context([data-orientation=vertical]){width:100%;display:flex;max-width:100%;box-sizing:border-box}.solaris-segmented-item__inner{min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-segmented-item-gap)}.solaris-segmented-item__icon{flex-shrink:0;width:var(--solaris-segmented-item-icon-size);height:var(--solaris-segmented-item-icon-size)}.solaris-segmented-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--solaris-line-height-md)}:host-context([data-size=sm]){--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-xs);--solaris-segmented-item-font-size: var(--solaris-font-size-xs)}:host-context([data-size=lg]){--solaris-segmented-item-padding-y: var(--solaris-spacing-3);--solaris-segmented-item-padding-x: var(--solaris-spacing-3);--solaris-segmented-item-icon-size: var(--solaris-font-size-md);--solaris-segmented-item-font-size: var(--solaris-font-size-md)}:host-context([data-size=sm][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-xs);--solaris-segmented-item-font-size: var(--solaris-font-size-xs)}:host-context([data-size=md][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-sm);--solaris-segmented-item-font-size: var(--solaris-font-size-sm)}:host-context([data-size=lg][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-2);--solaris-segmented-item-padding-x: var(--solaris-spacing-2);--solaris-segmented-item-icon-size: var(--solaris-font-size-md);--solaris-segmented-item-font-size: var(--solaris-font-size-md)}:host-context([data-appearance=surface][data-selected=true]){--solaris-segmented-item-color: var(--solaris-text-strong)}:host-context([data-appearance=outline]){--solaris-segmented-item-color: var(--solaris-text-default)}:host-context([data-full-width=true]){flex:1;justify-content:center}:host-context([data-equal-width=true]){flex:1;justify-content:center}@media(prefers-reduced-motion:reduce){:host{transition:none}}:host-context([data-reduced-motion=true]){transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisSegmentedItemComponent, isStandalone: true, selector: "solaris-segmented-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "itemId()", "attr.data-selected": "isSelected()", "attr.data-disabled": "isComputedDisabled()", "attr.aria-checked": "isSelected()", "attr.aria-disabled": "isComputedDisabled() || undefined", "attr.aria-label": "resolvedAriaLabel() || undefined", "attr.tabindex": "isTabstop() ? \"0\" : \"-1\"", "class.solaris-segmented-item--icon-only": "isIconOnly()" } }, ngImport: i0, template: "<span class=\"solaris-segmented-item__inner\">\n @if (icon(); as iconName) {\n <solaris-icon\n class=\"solaris-segmented-item__icon\"\n [name]=\"iconName\"\n [decorative]=\"true\"\n />\n }\n @if (resolvedLabel(); as labelText) {\n <span class=\"solaris-segmented-item__label\">{{ labelText }}</span>\n }\n <ng-content />\n</span>\n", styles: [":host{--solaris-segmented-item-gap: var(--solaris-spacing-2);--solaris-segmented-item-radius: var(--solaris-radius-sm);--solaris-segmented-item-color: var(--solaris-text-default);--solaris-segmented-item-padding-y: var(--solaris-spacing-2);--solaris-segmented-item-padding-x: var(--solaris-spacing-2);--solaris-segmented-item-icon-size: var(--solaris-font-size-sm);--solaris-segmented-item-font-size: var(--solaris-font-size-sm);--solaris-segmented-item-selected-color: var(--solaris-text-strong);--solaris-segmented-item-font-weight: var(--solaris-font-weight-medium);--solaris-segmented-item-hover-background: var(--solaris-surface-subtle);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;white-space:nowrap;display:inline-flex;text-decoration:none;background:transparent;gap:var(--solaris-segmented-item-gap);z-index:var(--solaris-z-index-raised);color:var(--solaris-segmented-item-color);padding:var(--solaris-segmented-item-padding-y) var(--solaris-segmented-item-padding-x);font:var(--solaris-segmented-item-font-weight) var(--solaris-segmented-item-font-size)/1 var(--solaris-font-family-sans);border-radius:max(var(--solaris-segmented-radius) - var(--solaris-segmented-padding),var(--solaris-segmented-padding) - var(--solaris-segmented-radius));transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host(:hover:not([data-disabled=true],[data-selected=true])){background:var(--solaris-segmented-item-hover-background)}:host(.solaris-segmented-item--icon-only){--solaris-segmented-item-icon-size: calc(var(--solaris-font-size-md) * 1.2)}:host:not([data-selected=true],[data-disabled=true]){opacity:var(--solaris-opacity-50)}:host(:focus-visible){outline-offset:var(--solaris-border-width-md);border-radius:var(--solaris-segmented-item-radius);outline:var(--solaris-border-width-md) solid var(--solaris-primary-base)}:host([data-selected=true]){color:var(--solaris-segmented-item-selected-color)}:host([data-disabled=true]){opacity:var(--solaris-opacity-10);cursor:not-allowed}:host([data-disabled=true]:focus-visible){outline:none}:host([data-selected=true][data-disabled=true]){opacity:var(--solaris-opacity-40)}:host-context([data-orientation=vertical]){width:100%;display:flex;max-width:100%;box-sizing:border-box}.solaris-segmented-item__inner{min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-segmented-item-gap)}.solaris-segmented-item__icon{flex-shrink:0;width:var(--solaris-segmented-item-icon-size);height:var(--solaris-segmented-item-icon-size)}.solaris-segmented-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--solaris-line-height-md)}:host-context([data-size=sm]){--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-xs);--solaris-segmented-item-font-size: var(--solaris-font-size-xs)}:host-context([data-size=lg]){--solaris-segmented-item-padding-y: var(--solaris-spacing-3);--solaris-segmented-item-padding-x: var(--solaris-spacing-3);--solaris-segmented-item-icon-size: var(--solaris-font-size-md);--solaris-segmented-item-font-size: var(--solaris-font-size-md)}:host-context([data-size=sm][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-xs);--solaris-segmented-item-font-size: var(--solaris-font-size-xs)}:host-context([data-size=md][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-sm);--solaris-segmented-item-font-size: var(--solaris-font-size-sm)}:host-context([data-size=lg][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-2);--solaris-segmented-item-padding-x: var(--solaris-spacing-2);--solaris-segmented-item-icon-size: var(--solaris-font-size-md);--solaris-segmented-item-font-size: var(--solaris-font-size-md)}:host-context([data-appearance=surface][data-selected=true]){--solaris-segmented-item-color: var(--solaris-text-strong)}:host-context([data-appearance=outline]){--solaris-segmented-item-color: var(--solaris-text-default)}:host-context([data-full-width=true]){flex:1;justify-content:center}:host-context([data-equal-width=true]){flex:1;justify-content:center}@media(prefers-reduced-motion:reduce){:host{transition:none}}:host-context([data-reduced-motion=true]){transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11401
11446
|
}
|
|
11402
11447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSegmentedItemComponent, decorators: [{
|
|
11403
11448
|
type: Component,
|
|
@@ -12191,7 +12236,7 @@ class SolarisDropdownMenuItemComponent {
|
|
|
12191
12236
|
provide: SOLARIS_DROPDOWN_NAVIGABLE_ITEM,
|
|
12192
12237
|
useExisting: forwardRef(() => SolarisDropdownMenuItemComponent),
|
|
12193
12238
|
},
|
|
12194
|
-
], ngImport: i0, template: "@if (hasLeadingContent()) {\n <div class=\"solaris-dropdown-menu-item__leading\">\n @if (type() === 'checkbox') {\n <span\n class=\"solaris-dropdown-menu-item__checkbox\"\n [class.solaris-dropdown-menu-item__checkbox--checked]=\"checked()\"\n aria-hidden=\"true\"\n >\n @if (checked()) {\n <span class=\"solaris-dropdown-menu-item__checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </span>\n } @else if (type() === 'radio') {\n <span\n class=\"solaris-dropdown-menu-item__radio\"\n [class.solaris-dropdown-menu-item__radio--checked]=\"checked()\"\n aria-hidden=\"true\"\n >\n @if (checked()) {\n <span class=\"solaris-dropdown-menu-item__radio-dot\"></span>\n }\n </span>\n } @else {\n <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n }\n </div>\n}\n<div class=\"solaris-dropdown-menu-item__content\">\n @if (label()) {\n <span class=\"solaris-dropdown-menu-item__label\">{{ label() }}</span>\n }\n @if (description()) {\n <span class=\"solaris-dropdown-menu-item__description\">{{\n description()\n }}</span>\n }\n</div>\n@if (shortcut()) {\n <span class=\"solaris-dropdown-menu-item__shortcut\" aria-hidden=\"true\">{{\n shortcut()\n }}</span>\n}\n", styles: [":host{--solaris-dropdown-menu-item-gap: var(--solaris-spacing-2);--solaris-dropdown-menu-item-radius: var(--solaris-radius-sm);--solaris-dropdown-menu-item-padding-y: var(--solaris-spacing-2);--solaris-dropdown-menu-item-padding-x: var(--solaris-spacing-4);--solaris-dropdown-menu-item-label-color: var(--solaris-text-default);--solaris-dropdown-menu-item-danger-color: var(--solaris-danger-text);--solaris-dropdown-menu-item-shortcut-color: var(--solaris-text-muted);--solaris-dropdown-menu-item-danger-hover: var(--solaris-danger-surface);--solaris-dropdown-menu-item-description-color: var(--solaris-text-muted);--solaris-dropdown-menu-item-focus-ring-color: var(--solaris-primary-base);--solaris-dropdown-menu-item-hover-background: var(--solaris-surface-muted);--solaris-dropdown-menu-item-focus-background: var(--solaris-surface-subtle);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-menu-item-gap);color:var(--solaris-dropdown-menu-item-label-color);border-radius:var(--solaris-dropdown-menu-item-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-menu-item-padding-y) var(--solaris-dropdown-menu-item-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-menu-item-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-menu-item-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-menu-item-focus-ring-color)}:host([data-disabled]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-menu-item-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-menu-item-danger-hover)}.solaris-dropdown-menu-item__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-menu-item__leading{color:var(--solaris-dropdown-menu-item-danger-color)}.solaris-dropdown-menu-item__checkbox{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-dropdown-menu-item__checkbox--checked{color:var(--solaris-primary-text);background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-dropdown-menu-item__checkbox-icon{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;padding:var(--solaris-spacing-half)}.solaris-dropdown-menu-item__radio{width:100%;height:100%;display:flex;border-radius:50%;align-items:center;box-sizing:border-box;background:transparent;justify-content:center;border:var(--solaris-spacing-half) solid var(--solaris-primary-border)}.solaris-dropdown-menu-item__radio--checked{border-color:var(--solaris-primary-base)}.solaris-dropdown-menu-item__radio-dot{border-radius:50%;width:var(--solaris-spacing-2);height:var(--solaris-spacing-2);background:var(--solaris-primary-base)}.solaris-dropdown-menu-item__content{flex:1;min-width:0;display:flex;gap:var(--solaris-spacing-half);flex-direction:column}.solaris-dropdown-menu-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-menu-item__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);color:var(--solaris-dropdown-menu-item-description-color)}.solaris-dropdown-menu-item__shortcut{flex-shrink:0;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-menu-item-shortcut-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12239
|
+
], ngImport: i0, template: "@if (hasLeadingContent()) {\n <div class=\"solaris-dropdown-menu-item__leading\">\n @if (type() === 'checkbox') {\n <span\n class=\"solaris-dropdown-menu-item__checkbox\"\n [class.solaris-dropdown-menu-item__checkbox--checked]=\"checked()\"\n aria-hidden=\"true\"\n >\n @if (checked()) {\n <span class=\"solaris-dropdown-menu-item__checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </span>\n } @else if (type() === 'radio') {\n <span\n class=\"solaris-dropdown-menu-item__radio\"\n [class.solaris-dropdown-menu-item__radio--checked]=\"checked()\"\n aria-hidden=\"true\"\n >\n @if (checked()) {\n <span class=\"solaris-dropdown-menu-item__radio-dot\"></span>\n }\n </span>\n } @else {\n <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n }\n </div>\n}\n<div class=\"solaris-dropdown-menu-item__content\">\n @if (label()) {\n <span class=\"solaris-dropdown-menu-item__label\">{{ label() }}</span>\n }\n @if (description()) {\n <span class=\"solaris-dropdown-menu-item__description\">{{\n description()\n }}</span>\n }\n</div>\n@if (shortcut()) {\n <span class=\"solaris-dropdown-menu-item__shortcut\" aria-hidden=\"true\">{{\n shortcut()\n }}</span>\n}\n", styles: [":host{--solaris-dropdown-menu-item-gap: var(--solaris-spacing-2);--solaris-dropdown-menu-item-radius: var(--solaris-radius-sm);--solaris-dropdown-menu-item-padding-y: var(--solaris-spacing-2);--solaris-dropdown-menu-item-padding-x: var(--solaris-spacing-4);--solaris-dropdown-menu-item-label-color: var(--solaris-text-default);--solaris-dropdown-menu-item-danger-color: var(--solaris-danger-text);--solaris-dropdown-menu-item-shortcut-color: var(--solaris-text-muted);--solaris-dropdown-menu-item-danger-hover: var(--solaris-danger-surface);--solaris-dropdown-menu-item-description-color: var(--solaris-text-muted);--solaris-dropdown-menu-item-focus-ring-color: var(--solaris-primary-base);--solaris-dropdown-menu-item-hover-background: var(--solaris-surface-muted);--solaris-dropdown-menu-item-focus-background: var(--solaris-surface-subtle);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-menu-item-gap);color:var(--solaris-dropdown-menu-item-label-color);border-radius:var(--solaris-dropdown-menu-item-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-menu-item-padding-y) var(--solaris-dropdown-menu-item-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-menu-item-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-menu-item-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-menu-item-focus-ring-color)}:host([data-disabled]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-menu-item-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-menu-item-danger-hover)}.solaris-dropdown-menu-item__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-menu-item__leading{color:var(--solaris-dropdown-menu-item-danger-color)}.solaris-dropdown-menu-item__checkbox{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-dropdown-menu-item__checkbox--checked{color:var(--solaris-primary-text);background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-dropdown-menu-item__checkbox-icon{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;padding:var(--solaris-spacing-half)}.solaris-dropdown-menu-item__radio{width:100%;height:100%;display:flex;border-radius:50%;align-items:center;box-sizing:border-box;background:transparent;justify-content:center;border:var(--solaris-spacing-half) solid var(--solaris-primary-border)}.solaris-dropdown-menu-item__radio--checked{border-color:var(--solaris-primary-base)}.solaris-dropdown-menu-item__radio-dot{border-radius:50%;width:var(--solaris-spacing-2);height:var(--solaris-spacing-2);background:var(--solaris-primary-base)}.solaris-dropdown-menu-item__content{flex:1;min-width:0;display:flex;gap:var(--solaris-spacing-half);flex-direction:column}.solaris-dropdown-menu-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-menu-item__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);color:var(--solaris-dropdown-menu-item-description-color)}.solaris-dropdown-menu-item__shortcut{flex-shrink:0;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-menu-item-shortcut-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12195
12240
|
}
|
|
12196
12241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownMenuItemComponent, decorators: [{
|
|
12197
12242
|
type: Component,
|
|
@@ -12314,7 +12359,7 @@ class SolarisDropdownSubmenuTriggerComponent {
|
|
|
12314
12359
|
provide: SOLARIS_DROPDOWN_NAVIGABLE_ITEM,
|
|
12315
12360
|
useExisting: forwardRef(() => SolarisDropdownSubmenuTriggerComponent),
|
|
12316
12361
|
},
|
|
12317
|
-
], ngImport: i0, template: "<div class=\"solaris-dropdown-submenu-trigger__wrapper\">\n @if (hasLeadingContent()) {\n <div class=\"solaris-dropdown-submenu-trigger__leading\">\n <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n </div>\n }\n <div class=\"solaris-dropdown-submenu-trigger__content\">\n <ng-content></ng-content>\n @if (label()) {\n <span class=\"solaris-dropdown-submenu-trigger__label\">{{ label() }}</span>\n }\n </div>\n <div class=\"solaris-dropdown-submenu-trigger__trailing\">\n <solaris-icon name=\"chevron-right\" aria-hidden=\"true\" />\n </div>\n</div>\n", styles: [":host{--solaris-dropdown-submenu-trigger-gap: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-radius: var(--solaris-radius-sm);--solaris-dropdown-submenu-trigger-padding-y: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-padding-x: var(--solaris-spacing-4);--solaris-dropdown-submenu-trigger-label-color: var(--solaris-text-default);--solaris-dropdown-submenu-trigger-danger-color: var(--solaris-danger-text);--solaris-dropdown-submenu-trigger-danger-hover: var( --solaris-danger-surface );--solaris-dropdown-submenu-trigger-focus-ring-color: var( --solaris-primary-base );--solaris-dropdown-submenu-trigger-hover-background: var( --solaris-surface-muted );--solaris-dropdown-submenu-trigger-trailing-color: var(--solaris-text-muted);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-submenu-trigger-gap);color:var(--solaris-dropdown-submenu-trigger-label-color);border-radius:var(--solaris-dropdown-submenu-trigger-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-submenu-trigger-padding-y) var(--solaris-dropdown-submenu-trigger-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-submenu-trigger-focus-ring-color)}:host([data-disabled]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-submenu-trigger-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-submenu-trigger-danger-hover)}.solaris-dropdown-submenu-trigger__wrapper{display:flex;flex:1;min-width:0;align-items:center;gap:var(--solaris-dropdown-submenu-trigger-gap)}.solaris-dropdown-submenu-trigger__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-submenu-trigger__leading{color:var(--solaris-dropdown-submenu-trigger-danger-color)}.solaris-dropdown-submenu-trigger__content{flex:1;min-width:0}.solaris-dropdown-submenu-trigger__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-submenu-trigger__trailing{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-submenu-trigger-trailing-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12362
|
+
], ngImport: i0, template: "<div class=\"solaris-dropdown-submenu-trigger__wrapper\">\n @if (hasLeadingContent()) {\n <div class=\"solaris-dropdown-submenu-trigger__leading\">\n <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n </div>\n }\n <div class=\"solaris-dropdown-submenu-trigger__content\">\n <ng-content></ng-content>\n @if (label()) {\n <span class=\"solaris-dropdown-submenu-trigger__label\">{{ label() }}</span>\n }\n </div>\n <div class=\"solaris-dropdown-submenu-trigger__trailing\">\n <solaris-icon name=\"chevron-right\" aria-hidden=\"true\" />\n </div>\n</div>\n", styles: [":host{--solaris-dropdown-submenu-trigger-gap: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-radius: var(--solaris-radius-sm);--solaris-dropdown-submenu-trigger-padding-y: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-padding-x: var(--solaris-spacing-4);--solaris-dropdown-submenu-trigger-label-color: var(--solaris-text-default);--solaris-dropdown-submenu-trigger-danger-color: var(--solaris-danger-text);--solaris-dropdown-submenu-trigger-danger-hover: var( --solaris-danger-surface );--solaris-dropdown-submenu-trigger-focus-ring-color: var( --solaris-primary-base );--solaris-dropdown-submenu-trigger-hover-background: var( --solaris-surface-muted );--solaris-dropdown-submenu-trigger-trailing-color: var(--solaris-text-muted);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-submenu-trigger-gap);color:var(--solaris-dropdown-submenu-trigger-label-color);border-radius:var(--solaris-dropdown-submenu-trigger-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-submenu-trigger-padding-y) var(--solaris-dropdown-submenu-trigger-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-submenu-trigger-focus-ring-color)}:host([data-disabled]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-submenu-trigger-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-submenu-trigger-danger-hover)}.solaris-dropdown-submenu-trigger__wrapper{display:flex;flex:1;min-width:0;align-items:center;gap:var(--solaris-dropdown-submenu-trigger-gap)}.solaris-dropdown-submenu-trigger__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-submenu-trigger__leading{color:var(--solaris-dropdown-submenu-trigger-danger-color)}.solaris-dropdown-submenu-trigger__content{flex:1;min-width:0}.solaris-dropdown-submenu-trigger__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-submenu-trigger__trailing{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-submenu-trigger-trailing-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12318
12363
|
}
|
|
12319
12364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownSubmenuTriggerComponent, decorators: [{
|
|
12320
12365
|
type: Component,
|
|
@@ -13139,7 +13184,7 @@ class SolarisBreadcrumbComponent {
|
|
|
13139
13184
|
this.next.emit();
|
|
13140
13185
|
}
|
|
13141
13186
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisBreadcrumbComponent, isStandalone: true, selector: "solaris-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, overflowPosition: { classPropertyName: "overflowPosition", publicName: "overflowPosition", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate", previous: "previous", next: "next" }, host: { properties: { "attr.data-size": "size()", "attr.data-separator": "separator()", "attr.data-overflow": "overflowPosition()" }, classAttribute: "solaris-breadcrumb" }, ngImport: i0, template: "<nav class=\"solaris-breadcrumb__nav\" [attr.aria-label]=\"resolvedLabel()\">\n <ol class=\"solaris-breadcrumb__list\">\n @for (slot of slots(); track $index) {\n <li class=\"solaris-breadcrumb__item\">\n @if (slot.kind === 'ellipsis') {\n <button\n type=\"button\"\n class=\"solaris-breadcrumb__overflow-trigger\"\n solaris-dropdown-menu-trigger\n [solarisDropdownMenuTriggerFor]=\"overflowMenu\"\n [attr.aria-label]=\"resolvedShowMoreLabel()\"\n (menuOpened)=\"overflowOpen.set(true)\"\n (menuClosed)=\"overflowOpen.set(false)\"\n >\n <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n </button>\n } @else if (isLink(slot.item)) {\n <a\n class=\"solaris-breadcrumb__link\"\n [href]=\"slot.item.href\"\n [attr.aria-label]=\"itemAriaLabel(slot.item)\"\n (click)=\"onItemClick(slot.item, $event)\"\n >\n @if (slot.item.icon) {\n <solaris-icon [name]=\"slot.item.icon!\" [decorative]=\"true\" />\n }\n @if (itemLabel(slot.item)) {\n <span class=\"solaris-breadcrumb__label\">{{\n itemLabel(slot.item)\n }}</span>\n }\n </a>\n } @else {\n <span\n class=\"solaris-breadcrumb__text\"\n [attr.aria-current]=\"isCurrent(slot.item) ? 'page' : null\"\n [attr.aria-disabled]=\"isDisabled(slot.item) ? 'true' : null\"\n [attr.aria-label]=\"itemAriaLabel(slot.item)\"\n >\n @if (slot.item.icon) {\n <solaris-icon [name]=\"slot.item.icon!\" [decorative]=\"true\" />\n }\n @if (itemLabel(slot.item)) {\n <span class=\"solaris-breadcrumb__label\">{{\n itemLabel(slot.item)\n }}</span>\n }\n </span>\n }\n\n @if (!$last) {\n <span class=\"solaris-breadcrumb__separator\" aria-hidden=\"true\">\n <solaris-icon [name]=\"separatorIcon()\" [decorative]=\"true\" />\n </span>\n }\n </li>\n }\n </ol>\n</nav>\n\n@if (showNavigation()) {\n <div class=\"solaris-breadcrumb__pager\">\n <button\n type=\"button\"\n class=\"solaris-breadcrumb__pager-button\"\n [attr.aria-label]=\"resolvedPreviousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n (click)=\"onPrevious()\"\n >\n <solaris-icon name=\"chevron-left\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"solaris-breadcrumb__pager-button\"\n [attr.aria-label]=\"resolvedNextLabel()\"\n [disabled]=\"!canGoNext()\"\n (click)=\"onNext()\"\n >\n <solaris-icon name=\"chevron-right\" [decorative]=\"true\" />\n </button>\n </div>\n}\n\n<solaris-dropdown-menu #overflowMenu>\n @for (item of hiddenItems(); track $index) {\n <solaris-dropdown-menu-item\n [label]=\"itemLabel(item)\"\n [icon]=\"item.icon\"\n [disabled]=\"item.disabled ?? false\"\n (itemSelected)=\"onOverflowItemSelect(item)\"\n />\n }\n</solaris-dropdown-menu>\n", styles: [":host{--solaris-breadcrumb-gap: var(--solaris-spacing-1);--solaris-breadcrumb-icon-size: var(--solaris-spacing-3);--solaris-breadcrumb-pager-size: var(--solaris-spacing-5);--solaris-breadcrumb-link-color: var(--solaris-text-muted);--solaris-breadcrumb-font-size: var(--solaris-font-size-md);--solaris-breadcrumb-muted-color: var(--solaris-text-muted);--solaris-breadcrumb-text-color: var(--solaris-text-default);--solaris-breadcrumb-separator-size: var(--solaris-spacing-3);display:block;box-sizing:border-box}:host([data-size=sm]){--solaris-breadcrumb-icon-size: var(--solaris-spacing-2);--solaris-breadcrumb-pager-size: var(--solaris-spacing-4);--solaris-breadcrumb-font-size: var(--solaris-font-size-sm);--solaris-breadcrumb-separator-size: var(--solaris-spacing-2)}:host([data-size=lg]){--solaris-breadcrumb-icon-size: var(--solaris-spacing-4);--solaris-breadcrumb-pager-size: var(--solaris-spacing-6);--solaris-breadcrumb-font-size: var(--solaris-font-size-lg);--solaris-breadcrumb-separator-size: var(--solaris-spacing-4)}.solaris-breadcrumb__nav{display:inline-flex;box-sizing:border-box}.solaris-breadcrumb__list{margin:0;padding:0;display:flex;flex-wrap:wrap;list-style:none;align-items:center;gap:var(--solaris-breadcrumb-gap)}.solaris-breadcrumb__item{align-items:center;display:inline-flex;gap:var(--solaris-breadcrumb-gap);font-size:var(--solaris-breadcrumb-font-size)}.solaris-breadcrumb__link,.solaris-breadcrumb__text{align-items:center;display:inline-flex;text-decoration:none;box-sizing:border-box;gap:var(--solaris-spacing-2)}.solaris-breadcrumb__link{border-radius:var(--solaris-radius-sm);color:var(--solaris-breadcrumb-link-color);transition:all var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-breadcrumb__link:hover{text-decoration:underline;color:var(--solaris-text-default)}.solaris-breadcrumb__link:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__text{color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__text[aria-disabled=true]{color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__text[aria-current=page]{color:var(--solaris-breadcrumb-text-color);font-weight:var(--solaris-font-weight-medium)}.solaris-breadcrumb__label{line-height:1.2}.solaris-breadcrumb__separator{display:inline-flex;color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__separator solaris-icon,.solaris-breadcrumb__link solaris-icon,.solaris-breadcrumb__text solaris-icon{width:var(--solaris-breadcrumb-icon-size);height:var(--solaris-breadcrumb-icon-size)}.solaris-breadcrumb__separator solaris-icon{width:var(--solaris-breadcrumb-separator-size);height:var(--solaris-breadcrumb-separator-size)}.solaris-breadcrumb__overflow-trigger{padding:0;border:none;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__overflow-trigger:hover{color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__overflow-trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__overflow-trigger solaris-icon{width:var(--solaris-breadcrumb-icon-size);height:var(--solaris-breadcrumb-icon-size)}.solaris-breadcrumb__pager{align-items:center;display:inline-flex;gap:var(--solaris-spacing-1)}.solaris-breadcrumb__pager-button{padding:0;border:none;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);width:var(--solaris-breadcrumb-pager-size);height:var(--solaris-breadcrumb-pager-size);color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__pager-button:hover:not(:disabled){background:var(--solaris-surface-subtle);color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__pager-button:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__pager-button:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-breadcrumb__pager-button solaris-icon{width:var(--solaris-spacing-3);height:var(--solaris-spacing-3)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13187
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisBreadcrumbComponent, isStandalone: true, selector: "solaris-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, overflowPosition: { classPropertyName: "overflowPosition", publicName: "overflowPosition", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate", previous: "previous", next: "next" }, host: { properties: { "attr.data-size": "size()", "attr.data-separator": "separator()", "attr.data-overflow": "overflowPosition()" }, classAttribute: "solaris-breadcrumb" }, ngImport: i0, template: "<nav class=\"solaris-breadcrumb__nav\" [attr.aria-label]=\"resolvedLabel()\">\n <ol class=\"solaris-breadcrumb__list\">\n @for (slot of slots(); track $index) {\n <li class=\"solaris-breadcrumb__item\">\n @if (slot.kind === 'ellipsis') {\n <button\n type=\"button\"\n class=\"solaris-breadcrumb__overflow-trigger\"\n solaris-dropdown-menu-trigger\n [solarisDropdownMenuTriggerFor]=\"overflowMenu\"\n [attr.aria-label]=\"resolvedShowMoreLabel()\"\n (menuOpened)=\"overflowOpen.set(true)\"\n (menuClosed)=\"overflowOpen.set(false)\"\n >\n <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n </button>\n } @else if (isLink(slot.item)) {\n <a\n class=\"solaris-breadcrumb__link\"\n [href]=\"slot.item.href\"\n [attr.aria-label]=\"itemAriaLabel(slot.item)\"\n (click)=\"onItemClick(slot.item, $event)\"\n >\n @if (slot.item.icon) {\n <solaris-icon [name]=\"slot.item.icon!\" [decorative]=\"true\" />\n }\n @if (itemLabel(slot.item)) {\n <span class=\"solaris-breadcrumb__label\">{{\n itemLabel(slot.item)\n }}</span>\n }\n </a>\n } @else {\n <span\n class=\"solaris-breadcrumb__text\"\n [attr.aria-current]=\"isCurrent(slot.item) ? 'page' : null\"\n [attr.aria-disabled]=\"isDisabled(slot.item) ? 'true' : null\"\n [attr.aria-label]=\"itemAriaLabel(slot.item)\"\n >\n @if (slot.item.icon) {\n <solaris-icon [name]=\"slot.item.icon!\" [decorative]=\"true\" />\n }\n @if (itemLabel(slot.item)) {\n <span class=\"solaris-breadcrumb__label\">{{\n itemLabel(slot.item)\n }}</span>\n }\n </span>\n }\n\n @if (!$last) {\n <span class=\"solaris-breadcrumb__separator\" aria-hidden=\"true\">\n <solaris-icon [name]=\"separatorIcon()\" [decorative]=\"true\" />\n </span>\n }\n </li>\n }\n </ol>\n</nav>\n\n@if (showNavigation()) {\n <div class=\"solaris-breadcrumb__pager\">\n <button\n type=\"button\"\n class=\"solaris-breadcrumb__pager-button\"\n [attr.aria-label]=\"resolvedPreviousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n (click)=\"onPrevious()\"\n >\n <solaris-icon name=\"chevron-left\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"solaris-breadcrumb__pager-button\"\n [attr.aria-label]=\"resolvedNextLabel()\"\n [disabled]=\"!canGoNext()\"\n (click)=\"onNext()\"\n >\n <solaris-icon name=\"chevron-right\" [decorative]=\"true\" />\n </button>\n </div>\n}\n\n<solaris-dropdown-menu #overflowMenu>\n @for (item of hiddenItems(); track $index) {\n <solaris-dropdown-menu-item\n [label]=\"itemLabel(item)\"\n [icon]=\"item.icon\"\n [disabled]=\"item.disabled ?? false\"\n (itemSelected)=\"onOverflowItemSelect(item)\"\n />\n }\n</solaris-dropdown-menu>\n", styles: [":host{--solaris-breadcrumb-gap: var(--solaris-spacing-1);--solaris-breadcrumb-icon-size: var(--solaris-spacing-3);--solaris-breadcrumb-pager-size: var(--solaris-spacing-5);--solaris-breadcrumb-link-color: var(--solaris-text-muted);--solaris-breadcrumb-font-size: var(--solaris-font-size-md);--solaris-breadcrumb-muted-color: var(--solaris-text-muted);--solaris-breadcrumb-text-color: var(--solaris-text-default);--solaris-breadcrumb-separator-size: var(--solaris-spacing-3);display:block;box-sizing:border-box}:host([data-size=sm]){--solaris-breadcrumb-icon-size: var(--solaris-spacing-2);--solaris-breadcrumb-pager-size: var(--solaris-spacing-4);--solaris-breadcrumb-font-size: var(--solaris-font-size-sm);--solaris-breadcrumb-separator-size: var(--solaris-spacing-2)}:host([data-size=lg]){--solaris-breadcrumb-icon-size: var(--solaris-spacing-4);--solaris-breadcrumb-pager-size: var(--solaris-spacing-6);--solaris-breadcrumb-font-size: var(--solaris-font-size-lg);--solaris-breadcrumb-separator-size: var(--solaris-spacing-4)}.solaris-breadcrumb__nav{display:inline-flex;box-sizing:border-box}.solaris-breadcrumb__list{margin:0;padding:0;display:flex;flex-wrap:wrap;list-style:none;align-items:center;gap:var(--solaris-breadcrumb-gap)}.solaris-breadcrumb__item{align-items:center;display:inline-flex;gap:var(--solaris-breadcrumb-gap);font-size:var(--solaris-breadcrumb-font-size)}.solaris-breadcrumb__link,.solaris-breadcrumb__text{align-items:center;display:inline-flex;text-decoration:none;box-sizing:border-box;gap:var(--solaris-spacing-2)}.solaris-breadcrumb__link{border-radius:var(--solaris-radius-sm);color:var(--solaris-breadcrumb-link-color);transition:all var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-breadcrumb__link:hover{text-decoration:underline;color:var(--solaris-text-default)}.solaris-breadcrumb__link:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__text{color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__text[aria-disabled=true]{color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__text[aria-current=page]{color:var(--solaris-breadcrumb-text-color);font-weight:var(--solaris-font-weight-medium)}.solaris-breadcrumb__label{line-height:1.2}.solaris-breadcrumb__separator{display:inline-flex;color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__separator solaris-icon,.solaris-breadcrumb__link solaris-icon,.solaris-breadcrumb__text solaris-icon{width:var(--solaris-breadcrumb-icon-size);height:var(--solaris-breadcrumb-icon-size)}.solaris-breadcrumb__separator solaris-icon{width:var(--solaris-breadcrumb-separator-size);height:var(--solaris-breadcrumb-separator-size)}.solaris-breadcrumb__overflow-trigger{padding:0;border:none;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__overflow-trigger:hover{color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__overflow-trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__overflow-trigger solaris-icon{width:var(--solaris-breadcrumb-icon-size);height:var(--solaris-breadcrumb-icon-size)}.solaris-breadcrumb__pager{align-items:center;display:inline-flex;gap:var(--solaris-spacing-1)}.solaris-breadcrumb__pager-button{padding:0;border:none;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);width:var(--solaris-breadcrumb-pager-size);height:var(--solaris-breadcrumb-pager-size);color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__pager-button:hover:not(:disabled){background:var(--solaris-surface-subtle);color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__pager-button:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__pager-button:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-breadcrumb__pager-button solaris-icon{width:var(--solaris-spacing-3);height:var(--solaris-spacing-3)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13143
13188
|
}
|
|
13144
13189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisBreadcrumbComponent, decorators: [{
|
|
13145
13190
|
type: Component,
|
|
@@ -13329,7 +13374,7 @@ class SolarisCollapsibleComponent {
|
|
|
13329
13374
|
this.open.set(!this.open());
|
|
13330
13375
|
}
|
|
13331
13376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13332
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisCollapsibleComponent, isStandalone: true, selector: "solaris-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-appearance": "effectiveAppearance()", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null" }, classAttribute: "solaris-collapsible" }, ngImport: i0, template: "@if (headingLevel()) {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h6>\n }\n @default {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n }\n} @else {\n <div class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </div>\n}\n\n<ng-template #triggerContent>\n <button\n type=\"button\"\n class=\"solaris-collapsible__trigger\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"effectiveAriaLabel()\"\n [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n [disabled]=\"isEffectivelyDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"solaris-collapsible__trigger-label\">\n {{ labelText() }}\n </span>\n <solaris-icon\n [name]=\"effectiveIcon()\"\n class=\"solaris-collapsible__trigger-icon\"\n [decorative]=\"true\"\n />\n </button>\n</ng-template>\n\n<div\n class=\"solaris-collapsible__panel\"\n [id]=\"panelId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"triggerId()\"\n [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n [attr.inert]=\"isOpen() ? null : ''\"\n>\n <div class=\"solaris-collapsible__panel-inner\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisCollapsibleComponent, isStandalone: true, selector: "solaris-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-appearance": "effectiveAppearance()", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null" }, classAttribute: "solaris-collapsible" }, ngImport: i0, template: "@if (headingLevel()) {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h6>\n }\n @default {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n }\n} @else {\n <div class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </div>\n}\n\n<ng-template #triggerContent>\n <button\n type=\"button\"\n class=\"solaris-collapsible__trigger\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"effectiveAriaLabel()\"\n [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n [disabled]=\"isEffectivelyDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"solaris-collapsible__trigger-label\">\n {{ labelText() }}\n </span>\n <solaris-icon\n [name]=\"effectiveIcon()\"\n class=\"solaris-collapsible__trigger-icon\"\n [decorative]=\"true\"\n />\n </button>\n</ng-template>\n\n<div\n class=\"solaris-collapsible__panel\"\n [id]=\"panelId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"triggerId()\"\n [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n [attr.inert]=\"isOpen() ? null : ''\"\n>\n <div class=\"solaris-collapsible__panel-inner\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13333
13378
|
}
|
|
13334
13379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisCollapsibleComponent, decorators: [{
|
|
13335
13380
|
type: Component,
|
|
@@ -13720,7 +13765,7 @@ class SolarisEditableTabsComponent {
|
|
|
13720
13765
|
return undefined;
|
|
13721
13766
|
}
|
|
13722
13767
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13723
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n <solaris-tabs\n [value]=\"$any(value())\"\n (valueChange)=\"onValueChange($event)\"\n [defaultValue]=\"$any(defaultValue())\"\n [orientation]=\"orientation()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [shape]=\"shape()\"\n [activationMode]=\"activationMode()\"\n [contentTransition]=\"contentTransition()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n class=\"solaris-editable-tabs__inner\"\n >\n @for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-tab\n [value]=\"$any(tab.value)\"\n [label]=\"isRenaming(tab) ? undefined : tab.label\"\n [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n [icon]=\"tab.icon\"\n [badge]=\"tab.badge\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.data-editable]=\"editable() ? '' : null\"\n [attr.data-has-icon]=\"tab.icon ? '' : null\"\n [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n >\n @if (isRenaming(tab)) {\n <span class=\"solaris-editable-tabs__rename-wrapper\">\n <input\n #renameInput\n class=\"solaris-editable-tabs__rename-input\"\n [value]=\"renameValue()\"\n (input)=\"renameValue.set($any($event).target.value)\"\n (keydown)=\"onRenameKeydown($event, tab)\"\n (blur)=\"onRenameBlur(tab)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.confirmRename') ??\n 'Confirm rename'\n \"\n />\n </span>\n } @else if (hasActions(tab)) {\n <span\n class=\"solaris-editable-tabs__action-area\"\n [class.solaris-editable-tabs__action-area--visible]=\"\n showActions() === 'always'\n \"\n [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n !!tab.icon\n \"\n >\n <button\n class=\"solaris-editable-tabs__action-trigger\"\n solaris-dropdown-menu-trigger\n [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n [solarisDropdownMenuPlacement]=\"'bottom'\"\n [solarisDropdownMenuAlign]=\"'start'\"\n [solarisDropdownMenuOffset]=\"4\"\n [solarisDropdownMenuRestoreFocus]=\"true\"\n [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n (menuOpened)=\"activeMenuIndex.set(i)\"\n (menuClosed)=\"activeMenuIndex.set(null)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n \"\n tabindex=\"0\"\n type=\"button\"\n >\n <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n </button>\n </span>\n }\n </solaris-tab>\n }\n\n @for (tab of tabs(); track tab.value) {\n <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n @if (getContentTemplate(tab); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" />\n }\n </solaris-tab-panel>\n }\n </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-dropdown-menu>\n @if (canRename(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n icon=\"edit\"\n (itemSelected)=\"startRename(tab)\"\n />\n }\n @if (canSetDefault(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"\n resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n \"\n icon=\"check\"\n (itemSelected)=\"setAsDefault(tab)\"\n />\n }\n @if (canMoveLeft(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('left')\"\n [icon]=\"moveIcon('left')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n \"\n />\n }\n @if (canMoveRight(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('right')\"\n [icon]=\"moveIcon('right')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n \"\n />\n }\n @if (tab.customActions?.length) {\n @for (action of tab.customActions; track action.id) {\n @if (!action.disabled) {\n <solaris-dropdown-menu-item\n [label]=\"action.label ?? ''\"\n [labelKey]=\"action.labelKey\"\n [icon]=\"action.icon\"\n [color]=\"action.color ?? 'neutral'\"\n (itemSelected)=\"handleCustomAction(tab, action)\"\n />\n }\n }\n }\n @if (canRemove(tab)) {\n <solaris-divider />\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n icon=\"x\"\n color=\"danger\"\n (itemSelected)=\"confirmRemove(tab, i)\"\n />\n }\n </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-primary-base-alpha: #4282fb4d;--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "density", "shape", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height", "label", "labelKey", "textPosition"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13768
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n <solaris-tabs\n [value]=\"$any(value())\"\n (valueChange)=\"onValueChange($event)\"\n [defaultValue]=\"$any(defaultValue())\"\n [orientation]=\"orientation()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [shape]=\"shape()\"\n [activationMode]=\"activationMode()\"\n [contentTransition]=\"contentTransition()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n class=\"solaris-editable-tabs__inner\"\n >\n @for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-tab\n [value]=\"$any(tab.value)\"\n [label]=\"isRenaming(tab) ? undefined : tab.label\"\n [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n [icon]=\"tab.icon\"\n [badge]=\"tab.badge\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.data-editable]=\"editable() ? '' : null\"\n [attr.data-has-icon]=\"tab.icon ? '' : null\"\n [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n >\n @if (isRenaming(tab)) {\n <span class=\"solaris-editable-tabs__rename-wrapper\">\n <input\n #renameInput\n class=\"solaris-editable-tabs__rename-input\"\n [value]=\"renameValue()\"\n (input)=\"renameValue.set($any($event).target.value)\"\n (keydown)=\"onRenameKeydown($event, tab)\"\n (blur)=\"onRenameBlur(tab)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.confirmRename') ??\n 'Confirm rename'\n \"\n />\n </span>\n } @else if (hasActions(tab)) {\n <span\n class=\"solaris-editable-tabs__action-area\"\n [class.solaris-editable-tabs__action-area--visible]=\"\n showActions() === 'always'\n \"\n [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n !!tab.icon\n \"\n >\n <button\n class=\"solaris-editable-tabs__action-trigger\"\n solaris-dropdown-menu-trigger\n [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n [solarisDropdownMenuPlacement]=\"'bottom'\"\n [solarisDropdownMenuAlign]=\"'start'\"\n [solarisDropdownMenuOffset]=\"4\"\n [solarisDropdownMenuRestoreFocus]=\"true\"\n [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n (menuOpened)=\"activeMenuIndex.set(i)\"\n (menuClosed)=\"activeMenuIndex.set(null)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n \"\n tabindex=\"0\"\n type=\"button\"\n >\n <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n </button>\n </span>\n }\n </solaris-tab>\n }\n\n @for (tab of tabs(); track tab.value) {\n <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n @if (getContentTemplate(tab); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" />\n }\n </solaris-tab-panel>\n }\n </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-dropdown-menu>\n @if (canRename(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n icon=\"edit\"\n (itemSelected)=\"startRename(tab)\"\n />\n }\n @if (canSetDefault(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"\n resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n \"\n icon=\"check\"\n (itemSelected)=\"setAsDefault(tab)\"\n />\n }\n @if (canMoveLeft(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('left')\"\n [icon]=\"moveIcon('left')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n \"\n />\n }\n @if (canMoveRight(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('right')\"\n [icon]=\"moveIcon('right')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n \"\n />\n }\n @if (tab.customActions?.length) {\n @for (action of tab.customActions; track action.id) {\n @if (!action.disabled) {\n <solaris-dropdown-menu-item\n [label]=\"action.label ?? ''\"\n [labelKey]=\"action.labelKey\"\n [icon]=\"action.icon\"\n [color]=\"action.color ?? 'neutral'\"\n (itemSelected)=\"handleCustomAction(tab, action)\"\n />\n }\n }\n }\n @if (canRemove(tab)) {\n <solaris-divider />\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n icon=\"x\"\n color=\"danger\"\n (itemSelected)=\"confirmRemove(tab, i)\"\n />\n }\n </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-primary-base-alpha: #4282fb4d;--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "density", "shape", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height", "label", "labelKey", "textPosition"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13724
13769
|
}
|
|
13725
13770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, decorators: [{
|
|
13726
13771
|
type: Component,
|
|
@@ -13874,5 +13919,5 @@ function provideSolaris(config) {
|
|
|
13874
13919
|
* Generated bundle index. Do not edit.
|
|
13875
13920
|
*/
|
|
13876
13921
|
|
|
13877
|
-
export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator };
|
|
13922
|
+
export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator };
|
|
13878
13923
|
//# sourceMappingURL=educarehq-solaris-ui.mjs.map
|