npm - @educarehq/solaris-ui - Versions diffs - 0.2.0 → 0.3.0 - Mend

@educarehq/solaris-ui 0.2.0 → 0.3.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.

Files changed (225) hide show

package/esm2022/lib/components/forms/option/component/option.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"option.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/forms/option/component/option.component.ts","../../../../../../../../../packages/angular/src/lib/components/forms/option/component/option.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n inject,\r\n ElementRef,\r\n contentChild,\r\n HostListener,\r\n} from '@angular/core';\r\n\r\nimport { SolarisTranslateService } from '../../../../services/translation';\r\n\r\nimport type {\r\n SolarisOptionSize,\r\n SolarisOptionDensity,\r\n SolarisOptionSelectionMode,\r\n} from '../model/option.types';\r\n\r\nimport { SolarisIconComponent } from '../../../icon';\r\n\r\nimport {\r\n SolarisOptionLeadingDirective,\r\n SolarisOptionLabelDirective,\r\n SolarisOptionDescriptionDirective,\r\n SolarisOptionMetaDirective,\r\n SolarisOptionTrailingDirective,\r\n} from '../directives/option-slots.directive';\r\n\r\nlet nextId = 0;\r\n\r\nfunction generateId(): string {\r\n return `solaris-option-${++nextId}`;\r\n}\r\n\r\n@Component({\r\n selector: 'solaris-option',\r\n standalone: true,\r\n imports: [SolarisIconComponent],\r\n templateUrl: './option.component.html',\r\n styleUrls: ['./option.component.scss'],\r\n host: {\r\n role: 'option',\r\n '[attr.aria-selected]': 'ariaSelected()',\r\n '[attr.aria-disabled]': 'isEffectivelyDisabled() ? \"true\" : null',\r\n '[attr.data-size]': 'size()',\r\n '[attr.data-density]': 'effectiveDensity()',\r\n '[attr.data-selected]': 'selected() ? \"\" : null',\r\n '[attr.data-active]': 'effectiveActive() ? \"\" : null',\r\n '[attr.data-highlighted]': 'highlighted() ? \"\" : null',\r\n '[attr.data-disabled]': 'isEffectivelyDisabled() ? \"\" : null',\r\n '[attr.data-selection-mode]': 'effectiveSelectionMode()',\r\n '[attr.data-show-indicator]':\r\n 'effectiveShowSelectionIndicator() ? \"\" : null',\r\n '[attr.id]': 'elementId()',\r\n '[style.display]': 'internalHidden() ? \"none\" : \"\"',\r\n },\r\n})\r\nexport class SolarisOptionComponent {\r\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\r\n private readonly translateService = inject(SolarisTranslateService);\r\n\r\n protected readonly groupDisabled = signal(false);\r\n private readonly internalSelected = signal<boolean \| undefined>(undefined);\r\n private readonly internalActive = signal<boolean \| undefined>(undefined);\r\n protected readonly internalHidden = signal(false);\r\n private readonly internalSelectionMode = signal<\r\n SolarisOptionSelectionMode \| undefined\r\n >(undefined);\r\n private readonly internalShowSelectionIndicator = signal<boolean \| undefined>(\r\n undefined,\r\n );\r\n\r\n protected readonly leadingSlot = contentChild(SolarisOptionLeadingDirective);\r\n protected readonly labelSlot = contentChild(SolarisOptionLabelDirective);\r\n protected readonly descriptionSlot = contentChild(\r\n SolarisOptionDescriptionDirective,\r\n );\r\n protected readonly metaSlot = contentChild(SolarisOptionMetaDirective);\r\n protected readonly trailingSlot = contentChild(\r\n SolarisOptionTrailingDirective,\r\n );\r\n\r\n readonly value = input<unknown>();\r\n readonly optionLabel = input<string>(undefined, { alias: 'label' });\r\n readonly labelKey = input<string>();\r\n readonly description = input<string>();\r\n readonly descriptionKey = input<string>();\r\n readonly disabledInput = input<boolean, boolean>(false, {\r\n alias: 'disabled',\r\n transform: (v: boolean) => v ?? false,\r\n });\r\n readonly selectedInput = input<boolean, boolean>(false, {\r\n alias: 'selected',\r\n transform: (v: boolean) => v ?? false,\r\n });\r\n\r\n protected readonly selected = computed(\r\n () => this.internalSelected() ?? this.selectedInput(),\r\n );\r\n\r\n setSelected(isSelected: boolean): void {\r\n this.internalSelected.set(isSelected);\r\n }\r\n\r\n setActive(v: boolean): void {\r\n this.internalActive.set(v);\r\n }\r\n\r\n setHidden(v: boolean): void {\r\n this.internalHidden.set(v);\r\n }\r\n\r\n setSelectionMode(mode: SolarisOptionSelectionMode): void {\r\n this.internalSelectionMode.set(mode);\r\n }\r\n\r\n setShowSelectionIndicator(show: boolean): void {\r\n this.internalShowSelectionIndicator.set(show);\r\n }\r\n\r\n protected readonly effectiveSelectionMode = computed(() => {\r\n return this.internalSelectionMode() ?? this.selectionMode();\r\n });\r\n\r\n protected readonly effectiveShowSelectionIndicator = computed(() => {\r\n const internal = this.internalShowSelectionIndicator();\r\n return internal !== undefined ? internal : this.showSelectionIndicator();\r\n });\r\n\r\n protected readonly effectiveActive = computed(\r\n () => this.internalActive() ?? this.active(),\r\n );\r\n\r\n readonly active = input<boolean, boolean>(false, {\r\n transform: (v: boolean) => v ?? false,\r\n });\r\n readonly highlighted = input<boolean, boolean>(false, {\r\n transform: (v: boolean) => v ?? false,\r\n });\r\n readonly selectionMode = input<SolarisOptionSelectionMode>('none');\r\n readonly showSelectionIndicator = input<boolean, boolean>(false, {\r\n transform: (v: boolean) => v ?? false,\r\n });\r\n readonly size = input<SolarisOptionSize>('md');\r\n readonly density = input<SolarisOptionDensity>();\r\n readonly optionId = input<string>(undefined, { alias: 'id' });\r\n\r\n readonly optionInteraction = output<{\r\n option: SolarisOptionComponent;\r\n event: MouseEvent;\r\n }>();\r\n\r\n protected readonly elementId = computed(() => {\r\n return (\r\n this.optionId() \|\|\r\n // SECURITY_EXCEPTION: nativeElement.getAttribute('id') is the standard DOM API to check existing ID before generating one. Same approach used by Angular CDK form controls and Solaris Checkbox.\r\n this.elementRef.nativeElement.getAttribute('id') \|\|\r\n generateId()\r\n );\r\n });\r\n\r\n protected readonly effectiveDensity = computed<SolarisOptionDensity>(() => {\r\n return this.density() ?? 'comfortable';\r\n });\r\n\r\n readonly isEffectivelyDisabled = computed(() => {\r\n return this.disabledInput() \|\| this.groupDisabled();\r\n });\r\n\r\n protected readonly ariaSelected = computed(() => {\r\n if (\r\n this.effectiveSelectionMode() === 'none' \|\|\r\n !this.effectiveShowSelectionIndicator()\r\n ) {\r\n return null;\r\n }\r\n return this.selected() ? 'true' : 'false';\r\n });\r\n\r\n readonly labelText = computed(() => {\r\n const key = this.labelKey();\r\n if (key) {\r\n const translated = this.translateService.translate(key);\r\n if (translated !== key) return translated;\r\n return this.optionLabel() ?? key;\r\n }\r\n return this.optionLabel();\r\n });\r\n\r\n readonly descriptionText = computed(() => {\r\n const key = this.descriptionKey();\r\n if (key) {\r\n const translated = this.translateService.translate(key);\r\n if (translated !== key) return translated;\r\n return this.description() ?? key;\r\n }\r\n return this.description();\r\n });\r\n\r\n protected readonly showSelectionVisual = computed(() => {\r\n return (\r\n this.effectiveShowSelectionIndicator() &&\r\n this.effectiveSelectionMode() !== 'none'\r\n );\r\n });\r\n\r\n protected readonly isCheckSelection = computed(() => {\r\n return (\r\n this.effectiveSelectionMode() === 'single' && this.showSelectionVisual()\r\n );\r\n });\r\n\r\n protected readonly isMultiCheckSelection = computed(() => {\r\n return (\r\n this.effectiveSelectionMode() === 'multiple' && this.showSelectionVisual()\r\n );\r\n });\r\n\r\n setGroupDisabledState(isDisabled: boolean): void {\r\n this.groupDisabled.set(isDisabled);\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n protected onClick(event: MouseEvent): void {\r\n if (this.isEffectivelyDisabled()) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n this.optionInteraction.emit({ option: this, event });\r\n }\r\n}\r\n","<div class=\"solaris-option\">\n @if (leadingSlot()) {\n <div class=\"solaris-option__leading\">\n <ng-content select=\"[solaris-option-leading]\" />\n </div>\n }\n\n @if (showSelectionVisual()) {\n <div class=\"solaris-option__selection-indicator\" aria-hidden=\"true\">\n @if (isMultiCheckSelection()) {\n <span\n class=\"solaris-option__checkbox\"\n [class.solaris-option__checkbox--checked]=\"selected()\"\n >\n @if (selected()) {\n <span class=\"solaris-option__checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </span>\n }\n </div>\n }\n\n <div class=\"solaris-option__content\">\n <div class=\"solaris-option__label\">\n @if (labelSlot()) {\n <ng-content select=\"[solaris-option-label]\" />\n }\n <ng-content />\n @if (!labelSlot() && labelText(); as text) {\n <span class=\"solaris-option__label-text\">{{ text }}</span>\n }\n </div>\n\n @if (descriptionSlot()) {\n <div class=\"solaris-option__description\">\n <ng-content select=\"[solaris-option-description]\" />\n </div>\n } @else if (descriptionText(); as desc) {\n <div class=\"solaris-option__description\">\n <span class=\"solaris-option__description-text\">{{ desc }}</span>\n </div>\n }\n </div>\n\n @if (metaSlot()) {\n <div class=\"solaris-option__meta\">\n <ng-content select=\"[solaris-option-meta]\" />\n </div>\n }\n\n @if (trailingSlot() \|\| selected()) {\n <div class=\"solaris-option__trailing\">\n <ng-content select=\"[solaris-option-trailing]\" />\n @if (selected()) {\n <span class=\"solaris-option__trailing-check\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </div>\n }\n</div>\n"]}
1	+ {"version":3,"file":"option.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/forms/option/component/option.component.ts","../../../../../../../../../packages/angular/src/lib/components/forms/option/component/option.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n input,\n output,\n computed,\n signal,\n inject,\n ElementRef,\n contentChild,\n HostListener,\n} from '@angular/core';\n\nimport { SolarisTranslateService } from '../../../../services/translation';\n\nimport type {\n SolarisOptionSize,\n SolarisOptionDensity,\n SolarisOptionSelectionMode,\n} from '../model/option.types';\n\nimport { SolarisIconComponent } from '../../../icon';\n\nimport {\n SolarisOptionLeadingDirective,\n SolarisOptionLabelDirective,\n SolarisOptionDescriptionDirective,\n SolarisOptionMetaDirective,\n SolarisOptionTrailingDirective,\n} from '../directives/option-slots.directive';\n\nlet nextId = 0;\n\nfunction generateId(): string {\n return `solaris-option-${++nextId}`;\n}\n\n@Component({\n selector: 'solaris-option',\n standalone: true,\n imports: [SolarisIconComponent],\n templateUrl: './option.component.html',\n styleUrls: ['./option.component.scss'],\n host: {\n role: 'option',\n '[attr.aria-selected]': 'ariaSelected()',\n '[attr.aria-disabled]': 'isEffectivelyDisabled() ? \"true\" : null',\n '[attr.data-size]': 'size()',\n '[attr.data-density]': 'effectiveDensity()',\n '[attr.data-selected]': 'selected() ? \"\" : null',\n '[attr.data-active]': 'effectiveActive() ? \"\" : null',\n '[attr.data-highlighted]': 'highlighted() ? \"\" : null',\n '[attr.data-disabled]': 'isEffectivelyDisabled() ? \"\" : null',\n '[attr.data-selection-mode]': 'effectiveSelectionMode()',\n '[attr.data-show-indicator]':\n 'effectiveShowSelectionIndicator() ? \"\" : null',\n '[attr.id]': 'elementId()',\n '[style.display]': 'internalHidden() ? \"none\" : \"\"',\n },\n})\nexport class SolarisOptionComponent {\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly translateService = inject(SolarisTranslateService);\n\n protected readonly groupDisabled = signal(false);\n private readonly internalSelected = signal<boolean \| undefined>(undefined);\n private readonly internalActive = signal<boolean \| undefined>(undefined);\n protected readonly internalHidden = signal(false);\n private readonly internalSelectionMode = signal<\n SolarisOptionSelectionMode \| undefined\n >(undefined);\n private readonly internalShowSelectionIndicator = signal<boolean \| undefined>(\n undefined,\n );\n\n protected readonly leadingSlot = contentChild(SolarisOptionLeadingDirective);\n protected readonly labelSlot = contentChild(SolarisOptionLabelDirective);\n protected readonly descriptionSlot = contentChild(\n SolarisOptionDescriptionDirective,\n );\n protected readonly metaSlot = contentChild(SolarisOptionMetaDirective);\n protected readonly trailingSlot = contentChild(\n SolarisOptionTrailingDirective,\n );\n\n readonly value = input<unknown>();\n readonly optionLabel = input<string>(undefined, { alias: 'label' });\n readonly labelKey = input<string>();\n readonly description = input<string>();\n readonly descriptionKey = input<string>();\n readonly disabledInput = input<boolean, boolean>(false, {\n alias: 'disabled',\n transform: (v: boolean) => v ?? false,\n });\n readonly selectedInput = input<boolean, boolean>(false, {\n alias: 'selected',\n transform: (v: boolean) => v ?? false,\n });\n\n protected readonly selected = computed(\n () => this.internalSelected() ?? this.selectedInput(),\n );\n\n setSelected(isSelected: boolean): void {\n this.internalSelected.set(isSelected);\n }\n\n setActive(v: boolean): void {\n this.internalActive.set(v);\n }\n\n setHidden(v: boolean): void {\n this.internalHidden.set(v);\n }\n\n setSelectionMode(mode: SolarisOptionSelectionMode): void {\n this.internalSelectionMode.set(mode);\n }\n\n setShowSelectionIndicator(show: boolean): void {\n this.internalShowSelectionIndicator.set(show);\n }\n\n protected readonly effectiveSelectionMode = computed(() => {\n return this.internalSelectionMode() ?? this.selectionMode();\n });\n\n protected readonly effectiveShowSelectionIndicator = computed(() => {\n const internal = this.internalShowSelectionIndicator();\n return internal !== undefined ? internal : this.showSelectionIndicator();\n });\n\n protected readonly effectiveActive = computed(\n () => this.internalActive() ?? this.active(),\n );\n\n readonly active = input<boolean, boolean>(false, {\n transform: (v: boolean) => v ?? false,\n });\n readonly highlighted = input<boolean, boolean>(false, {\n transform: (v: boolean) => v ?? false,\n });\n readonly selectionMode = input<SolarisOptionSelectionMode>('none');\n readonly showSelectionIndicator = input<boolean, boolean>(false, {\n transform: (v: boolean) => v ?? false,\n });\n readonly size = input<SolarisOptionSize>('md');\n readonly density = input<SolarisOptionDensity>();\n readonly optionId = input<string>(undefined, { alias: 'id' });\n\n readonly optionInteraction = output<{\n option: SolarisOptionComponent;\n event: MouseEvent;\n }>();\n\n protected readonly elementId = computed(() => {\n return (\n this.optionId() \|\|\n // SECURITY_EXCEPTION: nativeElement.getAttribute('id') is the standard DOM API to check existing ID before generating one. Same approach used by Angular CDK form controls and Solaris Checkbox.\n this.elementRef.nativeElement.getAttribute('id') \|\|\n generateId()\n );\n });\n\n protected readonly effectiveDensity = computed<SolarisOptionDensity>(() => {\n return this.density() ?? 'comfortable';\n });\n\n readonly isEffectivelyDisabled = computed(() => {\n return this.disabledInput() \|\| this.groupDisabled();\n });\n\n protected readonly ariaSelected = computed(() => {\n if (\n this.effectiveSelectionMode() === 'none' \|\|\n !this.effectiveShowSelectionIndicator()\n ) {\n return null;\n }\n return this.selected() ? 'true' : 'false';\n });\n\n readonly labelText = computed(() => {\n const key = this.labelKey();\n if (key) {\n const translated = this.translateService.translate(key);\n if (translated !== key) return translated;\n return this.optionLabel() ?? key;\n }\n return this.optionLabel();\n });\n\n readonly descriptionText = computed(() => {\n const key = this.descriptionKey();\n if (key) {\n const translated = this.translateService.translate(key);\n if (translated !== key) return translated;\n return this.description() ?? key;\n }\n return this.description();\n });\n\n protected readonly showSelectionVisual = computed(() => {\n return (\n this.effectiveShowSelectionIndicator() &&\n this.effectiveSelectionMode() !== 'none'\n );\n });\n\n protected readonly isCheckSelection = computed(() => {\n return (\n this.effectiveSelectionMode() === 'single' && this.showSelectionVisual()\n );\n });\n\n protected readonly isMultiCheckSelection = computed(() => {\n return (\n this.effectiveSelectionMode() === 'multiple' && this.showSelectionVisual()\n );\n });\n\n setGroupDisabledState(isDisabled: boolean): void {\n this.groupDisabled.set(isDisabled);\n }\n\n @HostListener('click', ['$event'])\n protected onClick(event: MouseEvent): void {\n if (this.isEffectivelyDisabled()) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.optionInteraction.emit({ option: this, event });\n }\n}\n","<div class=\"solaris-option\">\n @if (leadingSlot()) {\n <div class=\"solaris-option__leading\">\n <ng-content select=\"[solaris-option-leading]\" />\n </div>\n }\n\n @if (showSelectionVisual()) {\n <div class=\"solaris-option__selection-indicator\" aria-hidden=\"true\">\n @if (isMultiCheckSelection()) {\n <span\n class=\"solaris-option__checkbox\"\n [class.solaris-option__checkbox--checked]=\"selected()\"\n >\n @if (selected()) {\n <span class=\"solaris-option__checkbox-icon\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </span>\n }\n </div>\n }\n\n <div class=\"solaris-option__content\">\n <div class=\"solaris-option__label\">\n @if (labelSlot()) {\n <ng-content select=\"[solaris-option-label]\" />\n }\n <ng-content />\n @if (!labelSlot() && labelText(); as text) {\n <span class=\"solaris-option__label-text\">{{ text }}</span>\n }\n </div>\n\n @if (descriptionSlot()) {\n <div class=\"solaris-option__description\">\n <ng-content select=\"[solaris-option-description]\" />\n </div>\n } @else if (descriptionText(); as desc) {\n <div class=\"solaris-option__description\">\n <span class=\"solaris-option__description-text\">{{ desc }}</span>\n </div>\n }\n </div>\n\n @if (metaSlot()) {\n <div class=\"solaris-option__meta\">\n <ng-content select=\"[solaris-option-meta]\" />\n </div>\n }\n\n @if (trailingSlot() \|\| selected()) {\n <div class=\"solaris-option__trailing\">\n <ng-content select=\"[solaris-option-trailing]\" />\n @if (selected()) {\n <span class=\"solaris-option__trailing-check\">\n <solaris-icon name=\"check\" [decorative]=\"true\" />\n </span>\n }\n </div>\n }\n</div>\n"]}

