@educarehq/solaris-ui 0.7.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -236,6 +236,10 @@ class SolarisTranslateService {
|
|
|
236
236
|
if (defaultMap && key in defaultMap) {
|
|
237
237
|
return this.interpolate(defaultMap[key], params);
|
|
238
238
|
}
|
|
239
|
+
const resolved = this.config.resolver?.(key, params);
|
|
240
|
+
if (resolved !== undefined && resolved !== key) {
|
|
241
|
+
return resolved;
|
|
242
|
+
}
|
|
239
243
|
return key;
|
|
240
244
|
}
|
|
241
245
|
resolveLocale() {
|
|
@@ -3154,8 +3158,8 @@ class SolarisFormFieldComponent {
|
|
|
3154
3158
|
projectedLabel = contentChild(SolarisFormLabelComponent, ...(ngDevMode ? [{ debugName: "projectedLabel" }] : /* istanbul ignore next */ []));
|
|
3155
3159
|
projectedHint = contentChild(SolarisFormHintComponent, ...(ngDevMode ? [{ debugName: "projectedHint" }] : /* istanbul ignore next */ []));
|
|
3156
3160
|
projectedError = contentChild(SolarisFormErrorComponent, ...(ngDevMode ? [{ debugName: "projectedError" }] : /* istanbul ignore next */ []));
|
|
3157
|
-
|
|
3158
|
-
|
|
3161
|
+
projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
|
|
3162
|
+
projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
|
|
3159
3163
|
formControl = contentChild(SolarisFormControl, ...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
|
|
3160
3164
|
formControlDirective = contentChild(FormControlDirective, ...(ngDevMode ? [{ debugName: "formControlDirective" }] : /* istanbul ignore next */ []));
|
|
3161
3165
|
formControlName = contentChild(FormControlName, ...(ngDevMode ? [{ debugName: "formControlName" }] : /* istanbul ignore next */ []));
|
|
@@ -3202,8 +3206,16 @@ class SolarisFormFieldComponent {
|
|
|
3202
3206
|
hasProjectedLabel = computed(() => !!this.projectedLabel(), ...(ngDevMode ? [{ debugName: "hasProjectedLabel" }] : /* istanbul ignore next */ []));
|
|
3203
3207
|
hasProjectedHint = computed(() => !!this.projectedHint(), ...(ngDevMode ? [{ debugName: "hasProjectedHint" }] : /* istanbul ignore next */ []));
|
|
3204
3208
|
hasProjectedError = computed(() => !!this.projectedError(), ...(ngDevMode ? [{ debugName: "hasProjectedError" }] : /* istanbul ignore next */ []));
|
|
3205
|
-
|
|
3206
|
-
|
|
3209
|
+
hasPrefixInput = input(undefined, { ...(ngDevMode ? { debugName: "hasPrefixInput" } : /* istanbul ignore next */ {}), alias: 'hasPrefix' });
|
|
3210
|
+
hasSuffixInput = input(undefined, { ...(ngDevMode ? { debugName: "hasSuffixInput" } : /* istanbul ignore next */ {}), alias: 'hasSuffix' });
|
|
3211
|
+
prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
3212
|
+
suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
|
|
3213
|
+
effectiveHasPrefix = computed(() => {
|
|
3214
|
+
return (!!this.prefix() || !!this.projectedPrefix() || !!this.hasPrefixInput());
|
|
3215
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveHasPrefix" }] : /* istanbul ignore next */ []));
|
|
3216
|
+
effectiveHasSuffix = computed(() => {
|
|
3217
|
+
return (!!this.suffix() || !!this.projectedSuffix() || !!this.hasSuffixInput());
|
|
3218
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveHasSuffix" }] : /* istanbul ignore next */ []));
|
|
3207
3219
|
controlType = computed(() => {
|
|
3208
3220
|
return this.isTextareaControl() ? 'textarea' : 'other';
|
|
3209
3221
|
}, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
|
|
@@ -3332,8 +3344,6 @@ class SolarisFormFieldComponent {
|
|
|
3332
3344
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
3333
3345
|
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
3334
3346
|
ngAfterContentInit() {
|
|
3335
|
-
this.hasPrefix.set(!!this.prefix());
|
|
3336
|
-
this.hasSuffix.set(!!this.suffix());
|
|
3337
3347
|
this.detectControl();
|
|
3338
3348
|
this.connectControl();
|
|
3339
3349
|
this.syncDescribedBy();
|
|
@@ -3510,11 +3520,15 @@ class SolarisFormFieldComponent {
|
|
|
3510
3520
|
}
|
|
3511
3521
|
}
|
|
3512
3522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3513
|
-
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 } }, 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": "hasPrefix() ? \"\" : null", "attr.data-has-suffix": "hasSuffix() ? \"\" : 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: "prefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffix", 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]=\"hasPrefix() ? null : ''\"\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]=\"hasSuffix() ? null : ''\"\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-font-size-lg);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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3523
|
+
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 });
|
|
3514
3524
|
}
|
|
3515
3525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, decorators: [{
|
|
3516
3526
|
type: Component,
|
|
3517
|
-
args: [{ selector: 'solaris-form-field', standalone: true, imports: [
|
|
3527
|
+
args: [{ selector: 'solaris-form-field', standalone: true, imports: [
|
|
3528
|
+
SolarisIconComponent,
|
|
3529
|
+
SolarisFormPrefixDirective,
|
|
3530
|
+
SolarisFormSuffixDirective,
|
|
3531
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3518
3532
|
'[attr.data-radius]': 'radius()',
|
|
3519
3533
|
'[attr.data-bwignore]': '"true"',
|
|
3520
3534
|
'[attr.data-appearance]': 'appearance()',
|
|
@@ -3523,12 +3537,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3523
3537
|
'[attr.data-control-resize]': 'controlResize()',
|
|
3524
3538
|
'[attr.data-invalid]': 'isInvalid() ? "" : null',
|
|
3525
3539
|
'[attr.data-focused]': 'isFocused() ? "" : null',
|
|
3526
|
-
'[attr.data-has-prefix]': '
|
|
3527
|
-
'[attr.data-has-suffix]': '
|
|
3540
|
+
'[attr.data-has-prefix]': 'effectiveHasPrefix() ? "" : null',
|
|
3541
|
+
'[attr.data-has-suffix]': 'effectiveHasSuffix() ? "" : null',
|
|
3528
3542
|
'[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
|
|
3529
3543
|
'[attr.data-readonly]': 'isEffectivelyReadonly() ? "" : null',
|
|
3530
|
-
}, 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]=\"hasPrefix() ? null : ''\"\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]=\"hasSuffix() ? null : ''\"\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-font-size-lg);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"] }]
|
|
3531
|
-
}], 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 }] }],
|
|
3544
|
+
}, 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"] }]
|
|
3545
|
+
}], 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 }] }] } });
|
|
3532
3546
|
|
|
3533
3547
|
class SolarisFormFieldTriggerDirective {
|
|
3534
3548
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -4064,7 +4078,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4064
4078
|
options = contentChildren(SolarisOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
|
|
4065
4079
|
optionGroups = contentChildren(SolarisOptionGroupComponent, { ...(ngDevMode ? { debugName: "optionGroups" } : /* istanbul ignore next */ {}), descendants: true });
|
|
4066
4080
|
hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
4067
|
-
|
|
4081
|
+
prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
4068
4082
|
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
4069
4083
|
error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
|
|
4070
4084
|
hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
|
|
@@ -4781,7 +4795,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4781
4795
|
return -1;
|
|
4782
4796
|
}
|
|
4783
4797
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4784
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisSelectComponent, isStandalone: true, selector: "solaris-select", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null },
|
|
4798
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisSelectComponent, isStandalone: true, selector: "solaris-select", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", 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 }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, emptyTextKey: { classPropertyName: "emptyTextKey", publicName: "emptyTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, loadingTextKey: { classPropertyName: "loadingTextKey", publicName: "loadingTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, noResultsTextKey: { classPropertyName: "noResultsTextKey", publicName: "noResultsTextKey", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabelKey: { classPropertyName: "clearLabelKey", publicName: "clearLabelKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderKey: { classPropertyName: "searchPlaceholderKey", publicName: "searchPlaceholderKey", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, panelMatchTriggerWidth: { classPropertyName: "panelMatchTriggerWidth", publicName: "panelMatchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, manualInvalid: { classPropertyName: "manualInvalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", openChange: "openChange", searchChange: "searchChange", valueChange: "valueChange", selectionChange: "selectionChange" }, host: { attributes: { "solaris-select": "" }, properties: { "attr.id": "elementId()", "attr.data-open": "panelOpen() ? \"\" : null", "attr.aria-label": "ariaLabelText() ?? null", "attr.data-has-value": "hasValue() ? \"\" : null" } }, providers: [
|
|
4785
4799
|
{
|
|
4786
4800
|
provide: NG_VALUE_ACCESSOR,
|
|
4787
4801
|
useExisting: forwardRef(() => SolarisSelectComponent),
|
|
@@ -4791,7 +4805,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4791
4805
|
provide: SolarisFormControl,
|
|
4792
4806
|
useExisting: forwardRef(() => SolarisSelectComponent),
|
|
4793
4807
|
},
|
|
4794
|
-
], 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 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 (icon(); as iconName) {\n <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\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"] }, { 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 });
|
|
4808
|
+
], 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 });
|
|
4795
4809
|
}
|
|
4796
4810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, decorators: [{
|
|
4797
4811
|
type: Component,
|
|
@@ -4818,12 +4832,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4818
4832
|
'[attr.data-open]': 'panelOpen() ? "" : null',
|
|
4819
4833
|
'[attr.aria-label]': 'ariaLabelText() ?? null',
|
|
4820
4834
|
'[attr.data-has-value]': 'hasValue() ? "" : null',
|
|
4821
|
-
}, 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 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 (
|
|
4835
|
+
}, 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"] }]
|
|
4822
4836
|
}], 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), { ...{
|
|
4823
4837
|
descendants: true,
|
|
4824
4838
|
}, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
|
|
4825
4839
|
descendants: true,
|
|
4826
|
-
}, isSignal: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }],
|
|
4840
|
+
}, isSignal: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], emptyTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTextKey", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], loadingTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTextKey", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], noResultsTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTextKey", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], clearLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabelKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderKey", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], panelMatchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMatchTriggerWidth", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], manualInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
4827
4841
|
|
|
4828
4842
|
const SOLARIS_TOOLTIP_PANEL_DATA = new InjectionToken('SolarisTooltipPanelData');
|
|
4829
4843
|
|
|
@@ -5515,7 +5529,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
5515
5529
|
readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
|
|
5516
5530
|
requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
|
|
5517
5531
|
panelMaxHeight = input('320px', ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
|
|
5518
|
-
|
|
5532
|
+
prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
5519
5533
|
displayWith = input(...(ngDevMode ? [undefined, { debugName: "displayWith" }] : /* istanbul ignore next */ []));
|
|
5520
5534
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
5521
5535
|
compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
|
|
@@ -6467,7 +6481,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
6467
6481
|
return -1;
|
|
6468
6482
|
}
|
|
6469
6483
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6470
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisMultiSelectComponent, isStandalone: true, selector: "solaris-multi-select", inputs: { hint: { classPropertyName: "hint", publicName: "hint", 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 }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, emptyTextKey: { classPropertyName: "emptyTextKey", publicName: "emptyTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, loadingTextKey: { classPropertyName: "loadingTextKey", publicName: "loadingTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabelKey: { classPropertyName: "clearLabelKey", publicName: "clearLabelKey", isSignal: true, isRequired: false, transformFunction: null }, removeChipLabel: { classPropertyName: "removeChipLabel", publicName: "removeChipLabel", isSignal: true, isRequired: false, transformFunction: null }, removeChipLabelKey: { classPropertyName: "removeChipLabelKey", publicName: "removeChipLabelKey", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, noResultsTextKey: { classPropertyName: "noResultsTextKey", publicName: "noResultsTextKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderKey: { classPropertyName: "searchPlaceholderKey", publicName: "searchPlaceholderKey", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, panelMatchTriggerWidth: { classPropertyName: "panelMatchTriggerWidth", publicName: "panelMatchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null },
|
|
6484
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisMultiSelectComponent, isStandalone: true, selector: "solaris-multi-select", inputs: { hint: { classPropertyName: "hint", publicName: "hint", 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 }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, emptyTextKey: { classPropertyName: "emptyTextKey", publicName: "emptyTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, loadingTextKey: { classPropertyName: "loadingTextKey", publicName: "loadingTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabelKey: { classPropertyName: "clearLabelKey", publicName: "clearLabelKey", isSignal: true, isRequired: false, transformFunction: null }, removeChipLabel: { classPropertyName: "removeChipLabel", publicName: "removeChipLabel", isSignal: true, isRequired: false, transformFunction: null }, removeChipLabelKey: { classPropertyName: "removeChipLabelKey", publicName: "removeChipLabelKey", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, noResultsTextKey: { classPropertyName: "noResultsTextKey", publicName: "noResultsTextKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderKey: { classPropertyName: "searchPlaceholderKey", publicName: "searchPlaceholderKey", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, panelMatchTriggerWidth: { classPropertyName: "panelMatchTriggerWidth", publicName: "panelMatchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, manualInvalid: { classPropertyName: "manualInvalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabelKey: { classPropertyName: "selectAllLabelKey", publicName: "selectAllLabelKey", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabelKey: { classPropertyName: "selectedCountLabelKey", publicName: "selectedCountLabelKey", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, overflowLabelKey: { classPropertyName: "overflowLabelKey", publicName: "overflowLabelKey", isSignal: true, isRequired: false, transformFunction: null }, minSelected: { classPropertyName: "minSelected", publicName: "minSelected", isSignal: true, isRequired: false, transformFunction: null }, maxSelected: { classPropertyName: "maxSelected", publicName: "maxSelected", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTooltip: { classPropertyName: "showSelectionTooltip", publicName: "showSelectionTooltip", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", openChange: "openChange", searchChange: "searchChange", valueChange: "valueChange", selectionChange: "selectionChange" }, host: { attributes: { "solaris-multi-select": "" }, properties: { "attr.id": "elementId()", "attr.data-open": "panelOpen() ? \"\" : null", "attr.aria-label": "ariaLabelText() ?? null", "attr.data-has-value": "hasValue() ? \"\" : null" } }, providers: [
|
|
6471
6485
|
{
|
|
6472
6486
|
provide: NG_VALUE_ACCESSOR,
|
|
6473
6487
|
useExisting: forwardRef(() => SolarisMultiSelectComponent),
|
|
@@ -6477,7 +6491,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
6477
6491
|
provide: SolarisFormControl,
|
|
6478
6492
|
useExisting: forwardRef(() => SolarisMultiSelectComponent),
|
|
6479
6493
|
},
|
|
6480
|
-
], 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 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 (icon(); as iconName) {\n <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\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"] }, { 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 });
|
|
6494
|
+
], 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 });
|
|
6481
6495
|
}
|
|
6482
6496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMultiSelectComponent, decorators: [{
|
|
6483
6497
|
type: Component,
|
|
@@ -6505,12 +6519,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6505
6519
|
'[attr.data-open]': 'panelOpen() ? "" : null',
|
|
6506
6520
|
'[attr.aria-label]': 'ariaLabelText() ?? null',
|
|
6507
6521
|
'[attr.data-has-value]': 'hasValue() ? "" : null',
|
|
6508
|
-
}, 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 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 (icon(); as iconName) {\n <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\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"] }]
|
|
6522
|
+
}, 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"] }]
|
|
6509
6523
|
}], 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), { ...{
|
|
6510
6524
|
descendants: true,
|
|
6511
6525
|
}, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
|
|
6512
6526
|
descendants: true,
|
|
6513
|
-
}, isSignal: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], emptyTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTextKey", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], loadingTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTextKey", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], clearLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabelKey", required: false }] }], removeChipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeChipLabel", required: false }] }], removeChipLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeChipLabelKey", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], noResultsTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTextKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderKey", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], panelMatchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMatchTriggerWidth", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }],
|
|
6527
|
+
}, isSignal: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], emptyTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTextKey", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], loadingTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTextKey", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], clearLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabelKey", required: false }] }], removeChipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeChipLabel", required: false }] }], removeChipLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeChipLabelKey", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], noResultsTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTextKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderKey", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], panelMatchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMatchTriggerWidth", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], manualInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], selectAllLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabelKey", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }], selectedCountLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabelKey", required: false }] }], overflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabel", required: false }] }], overflowLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabelKey", required: false }] }], minSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelected", required: false }] }], maxSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelected", required: false }] }], showSelectionTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionTooltip", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], triggerContentRef: [{ type: i0.ViewChild, args: ['triggerContent', { isSignal: true }] }] } });
|
|
6514
6528
|
|
|
6515
6529
|
const SUPPORTED_TYPES = new Set([
|
|
6516
6530
|
'text',
|
|
@@ -8636,6 +8650,8 @@ function hasSequentialChars(value, charset) {
|
|
|
8636
8650
|
class SolarisPasswordFieldComponent {
|
|
8637
8651
|
translateService = inject(SolarisTranslateService);
|
|
8638
8652
|
inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
|
|
8653
|
+
projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
|
|
8654
|
+
projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
|
|
8639
8655
|
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
8640
8656
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
8641
8657
|
labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
@@ -8657,6 +8673,14 @@ class SolarisPasswordFieldComponent {
|
|
|
8657
8673
|
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
8658
8674
|
radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
8659
8675
|
fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
8676
|
+
prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
8677
|
+
suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
|
|
8678
|
+
hasPrefix = computed(() => {
|
|
8679
|
+
return !!this.prefix() || !!this.projectedPrefix();
|
|
8680
|
+
}, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
|
|
8681
|
+
hasSuffix = computed(() => {
|
|
8682
|
+
return !!this.suffix() || !!this.projectedSuffix() || this.showToggle();
|
|
8683
|
+
}, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
|
|
8660
8684
|
showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
|
|
8661
8685
|
visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
8662
8686
|
showRequirements = input(false, ...(ngDevMode ? [{ debugName: "showRequirements" }] : /* istanbul ignore next */ []));
|
|
@@ -8893,13 +8917,13 @@ class SolarisPasswordFieldComponent {
|
|
|
8893
8917
|
}
|
|
8894
8918
|
}
|
|
8895
8919
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8896
|
-
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 }, 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: [
|
|
8920
|
+
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: [
|
|
8897
8921
|
{
|
|
8898
8922
|
provide: NG_VALUE_ACCESSOR,
|
|
8899
8923
|
useExisting: forwardRef(() => SolarisPasswordFieldComponent),
|
|
8900
8924
|
multi: true,
|
|
8901
8925
|
},
|
|
8902
|
-
], 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>\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 (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</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()
|
|
8926
|
+
], 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 select=\"[solaris-form-prefix]\" />\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 select=\"[solaris-form-suffix]\" />\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__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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8903
8927
|
}
|
|
8904
8928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, decorators: [{
|
|
8905
8929
|
type: Component,
|
|
@@ -8915,8 +8939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8915
8939
|
useExisting: forwardRef(() => SolarisPasswordFieldComponent),
|
|
8916
8940
|
multi: true,
|
|
8917
8941
|
},
|
|
8918
|
-
], 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>\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 (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</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()
|
|
8919
|
-
}], ctorParameters: () => [], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { 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 }] }], 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"] }] } });
|
|
8942
|
+
], 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 select=\"[solaris-form-prefix]\" />\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 select=\"[solaris-form-suffix]\" />\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__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"] }]
|
|
8943
|
+
}], 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"] }] } });
|
|
8920
8944
|
|
|
8921
8945
|
const BASIC_EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
8922
8946
|
function solarisEmailValidator() {
|
|
@@ -8991,6 +9015,8 @@ function isDomainBlocked(domain, blockedDomains) {
|
|
|
8991
9015
|
class SolarisEmailFieldComponent {
|
|
8992
9016
|
translateService = inject(SolarisTranslateService);
|
|
8993
9017
|
inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
|
|
9018
|
+
projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
|
|
9019
|
+
projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
|
|
8994
9020
|
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
8995
9021
|
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
8996
9022
|
hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
|
|
@@ -9025,6 +9051,14 @@ class SolarisEmailFieldComponent {
|
|
|
9025
9051
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
9026
9052
|
maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
9027
9053
|
validateDomain = input(false, { ...(ngDevMode ? { debugName: "validateDomain" } : /* istanbul ignore next */ {}), transform: (v) => v });
|
|
9054
|
+
prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
9055
|
+
suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
|
|
9056
|
+
hasPrefix = computed(() => {
|
|
9057
|
+
return !!this.projectedPrefix() || !!this.prefix();
|
|
9058
|
+
}, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
|
|
9059
|
+
hasSuffix = computed(() => {
|
|
9060
|
+
return !!this.projectedSuffix() || !!this.suffix();
|
|
9061
|
+
}, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
|
|
9028
9062
|
internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
|
|
9029
9063
|
internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
|
|
9030
9064
|
internalFocused = signal(false, ...(ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []));
|
|
@@ -9172,24 +9206,29 @@ class SolarisEmailFieldComponent {
|
|
|
9172
9206
|
return undefined;
|
|
9173
9207
|
}
|
|
9174
9208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
9209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEmailFieldComponent, isStandalone: true, selector: "solaris-email-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", 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 }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalidError: { classPropertyName: "invalidError", publicName: "invalidError", isSignal: true, isRequired: false, transformFunction: null }, requiredError: { classPropertyName: "requiredError", publicName: "requiredError", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, invalidErrorKey: { classPropertyName: "invalidErrorKey", publicName: "invalidErrorKey", isSignal: true, isRequired: false, transformFunction: null }, requiredErrorKey: { classPropertyName: "requiredErrorKey", publicName: "requiredErrorKey", isSignal: true, isRequired: false, transformFunction: null }, allowedDomainError: { classPropertyName: "allowedDomainError", publicName: "allowedDomainError", isSignal: true, isRequired: false, transformFunction: null }, blockedDomainError: { classPropertyName: "blockedDomainError", publicName: "blockedDomainError", 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 }, trimOnBlur: { classPropertyName: "trimOnBlur", publicName: "trimOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowedDomainErrorKey: { classPropertyName: "allowedDomainErrorKey", publicName: "allowedDomainErrorKey", isSignal: true, isRequired: false, transformFunction: null }, blockedDomainErrorKey: { classPropertyName: "blockedDomainErrorKey", publicName: "blockedDomainErrorKey", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, normalizeLowercase: { classPropertyName: "normalizeLowercase", publicName: "normalizeLowercase", isSignal: true, isRequired: false, transformFunction: null }, allowedDomains: { classPropertyName: "allowedDomains", publicName: "allowedDomains", isSignal: true, isRequired: false, transformFunction: null }, blockedDomains: { classPropertyName: "blockedDomains", publicName: "blockedDomains", 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 }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, validateDomain: { classPropertyName: "validateDomain", publicName: "validateDomain", 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 } }, providers: [
|
|
9176
9210
|
{
|
|
9177
9211
|
provide: NG_VALUE_ACCESSOR,
|
|
9178
9212
|
useExisting: forwardRef(() => SolarisEmailFieldComponent),
|
|
9179
9213
|
multi: true,
|
|
9180
9214
|
},
|
|
9181
|
-
], 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>\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</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"] }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9215
|
+
], 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 select=\"[solaris-form-prefix]\" />\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 select=\"[solaris-form-suffix]\" />\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: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9182
9216
|
}
|
|
9183
9217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEmailFieldComponent, decorators: [{
|
|
9184
9218
|
type: Component,
|
|
9185
|
-
args: [{ selector: 'solaris-email-field', standalone: true, imports: [
|
|
9219
|
+
args: [{ selector: 'solaris-email-field', standalone: true, imports: [
|
|
9220
|
+
FormsModule,
|
|
9221
|
+
SolarisFormFieldComponent,
|
|
9222
|
+
SolarisInputDirective,
|
|
9223
|
+
SolarisIconComponent,
|
|
9224
|
+
], providers: [
|
|
9186
9225
|
{
|
|
9187
9226
|
provide: NG_VALUE_ACCESSOR,
|
|
9188
9227
|
useExisting: forwardRef(() => SolarisEmailFieldComponent),
|
|
9189
9228
|
multi: true,
|
|
9190
9229
|
},
|
|
9191
|
-
], 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>\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</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"] }]
|
|
9192
|
-
}], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { 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 }] }] } });
|
|
9230
|
+
], 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 select=\"[solaris-form-prefix]\" />\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 select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"] }]
|
|
9231
|
+
}], 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 }] }] } });
|
|
9193
9232
|
|
|
9194
9233
|
class SolarisSkeletonComponent {
|
|
9195
9234
|
variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|