@educarehq/solaris-ui 0.7.2 → 0.9.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.
|
@@ -3158,8 +3158,8 @@ class SolarisFormFieldComponent {
|
|
|
3158
3158
|
projectedLabel = contentChild(SolarisFormLabelComponent, ...(ngDevMode ? [{ debugName: "projectedLabel" }] : /* istanbul ignore next */ []));
|
|
3159
3159
|
projectedHint = contentChild(SolarisFormHintComponent, ...(ngDevMode ? [{ debugName: "projectedHint" }] : /* istanbul ignore next */ []));
|
|
3160
3160
|
projectedError = contentChild(SolarisFormErrorComponent, ...(ngDevMode ? [{ debugName: "projectedError" }] : /* istanbul ignore next */ []));
|
|
3161
|
-
|
|
3162
|
-
|
|
3161
|
+
projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
|
|
3162
|
+
projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
|
|
3163
3163
|
formControl = contentChild(SolarisFormControl, ...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
|
|
3164
3164
|
formControlDirective = contentChild(FormControlDirective, ...(ngDevMode ? [{ debugName: "formControlDirective" }] : /* istanbul ignore next */ []));
|
|
3165
3165
|
formControlName = contentChild(FormControlName, ...(ngDevMode ? [{ debugName: "formControlName" }] : /* istanbul ignore next */ []));
|
|
@@ -3206,8 +3206,16 @@ class SolarisFormFieldComponent {
|
|
|
3206
3206
|
hasProjectedLabel = computed(() => !!this.projectedLabel(), ...(ngDevMode ? [{ debugName: "hasProjectedLabel" }] : /* istanbul ignore next */ []));
|
|
3207
3207
|
hasProjectedHint = computed(() => !!this.projectedHint(), ...(ngDevMode ? [{ debugName: "hasProjectedHint" }] : /* istanbul ignore next */ []));
|
|
3208
3208
|
hasProjectedError = computed(() => !!this.projectedError(), ...(ngDevMode ? [{ debugName: "hasProjectedError" }] : /* istanbul ignore next */ []));
|
|
3209
|
-
|
|
3210
|
-
|
|
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 */ []));
|
|
3211
3219
|
controlType = computed(() => {
|
|
3212
3220
|
return this.isTextareaControl() ? 'textarea' : 'other';
|
|
3213
3221
|
}, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
|
|
@@ -3336,8 +3344,6 @@ class SolarisFormFieldComponent {
|
|
|
3336
3344
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
3337
3345
|
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
3338
3346
|
ngAfterContentInit() {
|
|
3339
|
-
this.hasPrefix.set(!!this.prefix());
|
|
3340
|
-
this.hasSuffix.set(!!this.suffix());
|
|
3341
3347
|
this.detectControl();
|
|
3342
3348
|
this.connectControl();
|
|
3343
3349
|
this.syncDescribedBy();
|
|
@@ -3514,11 +3520,15 @@ class SolarisFormFieldComponent {
|
|
|
3514
3520
|
}
|
|
3515
3521
|
}
|
|
3516
3522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3517
|
-
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 });
|
|
3518
3524
|
}
|
|
3519
3525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, decorators: [{
|
|
3520
3526
|
type: Component,
|
|
3521
|
-
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: {
|
|
3522
3532
|
'[attr.data-radius]': 'radius()',
|
|
3523
3533
|
'[attr.data-bwignore]': '"true"',
|
|
3524
3534
|
'[attr.data-appearance]': 'appearance()',
|
|
@@ -3527,12 +3537,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3527
3537
|
'[attr.data-control-resize]': 'controlResize()',
|
|
3528
3538
|
'[attr.data-invalid]': 'isInvalid() ? "" : null',
|
|
3529
3539
|
'[attr.data-focused]': 'isFocused() ? "" : null',
|
|
3530
|
-
'[attr.data-has-prefix]': '
|
|
3531
|
-
'[attr.data-has-suffix]': '
|
|
3540
|
+
'[attr.data-has-prefix]': 'effectiveHasPrefix() ? "" : null',
|
|
3541
|
+
'[attr.data-has-suffix]': 'effectiveHasSuffix() ? "" : null',
|
|
3532
3542
|
'[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
|
|
3533
3543
|
'[attr.data-readonly]': 'isEffectivelyReadonly() ? "" : null',
|
|
3534
|
-
}, 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"] }]
|
|
3535
|
-
}], 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 }] }] } });
|
|
3536
3546
|
|
|
3537
3547
|
class SolarisFormFieldTriggerDirective {
|
|
3538
3548
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -4068,7 +4078,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4068
4078
|
options = contentChildren(SolarisOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
|
|
4069
4079
|
optionGroups = contentChildren(SolarisOptionGroupComponent, { ...(ngDevMode ? { debugName: "optionGroups" } : /* istanbul ignore next */ {}), descendants: true });
|
|
4070
4080
|
hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
4071
|
-
|
|
4081
|
+
prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
4072
4082
|
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
4073
4083
|
error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
|
|
4074
4084
|
hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
|
|
@@ -4785,7 +4795,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4785
4795
|
return -1;
|
|
4786
4796
|
}
|
|
4787
4797
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4788
|
-
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: [
|
|
4789
4799
|
{
|
|
4790
4800
|
provide: NG_VALUE_ACCESSOR,
|
|
4791
4801
|
useExisting: forwardRef(() => SolarisSelectComponent),
|
|
@@ -4795,7 +4805,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4795
4805
|
provide: SolarisFormControl,
|
|
4796
4806
|
useExisting: forwardRef(() => SolarisSelectComponent),
|
|
4797
4807
|
},
|
|
4798
|
-
], 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 });
|
|
4799
4809
|
}
|
|
4800
4810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, decorators: [{
|
|
4801
4811
|
type: Component,
|
|
@@ -4822,12 +4832,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4822
4832
|
'[attr.data-open]': 'panelOpen() ? "" : null',
|
|
4823
4833
|
'[attr.aria-label]': 'ariaLabelText() ?? null',
|
|
4824
4834
|
'[attr.data-has-value]': 'hasValue() ? "" : null',
|
|
4825
|
-
}, 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"] }]
|
|
4826
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), { ...{
|
|
4827
4837
|
descendants: true,
|
|
4828
4838
|
}, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
|
|
4829
4839
|
descendants: true,
|
|
4830
|
-
}, 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"] }] } });
|
|
4831
4841
|
|
|
4832
4842
|
const SOLARIS_TOOLTIP_PANEL_DATA = new InjectionToken('SolarisTooltipPanelData');
|
|
4833
4843
|
|
|
@@ -5519,7 +5529,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
5519
5529
|
readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
|
|
5520
5530
|
requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
|
|
5521
5531
|
panelMaxHeight = input('320px', ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
|
|
5522
|
-
|
|
5532
|
+
prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
5523
5533
|
displayWith = input(...(ngDevMode ? [undefined, { debugName: "displayWith" }] : /* istanbul ignore next */ []));
|
|
5524
5534
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
5525
5535
|
compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
|
|
@@ -6471,7 +6481,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
6471
6481
|
return -1;
|
|
6472
6482
|
}
|
|
6473
6483
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6474
|
-
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: [
|
|
6475
6485
|
{
|
|
6476
6486
|
provide: NG_VALUE_ACCESSOR,
|
|
6477
6487
|
useExisting: forwardRef(() => SolarisMultiSelectComponent),
|
|
@@ -6481,7 +6491,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
6481
6491
|
provide: SolarisFormControl,
|
|
6482
6492
|
useExisting: forwardRef(() => SolarisMultiSelectComponent),
|
|
6483
6493
|
},
|
|
6484
|
-
], 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 });
|
|
6485
6495
|
}
|
|
6486
6496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMultiSelectComponent, decorators: [{
|
|
6487
6497
|
type: Component,
|
|
@@ -6509,12 +6519,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6509
6519
|
'[attr.data-open]': 'panelOpen() ? "" : null',
|
|
6510
6520
|
'[attr.aria-label]': 'ariaLabelText() ?? null',
|
|
6511
6521
|
'[attr.data-has-value]': 'hasValue() ? "" : null',
|
|
6512
|
-
}, 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"] }]
|
|
6513
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), { ...{
|
|
6514
6524
|
descendants: true,
|
|
6515
6525
|
}, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
|
|
6516
6526
|
descendants: true,
|
|
6517
|
-
}, 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 }] }] } });
|
|
6518
6528
|
|
|
6519
6529
|
const SUPPORTED_TYPES = new Set([
|
|
6520
6530
|
'text',
|
|
@@ -8640,6 +8650,8 @@ function hasSequentialChars(value, charset) {
|
|
|
8640
8650
|
class SolarisPasswordFieldComponent {
|
|
8641
8651
|
translateService = inject(SolarisTranslateService);
|
|
8642
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 */ []));
|
|
8643
8655
|
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
8644
8656
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
8645
8657
|
labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
@@ -8661,6 +8673,14 @@ class SolarisPasswordFieldComponent {
|
|
|
8661
8673
|
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
8662
8674
|
radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
8663
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 */ []));
|
|
8664
8684
|
showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
|
|
8665
8685
|
visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
8666
8686
|
showRequirements = input(false, ...(ngDevMode ? [{ debugName: "showRequirements" }] : /* istanbul ignore next */ []));
|
|
@@ -8897,13 +8917,13 @@ class SolarisPasswordFieldComponent {
|
|
|
8897
8917
|
}
|
|
8898
8918
|
}
|
|
8899
8919
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8900
|
-
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: [
|
|
8901
8921
|
{
|
|
8902
8922
|
provide: NG_VALUE_ACCESSOR,
|
|
8903
8923
|
useExisting: forwardRef(() => SolarisPasswordFieldComponent),
|
|
8904
8924
|
multi: true,
|
|
8905
8925
|
},
|
|
8906
|
-
], 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 <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 (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;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"] }, { 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 });
|
|
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 });
|
|
8907
8927
|
}
|
|
8908
8928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, decorators: [{
|
|
8909
8929
|
type: Component,
|
|
@@ -8919,8 +8939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8919
8939
|
useExisting: forwardRef(() => SolarisPasswordFieldComponent),
|
|
8920
8940
|
multi: true,
|
|
8921
8941
|
},
|
|
8922
|
-
], 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 <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 (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;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"] }]
|
|
8923
|
-
}], 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"] }] } });
|
|
8924
8944
|
|
|
8925
8945
|
const BASIC_EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
8926
8946
|
function solarisEmailValidator() {
|
|
@@ -8995,6 +9015,8 @@ function isDomainBlocked(domain, blockedDomains) {
|
|
|
8995
9015
|
class SolarisEmailFieldComponent {
|
|
8996
9016
|
translateService = inject(SolarisTranslateService);
|
|
8997
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 */ []));
|
|
8998
9020
|
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
8999
9021
|
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
9000
9022
|
hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
|
|
@@ -9029,6 +9051,14 @@ class SolarisEmailFieldComponent {
|
|
|
9029
9051
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
9030
9052
|
maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
9031
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 */ []));
|
|
9032
9062
|
internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
|
|
9033
9063
|
internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
|
|
9034
9064
|
internalFocused = signal(false, ...(ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []));
|
|
@@ -9176,24 +9206,29 @@ class SolarisEmailFieldComponent {
|
|
|
9176
9206
|
return undefined;
|
|
9177
9207
|
}
|
|
9178
9208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9179
|
-
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: [
|
|
9180
9210
|
{
|
|
9181
9211
|
provide: NG_VALUE_ACCESSOR,
|
|
9182
9212
|
useExisting: forwardRef(() => SolarisEmailFieldComponent),
|
|
9183
9213
|
multi: true,
|
|
9184
9214
|
},
|
|
9185
|
-
], 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 <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 <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"] }, { 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 });
|
|
9186
9216
|
}
|
|
9187
9217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEmailFieldComponent, decorators: [{
|
|
9188
9218
|
type: Component,
|
|
9189
|
-
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: [
|
|
9190
9225
|
{
|
|
9191
9226
|
provide: NG_VALUE_ACCESSOR,
|
|
9192
9227
|
useExisting: forwardRef(() => SolarisEmailFieldComponent),
|
|
9193
9228
|
multi: true,
|
|
9194
9229
|
},
|
|
9195
|
-
], 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 <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 <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"] }]
|
|
9196
|
-
}], 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 }] }] } });
|
|
9197
9232
|
|
|
9198
9233
|
class SolarisSkeletonComponent {
|
|
9199
9234
|
variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
@@ -12966,6 +13001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12966
13001
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], overflowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowPosition", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], previous: [{ type: i0.Output, args: ["previous"] }], next: [{ type: i0.Output, args: ["next"] }] } });
|
|
12967
13002
|
|
|
12968
13003
|
class SolarisDividerComponent {
|
|
13004
|
+
translateService = inject(SolarisTranslateService);
|
|
12969
13005
|
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
12970
13006
|
appearance = input('subtle', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
12971
13007
|
spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
|
|
@@ -12973,26 +13009,49 @@ class SolarisDividerComponent {
|
|
|
12973
13009
|
decorative = input(true, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
|
|
12974
13010
|
width = input('', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
12975
13011
|
height = input('', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
13012
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
13013
|
+
labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
13014
|
+
textPosition = input('center', ...(ngDevMode ? [{ debugName: "textPosition" }] : /* istanbul ignore next */ []));
|
|
13015
|
+
labelText = computed(() => {
|
|
13016
|
+
const direct = this.label();
|
|
13017
|
+
if (direct)
|
|
13018
|
+
return direct;
|
|
13019
|
+
const key = this.labelKey();
|
|
13020
|
+
if (key) {
|
|
13021
|
+
const translated = this.translateService.translate(key);
|
|
13022
|
+
if (translated !== key)
|
|
13023
|
+
return translated;
|
|
13024
|
+
}
|
|
13025
|
+
return null;
|
|
13026
|
+
}, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
13027
|
+
effectiveDecorative = computed(() => {
|
|
13028
|
+
return this.decorative() && !this.labelText();
|
|
13029
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveDecorative" }] : /* istanbul ignore next */ []));
|
|
12976
13030
|
computedRole = computed(() => {
|
|
12977
|
-
return this.
|
|
13031
|
+
return this.effectiveDecorative() ? null : 'separator';
|
|
12978
13032
|
}, ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
|
|
12979
13033
|
computedAriaOrientation = computed(() => {
|
|
12980
|
-
if (this.
|
|
13034
|
+
if (this.effectiveDecorative())
|
|
12981
13035
|
return null;
|
|
12982
13036
|
if (this.orientation() === 'vertical')
|
|
12983
13037
|
return 'vertical';
|
|
12984
13038
|
return null;
|
|
12985
13039
|
}, ...(ngDevMode ? [{ debugName: "computedAriaOrientation" }] : /* istanbul ignore next */ []));
|
|
13040
|
+
computedTextPosition = computed(() => {
|
|
13041
|
+
if (!this.labelText())
|
|
13042
|
+
return null;
|
|
13043
|
+
return this.textPosition();
|
|
13044
|
+
}, ...(ngDevMode ? [{ debugName: "computedTextPosition" }] : /* istanbul ignore next */ []));
|
|
12986
13045
|
computedWidth = computed(() => {
|
|
12987
13046
|
const w = this.width();
|
|
12988
|
-
return w
|
|
13047
|
+
return w || null;
|
|
12989
13048
|
}, ...(ngDevMode ? [{ debugName: "computedWidth" }] : /* istanbul ignore next */ []));
|
|
12990
13049
|
computedHeight = computed(() => {
|
|
12991
13050
|
const h = this.height();
|
|
12992
|
-
return h
|
|
13051
|
+
return h || null;
|
|
12993
13052
|
}, ...(ngDevMode ? [{ debugName: "computedHeight" }] : /* istanbul ignore next */ []));
|
|
12994
13053
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12995
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
13054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDividerComponent, isStandalone: true, selector: "solaris-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset()", "attr.role": "computedRole()", "attr.data-spacing": "spacing()", "attr.data-appearance": "appearance()", "attr.data-orientation": "orientation()", "attr.data-text-position": "computedTextPosition()", "attr.aria-hidden": "effectiveDecorative() ? \"true\" : null", "attr.aria-orientation": "computedAriaOrientation()", "style.--solaris-divider-width": "computedWidth()", "style.--solaris-divider-height": "computedHeight()" } }, ngImport: i0, template: "<span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n@if (labelText(); as text) {\n <span class=\"solaris-divider__text\">{{ text }}</span>\n <span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n}\n", styles: [":host{--solaris-divider-width: 100%;--solaris-divider-height: 100%;--solaris-divider-spacing-none: 0;--solaris-divider-inset-end: var(--solaris-spacing-3);--solaris-divider-spacing-sm: var(--solaris-spacing-2);--solaris-divider-spacing-md: var(--solaris-spacing-3);--solaris-divider-spacing-lg: var(--solaris-spacing-5);--solaris-divider-inset-start: var(--solaris-spacing-3);--solaris-divider-text-gap: var(--solaris-spacing-3);--solaris-divider-text-color: var(--solaris-text-muted);--solaris-divider-text-font-size: var(--solaris-font-size-sm);display:block;pointer-events:none;box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;width:var(--solaris-divider-width);margin-block:var(--solaris-divider-spacing-md)}:host([data-orientation=vertical]){width:0;height:var(--solaris-divider-height);min-height:16px;align-self:stretch;margin-inline:var(--solaris-divider-spacing-md);border-left:var(--solaris-border-width-sm) solid var(--solaris-border-default)}.solaris-divider__line{flex:1 1 0;min-width:0;border-top:var(--solaris-border-width-sm) solid var(--solaris-border-default)}:host([data-orientation=vertical]) .solaris-divider__line{display:none}.solaris-divider__text{flex:0 0 auto;max-width:100%;white-space:nowrap;color:var(--solaris-divider-text-color);font-size:var(--solaris-divider-text-font-size);margin-inline:var(--solaris-divider-text-gap)}:host([data-text-position=start]) .solaris-divider__line:first-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-text-position=end]) .solaris-divider__line:last-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-spacing=none][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-lg)}:host([data-spacing=none][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-lg)}:host([data-appearance=strong]) .solaris-divider__line{border-top-color:var(--solaris-border-strong);border-top-width:var(--solaris-border-width-lg)}:host([data-appearance=strong][data-orientation=vertical]){border-left-color:var(--solaris-border-strong);border-left-width:var(--solaris-border-width-lg)}:host([data-inset=start][data-orientation=horizontal]){width:calc(100% - var(--solaris-divider-inset-start));margin-inline-start:var(--solaris-divider-inset-start)}:host([data-inset=end][data-orientation=horizontal]){margin-inline-end:var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=horizontal]){margin-inline:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end))}:host([data-inset=start][data-orientation=vertical]){margin-block-start:var(--solaris-divider-inset-start);height:calc(100% - var(--solaris-divider-inset-start))}:host([data-inset=end][data-orientation=vertical]){margin-block-end:var(--solaris-divider-inset-end);height:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=vertical]){height:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end));margin-block:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12996
13055
|
}
|
|
12997
13056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDividerComponent, decorators: [{
|
|
12998
13057
|
type: Component,
|
|
@@ -13002,12 +13061,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13002
13061
|
'[attr.data-spacing]': 'spacing()',
|
|
13003
13062
|
'[attr.data-appearance]': 'appearance()',
|
|
13004
13063
|
'[attr.data-orientation]': 'orientation()',
|
|
13005
|
-
'[attr.
|
|
13064
|
+
'[attr.data-text-position]': 'computedTextPosition()',
|
|
13065
|
+
'[attr.aria-hidden]': 'effectiveDecorative() ? "true" : null',
|
|
13006
13066
|
'[attr.aria-orientation]': 'computedAriaOrientation()',
|
|
13007
13067
|
'[style.--solaris-divider-width]': 'computedWidth()',
|
|
13008
13068
|
'[style.--solaris-divider-height]': 'computedHeight()',
|
|
13009
|
-
}, template: "<
|
|
13010
|
-
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
13069
|
+
}, template: "<span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n@if (labelText(); as text) {\n <span class=\"solaris-divider__text\">{{ text }}</span>\n <span class=\"solaris-divider__line\" aria-hidden=\"true\"></span>\n}\n", styles: [":host{--solaris-divider-width: 100%;--solaris-divider-height: 100%;--solaris-divider-spacing-none: 0;--solaris-divider-inset-end: var(--solaris-spacing-3);--solaris-divider-spacing-sm: var(--solaris-spacing-2);--solaris-divider-spacing-md: var(--solaris-spacing-3);--solaris-divider-spacing-lg: var(--solaris-spacing-5);--solaris-divider-inset-start: var(--solaris-spacing-3);--solaris-divider-text-gap: var(--solaris-spacing-3);--solaris-divider-text-color: var(--solaris-text-muted);--solaris-divider-text-font-size: var(--solaris-font-size-sm);display:block;pointer-events:none;box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;width:var(--solaris-divider-width);margin-block:var(--solaris-divider-spacing-md)}:host([data-orientation=vertical]){width:0;height:var(--solaris-divider-height);min-height:16px;align-self:stretch;margin-inline:var(--solaris-divider-spacing-md);border-left:var(--solaris-border-width-sm) solid var(--solaris-border-default)}.solaris-divider__line{flex:1 1 0;min-width:0;border-top:var(--solaris-border-width-sm) solid var(--solaris-border-default)}:host([data-orientation=vertical]) .solaris-divider__line{display:none}.solaris-divider__text{flex:0 0 auto;max-width:100%;white-space:nowrap;color:var(--solaris-divider-text-color);font-size:var(--solaris-divider-text-font-size);margin-inline:var(--solaris-divider-text-gap)}:host([data-text-position=start]) .solaris-divider__line:first-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-text-position=end]) .solaris-divider__line:last-child{flex:0 0 var(--solaris-divider-text-gap)}:host([data-spacing=none][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=horizontal]){margin-block:var(--solaris-divider-spacing-lg)}:host([data-spacing=none][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-none)}:host([data-spacing=sm][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-sm)}:host([data-spacing=md][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-md)}:host([data-spacing=lg][data-orientation=vertical]){margin-inline:var(--solaris-divider-spacing-lg)}:host([data-appearance=strong]) .solaris-divider__line{border-top-color:var(--solaris-border-strong);border-top-width:var(--solaris-border-width-lg)}:host([data-appearance=strong][data-orientation=vertical]){border-left-color:var(--solaris-border-strong);border-left-width:var(--solaris-border-width-lg)}:host([data-inset=start][data-orientation=horizontal]){width:calc(100% - var(--solaris-divider-inset-start));margin-inline-start:var(--solaris-divider-inset-start)}:host([data-inset=end][data-orientation=horizontal]){margin-inline-end:var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=horizontal]){margin-inline:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end);width:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end))}:host([data-inset=start][data-orientation=vertical]){margin-block-start:var(--solaris-divider-inset-start);height:calc(100% - var(--solaris-divider-inset-start))}:host([data-inset=end][data-orientation=vertical]){margin-block-end:var(--solaris-divider-inset-end);height:calc(100% - var(--solaris-divider-inset-end))}:host([data-inset=both][data-orientation=vertical]){height:calc(100% - var(--solaris-divider-inset-start) - var(--solaris-divider-inset-end));margin-block:var(--solaris-divider-inset-start) var(--solaris-divider-inset-end)}\n"] }]
|
|
13070
|
+
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], textPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "textPosition", required: false }] }] } });
|
|
13011
13071
|
|
|
13012
13072
|
class SolarisDividerStackComponent {
|
|
13013
13073
|
spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
|
|
@@ -13504,7 +13564,7 @@ class SolarisEditableTabsComponent {
|
|
|
13504
13564
|
return undefined;
|
|
13505
13565
|
}
|
|
13506
13566
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13507
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n <solaris-tabs\n [value]=\"$any(value())\"\n (valueChange)=\"onValueChange($event)\"\n [defaultValue]=\"$any(defaultValue())\"\n [orientation]=\"orientation()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [shape]=\"shape()\"\n [activationMode]=\"activationMode()\"\n [contentTransition]=\"contentTransition()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n class=\"solaris-editable-tabs__inner\"\n >\n @for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-tab\n [value]=\"$any(tab.value)\"\n [label]=\"isRenaming(tab) ? undefined : tab.label\"\n [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n [icon]=\"tab.icon\"\n [badge]=\"tab.badge\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.data-editable]=\"editable() ? '' : null\"\n [attr.data-has-icon]=\"tab.icon ? '' : null\"\n [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n >\n @if (isRenaming(tab)) {\n <span class=\"solaris-editable-tabs__rename-wrapper\">\n <input\n #renameInput\n class=\"solaris-editable-tabs__rename-input\"\n [value]=\"renameValue()\"\n (input)=\"renameValue.set($any($event).target.value)\"\n (keydown)=\"onRenameKeydown($event, tab)\"\n (blur)=\"onRenameBlur(tab)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.confirmRename') ??\n 'Confirm rename'\n \"\n />\n </span>\n } @else if (hasActions(tab)) {\n <span\n class=\"solaris-editable-tabs__action-area\"\n [class.solaris-editable-tabs__action-area--visible]=\"\n showActions() === 'always'\n \"\n [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n !!tab.icon\n \"\n >\n <button\n class=\"solaris-editable-tabs__action-trigger\"\n solaris-dropdown-menu-trigger\n [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n [solarisDropdownMenuPlacement]=\"'bottom'\"\n [solarisDropdownMenuAlign]=\"'start'\"\n [solarisDropdownMenuOffset]=\"4\"\n [solarisDropdownMenuRestoreFocus]=\"true\"\n [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n (menuOpened)=\"activeMenuIndex.set(i)\"\n (menuClosed)=\"activeMenuIndex.set(null)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n \"\n tabindex=\"0\"\n type=\"button\"\n >\n <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n </button>\n </span>\n }\n </solaris-tab>\n }\n\n @for (tab of tabs(); track tab.value) {\n <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n @if (getContentTemplate(tab); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" />\n }\n </solaris-tab-panel>\n }\n </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-dropdown-menu>\n @if (canRename(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n icon=\"edit\"\n (itemSelected)=\"startRename(tab)\"\n />\n }\n @if (canSetDefault(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"\n resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n \"\n icon=\"check\"\n (itemSelected)=\"setAsDefault(tab)\"\n />\n }\n @if (canMoveLeft(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('left')\"\n [icon]=\"moveIcon('left')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n \"\n />\n }\n @if (canMoveRight(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('right')\"\n [icon]=\"moveIcon('right')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n \"\n />\n }\n @if (tab.customActions?.length) {\n @for (action of tab.customActions; track action.id) {\n @if (!action.disabled) {\n <solaris-dropdown-menu-item\n [label]=\"action.label ?? ''\"\n [labelKey]=\"action.labelKey\"\n [icon]=\"action.icon\"\n [color]=\"action.color ?? 'neutral'\"\n (itemSelected)=\"handleCustomAction(tab, action)\"\n />\n }\n }\n }\n @if (canRemove(tab)) {\n <solaris-divider />\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n icon=\"x\"\n color=\"danger\"\n (itemSelected)=\"confirmRemove(tab, i)\"\n />\n }\n </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-primary-base-alpha: #4282fb4d;--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "density", "shape", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13567
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n <solaris-tabs\n [value]=\"$any(value())\"\n (valueChange)=\"onValueChange($event)\"\n [defaultValue]=\"$any(defaultValue())\"\n [orientation]=\"orientation()\"\n [appearance]=\"appearance()\"\n [density]=\"effectiveDensity()\"\n [shape]=\"shape()\"\n [activationMode]=\"activationMode()\"\n [contentTransition]=\"contentTransition()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n class=\"solaris-editable-tabs__inner\"\n >\n @for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-tab\n [value]=\"$any(tab.value)\"\n [label]=\"isRenaming(tab) ? undefined : tab.label\"\n [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n [icon]=\"tab.icon\"\n [badge]=\"tab.badge\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.data-editable]=\"editable() ? '' : null\"\n [attr.data-has-icon]=\"tab.icon ? '' : null\"\n [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n >\n @if (isRenaming(tab)) {\n <span class=\"solaris-editable-tabs__rename-wrapper\">\n <input\n #renameInput\n class=\"solaris-editable-tabs__rename-input\"\n [value]=\"renameValue()\"\n (input)=\"renameValue.set($any($event).target.value)\"\n (keydown)=\"onRenameKeydown($event, tab)\"\n (blur)=\"onRenameBlur(tab)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.confirmRename') ??\n 'Confirm rename'\n \"\n />\n </span>\n } @else if (hasActions(tab)) {\n <span\n class=\"solaris-editable-tabs__action-area\"\n [class.solaris-editable-tabs__action-area--visible]=\"\n showActions() === 'always'\n \"\n [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n !!tab.icon\n \"\n >\n <button\n class=\"solaris-editable-tabs__action-trigger\"\n solaris-dropdown-menu-trigger\n [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n [solarisDropdownMenuPlacement]=\"'bottom'\"\n [solarisDropdownMenuAlign]=\"'start'\"\n [solarisDropdownMenuOffset]=\"4\"\n [solarisDropdownMenuRestoreFocus]=\"true\"\n [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n (menuOpened)=\"activeMenuIndex.set(i)\"\n (menuClosed)=\"activeMenuIndex.set(null)\"\n [attr.aria-label]=\"\n resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n \"\n tabindex=\"0\"\n type=\"button\"\n >\n <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n </button>\n </span>\n }\n </solaris-tab>\n }\n\n @for (tab of tabs(); track tab.value) {\n <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n @if (getContentTemplate(tab); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" />\n }\n </solaris-tab-panel>\n }\n </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n <solaris-dropdown-menu>\n @if (canRename(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n icon=\"edit\"\n (itemSelected)=\"startRename(tab)\"\n />\n }\n @if (canSetDefault(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"\n resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n \"\n icon=\"check\"\n (itemSelected)=\"setAsDefault(tab)\"\n />\n }\n @if (canMoveLeft(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('left')\"\n [icon]=\"moveIcon('left')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n \"\n />\n }\n @if (canMoveRight(tab)) {\n <solaris-dropdown-menu-item\n [label]=\"moveLabel('right')\"\n [icon]=\"moveIcon('right')\"\n (itemSelected)=\"\n moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n \"\n />\n }\n @if (tab.customActions?.length) {\n @for (action of tab.customActions; track action.id) {\n @if (!action.disabled) {\n <solaris-dropdown-menu-item\n [label]=\"action.label ?? ''\"\n [labelKey]=\"action.labelKey\"\n [icon]=\"action.icon\"\n [color]=\"action.color ?? 'neutral'\"\n (itemSelected)=\"handleCustomAction(tab, action)\"\n />\n }\n }\n }\n @if (canRemove(tab)) {\n <solaris-divider />\n <solaris-dropdown-menu-item\n [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n icon=\"x\"\n color=\"danger\"\n (itemSelected)=\"confirmRemove(tab, i)\"\n />\n }\n </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-primary-base-alpha: #4282fb4d;--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "density", "shape", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height", "label", "labelKey", "textPosition"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13508
13568
|
}
|
|
13509
13569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, decorators: [{
|
|
13510
13570
|
type: Component,
|