package/esm2022/lib/components/forms/password-field/component/password-field.component.js CHANGED Viewed

@@ -275,7 +275,7 @@ export class SolarisPasswordFieldComponent {
                 useExisting: forwardRef(() => SolarisPasswordFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-form-field\n  [label]=\"label()\"\n  [labelKey]=\"labelKey()\"\n  [hint]=\"hint()\"\n  [hintKey]=\"hintKey()\"\n  [error]=\"error() || computedError()\"\n  [errorKey]=\"errorKey()\"\n  [invalid]=\"isFieldInvalid()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [size]=\"size()\"\n  [density]=\"density()\"\n  [radius]=\"radius()\"\n>\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [value]=\"internalValue()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.name]=\"name() ?? null\"\n    [attr.id]=\"id() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n  />\n  @if (showToggle()) {\n    <button\n      class=\"solaris-password-field__toggle\"\n      solaris-form-suffix\n      type=\"button\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      (click)=\"toggleVisibility()\"\n    >\n      <solaris-icon\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n        [decorative]=\"true\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy(); as p) {\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: .4rem;--solaris-password-field-strength-gap: var(--solaris-spacing-2, .8rem);--solaris-password-field-requirement-gap: var(--solaris-spacing-1, .4rem);--solaris-password-field-strength-radius: var(--solaris-radius-sm, .2rem);--solaris-password-field-requirement-color: var( --solaris-text-muted, #6b7280 );--solaris-password-field-strength-bar-bg: var( --solaris-surface-muted, #f3f4f6 );--solaris-password-field-strength-weak-color: var( --solaris-danger-text, #dc2626 );--solaris-password-field-requirement-met-color: var( --solaris-success-text, #059669 );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-text, #dc2626 );--solaris-password-field-strength-medium-color: var( --solaris-warning-text, #d97706 );--solaris-password-field-strength-strong-color: var( --solaris-success-text, #059669 );display:block;box-sizing:border-box}.solaris-password-field__toggle{margin:0;padding:0;border:none;font:inherit;line-height:1;cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);transition:color var(--solaris-motion-duration-normal) ease}.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, .15s) ease}.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{display:flex;gap:.3rem;flex:1;min-width:4rem;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, .3s) ease}.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{display:none!important;visibility:hidden;pointer-events:none}.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", "size", "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"] }] });
+        ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-form-field\n  [label]=\"label()\"\n  [labelKey]=\"labelKey()\"\n  [hint]=\"hint()\"\n  [hintKey]=\"hintKey()\"\n  [error]=\"error() || computedError()\"\n  [errorKey]=\"errorKey()\"\n  [invalid]=\"isFieldInvalid()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [size]=\"size()\"\n  [density]=\"density()\"\n  [radius]=\"radius()\"\n>\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [value]=\"internalValue()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.name]=\"name() ?? null\"\n    [attr.id]=\"id() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n  />\n  @if (showToggle()) {\n    <button\n      class=\"solaris-password-field__toggle\"\n      solaris-form-suffix\n      type=\"button\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      (click)=\"toggleVisibility()\"\n    >\n      <solaris-icon\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n        [decorative]=\"true\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy(); as p) {\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: .4rem;--solaris-password-field-strength-gap: var(--solaris-spacing-2, .8rem);--solaris-password-field-requirement-gap: var(--solaris-spacing-1, .4rem);--solaris-password-field-strength-radius: var(--solaris-radius-sm, .2rem);--solaris-password-field-requirement-color: var( --solaris-text-muted, #6b7280 );--solaris-password-field-strength-bar-bg: var( --solaris-surface-muted, #f3f4f6 );--solaris-password-field-strength-weak-color: var( --solaris-danger-text, #dc2626 );--solaris-password-field-requirement-met-color: var( --solaris-success-text, #059669 );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-text, #dc2626 );--solaris-password-field-strength-medium-color: var( --solaris-warning-text, #d97706 );--solaris-password-field-strength-strong-color: var( --solaris-success-text, #059669 );display:block;box-sizing:border-box}.solaris-password-field__toggle{margin:0;padding:0;border:none;font:inherit;line-height:1;cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);transition:color var(--solaris-motion-duration-normal) ease}.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, .15s) ease}.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{display:flex;gap:.3rem;flex:1;min-width:4rem;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, .3s) ease}.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{display:none!important;visibility:hidden;pointer-events:none}.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", "size", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, decorators: [{
             type: Component,
@@ -291,7 +291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => SolarisPasswordFieldComponent),
                             multi: true,
                         },
-                    ], template: "<solaris-form-field\n  [label]=\"label()\"\n  [labelKey]=\"labelKey()\"\n  [hint]=\"hint()\"\n  [hintKey]=\"hintKey()\"\n  [error]=\"error() || computedError()\"\n  [errorKey]=\"errorKey()\"\n  [invalid]=\"isFieldInvalid()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [size]=\"size()\"\n  [density]=\"density()\"\n  [radius]=\"radius()\"\n>\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [value]=\"internalValue()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.name]=\"name() ?? null\"\n    [attr.id]=\"id() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n  />\n  @if (showToggle()) {\n    <button\n      class=\"solaris-password-field__toggle\"\n      solaris-form-suffix\n      type=\"button\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      (click)=\"toggleVisibility()\"\n    >\n      <solaris-icon\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n        [decorative]=\"true\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy(); as p) {\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: .4rem;--solaris-password-field-strength-gap: var(--solaris-spacing-2, .8rem);--solaris-password-field-requirement-gap: var(--solaris-spacing-1, .4rem);--solaris-password-field-strength-radius: var(--solaris-radius-sm, .2rem);--solaris-password-field-requirement-color: var( --solaris-text-muted, #6b7280 );--solaris-password-field-strength-bar-bg: var( --solaris-surface-muted, #f3f4f6 );--solaris-password-field-strength-weak-color: var( --solaris-danger-text, #dc2626 );--solaris-password-field-requirement-met-color: var( --solaris-success-text, #059669 );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-text, #dc2626 );--solaris-password-field-strength-medium-color: var( --solaris-warning-text, #d97706 );--solaris-password-field-strength-strong-color: var( --solaris-success-text, #059669 );display:block;box-sizing:border-box}.solaris-password-field__toggle{margin:0;padding:0;border:none;font:inherit;line-height:1;cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);transition:color var(--solaris-motion-duration-normal) ease}.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, .15s) ease}.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{display:flex;gap:.3rem;flex:1;min-width:4rem;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, .3s) ease}.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{display:none!important;visibility:hidden;pointer-events:none}.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"] }]
+                    ], template: "<solaris-form-field\n  [label]=\"label()\"\n  [labelKey]=\"labelKey()\"\n  [hint]=\"hint()\"\n  [hintKey]=\"hintKey()\"\n  [error]=\"error() || computedError()\"\n  [errorKey]=\"errorKey()\"\n  [invalid]=\"isFieldInvalid()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [size]=\"size()\"\n  [density]=\"density()\"\n  [radius]=\"radius()\"\n>\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [value]=\"internalValue()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.name]=\"name() ?? null\"\n    [attr.id]=\"id() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n  />\n  @if (showToggle()) {\n    <button\n      class=\"solaris-password-field__toggle\"\n      solaris-form-suffix\n      type=\"button\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      (click)=\"toggleVisibility()\"\n    >\n      <solaris-icon\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n        [decorative]=\"true\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy(); as p) {\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: .4rem;--solaris-password-field-strength-gap: var(--solaris-spacing-2, .8rem);--solaris-password-field-requirement-gap: var(--solaris-spacing-1, .4rem);--solaris-password-field-strength-radius: var(--solaris-radius-sm, .2rem);--solaris-password-field-requirement-color: var( --solaris-text-muted, #6b7280 );--solaris-password-field-strength-bar-bg: var( --solaris-surface-muted, #f3f4f6 );--solaris-password-field-strength-weak-color: var( --solaris-danger-text, #dc2626 );--solaris-password-field-requirement-met-color: var( --solaris-success-text, #059669 );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-text, #dc2626 );--solaris-password-field-strength-medium-color: var( --solaris-warning-text, #d97706 );--solaris-password-field-strength-strong-color: var( --solaris-success-text, #059669 );display:block;box-sizing:border-box}.solaris-password-field__toggle{margin:0;padding:0;border:none;font:inherit;line-height:1;cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);transition:color var(--solaris-motion-duration-normal) ease}.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, .15s) ease}.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{display:flex;gap:.3rem;flex:1;min-width:4rem;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, .3s) ease}.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{display:none!important;visibility:hidden;pointer-events:none}.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"] }]
         }], ctorParameters: () => [], propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ['inputElement', { read: ElementRef }]

package/esm2022/lib/components/forms/password-field/component/password-field.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"password-field.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/forms/password-field/component/password-field.component.ts","../../../../../../../../../packages/angular/src/lib/components/forms/password-field/component/password-field.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n input,\n computed,\n signal,\n output,\n effect,\n forwardRef,\n inject,\n ViewChild,\n ElementRef,\n isDevMode,\n} from '@angular/core';\nimport {\n NG_VALUE_ACCESSOR,\n ControlValueAccessor,\n FormsModule,\n} from '@angular/forms';\n\nimport type {\n SolarisPasswordFieldAppearance,\n SolarisPasswordFieldSize,\n SolarisPasswordFieldDensity,\n SolarisPasswordFieldRadius,\n SolarisPasswordStrength,\n} from '../model/password-field.types';\nimport {\n SolarisFormFieldComponent,\n SolarisFormSuffixDirective,\n} from '../../form-field';\nimport type { SolarisPasswordPolicy } from '../model/password-policy.types';\nimport { solarisPasswordValidator } from '../validators/password.validator';\nimport { SolarisTranslateService } from '../../../../services/translation';\nimport type { SolarisTranslateParams } from '../../../../services/translation';\nimport { SolarisIconComponent } from '../../../../components/icon';\nimport { SolarisInputDirective } from '../../input';\nimport { calculatePasswordStrength } from '../model/password-strength';\n\ninterface RequirementItem {\n key: string;\n label: string;\n met: boolean;\n}\n\n@Component({\n selector: 'solaris-password-field',\n standalone: true,\n imports: [\n FormsModule,\n SolarisFormFieldComponent,\n SolarisInputDirective,\n SolarisFormSuffixDirective,\n SolarisIconComponent,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SolarisPasswordFieldComponent),\n multi: true,\n },\n ],\n templateUrl: './password-field.component.html',\n styleUrls: ['./password-field.component.scss'],\n})\nexport class SolarisPasswordFieldComponent implements ControlValueAccessor {\n private readonly translateService = inject(SolarisTranslateService);\n\n @ViewChild('inputElement', { read: ElementRef })\n protected inputElementRef?: ElementRef<HTMLInputElement>;\n\n readonly value = input<string>('');\n readonly label = input<string>('');\n readonly labelKey = input<string>();\n readonly hint = input<string>('');\n readonly hintKey = input<string>();\n readonly error = input<string>('');\n readonly errorKey = input<string>();\n readonly placeholder = input<string>();\n readonly placeholderKey = input<string>();\n readonly autocomplete = input<string>();\n readonly name = input<string>();\n readonly id = input<string>();\n readonly required = input<boolean>(false);\n readonly optional = input<boolean>(false);\n readonly disabled = input<boolean>(false);\n readonly readonly = input<boolean>(false);\n readonly invalid = input<boolean \| undefined>();\n readonly appearance = input<SolarisPasswordFieldAppearance>('outline');\n readonly size = input<SolarisPasswordFieldSize>('md');\n readonly density = input<SolarisPasswordFieldDensity>();\n readonly radius = input<SolarisPasswordFieldRadius>('md');\n readonly fullWidth = input<boolean>(true);\n\n readonly showToggle = input<boolean>(true);\n readonly visible = input<boolean>(false);\n readonly showRequirements = input<boolean>(false);\n readonly showStrength = input<boolean>(false);\n readonly policy = input<SolarisPasswordPolicy \| undefined>();\n readonly validatePolicy = input<boolean>(true);\n readonly minLength = input<number>();\n readonly maxLength = input<number>();\n\n readonly toggleShowLabel = input<string>();\n readonly toggleShowLabelKey = input<string>();\n readonly toggleHideLabel = input<string>();\n readonly toggleHideLabelKey = input<string>();\n\n readonly valueChange = output<string>();\n readonly visibleChange = output<boolean>();\n\n protected readonly internalValue = signal<string>('');\n protected readonly internalFocused = signal(false);\n protected readonly internalDisabled = signal(false);\n protected readonly _visibleState = signal(false);\n protected readonly touched = signal(false);\n protected readonly dirty = signal(false);\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: string) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n protected readonly effectivePolicy = computed<\n SolarisPasswordPolicy \| undefined\n >(() => {\n const p = this.policy();\n const min = this.minLength();\n const max = this.maxLength();\n if (!p && min === undefined && max === undefined) {\n return undefined;\n }\n return {\n ...p,\n ...(min !== undefined ? { minLength: min } : {}),\n ...(max !== undefined ? { maxLength: max } : {}),\n };\n });\n\n constructor() {\n effect(() => {\n this._visibleState.set(this.visible());\n });\n }\n\n protected readonly inputType = computed(() => {\n return this._visibleState() ? 'text' : 'password';\n });\n\n protected readonly placeholderText = computed(() => {\n const key = this.placeholderKey();\n if (key) {\n return this.translateService.translate(key);\n }\n return this.placeholder() ?? '';\n });\n\n protected readonly toggleLabel = computed(() => {\n if (this._visibleState()) {\n const key = this.toggleHideLabelKey();\n if (key) {\n return this.translateService.translate(key);\n }\n return (\n this.toggleHideLabel() \|\|\n this.translateWithDefault(\n 'solaris.password-field.toggle.hide',\n 'Hide password',\n )\n );\n }\n const key = this.toggleShowLabelKey();\n if (key) {\n return this.translateService.translate(key);\n }\n return (\n this.toggleShowLabel() \|\|\n this.translateWithDefault(\n 'solaris.password-field.toggle.show',\n 'Show password',\n )\n );\n });\n\n private translateWithDefault(\n key: string,\n defaultText: string,\n params?: SolarisTranslateParams,\n ): string {\n const result = this.translateService.translate(key, params);\n return result !== key ? result : defaultText;\n }\n\n protected readonly isEffectivelyDisabled = computed(() => {\n return this.disabled() \|\| this.internalDisabled();\n });\n\n protected readonly isFieldInvalid = computed(() => {\n const manual = this.invalid();\n if (manual !== undefined) {\n return manual;\n }\n\n if (this.internalFocused()) {\n return false;\n }\n\n const isTouchedOrDirty = this.touched() \|\| this.dirty();\n if (!isTouchedOrDirty) {\n return false;\n }\n\n const val = this.internalValue();\n if (this.required() && (!val \|\| val.length === 0)) {\n return true;\n }\n\n const currentPolicy = this.effectivePolicy();\n if (this.validatePolicy() && currentPolicy) {\n if (typeof val === 'string' && val.length > 0) {\n const errors = solarisPasswordValidator(currentPolicy)({\n value: val,\n } as never);\n if (errors && Object.keys(errors).length > 0) {\n return true;\n }\n }\n }\n\n return false;\n });\n\n protected readonly computedError = computed(() => {\n if (!this.isFieldInvalid()) {\n return '';\n }\n\n const val = this.internalValue();\n if (!val \|\| val.length === 0) {\n if (this.required()) {\n return this.translateWithDefault(\n 'solaris.password-field.error.required',\n 'Password is required.',\n );\n }\n }\n\n return '';\n });\n\n protected readonly requirementList = computed<RequirementItem[]>(() => {\n const p = this.effectivePolicy();\n if (!p) {\n return [];\n }\n const val = this.internalValue();\n const items: RequirementItem[] = [];\n\n if (p.minLength !== undefined) {\n items.push({\n key: 'minLength',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.minLength',\n `At least ${p.minLength} characters.`,\n { count: p.minLength },\n ),\n met: val.length >= p.minLength,\n });\n }\n\n if (p.maxLength !== undefined) {\n items.push({\n key: 'maxLength',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.maxLength',\n `At most ${p.maxLength} characters.`,\n { count: p.maxLength },\n ),\n met: val.length <= p.maxLength,\n });\n }\n\n if (p.requireLowercase) {\n items.push({\n key: 'lowercase',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.lowercase',\n 'One lowercase letter.',\n ),\n met: /[a-z]/.test(val),\n });\n }\n\n if (p.requireUppercase) {\n items.push({\n key: 'uppercase',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.uppercase',\n 'One uppercase letter.',\n ),\n met: /[A-Z]/.test(val),\n });\n }\n\n if (p.requireNumber) {\n items.push({\n key: 'number',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.number',\n 'One number.',\n ),\n met: /\\d/.test(val),\n });\n }\n\n if (p.requireSymbol) {\n items.push({\n key: 'symbol',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.symbol',\n 'One symbol.',\n ),\n met: /[^a-zA-Z0-9]/.test(val),\n });\n }\n\n if (p.disallowWhitespace) {\n items.push({\n key: 'noWhitespace',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.noWhitespace',\n 'No spaces.',\n ),\n met: !/\\s/.test(val),\n });\n }\n\n return items;\n });\n\n protected readonly strengthLevel = computed<SolarisPasswordStrength>(() =>\n calculatePasswordStrength(this.internalValue()),\n );\n\n protected readonly strengthLabelText = computed(() => {\n const level = this.strengthLevel();\n switch (level) {\n case 'empty':\n return '';\n case 'weak':\n return this.translateWithDefault(\n 'solaris.password-field.strength.weak',\n 'Weak',\n );\n case 'medium':\n return this.translateWithDefault(\n 'solaris.password-field.strength.medium',\n 'Medium',\n );\n case 'strong':\n return this.translateWithDefault(\n 'solaris.password-field.strength.strong',\n 'Strong',\n );\n }\n });\n\n writeValue(safe = ''): void {\n this.internalValue.set(safe);\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n protected onInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n if (!this.dirty()) {\n this.dirty.set(true);\n }\n\n this.internalValue.set(newValue);\n this.onChange(newValue);\n this.valueChange.emit(newValue);\n }\n\n protected onInputFocus(): void {\n this.internalFocused.set(true);\n }\n\n protected onInputBlur(): void {\n this.internalFocused.set(false);\n\n if (!this.touched()) {\n this.touched.set(true);\n }\n\n this.onTouched();\n }\n\n protected toggleVisibility(): void {\n const newVisible = !this._visibleState();\n this._visibleState.set(newVisible);\n this.visibleChange.emit(newVisible);\n\n if (this.inputElementRef) {\n try {\n // SECURITY_EXCEPTION: nativeElement.focus() is the standard DOM API to restore focus after toggle. No SSR-safe alternative exists for imperative focus. Same approach used by Angular CDK.\n this.inputElementRef.nativeElement.focus();\n } catch {\n if (isDevMode()) {\n console.warn(\n '[SolarisPasswordField] Could not restore focus after toggle.',\n );\n }\n }\n }\n }\n}\n","<solaris-form-field\n [label]=\"label()\"\n [labelKey]=\"labelKey()\"\n [hint]=\"hint()\"\n [hintKey]=\"hintKey()\"\n [error]=\"error() \|\| computedError()\"\n [errorKey]=\"errorKey()\"\n [invalid]=\"isFieldInvalid()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [size]=\"size()\"\n [density]=\"density()\"\n [radius]=\"radius()\"\n>\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [value]=\"internalValue()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.id]=\"id() ?? null\"\n [attr.placeholder]=\"placeholderText() \|\| null\"\n (input)=\"onInput($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n />\n @if (showToggle()) {\n <button\n class=\"solaris-password-field__toggle\"\n solaris-form-suffix\n type=\"button\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-label]=\"toggleLabel()\"\n (click)=\"toggleVisibility()\"\n >\n <solaris-icon\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n [decorative]=\"true\"\n />\n </button>\n }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy(); as p) {\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"]}
1	+ {"version":3,"file":"password-field.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/forms/password-field/component/password-field.component.ts","../../../../../../../../../packages/angular/src/lib/components/forms/password-field/component/password-field.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,GACV,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EAEjB,WAAW,GACZ,MAAM,gBAAgB,CAAC;AASxB,OAAO,EACL,yBAAyB,EACzB,0BAA0B,GAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;;AA4BvE,MAAM,OAAO,6BAA6B;IACvB,gBAAgB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;IAG1D,eAAe,CAAgC;IAEhD,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC,CAAC;IAC1B,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC,CAAC;IAC1B,QAAQ,GAAG,KAAK,yFAAU,CAAC;IAC3B,IAAI,GAAG,KAAK,CAAS,EAAE,2EAAC,CAAC;IACzB,OAAO,GAAG,KAAK,wFAAU,CAAC;IAC1B,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC,CAAC;IAC1B,QAAQ,GAAG,KAAK,yFAAU,CAAC;IAC3B,WAAW,GAAG,KAAK,4FAAU,CAAC;IAC9B,cAAc,GAAG,KAAK,+FAAU,CAAC;IACjC,YAAY,GAAG,KAAK,6FAAU,CAAC;IAC/B,IAAI,GAAG,KAAK,qFAAU,CAAC;IACvB,EAAE,GAAG,KAAK,mFAAU,CAAC;IACrB,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IACjC,OAAO,GAAG,KAAK,wFAAuB,CAAC;IACvC,UAAU,GAAG,KAAK,CAAiC,SAAS,iFAAC,CAAC;IAC9D,IAAI,GAAG,KAAK,CAA2B,IAAI,2EAAC,CAAC;IAC7C,OAAO,GAAG,KAAK,wFAA+B,CAAC;IAC/C,MAAM,GAAG,KAAK,CAA6B,IAAI,6EAAC,CAAC;IACjD,SAAS,GAAG,KAAK,CAAU,IAAI,gFAAC,CAAC;IAEjC,UAAU,GAAG,KAAK,CAAU,IAAI,iFAAC,CAAC;IAClC,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC,CAAC;IAChC,gBAAgB,GAAG,KAAK,CAAU,KAAK,uFAAC,CAAC;IACzC,YAAY,GAAG,KAAK,CAAU,KAAK,mFAAC,CAAC;IACrC,MAAM,GAAG,KAAK,uFAAqC,CAAC;IACpD,cAAc,GAAG,KAAK,CAAU,IAAI,qFAAC,CAAC;IACtC,SAAS,GAAG,KAAK,0FAAU,CAAC;IAC5B,SAAS,GAAG,KAAK,0FAAU,CAAC;IAE5B,eAAe,GAAG,KAAK,gGAAU,CAAC;IAClC,kBAAkB,GAAG,KAAK,mGAAU,CAAC;IACrC,eAAe,GAAG,KAAK,gGAAU,CAAC;IAClC,kBAAkB,GAAG,KAAK,mGAAU,CAAC;IAErC,WAAW,GAAG,MAAM,EAAU,CAAC;IAC/B,aAAa,GAAG,MAAM,EAAW,CAAC;IAExB,aAAa,GAAG,MAAM,CAAS,EAAE,oFAAC,CAAC;IACnC,eAAe,GAAG,MAAM,CAAC,KAAK,sFAAC,CAAC;IAChC,gBAAgB,GAAG,MAAM,CAAC,KAAK,uFAAC,CAAC;IACjC,aAAa,GAAG,MAAM,CAAC,KAAK,oFAAC,CAAC;IAC9B,OAAO,GAAG,MAAM,CAAC,KAAK,8EAAC,CAAC;IACxB,KAAK,GAAG,MAAM,CAAC,KAAK,4EAAC,CAAC;IAEzC,gEAAgE;IACxD,QAAQ,GAA4B,GAAG,EAAE,GAAE,CAAC,CAAC;IACrD,gEAAgE;IACxD,SAAS,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC;IAEtB,eAAe,GAAG,QAAQ,CAE3C,GAAG,EAAE;QACL,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC7B,IAAI,CAAC,CAAC,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACjD,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,OAAO;YACL,GAAG,CAAC;YACJ,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAChD,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SACjD,CAAC;IACJ,CAAC,sFAAC,CAAC;IAEH;QACE,MAAM,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC3C,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC;IACpD,CAAC,gFAAC,CAAC;IAEgB,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;QACjD,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAClC,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAC9C,CAAC;QACD,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;IAClC,CAAC,sFAAC,CAAC;IAEgB,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC7C,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YACzB,MAAM,GAAG,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACtC,IAAI,GAAG,EAAE,CAAC;gBACR,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;YAC9C,CAAC;YACD,OAAO,CACL,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,oBAAoB,CACvB,oCAAoC,EACpC,eAAe,CAChB,CACF,CAAC;QACJ,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACtC,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAC9C,CAAC;QACD,OAAO,CACL,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,oBAAoB,CACvB,oCAAoC,EACpC,eAAe,CAChB,CACF,CAAC;IACJ,CAAC,kFAAC,CAAC;IAEK,oBAAoB,CAC1B,GAAW,EACX,WAAmB,EACnB,MAA+B;QAE/B,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;QAC5D,OAAO,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC;IAC/C,CAAC;IAEkB,qBAAqB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvD,OAAO,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACpD,CAAC,4FAAC,CAAC;IAEgB,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC9B,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;YAC3B,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACxD,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YAClD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7C,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,aAAa,EAAE,CAAC;YAC3C,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9C,MAAM,MAAM,GAAG,wBAAwB,CAAC,aAAa,CAAC,CAAC;oBACrD,KAAK,EAAE,GAAG;iBACF,CAAC,CAAC;gBACZ,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC7C,OAAO,IAAI,CAAC;gBACd,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,qFAAC,CAAC;IAEgB,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC/C,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YAC3B,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACpB,OAAO,IAAI,CAAC,oBAAoB,CAC9B,uCAAuC,EACvC,uBAAuB,CACxB,CAAC;YACJ,CAAC;QACH,CAAC;QAED,OAAO,EAAE,CAAC;IACZ,CAAC,oFAAC,CAAC;IAEgB,eAAe,GAAG,QAAQ,CAAoB,GAAG,EAAE;QACpE,MAAM,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACjC,IAAI,CAAC,CAAC,EAAE,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACjC,MAAM,KAAK,GAAsB,EAAE,CAAC;QAEpC,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YAC9B,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,WAAW;gBAChB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAC9B,8CAA8C,EAC9C,YAAY,CAAC,CAAC,SAAS,cAAc,EACrC,EAAE,KAAK,EAAE,CAAC,CAAC,SAAS,EAAE,CACvB;gBACD,GAAG,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,SAAS;aAC/B,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YAC9B,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,WAAW;gBAChB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAC9B,8CAA8C,EAC9C,WAAW,CAAC,CAAC,SAAS,cAAc,EACpC,EAAE,KAAK,EAAE,CAAC,CAAC,SAAS,EAAE,CACvB;gBACD,GAAG,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,SAAS;aAC/B,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACvB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,WAAW;gBAChB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAC9B,8CAA8C,EAC9C,uBAAuB,CACxB;gBACD,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;aACvB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACvB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,WAAW;gBAChB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAC9B,8CAA8C,EAC9C,uBAAuB,CACxB;gBACD,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;aACvB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC;YACpB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAC9B,2CAA2C,EAC3C,aAAa,CACd;gBACD,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;aACpB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC;YACpB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAC9B,2CAA2C,EAC3C,aAAa,CACd;gBACD,GAAG,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;aAC9B,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,kBAAkB,EAAE,CAAC;YACzB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,cAAc;gBACnB,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAC9B,iDAAiD,EACjD,YAAY,CACb;gBACD,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;aACrB,CAAC,CAAC;QACL,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,sFAAC,CAAC;IAEgB,aAAa,GAAG,QAAQ,CAA0B,GAAG,EAAE,CACxE,yBAAyB,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,oFAChD,CAAC;IAEiB,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACnC,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,OAAO;gBACV,OAAO,EAAE,CAAC;YACZ,KAAK,MAAM;gBACT,OAAO,IAAI,CAAC,oBAAoB,CAC9B,sCAAsC,EACtC,MAAM,CACP,CAAC;YACJ,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,oBAAoB,CAC9B,wCAAwC,EACxC,QAAQ,CACT,CAAC;YACJ,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,oBAAoB,CAC9B,wCAAwC,EACxC,QAAQ,CACT,CAAC;QACN,CAAC;IACH,CAAC,wFAAC,CAAC;IAEH,UAAU,CAAC,IAAI,GAAG,EAAE;QAClB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,gBAAgB,CAAC,EAA2B;QAC1C,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACrB,CAAC;IAED,iBAAiB,CAAC,EAAc;QAC9B,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,gBAAgB,CAAC,UAAmB;QAClC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IACxC,CAAC;IAES,OAAO,CAAC,KAAY;QAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;QAE9B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAES,gBAAgB;QACxB,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QACzC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACnC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC;gBACH,2LAA2L;gBAC3L,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;YAC7C,CAAC;YAAC,MAAM,CAAC;gBACP,IAAI,SAAS,EAAE,EAAE,CAAC;oBAChB,OAAO,CAAC,IAAI,CACV,8DAA8D,CAC/D,CAAC;gBACJ,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;wGA1WU,6BAA6B;4FAA7B,6BAA6B,2iJAV7B;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,6BAA6B,CAAC;gBAC5D,KAAK,EAAE,IAAI;aACZ;SACF,sHAOkC,UAAU,6BCnE/C,03FAmGA,m6HDnDI,WAAW,+BACX,yBAAyB,iUACzB,qBAAqB,yIACrB,0BAA0B,kEAC1B,oBAAoB;;4FAYX,6BAA6B;kBApBzC,SAAS;+BACE,wBAAwB,cACtB,IAAI,WACP;wBACP,WAAW;wBACX,yBAAyB;wBACzB,qBAAqB;wBACrB,0BAA0B;wBAC1B,oBAAoB;qBACrB,aACU;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,8BAA8B,CAAC;4BAC5D,KAAK,EAAE,IAAI;yBACZ;qBACF;;sBAOA,SAAS;uBAAC,cAAc,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE","sourcesContent":["import {\n Component,\n input,\n computed,\n signal,\n output,\n effect,\n forwardRef,\n inject,\n ViewChild,\n ElementRef,\n isDevMode,\n} from '@angular/core';\nimport {\n NG_VALUE_ACCESSOR,\n ControlValueAccessor,\n FormsModule,\n} from '@angular/forms';\n\nimport type {\n SolarisPasswordFieldAppearance,\n SolarisPasswordFieldSize,\n SolarisPasswordFieldDensity,\n SolarisPasswordFieldRadius,\n SolarisPasswordStrength,\n} from '../model/password-field.types';\nimport {\n SolarisFormFieldComponent,\n SolarisFormSuffixDirective,\n} from '../../form-field';\nimport type { SolarisPasswordPolicy } from '../model/password-policy.types';\nimport { solarisPasswordValidator } from '../validators/password.validator';\nimport { SolarisTranslateService } from '../../../../services/translation';\nimport type { SolarisTranslateParams } from '../../../../services/translation';\nimport { SolarisIconComponent } from '../../../../components/icon';\nimport { SolarisInputDirective } from '../../input';\nimport { calculatePasswordStrength } from '../model/password-strength';\n\ninterface RequirementItem {\n key: string;\n label: string;\n met: boolean;\n}\n\n@Component({\n selector: 'solaris-password-field',\n standalone: true,\n imports: [\n FormsModule,\n SolarisFormFieldComponent,\n SolarisInputDirective,\n SolarisFormSuffixDirective,\n SolarisIconComponent,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SolarisPasswordFieldComponent),\n multi: true,\n },\n ],\n templateUrl: './password-field.component.html',\n styleUrls: ['./password-field.component.scss'],\n})\nexport class SolarisPasswordFieldComponent implements ControlValueAccessor {\n private readonly translateService = inject(SolarisTranslateService);\n\n @ViewChild('inputElement', { read: ElementRef })\n protected inputElementRef?: ElementRef<HTMLInputElement>;\n\n readonly value = input<string>('');\n readonly label = input<string>('');\n readonly labelKey = input<string>();\n readonly hint = input<string>('');\n readonly hintKey = input<string>();\n readonly error = input<string>('');\n readonly errorKey = input<string>();\n readonly placeholder = input<string>();\n readonly placeholderKey = input<string>();\n readonly autocomplete = input<string>();\n readonly name = input<string>();\n readonly id = input<string>();\n readonly required = input<boolean>(false);\n readonly optional = input<boolean>(false);\n readonly disabled = input<boolean>(false);\n readonly readonly = input<boolean>(false);\n readonly invalid = input<boolean \| undefined>();\n readonly appearance = input<SolarisPasswordFieldAppearance>('outline');\n readonly size = input<SolarisPasswordFieldSize>('md');\n readonly density = input<SolarisPasswordFieldDensity>();\n readonly radius = input<SolarisPasswordFieldRadius>('md');\n readonly fullWidth = input<boolean>(true);\n\n readonly showToggle = input<boolean>(true);\n readonly visible = input<boolean>(false);\n readonly showRequirements = input<boolean>(false);\n readonly showStrength = input<boolean>(false);\n readonly policy = input<SolarisPasswordPolicy \| undefined>();\n readonly validatePolicy = input<boolean>(true);\n readonly minLength = input<number>();\n readonly maxLength = input<number>();\n\n readonly toggleShowLabel = input<string>();\n readonly toggleShowLabelKey = input<string>();\n readonly toggleHideLabel = input<string>();\n readonly toggleHideLabelKey = input<string>();\n\n readonly valueChange = output<string>();\n readonly visibleChange = output<boolean>();\n\n protected readonly internalValue = signal<string>('');\n protected readonly internalFocused = signal(false);\n protected readonly internalDisabled = signal(false);\n protected readonly _visibleState = signal(false);\n protected readonly touched = signal(false);\n protected readonly dirty = signal(false);\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: string) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n protected readonly effectivePolicy = computed<\n SolarisPasswordPolicy \| undefined\n >(() => {\n const p = this.policy();\n const min = this.minLength();\n const max = this.maxLength();\n if (!p && min === undefined && max === undefined) {\n return undefined;\n }\n return {\n ...p,\n ...(min !== undefined ? { minLength: min } : {}),\n ...(max !== undefined ? { maxLength: max } : {}),\n };\n });\n\n constructor() {\n effect(() => {\n this._visibleState.set(this.visible());\n });\n }\n\n protected readonly inputType = computed(() => {\n return this._visibleState() ? 'text' : 'password';\n });\n\n protected readonly placeholderText = computed(() => {\n const key = this.placeholderKey();\n if (key) {\n return this.translateService.translate(key);\n }\n return this.placeholder() ?? '';\n });\n\n protected readonly toggleLabel = computed(() => {\n if (this._visibleState()) {\n const key = this.toggleHideLabelKey();\n if (key) {\n return this.translateService.translate(key);\n }\n return (\n this.toggleHideLabel() \|\|\n this.translateWithDefault(\n 'solaris.password-field.toggle.hide',\n 'Hide password',\n )\n );\n }\n const key = this.toggleShowLabelKey();\n if (key) {\n return this.translateService.translate(key);\n }\n return (\n this.toggleShowLabel() \|\|\n this.translateWithDefault(\n 'solaris.password-field.toggle.show',\n 'Show password',\n )\n );\n });\n\n private translateWithDefault(\n key: string,\n defaultText: string,\n params?: SolarisTranslateParams,\n ): string {\n const result = this.translateService.translate(key, params);\n return result !== key ? result : defaultText;\n }\n\n protected readonly isEffectivelyDisabled = computed(() => {\n return this.disabled() \|\| this.internalDisabled();\n });\n\n protected readonly isFieldInvalid = computed(() => {\n const manual = this.invalid();\n if (manual !== undefined) {\n return manual;\n }\n\n if (this.internalFocused()) {\n return false;\n }\n\n const isTouchedOrDirty = this.touched() \|\| this.dirty();\n if (!isTouchedOrDirty) {\n return false;\n }\n\n const val = this.internalValue();\n if (this.required() && (!val \|\| val.length === 0)) {\n return true;\n }\n\n const currentPolicy = this.effectivePolicy();\n if (this.validatePolicy() && currentPolicy) {\n if (typeof val === 'string' && val.length > 0) {\n const errors = solarisPasswordValidator(currentPolicy)({\n value: val,\n } as never);\n if (errors && Object.keys(errors).length > 0) {\n return true;\n }\n }\n }\n\n return false;\n });\n\n protected readonly computedError = computed(() => {\n if (!this.isFieldInvalid()) {\n return '';\n }\n\n const val = this.internalValue();\n if (!val \|\| val.length === 0) {\n if (this.required()) {\n return this.translateWithDefault(\n 'solaris.password-field.error.required',\n 'Password is required.',\n );\n }\n }\n\n return '';\n });\n\n protected readonly requirementList = computed<RequirementItem[]>(() => {\n const p = this.effectivePolicy();\n if (!p) {\n return [];\n }\n const val = this.internalValue();\n const items: RequirementItem[] = [];\n\n if (p.minLength !== undefined) {\n items.push({\n key: 'minLength',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.minLength',\n `At least ${p.minLength} characters.`,\n { count: p.minLength },\n ),\n met: val.length >= p.minLength,\n });\n }\n\n if (p.maxLength !== undefined) {\n items.push({\n key: 'maxLength',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.maxLength',\n `At most ${p.maxLength} characters.`,\n { count: p.maxLength },\n ),\n met: val.length <= p.maxLength,\n });\n }\n\n if (p.requireLowercase) {\n items.push({\n key: 'lowercase',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.lowercase',\n 'One lowercase letter.',\n ),\n met: /[a-z]/.test(val),\n });\n }\n\n if (p.requireUppercase) {\n items.push({\n key: 'uppercase',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.uppercase',\n 'One uppercase letter.',\n ),\n met: /[A-Z]/.test(val),\n });\n }\n\n if (p.requireNumber) {\n items.push({\n key: 'number',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.number',\n 'One number.',\n ),\n met: /\\d/.test(val),\n });\n }\n\n if (p.requireSymbol) {\n items.push({\n key: 'symbol',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.symbol',\n 'One symbol.',\n ),\n met: /[^a-zA-Z0-9]/.test(val),\n });\n }\n\n if (p.disallowWhitespace) {\n items.push({\n key: 'noWhitespace',\n label: this.translateWithDefault(\n 'solaris.password-field.requirement.noWhitespace',\n 'No spaces.',\n ),\n met: !/\\s/.test(val),\n });\n }\n\n return items;\n });\n\n protected readonly strengthLevel = computed<SolarisPasswordStrength>(() =>\n calculatePasswordStrength(this.internalValue()),\n );\n\n protected readonly strengthLabelText = computed(() => {\n const level = this.strengthLevel();\n switch (level) {\n case 'empty':\n return '';\n case 'weak':\n return this.translateWithDefault(\n 'solaris.password-field.strength.weak',\n 'Weak',\n );\n case 'medium':\n return this.translateWithDefault(\n 'solaris.password-field.strength.medium',\n 'Medium',\n );\n case 'strong':\n return this.translateWithDefault(\n 'solaris.password-field.strength.strong',\n 'Strong',\n );\n }\n });\n\n writeValue(safe = ''): void {\n this.internalValue.set(safe);\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n protected onInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n if (!this.dirty()) {\n this.dirty.set(true);\n }\n\n this.internalValue.set(newValue);\n this.onChange(newValue);\n this.valueChange.emit(newValue);\n }\n\n protected onInputFocus(): void {\n this.internalFocused.set(true);\n }\n\n protected onInputBlur(): void {\n this.internalFocused.set(false);\n\n if (!this.touched()) {\n this.touched.set(true);\n }\n\n this.onTouched();\n }\n\n protected toggleVisibility(): void {\n const newVisible = !this._visibleState();\n this._visibleState.set(newVisible);\n this.visibleChange.emit(newVisible);\n\n if (this.inputElementRef) {\n try {\n // SECURITY_EXCEPTION: nativeElement.focus() is the standard DOM API to restore focus after toggle. No SSR-safe alternative exists for imperative focus. Same approach used by Angular CDK.\n this.inputElementRef.nativeElement.focus();\n } catch {\n if (isDevMode()) {\n console.warn(\n '[SolarisPasswordField] Could not restore focus after toggle.',\n );\n }\n }\n }\n }\n}\n","<solaris-form-field\n [label]=\"label()\"\n [labelKey]=\"labelKey()\"\n [hint]=\"hint()\"\n [hintKey]=\"hintKey()\"\n [error]=\"error() \|\| computedError()\"\n [errorKey]=\"errorKey()\"\n [invalid]=\"isFieldInvalid()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [size]=\"size()\"\n [density]=\"density()\"\n [radius]=\"radius()\"\n>\n <input\n #inputElement\n solaris-input\n [type]=\"inputType()\"\n [value]=\"internalValue()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.id]=\"id() ?? null\"\n [attr.placeholder]=\"placeholderText() \|\| null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n (input)=\"onInput($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n />\n @if (showToggle()) {\n <button\n class=\"solaris-password-field__toggle\"\n solaris-form-suffix\n type=\"button\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-label]=\"toggleLabel()\"\n (click)=\"toggleVisibility()\"\n >\n <solaris-icon\n [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n [decorative]=\"true\"\n />\n </button>\n }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy(); as p) {\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"]}

package/esm2022/lib/components/forms/radio/component/radio.component.js CHANGED Viewed

@@ -190,7 +190,7 @@ export class SolarisRadioComponent extends SolarisFormControl {
                 provide: SolarisFormControl,
                 useExisting: SolarisRadioComponent,
             },
-        ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"solaris-radio__label\" [for]=\"elementId()\">\n  <input\n    type=\"radio\"\n    class=\"solaris-radio__input\"\n    [id]=\"elementId()\"\n    [checked]=\"_checked()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [required]=\"required\"\n    [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n    [attr.name]=\"effectiveName() ?? null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    #inputElement\n  />\n  <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n    @if (_checked()) {\n      <span class=\"solaris-radio__dot\"></span>\n    }\n  </span>\n  @if (hasProjectedContent()) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      <ng-content />\n    </span>\n  } @else if (labelText(); as text) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      {{ text }}\n    </span>\n  }\n</label>\n", styles: [":host{--solaris-radio-size: initial;--solaris-radio-ring-width: initial;--solaris-radio-dot-size: initial;--solaris-radio-gap: initial;--solaris-radio-border-color: initial;--solaris-radio-background: initial;--solaris-radio-ring-color: initial;--solaris-radio-dot-color: initial;--solaris-radio-focus-ring-color: initial;--solaris-radio-disabled-opacity: initial;--solaris-radio-readonly-background: initial;--solaris-radio-invalid-border-color: initial;--solaris-radio-custom-ring-color: initial;--solaris-radio-custom-indicator-color: initial;--solaris-radio-custom-surface: initial;--solaris-radio-custom-border-color: initial;--solaris-radio-label-font-size: initial;--solaris-radio-label-line-height: initial;display:inline-flex;vertical-align:middle;outline:none}.solaris-radio__label{display:inline-flex;align-items:center;gap:var(--solaris-radio-gap);cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.solaris-radio__input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.solaris-radio__control{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--solaris-radio-size);height:var(--solaris-radio-size);border:var(--solaris-radio-ring-width) solid var(--solaris-radio-border-color);border-radius:50%;background:var(--solaris-radio-background);box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;position:relative}.solaris-radio__dot{display:block;width:var(--solaris-radio-dot-size);height:var(--solaris-radio-dot-size);border-radius:50%;background:var(--solaris-radio-dot-color);box-sizing:border-box}.solaris-radio__label-text{font-size:var(--solaris-radio-label-font-size);line-height:var(--solaris-radio-label-line-height);color:inherit}:host([data-size=sm]){--solaris-radio-size: var(--solaris-spacing-4);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 1.5);--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-label-font-size: var(--solaris-font-size-sm);--solaris-radio-label-line-height: var(--solaris-line-height-sm)}:host([data-size=md]){--solaris-radio-size: var(--solaris-spacing-5);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2);--solaris-radio-dot-size: var(--solaris-spacing-2);--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-label-font-size: var(--solaris-font-size-md);--solaris-radio-label-line-height: var(--solaris-line-height-md)}:host([data-size=lg]){--solaris-radio-size: var(--solaris-spacing-6);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) * .75);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 2.5);--solaris-radio-gap: var(--solaris-spacing-3);--solaris-radio-label-font-size: var(--solaris-font-size-lg);--solaris-radio-label-line-height: var(--solaris-line-height-lg)}:host([data-density=compact]){--solaris-radio-gap: var(--solaris-spacing-1)}:host([data-density=comfortable]){--solaris-radio-gap: var(--solaris-spacing-3)}:host([data-appearance=outline]){--solaris-radio-background: transparent}:host([data-appearance=surface]){--solaris-radio-background: var(--solaris-surface-muted);--solaris-radio-border-color: transparent;--solaris-radio-ring-width: var(--solaris-spacing-0)}:host([data-appearance=surface][data-checked]){--solaris-radio-background: transparent;--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2)}:host([data-color=neutral]){--solaris-radio-border-color: var(--solaris-border-default)}:host([data-color=neutral][data-checked]){--solaris-radio-ring-color: var(--solaris-text-default);--solaris-radio-border-color: var(--solaris-text-default);--solaris-radio-dot-color: var(--solaris-text-default)}:host([data-color=primary]){--solaris-radio-border-color: var( --solaris-primary-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-primary-base)}:host([data-color=primary][data-checked]){--solaris-radio-ring-color: var(--solaris-primary-base);--solaris-radio-border-color: var(--solaris-primary-base);--solaris-radio-dot-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-radio-border-color: var( --solaris-success-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-success-base)}:host([data-color=success][data-checked]){--solaris-radio-ring-color: var(--solaris-success-base);--solaris-radio-border-color: var(--solaris-success-base);--solaris-radio-dot-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-radio-border-color: var( --solaris-warning-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-warning-base)}:host([data-color=warning][data-checked]){--solaris-radio-ring-color: var(--solaris-warning-base);--solaris-radio-border-color: var(--solaris-warning-base);--solaris-radio-dot-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-radio-border-color: var( --solaris-danger-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-color=danger][data-checked]){--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base);--solaris-radio-dot-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-radio-border-color: var( --solaris-info-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-info-base)}:host([data-color=info][data-checked]){--solaris-radio-ring-color: var(--solaris-info-base);--solaris-radio-border-color: var(--solaris-info-base);--solaris-radio-dot-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-radio-border-color: var( --solaris-radio-custom-border-color, var(--solaris-border-default) );--solaris-radio-background: var(--solaris-radio-custom-surface, transparent)}:host([data-color=custom][data-checked]){--solaris-radio-ring-color: var( --solaris-radio-custom-ring-color, var(--solaris-primary-base) );--solaris-radio-dot-color: var( --solaris-radio-custom-indicator-color, var(--solaris-primary-base) );--solaris-radio-border-color: var( --solaris-radio-custom-ring-color, var(--solaris-primary-base) )}.solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-color=primary]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-primary-hover, var(--solaris-primary-base))}:host([data-color=success]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-success-hover, var(--solaris-success-base))}:host([data-color=warning]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-warning-hover, var(--solaris-warning-base))}:host([data-color=danger]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-hover, var(--solaris-danger-base))}:host([data-color=info]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-info-hover, var(--solaris-info-base))}.solaris-radio__input:focus-visible+.solaris-radio__control{outline:var(--solaris-border-width-sm) solid var(--solaris-radio-focus-ring-color);outline-offset:calc(var(--solaris-spacing-1) / 2)}:host([data-invalid]){--solaris-radio-border-color: var( --solaris-radio-invalid-border-color, var(--solaris-danger-base) );--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-invalid][data-checked]){--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base);--solaris-radio-dot-color: var(--solaris-danger-base)}:host([data-invalid]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-invalid-border-color, var(--solaris-danger-base))}:host([data-disabled]){--solaris-radio-disabled-opacity: .5}:host([data-disabled]) .solaris-radio__label{cursor:not-allowed}:host([data-disabled]) .solaris-radio__control{opacity:var(--solaris-radio-disabled-opacity)}:host([data-disabled]) .solaris-radio__label-text{opacity:var(--solaris-radio-disabled-opacity)}:host([data-readonly]),:host([data-readonly][data-checked]){--solaris-radio-border-color: var( --solaris-text-muted, var(--solaris-border-subtle) );--solaris-radio-ring-color: var(--solaris-text-muted);--solaris-radio-dot-color: var(--solaris-text-muted);--solaris-radio-readonly-opacity: .65}:host([data-readonly]) .solaris-radio__label{cursor:not-allowed}:host([data-readonly]) .solaris-radio__control,:host([data-readonly]) .solaris-radio__label-text{opacity:var(--solaris-radio-readonly-opacity)}:host([data-readonly]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-readonly][data-checked]) .solaris-radio__control{background:var(--solaris-radio-readonly-background, transparent);border-color:var(--solaris-radio-ring-color)}:host([data-readonly][data-checked]) .solaris-radio__dot{background:var(--solaris-radio-dot-color)}\n"] });
+        ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"solaris-radio__label\" [for]=\"elementId()\">\n  <input\n    type=\"radio\"\n    class=\"solaris-radio__input\"\n    [id]=\"elementId()\"\n    [checked]=\"_checked()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [required]=\"required\"\n    [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n    [attr.name]=\"effectiveName() ?? null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    #inputElement\n  />\n  <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n    @if (_checked()) {\n      <span class=\"solaris-radio__dot\"></span>\n    }\n  </span>\n  @if (hasProjectedContent()) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      <ng-content />\n    </span>\n  } @else if (labelText(); as text) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      {{ text }}\n    </span>\n  }\n</label>\n", styles: [":host{--solaris-radio-gap: initial;--solaris-radio-size: initial;--solaris-radio-dot-size: initial;--solaris-radio-dot-color: initial;--solaris-radio-background: initial;--solaris-radio-ring-width: initial;--solaris-radio-ring-color: initial;--solaris-radio-border-color: initial;--solaris-radio-custom-surface: initial;--solaris-radio-label-font-size: initial;--solaris-radio-focus-ring-color: initial;--solaris-radio-disabled-opacity: initial;--solaris-radio-custom-ring-color: initial;--solaris-radio-label-line-height: initial;--solaris-radio-readonly-background: initial;--solaris-radio-custom-border-color: initial;--solaris-radio-custom-indicator-color: initial;outline:none;display:inline-flex;vertical-align:middle}.solaris-radio__label{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;display:inline-flex;gap:var(--solaris-radio-gap)}.solaris-radio__input{width:0;height:0;margin:0;opacity:0;padding:0;position:absolute;pointer-events:none}.solaris-radio__control{display:flex;flex-shrink:0;border-radius:50%;position:relative;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-radio-size);height:var(--solaris-radio-size);border:var(--solaris-radio-ring-width) solid var(--solaris-radio-border-color);background:var(--solaris-radio-background);transition:background-color var(--solaris-motion-duration-normal) ease,border-color var(--solaris-motion-duration-normal) ease,box-shadow var(--solaris-motion-duration-normal) ease}.solaris-radio__dot{display:block;border-radius:50%;box-sizing:border-box;width:var(--solaris-radio-dot-size);height:var(--solaris-radio-dot-size);background:var(--solaris-radio-dot-color)}.solaris-radio__label-text{color:inherit;font-size:var(--solaris-radio-label-font-size);line-height:var(--solaris-radio-label-line-height)}:host([data-size=sm]){--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-4);--solaris-radio-label-font-size: var(--solaris-font-size-sm);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 1.5);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2);--solaris-radio-label-line-height: var(--solaris-line-height-sm)}:host([data-size=md]){--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-5);--solaris-radio-dot-size: var(--solaris-spacing-2);--solaris-radio-label-font-size: var(--solaris-font-size-md);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2);--solaris-radio-label-line-height: var(--solaris-line-height-md)}:host([data-size=lg]){--solaris-radio-gap: var(--solaris-spacing-3);--solaris-radio-size: var(--solaris-spacing-6);--solaris-radio-label-font-size: var(--solaris-font-size-lg);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 2.5);--solaris-radio-label-line-height: var(--solaris-line-height-lg);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) * .75)}:host([data-density=compact]){--solaris-radio-gap: var(--solaris-spacing-1)}:host([data-density=comfortable]){--solaris-radio-gap: var(--solaris-spacing-3)}:host([data-appearance=outline]){--solaris-radio-background: transparent}:host([data-appearance=surface]){--solaris-radio-border-color: transparent;--solaris-radio-ring-width: var(--solaris-spacing-0);--solaris-radio-background: var(--solaris-surface-muted)}:host([data-appearance=surface][data-checked]){--solaris-radio-background: transparent;--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2)}:host([data-color=neutral]){--solaris-radio-border-color: var(--solaris-border-default)}:host([data-color=neutral][data-checked]){--solaris-radio-dot-color: var(--solaris-text-default);--solaris-radio-ring-color: var(--solaris-text-default);--solaris-radio-border-color: var(--solaris-text-default)}:host([data-color=primary]){--solaris-radio-border-color: var(--solaris-primary-border);--solaris-radio-focus-ring-color: var(--solaris-primary-base)}:host([data-color=primary][data-checked]){--solaris-radio-dot-color: var(--solaris-primary-base);--solaris-radio-ring-color: var(--solaris-primary-base);--solaris-radio-border-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-radio-border-color: var(--solaris-success-border);--solaris-radio-focus-ring-color: var(--solaris-success-base)}:host([data-color=success][data-checked]){--solaris-radio-dot-color: var(--solaris-success-base);--solaris-radio-ring-color: var(--solaris-success-base);--solaris-radio-border-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-radio-border-color: var(--solaris-warning-border);--solaris-radio-focus-ring-color: var(--solaris-warning-base)}:host([data-color=warning][data-checked]){--solaris-radio-dot-color: var(--solaris-warning-base);--solaris-radio-ring-color: var(--solaris-warning-base);--solaris-radio-border-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-radio-border-color: var(--solaris-danger-border);--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-color=danger][data-checked]){--solaris-radio-dot-color: var(--solaris-danger-base);--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-radio-border-color: var(--solaris-info-border);--solaris-radio-focus-ring-color: var(--solaris-info-base)}:host([data-color=info][data-checked]){--solaris-radio-dot-color: var(--solaris-info-base);--solaris-radio-ring-color: var(--solaris-info-base);--solaris-radio-border-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-radio-background: var(--solaris-radio-custom-surface);--solaris-radio-border-color: var(--solaris-radio-custom-border-color)}:host([data-color=custom][data-checked]){--solaris-radio-ring-color: var(--solaris-radio-custom-ring-color);--solaris-radio-border-color: var(--solaris-radio-custom-ring-color);--solaris-radio-dot-color: var(--solaris-radio-custom-indicator-color)}.solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-color=primary]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-primary-hover, var(--solaris-primary-base))}:host([data-color=success]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-success-hover, var(--solaris-success-base))}:host([data-color=warning]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-warning-hover, var(--solaris-warning-base))}:host([data-color=danger]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-hover, var(--solaris-danger-base))}:host([data-color=info]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-info-hover, var(--solaris-info-base))}.solaris-radio__input:focus-visible+.solaris-radio__control{outline:var(--solaris-border-width-sm) solid var(--solaris-radio-focus-ring-color);outline-offset:calc(var(--solaris-spacing-1) / 2)}:host([data-invalid]){--solaris-radio-border-color: var(--solaris-danger-base);--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-invalid][data-checked]){--solaris-radio-dot-color: var(--solaris-danger-base);--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base)}:host([data-invalid]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-base)}:host([data-disabled]){--solaris-radio-disabled-opacity: .5}:host([data-disabled]) .solaris-radio__label{cursor:not-allowed}:host([data-disabled]) .solaris-radio__control{opacity:var(--solaris-radio-disabled-opacity)}:host([data-disabled]) .solaris-radio__label-text{opacity:var(--solaris-radio-disabled-opacity)}:host([data-readonly]),:host([data-readonly][data-checked]){--solaris-radio-readonly-opacity: .65;--solaris-radio-dot-color: var(--solaris-text-muted);--solaris-radio-ring-color: var(--solaris-text-muted);--solaris-radio-border-color: var(--solaris-border-subtle)}:host([data-readonly]) .solaris-radio__label{cursor:not-allowed}:host([data-readonly]) .solaris-radio__control,:host([data-readonly]) .solaris-radio__label-text{opacity:var(--solaris-radio-readonly-opacity)}:host([data-readonly]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-readonly][data-checked]) .solaris-radio__control{background:var(--solaris-radio-readonly-background, transparent);border-color:var(--solaris-radio-ring-color)}:host([data-readonly][data-checked]) .solaris-radio__dot{background:var(--solaris-radio-dot-color)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisRadioComponent, decorators: [{
             type: Component,
@@ -214,6 +214,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-readonly]': 'isEffectivelyReadonly() ? "" : null',
                         '[attr.data-invalid]': 'isEffectivelyInvalid() ? "" : null',
                         '[attr.data-focused]': '_focused() ? "" : null',
-                    }, template: "<label class=\"solaris-radio__label\" [for]=\"elementId()\">\n  <input\n    type=\"radio\"\n    class=\"solaris-radio__input\"\n    [id]=\"elementId()\"\n    [checked]=\"_checked()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [required]=\"required\"\n    [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n    [attr.name]=\"effectiveName() ?? null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    #inputElement\n  />\n  <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n    @if (_checked()) {\n      <span class=\"solaris-radio__dot\"></span>\n    }\n  </span>\n  @if (hasProjectedContent()) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      <ng-content />\n    </span>\n  } @else if (labelText(); as text) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      {{ text }}\n    </span>\n  }\n</label>\n", styles: [":host{--solaris-radio-size: initial;--solaris-radio-ring-width: initial;--solaris-radio-dot-size: initial;--solaris-radio-gap: initial;--solaris-radio-border-color: initial;--solaris-radio-background: initial;--solaris-radio-ring-color: initial;--solaris-radio-dot-color: initial;--solaris-radio-focus-ring-color: initial;--solaris-radio-disabled-opacity: initial;--solaris-radio-readonly-background: initial;--solaris-radio-invalid-border-color: initial;--solaris-radio-custom-ring-color: initial;--solaris-radio-custom-indicator-color: initial;--solaris-radio-custom-surface: initial;--solaris-radio-custom-border-color: initial;--solaris-radio-label-font-size: initial;--solaris-radio-label-line-height: initial;display:inline-flex;vertical-align:middle;outline:none}.solaris-radio__label{display:inline-flex;align-items:center;gap:var(--solaris-radio-gap);cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.solaris-radio__input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.solaris-radio__control{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--solaris-radio-size);height:var(--solaris-radio-size);border:var(--solaris-radio-ring-width) solid var(--solaris-radio-border-color);border-radius:50%;background:var(--solaris-radio-background);box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;position:relative}.solaris-radio__dot{display:block;width:var(--solaris-radio-dot-size);height:var(--solaris-radio-dot-size);border-radius:50%;background:var(--solaris-radio-dot-color);box-sizing:border-box}.solaris-radio__label-text{font-size:var(--solaris-radio-label-font-size);line-height:var(--solaris-radio-label-line-height);color:inherit}:host([data-size=sm]){--solaris-radio-size: var(--solaris-spacing-4);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 1.5);--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-label-font-size: var(--solaris-font-size-sm);--solaris-radio-label-line-height: var(--solaris-line-height-sm)}:host([data-size=md]){--solaris-radio-size: var(--solaris-spacing-5);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2);--solaris-radio-dot-size: var(--solaris-spacing-2);--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-label-font-size: var(--solaris-font-size-md);--solaris-radio-label-line-height: var(--solaris-line-height-md)}:host([data-size=lg]){--solaris-radio-size: var(--solaris-spacing-6);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) * .75);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 2.5);--solaris-radio-gap: var(--solaris-spacing-3);--solaris-radio-label-font-size: var(--solaris-font-size-lg);--solaris-radio-label-line-height: var(--solaris-line-height-lg)}:host([data-density=compact]){--solaris-radio-gap: var(--solaris-spacing-1)}:host([data-density=comfortable]){--solaris-radio-gap: var(--solaris-spacing-3)}:host([data-appearance=outline]){--solaris-radio-background: transparent}:host([data-appearance=surface]){--solaris-radio-background: var(--solaris-surface-muted);--solaris-radio-border-color: transparent;--solaris-radio-ring-width: var(--solaris-spacing-0)}:host([data-appearance=surface][data-checked]){--solaris-radio-background: transparent;--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2)}:host([data-color=neutral]){--solaris-radio-border-color: var(--solaris-border-default)}:host([data-color=neutral][data-checked]){--solaris-radio-ring-color: var(--solaris-text-default);--solaris-radio-border-color: var(--solaris-text-default);--solaris-radio-dot-color: var(--solaris-text-default)}:host([data-color=primary]){--solaris-radio-border-color: var( --solaris-primary-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-primary-base)}:host([data-color=primary][data-checked]){--solaris-radio-ring-color: var(--solaris-primary-base);--solaris-radio-border-color: var(--solaris-primary-base);--solaris-radio-dot-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-radio-border-color: var( --solaris-success-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-success-base)}:host([data-color=success][data-checked]){--solaris-radio-ring-color: var(--solaris-success-base);--solaris-radio-border-color: var(--solaris-success-base);--solaris-radio-dot-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-radio-border-color: var( --solaris-warning-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-warning-base)}:host([data-color=warning][data-checked]){--solaris-radio-ring-color: var(--solaris-warning-base);--solaris-radio-border-color: var(--solaris-warning-base);--solaris-radio-dot-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-radio-border-color: var( --solaris-danger-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-color=danger][data-checked]){--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base);--solaris-radio-dot-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-radio-border-color: var( --solaris-info-border, var(--solaris-border-default) );--solaris-radio-focus-ring-color: var(--solaris-info-base)}:host([data-color=info][data-checked]){--solaris-radio-ring-color: var(--solaris-info-base);--solaris-radio-border-color: var(--solaris-info-base);--solaris-radio-dot-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-radio-border-color: var( --solaris-radio-custom-border-color, var(--solaris-border-default) );--solaris-radio-background: var(--solaris-radio-custom-surface, transparent)}:host([data-color=custom][data-checked]){--solaris-radio-ring-color: var( --solaris-radio-custom-ring-color, var(--solaris-primary-base) );--solaris-radio-dot-color: var( --solaris-radio-custom-indicator-color, var(--solaris-primary-base) );--solaris-radio-border-color: var( --solaris-radio-custom-ring-color, var(--solaris-primary-base) )}.solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-color=primary]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-primary-hover, var(--solaris-primary-base))}:host([data-color=success]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-success-hover, var(--solaris-success-base))}:host([data-color=warning]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-warning-hover, var(--solaris-warning-base))}:host([data-color=danger]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-hover, var(--solaris-danger-base))}:host([data-color=info]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-info-hover, var(--solaris-info-base))}.solaris-radio__input:focus-visible+.solaris-radio__control{outline:var(--solaris-border-width-sm) solid var(--solaris-radio-focus-ring-color);outline-offset:calc(var(--solaris-spacing-1) / 2)}:host([data-invalid]){--solaris-radio-border-color: var( --solaris-radio-invalid-border-color, var(--solaris-danger-base) );--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-invalid][data-checked]){--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base);--solaris-radio-dot-color: var(--solaris-danger-base)}:host([data-invalid]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-invalid-border-color, var(--solaris-danger-base))}:host([data-disabled]){--solaris-radio-disabled-opacity: .5}:host([data-disabled]) .solaris-radio__label{cursor:not-allowed}:host([data-disabled]) .solaris-radio__control{opacity:var(--solaris-radio-disabled-opacity)}:host([data-disabled]) .solaris-radio__label-text{opacity:var(--solaris-radio-disabled-opacity)}:host([data-readonly]),:host([data-readonly][data-checked]){--solaris-radio-border-color: var( --solaris-text-muted, var(--solaris-border-subtle) );--solaris-radio-ring-color: var(--solaris-text-muted);--solaris-radio-dot-color: var(--solaris-text-muted);--solaris-radio-readonly-opacity: .65}:host([data-readonly]) .solaris-radio__label{cursor:not-allowed}:host([data-readonly]) .solaris-radio__control,:host([data-readonly]) .solaris-radio__label-text{opacity:var(--solaris-radio-readonly-opacity)}:host([data-readonly]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-readonly][data-checked]) .solaris-radio__control{background:var(--solaris-radio-readonly-background, transparent);border-color:var(--solaris-radio-ring-color)}:host([data-readonly][data-checked]) .solaris-radio__dot{background:var(--solaris-radio-dot-color)}\n"] }]
+                    }, template: "<label class=\"solaris-radio__label\" [for]=\"elementId()\">\n  <input\n    type=\"radio\"\n    class=\"solaris-radio__input\"\n    [id]=\"elementId()\"\n    [checked]=\"_checked()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [required]=\"required\"\n    [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n    [attr.name]=\"effectiveName() ?? null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    #inputElement\n  />\n  <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n    @if (_checked()) {\n      <span class=\"solaris-radio__dot\"></span>\n    }\n  </span>\n  @if (hasProjectedContent()) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      <ng-content />\n    </span>\n  } @else if (labelText(); as text) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      {{ text }}\n    </span>\n  }\n</label>\n", styles: [":host{--solaris-radio-gap: initial;--solaris-radio-size: initial;--solaris-radio-dot-size: initial;--solaris-radio-dot-color: initial;--solaris-radio-background: initial;--solaris-radio-ring-width: initial;--solaris-radio-ring-color: initial;--solaris-radio-border-color: initial;--solaris-radio-custom-surface: initial;--solaris-radio-label-font-size: initial;--solaris-radio-focus-ring-color: initial;--solaris-radio-disabled-opacity: initial;--solaris-radio-custom-ring-color: initial;--solaris-radio-label-line-height: initial;--solaris-radio-readonly-background: initial;--solaris-radio-custom-border-color: initial;--solaris-radio-custom-indicator-color: initial;outline:none;display:inline-flex;vertical-align:middle}.solaris-radio__label{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;display:inline-flex;gap:var(--solaris-radio-gap)}.solaris-radio__input{width:0;height:0;margin:0;opacity:0;padding:0;position:absolute;pointer-events:none}.solaris-radio__control{display:flex;flex-shrink:0;border-radius:50%;position:relative;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-radio-size);height:var(--solaris-radio-size);border:var(--solaris-radio-ring-width) solid var(--solaris-radio-border-color);background:var(--solaris-radio-background);transition:background-color var(--solaris-motion-duration-normal) ease,border-color var(--solaris-motion-duration-normal) ease,box-shadow var(--solaris-motion-duration-normal) ease}.solaris-radio__dot{display:block;border-radius:50%;box-sizing:border-box;width:var(--solaris-radio-dot-size);height:var(--solaris-radio-dot-size);background:var(--solaris-radio-dot-color)}.solaris-radio__label-text{color:inherit;font-size:var(--solaris-radio-label-font-size);line-height:var(--solaris-radio-label-line-height)}:host([data-size=sm]){--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-4);--solaris-radio-label-font-size: var(--solaris-font-size-sm);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 1.5);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2);--solaris-radio-label-line-height: var(--solaris-line-height-sm)}:host([data-size=md]){--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-5);--solaris-radio-dot-size: var(--solaris-spacing-2);--solaris-radio-label-font-size: var(--solaris-font-size-md);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2);--solaris-radio-label-line-height: var(--solaris-line-height-md)}:host([data-size=lg]){--solaris-radio-gap: var(--solaris-spacing-3);--solaris-radio-size: var(--solaris-spacing-6);--solaris-radio-label-font-size: var(--solaris-font-size-lg);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 2.5);--solaris-radio-label-line-height: var(--solaris-line-height-lg);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) * .75)}:host([data-density=compact]){--solaris-radio-gap: var(--solaris-spacing-1)}:host([data-density=comfortable]){--solaris-radio-gap: var(--solaris-spacing-3)}:host([data-appearance=outline]){--solaris-radio-background: transparent}:host([data-appearance=surface]){--solaris-radio-border-color: transparent;--solaris-radio-ring-width: var(--solaris-spacing-0);--solaris-radio-background: var(--solaris-surface-muted)}:host([data-appearance=surface][data-checked]){--solaris-radio-background: transparent;--solaris-radio-ring-width: calc(var(--solaris-spacing-1) / 2)}:host([data-color=neutral]){--solaris-radio-border-color: var(--solaris-border-default)}:host([data-color=neutral][data-checked]){--solaris-radio-dot-color: var(--solaris-text-default);--solaris-radio-ring-color: var(--solaris-text-default);--solaris-radio-border-color: var(--solaris-text-default)}:host([data-color=primary]){--solaris-radio-border-color: var(--solaris-primary-border);--solaris-radio-focus-ring-color: var(--solaris-primary-base)}:host([data-color=primary][data-checked]){--solaris-radio-dot-color: var(--solaris-primary-base);--solaris-radio-ring-color: var(--solaris-primary-base);--solaris-radio-border-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-radio-border-color: var(--solaris-success-border);--solaris-radio-focus-ring-color: var(--solaris-success-base)}:host([data-color=success][data-checked]){--solaris-radio-dot-color: var(--solaris-success-base);--solaris-radio-ring-color: var(--solaris-success-base);--solaris-radio-border-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-radio-border-color: var(--solaris-warning-border);--solaris-radio-focus-ring-color: var(--solaris-warning-base)}:host([data-color=warning][data-checked]){--solaris-radio-dot-color: var(--solaris-warning-base);--solaris-radio-ring-color: var(--solaris-warning-base);--solaris-radio-border-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-radio-border-color: var(--solaris-danger-border);--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-color=danger][data-checked]){--solaris-radio-dot-color: var(--solaris-danger-base);--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-radio-border-color: var(--solaris-info-border);--solaris-radio-focus-ring-color: var(--solaris-info-base)}:host([data-color=info][data-checked]){--solaris-radio-dot-color: var(--solaris-info-base);--solaris-radio-ring-color: var(--solaris-info-base);--solaris-radio-border-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-radio-background: var(--solaris-radio-custom-surface);--solaris-radio-border-color: var(--solaris-radio-custom-border-color)}:host([data-color=custom][data-checked]){--solaris-radio-ring-color: var(--solaris-radio-custom-ring-color);--solaris-radio-border-color: var(--solaris-radio-custom-ring-color);--solaris-radio-dot-color: var(--solaris-radio-custom-indicator-color)}.solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-color=primary]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-primary-hover, var(--solaris-primary-base))}:host([data-color=success]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-success-hover, var(--solaris-success-base))}:host([data-color=warning]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-warning-hover, var(--solaris-warning-base))}:host([data-color=danger]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-hover, var(--solaris-danger-base))}:host([data-color=info]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-info-hover, var(--solaris-info-base))}.solaris-radio__input:focus-visible+.solaris-radio__control{outline:var(--solaris-border-width-sm) solid var(--solaris-radio-focus-ring-color);outline-offset:calc(var(--solaris-spacing-1) / 2)}:host([data-invalid]){--solaris-radio-border-color: var(--solaris-danger-base);--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-invalid][data-checked]){--solaris-radio-dot-color: var(--solaris-danger-base);--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base)}:host([data-invalid]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-base)}:host([data-disabled]){--solaris-radio-disabled-opacity: .5}:host([data-disabled]) .solaris-radio__label{cursor:not-allowed}:host([data-disabled]) .solaris-radio__control{opacity:var(--solaris-radio-disabled-opacity)}:host([data-disabled]) .solaris-radio__label-text{opacity:var(--solaris-radio-disabled-opacity)}:host([data-readonly]),:host([data-readonly][data-checked]){--solaris-radio-readonly-opacity: .65;--solaris-radio-dot-color: var(--solaris-text-muted);--solaris-radio-ring-color: var(--solaris-text-muted);--solaris-radio-border-color: var(--solaris-border-subtle)}:host([data-readonly]) .solaris-radio__label{cursor:not-allowed}:host([data-readonly]) .solaris-radio__control,:host([data-readonly]) .solaris-radio__label-text{opacity:var(--solaris-radio-readonly-opacity)}:host([data-readonly]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-readonly][data-checked]) .solaris-radio__control{background:var(--solaris-radio-readonly-background, transparent);border-color:var(--solaris-radio-ring-color)}:host([data-readonly][data-checked]) .solaris-radio__dot{background:var(--solaris-radio-dot-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radioLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
 //# sourceMappingURL=radio.component.js.map

package/esm2022/lib/components/forms/select/component/select.component.js CHANGED Viewed

@@ -1,13 +1,10 @@
 import { Component, input, computed, signal, output, effect, forwardRef, inject, ContentChildren, ElementRef, ViewChild, isDevMode, } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SolarisFormPrefixDirective, SolarisFormFieldTriggerDirective, SolarisFormFieldComponent, } from '../../form-field';
 import { SolarisFormControl } from '../../form-field/model/form-control.contract';
-import { SolarisFormFieldComponent } from '../../form-field/component/form-field.component';
-import { SolarisFormFieldTriggerDirective } from '../../form-field/directives/form-field-trigger.directive';
-import { SolarisFormPrefixDirective } from '../../form-field/directives/form-prefix.directive';
-import { SolarisFormSuffixDirective } from '../../form-field/directives/form-suffix.directive';
 import { SolarisTranslateService } from '../../../../services/translation';
-import { SolarisOptionComponent } from '../../option';
 import { SolarisOptionGroupComponent } from '../../option-group';
+import { SolarisOptionComponent } from '../../option';
 import { SolarisIconComponent } from '../../../icon';
 import { SolarisPopoverDirective, SolarisPopoverTriggerDirective, } from '../../../interaction/popover';
 import * as i0 from "@angular/core";
@@ -767,7 +764,7 @@ export class SolarisSelectComponent extends SolarisFormControl {
                 provide: SolarisFormControl,
                 useExisting: forwardRef(() => SolarisSelectComponent),
             },
-        ], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, read: ElementRef }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\r\n  #formFieldRef\r\n  [class.solaris-select--panel-open]=\"panelOpen()\"\r\n  [control]=\"this\"\r\n  [label]=\"labelText()\"\r\n  [hint]=\"hintText()\"\r\n  [error]=\"errorText()\"\r\n  [appearance]=\"appearance()\"\r\n  [size]=\"size()\"\r\n  [density]=\"effectiveDensity()\"\r\n  [radius]=\"radius()\"\r\n  [invalid]=\"isEffectivelyInvalid()\"\r\n  [required]=\"requiredInput()\"\r\n  solaris-popover-trigger\r\n  [solarisPopoverDisabled]=\"!canOpen()\"\r\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\r\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\r\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\r\n  [solarisPopoverPlacement]=\"'bottom'\"\r\n  [solarisPopoverAlign]=\"'start'\"\r\n  [solarisPopoverOffset]=\"0\"\r\n  [solarisPopoverPadding]=\"'none'\"\r\n  [solarisPopoverRadius]=\"radius()\"\r\n  [solarisPopoverTopConnected]=\"true\"\r\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\r\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\r\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\r\n  [solarisPopoverCloseOnEscape]=\"false\"\r\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\r\n>\r\n  @if (icon(); as iconName) {\r\n    <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\r\n  }\r\n  <ng-content select=\"[solaris-form-prefix]\" />\r\n\r\n  <div\r\n    #triggerEl\r\n    class=\"solaris-select__trigger\"\r\n    [id]=\"elementId() + '--trigger'\"\r\n    solaris-form-field-trigger\r\n    role=\"combobox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\r\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus()\"\r\n    (blur)=\"onTriggerBlur()\"\r\n  >\r\n    @if (searchable() && panelOpen()) {\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"solaris-select__search-input\"\r\n        [attr.placeholder]=\"searchPlaceholderText()\"\r\n        [value]=\"searchQuery()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"onSearchKeydown($event)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        role=\"searchbox\"\r\n        autocomplete=\"off\"\r\n      />\r\n    } @else {\r\n      <span class=\"solaris-select__value\">\r\n        @if (displayText()) {\r\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\r\n        } @else {\r\n          <span class=\"solaris-select__placeholder\">{{\r\n            placeholderText()\r\n          }}</span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <span class=\"solaris-select__actions\">\r\n      @if (canClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"solaris-select__clear\"\r\n          [attr.aria-label]=\"clearAriaLabel()\"\r\n          (click)=\"clearValue(); $event.stopPropagation()\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n        </button>\r\n      }\r\n\r\n      <solaris-icon\r\n        class=\"solaris-select__dropdown-icon\"\r\n        name=\"chevron-down\"\r\n        [decorative]=\"true\"\r\n        size=\"sm\"\r\n      />\r\n    </span>\r\n  </div>\r\n\r\n  <ng-content select=\"[solaris-form-suffix]\" />\r\n</solaris-form-field>\r\n\r\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\r\n  <div\r\n    class=\"solaris-select__panel\"\r\n    role=\"listbox\"\r\n    [attr.id]=\"panelId\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onPanelClick($event)\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (loading()) {\r\n      <div class=\"solaris-select__loading\">\r\n        <span class=\"solaris-select__loading-text\">{{\r\n          loadingTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showNoResults()) {\r\n      <div class=\"solaris-select__no-results\">\r\n        <span class=\"solaris-select__no-results-text\">{{\r\n          noResultsTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showEmpty()) {\r\n      <div class=\"solaris-select__empty\">\r\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"solaris-select__options\"\r\n        [style.max-height]=\"panelMaxHeight()\"\r\n      >\r\n        <ng-content select=\"solaris-option, solaris-option-group\" />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-placeholder-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-line-height: var(--solaris-line-height-md);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;min-width:0;display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0;outline:none;border:none;background:transparent;cursor:pointer}: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{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) ease}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.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) ease}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}: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;min-width:0;border:none;outline:none;padding:0;margin:0;font-family:inherit;box-sizing:border-box;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);background:transparent}.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", "size", "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"] }] });
+        ], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, read: ElementRef }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, read: ElementRef }], 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  [size]=\"size()\"\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-value-color: var(--solaris-text-default);--solaris-select-placeholder-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-line-height: var(--solaris-line-height-md);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;min-width:0;display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0;outline:none;border:none;background:transparent;cursor:pointer}: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{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) ease}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.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) ease}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}: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;min-width:0;border:none;outline:none;padding:0;margin:0;font-family:inherit;box-sizing:border-box;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);background:transparent}.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", "size", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, decorators: [{
             type: Component,
@@ -775,7 +772,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         SolarisFormFieldComponent,
                         SolarisFormFieldTriggerDirective,
                         SolarisFormPrefixDirective,
-                        SolarisFormSuffixDirective,
                         SolarisIconComponent,
                         SolarisPopoverDirective,
                         SolarisPopoverTriggerDirective,
@@ -796,7 +792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-open]': 'panelOpen() ? "" : null',
                         '[attr.aria-label]': 'ariaLabelText() ?? null',
                         '[attr.data-has-value]': 'hasValue() ? "" : null',
-                    }, template: "<solaris-form-field\r\n  #formFieldRef\r\n  [class.solaris-select--panel-open]=\"panelOpen()\"\r\n  [control]=\"this\"\r\n  [label]=\"labelText()\"\r\n  [hint]=\"hintText()\"\r\n  [error]=\"errorText()\"\r\n  [appearance]=\"appearance()\"\r\n  [size]=\"size()\"\r\n  [density]=\"effectiveDensity()\"\r\n  [radius]=\"radius()\"\r\n  [invalid]=\"isEffectivelyInvalid()\"\r\n  [required]=\"requiredInput()\"\r\n  solaris-popover-trigger\r\n  [solarisPopoverDisabled]=\"!canOpen()\"\r\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\r\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\r\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\r\n  [solarisPopoverPlacement]=\"'bottom'\"\r\n  [solarisPopoverAlign]=\"'start'\"\r\n  [solarisPopoverOffset]=\"0\"\r\n  [solarisPopoverPadding]=\"'none'\"\r\n  [solarisPopoverRadius]=\"radius()\"\r\n  [solarisPopoverTopConnected]=\"true\"\r\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\r\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\r\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\r\n  [solarisPopoverCloseOnEscape]=\"false\"\r\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\r\n>\r\n  @if (icon(); as iconName) {\r\n    <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\r\n  }\r\n  <ng-content select=\"[solaris-form-prefix]\" />\r\n\r\n  <div\r\n    #triggerEl\r\n    class=\"solaris-select__trigger\"\r\n    [id]=\"elementId() + '--trigger'\"\r\n    solaris-form-field-trigger\r\n    role=\"combobox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\r\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus()\"\r\n    (blur)=\"onTriggerBlur()\"\r\n  >\r\n    @if (searchable() && panelOpen()) {\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"solaris-select__search-input\"\r\n        [attr.placeholder]=\"searchPlaceholderText()\"\r\n        [value]=\"searchQuery()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"onSearchKeydown($event)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        role=\"searchbox\"\r\n        autocomplete=\"off\"\r\n      />\r\n    } @else {\r\n      <span class=\"solaris-select__value\">\r\n        @if (displayText()) {\r\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\r\n        } @else {\r\n          <span class=\"solaris-select__placeholder\">{{\r\n            placeholderText()\r\n          }}</span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <span class=\"solaris-select__actions\">\r\n      @if (canClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"solaris-select__clear\"\r\n          [attr.aria-label]=\"clearAriaLabel()\"\r\n          (click)=\"clearValue(); $event.stopPropagation()\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n        </button>\r\n      }\r\n\r\n      <solaris-icon\r\n        class=\"solaris-select__dropdown-icon\"\r\n        name=\"chevron-down\"\r\n        [decorative]=\"true\"\r\n        size=\"sm\"\r\n      />\r\n    </span>\r\n  </div>\r\n\r\n  <ng-content select=\"[solaris-form-suffix]\" />\r\n</solaris-form-field>\r\n\r\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\r\n  <div\r\n    class=\"solaris-select__panel\"\r\n    role=\"listbox\"\r\n    [attr.id]=\"panelId\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onPanelClick($event)\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (loading()) {\r\n      <div class=\"solaris-select__loading\">\r\n        <span class=\"solaris-select__loading-text\">{{\r\n          loadingTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showNoResults()) {\r\n      <div class=\"solaris-select__no-results\">\r\n        <span class=\"solaris-select__no-results-text\">{{\r\n          noResultsTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showEmpty()) {\r\n      <div class=\"solaris-select__empty\">\r\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"solaris-select__options\"\r\n        [style.max-height]=\"panelMaxHeight()\"\r\n      >\r\n        <ng-content select=\"solaris-option, solaris-option-group\" />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-placeholder-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-line-height: var(--solaris-line-height-md);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;min-width:0;display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0;outline:none;border:none;background:transparent;cursor:pointer}: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{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) ease}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.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) ease}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}: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;min-width:0;border:none;outline:none;padding:0;margin:0;font-family:inherit;box-sizing:border-box;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);background:transparent}.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"] }]
+                    }, 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  [size]=\"size()\"\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-value-color: var(--solaris-text-default);--solaris-select-placeholder-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-line-height: var(--solaris-line-height-md);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;min-width:0;display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0;outline:none;border:none;background:transparent;cursor:pointer}: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{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) ease}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.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) ease}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}: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;min-width:0;border:none;outline:none;padding:0;margin:0;font-family:inherit;box-sizing:border-box;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);background:transparent}.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"] }]
         }], ctorParameters: () => [], propDecorators: { popoverTrigger: [{
                 type: ViewChild,
                 args: [SolarisPopoverTriggerDirective]