@educarehq/solaris-ui 0.13.0 → 0.15.0

package/fesm2022/educarehq-solaris-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, contentChild, contentChildren, NgZone, TemplateRef, ViewContainerRef, Injector, viewChild, isDevMode, forwardRef, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, ApplicationRef, model, viewChildren } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, contentChild, contentChildren, NgZone, TemplateRef, ViewContainerRef, Injector, viewChild, isDevMode, forwardRef, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, viewChildren, ApplicationRef, model } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
@@ -125,6 +125,9 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
             'solaris.phone-field.empty': 'No countries available',
             'solaris.phone-field.noResults': 'No results found',
             'solaris.phone-field.country': 'Select country code',
+            'solaris.otp-input.required': 'Code is required.',
+            'solaris.otp-input.invalid': 'Enter a valid code.',
+            'solaris.otp-input.box': 'Digit {{current}} of {{total}}',
         },
         'pt-BR': {
             'solaris.button.loading': 'Carregando...',
@@ -201,6 +204,9 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
             'solaris.phone-field.empty': 'Nenhum país disponível',
             'solaris.phone-field.noResults': 'Nenhum resultado encontrado',
             'solaris.phone-field.country': 'Selecionar código do país',
+            'solaris.otp-input.required': 'O código é obrigatório.',
+            'solaris.otp-input.invalid': 'Insira um código válido.',
+            'solaris.otp-input.box': 'Dígito {{current}} de {{total}}',
         },
     },
     useBrowserLocale: true,
@@ -923,6 +929,21 @@ const NAVIGATION_ICONS = [
             { type: 'path', d: 'm14.5 4-5 16' },
         ],
     },
+    {
+        name: 'plane',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z',
+            },
+        ],
+    },
 ];
 
 const ACTIONS_ICONS = [
@@ -1265,6 +1286,92 @@ const ACTIONS_ICONS = [
             { type: 'path', d: 'M7 11V7a5 5 0 0110 0v4' },
         ],
     },
+    {
+        name: 'key',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z',
+            },
+            { type: 'circle', cx: 16.5, cy: 7.5, r: 0.5, fill: 'currentColor' },
+        ],
+    },
+    {
+        name: 'rocket',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'path', d: 'M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5' },
+            {
+                type: 'path',
+                d: 'M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09',
+            },
+            {
+                type: 'path',
+                d: 'M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z',
+            },
+            { type: 'path', d: 'M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05' },
+        ],
+    },
+    {
+        name: 'save',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
+            },
+            { type: 'path', d: 'M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7' },
+            { type: 'path', d: 'M7 3v4a1 1 0 0 0 1 1h7' },
+        ],
+    },
+    {
+        name: 'star',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z',
+            },
+        ],
+    },
+    {
+        name: 'star-plus',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M11.013 18.582 6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904L20 11.5',
+            },
+            { type: 'path', d: 'M15 18h6' },
+            { type: 'path', d: 'M18 15v6' },
+        ],
+    },
 ];
 
 const STATUS_ICONS = [
@@ -1748,6 +1855,74 @@ const DATA_ICONS = [
             { type: 'line', x1: 6, x2: 6.01, y1: 18, y2: 18 },
         ],
     },
+    {
+        name: 'package',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z',
+            },
+            { type: 'path', d: 'M12 22V12' },
+            { type: 'polyline', points: '3.29 7 12 12 20.71 7' },
+            { type: 'path', d: 'm7.5 4.27 9 5.15' },
+        ],
+    },
+    {
+        name: 'squared-text',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 2 },
+            { type: 'path', d: 'M7 8h8' },
+            { type: 'path', d: 'M7 12h10' },
+            { type: 'path', d: 'M7 16h6' },
+        ],
+    },
+    {
+        name: 'notepad',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'path', d: 'M8 2v4' },
+            { type: 'path', d: 'M12 2v4' },
+            { type: 'path', d: 'M16 2v4' },
+            { type: 'rect', x: 4, y: 4, width: 16, height: 18, rx: 2 },
+            { type: 'path', d: 'M8 10h6' },
+            { type: 'path', d: 'M8 14h8' },
+            { type: 'path', d: 'M8 18h5' },
+        ],
+    },
+    {
+        name: 'podium',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'path', d: 'M12 6V2h-1' },
+            {
+                type: 'path',
+                d: 'M9 15a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1',
+            },
+            { type: 'path', d: 'M9 21V11a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10' },
+        ],
+    },
 ];
 
 const COMMUNICATION_ICONS = [
@@ -1931,6 +2106,22 @@ const COMMUNICATION_ICONS = [
             },
         ],
     },
+    {
+        name: 'send',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z',
+            },
+            { type: 'path', d: 'm21.854 2.147-10.94 10.939' },
+        ],
+    },
 ];
 
 const MEDIA_ICONS = [
@@ -1997,6 +2188,22 @@ const MEDIA_ICONS = [
             { type: 'path', d: 'M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12' },
         ],
     },
+    {
+        name: 'eject',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M4 13a1 1 0 0 1-.72-1.695l7.257-7.668a2 2 0 0 1 2.926 0l7.256 7.668A1 1 0 0 1 20 13z',
+            },
+            { type: 'rect', x: 3, y: 17, width: 18, height: 4, rx: 1 },
+        ],
+    },
 ];
 
 const BRAND_ICONS = [
@@ -9715,6 +9922,7 @@ function getExampleNumberFor(country) {
 class SolarisPhoneFieldComponent {
     translateService = inject(SolarisTranslateService);
     countryListFactory = inject(SOLARIS_PHONE_COUNTRY_LIST);
+    themeService = inject(SolarisThemeService);
     inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
     popoverTrigger = viewChild(SolarisPopoverTriggerDirective, ...(ngDevMode ? [{ debugName: "popoverTrigger" }] : /* istanbul ignore next */ []));
     projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
@@ -9818,6 +10026,9 @@ class SolarisPhoneFieldComponent {
     isEffectivelyDisabled = computed(() => {
         return this.disabled() || this.internalDisabled();
     }, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
+    effectiveDensity = computed(() => {
+        return this.density() ?? this.themeService.density;
+    }, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
     isEffectivelyReadonly = computed(() => {
         return this.readonly();
     }, ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
@@ -10075,13 +10286,13 @@ class SolarisPhoneFieldComponent {
             this.translateWithDefault(fallbackKey, fallbackDefault));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPhoneFieldComponent, isStandalone: true, selector: "solaris-phone-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalidError: { classPropertyName: "invalidError", publicName: "invalidError", isSignal: true, isRequired: false, transformFunction: null }, requiredError: { classPropertyName: "requiredError", publicName: "requiredError", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, invalidErrorKey: { classPropertyName: "invalidErrorKey", publicName: "invalidErrorKey", isSignal: true, isRequired: false, transformFunction: null }, requiredErrorKey: { classPropertyName: "requiredErrorKey", publicName: "requiredErrorKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, defaultCountry: { classPropertyName: "defaultCountry", publicName: "defaultCountry", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allowAnyCountry: { classPropertyName: "allowAnyCountry", publicName: "allowAnyCountry", isSignal: true, isRequired: false, transformFunction: null }, countryList: { classPropertyName: "countryList", publicName: "countryList", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, emptyTextKey: { classPropertyName: "emptyTextKey", publicName: "emptyTextKey", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, noResultsTextKey: { classPropertyName: "noResultsTextKey", publicName: "noResultsTextKey", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderKey: { classPropertyName: "searchPlaceholderKey", publicName: "searchPlaceholderKey", isSignal: true, isRequired: false, transformFunction: null }, countryButtonLabel: { classPropertyName: "countryButtonLabel", publicName: "countryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, countryButtonLabelKey: { classPropertyName: "countryButtonLabelKey", publicName: "countryButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", countryChange: "countryChange" }, host: { properties: { "attr.data-open": "panelOpen() ? \"\" : null" }, classAttribute: "solaris-phone-field" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPhoneFieldComponent, isStandalone: true, selector: "solaris-phone-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalidError: { classPropertyName: "invalidError", publicName: "invalidError", isSignal: true, isRequired: false, transformFunction: null }, requiredError: { classPropertyName: "requiredError", publicName: "requiredError", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, invalidErrorKey: { classPropertyName: "invalidErrorKey", publicName: "invalidErrorKey", isSignal: true, isRequired: false, transformFunction: null }, requiredErrorKey: { classPropertyName: "requiredErrorKey", publicName: "requiredErrorKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, defaultCountry: { classPropertyName: "defaultCountry", publicName: "defaultCountry", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allowAnyCountry: { classPropertyName: "allowAnyCountry", publicName: "allowAnyCountry", isSignal: true, isRequired: false, transformFunction: null }, countryList: { classPropertyName: "countryList", publicName: "countryList", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, emptyTextKey: { classPropertyName: "emptyTextKey", publicName: "emptyTextKey", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, noResultsTextKey: { classPropertyName: "noResultsTextKey", publicName: "noResultsTextKey", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderKey: { classPropertyName: "searchPlaceholderKey", publicName: "searchPlaceholderKey", isSignal: true, isRequired: false, transformFunction: null }, countryButtonLabel: { classPropertyName: "countryButtonLabel", publicName: "countryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, countryButtonLabelKey: { classPropertyName: "countryButtonLabelKey", publicName: "countryButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", countryChange: "countryChange" }, host: { properties: { "attr.data-open": "panelOpen() ? \"\" : null", "attr.data-density": "effectiveDensity()" }, classAttribute: "solaris-phone-field" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SolarisPhoneFieldComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n", styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-text-muted);--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-text-default);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:.5}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-font-size-sm);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-text-muted);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }, { kind: "component", type: SolarisPhoneCountryListComponent, selector: "solaris-phone-country-list", inputs: ["countries", "selectedCode", "searchable", "searchPlaceholder", "noResultsText", "emptyText", "maxHeight"], outputs: ["countrySelected", "closeRequest"] }, { kind: "pipe", type: SolarisSafeHtmlPipe, name: "solarisSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n", styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-text-muted);--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-text-default);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:.5}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-text-muted);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}:host([data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-density-font-size);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: 10px}:host([data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-density-font-size);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-density-font-size);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-md);--solaris-phone-field-chevron-size: var(--solaris-font-size-sm)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }, { kind: "component", type: SolarisPhoneCountryListComponent, selector: "solaris-phone-country-list", inputs: ["countries", "selectedCode", "searchable", "searchPlaceholder", "noResultsText", "emptyText", "maxHeight"], outputs: ["countrySelected", "closeRequest"] }, { kind: "pipe", type: SolarisSafeHtmlPipe, name: "solarisSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneFieldComponent, decorators: [{
             type: Component,
@@ -10105,7 +10316,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-phone-field',
                         '[attr.data-open]': 'panelOpen() ? "" : null',
-                    }, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n", styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-text-muted);--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-text-default);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:.5}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-font-size-sm);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-text-muted);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}\n"] }]
+                        '[attr.data-density]': 'effectiveDensity()',
+                    }, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n", styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-text-muted);--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-text-default);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:.5}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-text-muted);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}:host([data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-density-font-size);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: 10px}:host([data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-density-font-size);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-density-font-size);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-md);--solaris-phone-field-chevron-size: var(--solaris-font-size-sm)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SolarisPopoverTriggerDirective), { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidError: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidError", required: false }] }], requiredError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredError", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], invalidErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidErrorKey", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], defaultCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountry", required: false }] }], country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], allowAnyCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAnyCountry", required: false }] }], countryList: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryList", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], emptyTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTextKey", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], noResultsTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTextKey", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchPlaceholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderKey", required: false }] }], countryButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryButtonLabel", required: false }] }], countryButtonLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryButtonLabelKey", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], countryChange: [{ type: i0.Output, args: ["countryChange"] }] } });
 
 function solarisPhoneValidator(country) {
@@ -10122,6 +10334,405 @@ function solarisPhoneValidator(country) {
     };
 }
 
+// SECURITY_EXCEPTION_FILE: nativeElement.focus() required to move focus between OTP boxes on typing/navigation.
+// Standard DOM method used by Angular CDK. ElementRef SSR-safe.
+// SECURITY_EXCEPTION_FILE: nativeElement.value read in onBoxInput to obtain the raw box value.
+const MASK_CHAR = '•';
+class SolarisOtpInputComponent extends SolarisFormControl {
+    elementRef = inject(ElementRef);
+    translateService = inject(SolarisTranslateService);
+    themeService = inject(SolarisThemeService);
+    boxRefs = viewChildren('box', ...(ngDevMode ? [{ debugName: "boxRefs" }] : /* istanbul ignore next */ []));
+    hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    errorKey = input(...(ngDevMode ? [undefined, { debugName: "errorKey" }] : /* istanbul ignore next */ []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    requiredError = input(...(ngDevMode ? [undefined, { debugName: "requiredError" }] : /* istanbul ignore next */ []));
+    invalidError = input(...(ngDevMode ? [undefined, { debugName: "invalidError" }] : /* istanbul ignore next */ []));
+    requiredErrorKey = input(...(ngDevMode ? [undefined, { debugName: "requiredErrorKey" }] : /* istanbul ignore next */ []));
+    invalidErrorKey = input(...(ngDevMode ? [undefined, { debugName: "invalidErrorKey" }] : /* istanbul ignore next */ []));
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    manualInvalid = input(undefined, { ...(ngDevMode ? { debugName: "manualInvalid" } : /* istanbul ignore next */ {}), alias: 'invalid' });
+    maxLength = input(12, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    minLength = input(1, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    charType = input('numeric', ...(ngDevMode ? [{ debugName: "charType" }] : /* istanbul ignore next */ []));
+    masked = input(false, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
+    separatorEvery = input(0, ...(ngDevMode ? [{ debugName: "separatorEvery" }] : /* istanbul ignore next */ []));
+    autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
+    radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    completed = output();
+    boxChars = signal([], ...(ngDevMode ? [{ debugName: "boxChars" }] : /* istanbul ignore next */ []));
+    internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
+    internalFocused = signal(false, ...(ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    _describedByIds = signal([], ...(ngDevMode ? [{ debugName: "_describedByIds" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    elementId = computed(() => {
+        return resolveElementId(this.elementRef, 'solaris-otp-input');
+    }, ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
+    effectiveDensity = computed(() => {
+        return this.density() ?? this.themeService.density;
+    }, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
+    isEffectivelyDisabled = computed(() => {
+        return this.disabledInput() || this.internalDisabled();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
+    isEffectivelyReadonly = computed(() => {
+        return this.readonlyInput();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
+    inputmode = computed(() => {
+        return this.charType() === 'numeric' ? 'numeric' : 'text';
+    }, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
+    boxes = computed(() => {
+        const masked = this.masked();
+        return this.boxChars().map((char) => (masked && char ? MASK_CHAR : char));
+    }, ...(ngDevMode ? [{ debugName: "boxes" }] : /* istanbul ignore next */ []));
+    valueString = computed(() => {
+        return this.boxChars().join('');
+    }, ...(ngDevMode ? [{ debugName: "valueString" }] : /* istanbul ignore next */ []));
+    groupAriaLabel = computed(() => {
+        const key = this.labelKey();
+        if (key) {
+            return this.translateService.translate(key) || this.label() || '';
+        }
+        return this.label() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = computed(() => {
+        const ids = this._describedByIds();
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    computedError = computed(() => {
+        const manualError = this.error() || this.translateKey(this.errorKey());
+        if (manualError)
+            return manualError;
+        const isTouchedOrDirty = this.touched() || this.dirty();
+        if (!isTouchedOrDirty || this.internalFocused())
+            return '';
+        const value = this.valueString();
+        if (!value) {
+            if (this.requiredInput()) {
+                return this.buildError(this.requiredError(), this.requiredErrorKey(), 'solaris.otp-input.required', 'Code is required.');
+            }
+            return '';
+        }
+        if (value.length < this.minLength()) {
+            return this.buildError(this.invalidError(), this.invalidErrorKey(), 'solaris.otp-input.invalid', 'Enter a valid code.');
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "computedError" }] : /* istanbul ignore next */ []));
+    isFieldInvalid = computed(() => {
+        const manual = this.manualInvalid();
+        if (manual !== undefined) {
+            return manual;
+        }
+        if (this.internalFocused()) {
+            return false;
+        }
+        const isTouchedOrDirty = this.touched() || this.dirty();
+        if (!isTouchedOrDirty) {
+            return false;
+        }
+        return !!this.computedError();
+    }, ...(ngDevMode ? [{ debugName: "isFieldInvalid" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.boxChars.set(this.emptyChars());
+        effect(() => {
+            const length = this.maxLength();
+            const current = this.boxChars();
+            if (current.length !== length) {
+                const resized = Array.from({ length }, (_, index) => current[index] ?? '');
+                this.boxChars.set(resized);
+            }
+        });
+        effect(() => {
+            const value = this.value();
+            if (value !== this.lastAppliedValue) {
+                this.lastAppliedValue = value;
+                this.boxChars.set(this.distributeValue(value));
+            }
+        });
+    }
+    lastAppliedValue = '';
+    get id() {
+        return this.elementId();
+    }
+    get focused() {
+        return this.internalFocused();
+    }
+    get disabled() {
+        return this.isEffectivelyDisabled();
+    }
+    get readonly() {
+        return this.isEffectivelyReadonly();
+    }
+    get invalid() {
+        return this.isFieldInvalid();
+    }
+    get required() {
+        return this.requiredInput();
+    }
+    get describedByIds() {
+        return this._describedByIds();
+    }
+    setDescribedByIds(ids) {
+        this._describedByIds.set([...ids]);
+    }
+    focus() {
+        const index = this.boxChars().findIndex((char) => !char);
+        this.focusBox(index >= 0 ? index : 0);
+    }
+    ngAfterViewInit() {
+        if (this.autoFocus()) {
+            this.focusBox(0);
+        }
+    }
+    writeValue(value) {
+        this.boxChars.set(this.distributeValue(value));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.internalDisabled.set(isDisabled);
+    }
+    onBoxInput(event, index) {
+        const target = event.target;
+        const raw = target.value;
+        if (!this.dirty()) {
+            this.dirty.set(true);
+        }
+        const filtered = this.filterChars(raw);
+        const chars = this.currentChars();
+        let cursor = index;
+        for (const char of filtered) {
+            if (cursor >= this.maxLength())
+                break;
+            chars[cursor] = char;
+            cursor++;
+        }
+        this.commitValue(chars);
+        target.value = chars[index] ?? '';
+        const next = cursor < this.maxLength() ? cursor : this.maxLength() - 1;
+        this.focusBox(next);
+    }
+    onBoxKeydown(event, index) {
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                this.handleBackspace(index);
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this.handleDelete(index);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusBox(index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusBox(index + 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusBox(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusBox(this.maxLength() - 1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                break;
+        }
+    }
+    onBoxPaste(event, index) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text') ?? '';
+        if (!text)
+            return;
+        const filtered = this.filterChars(text);
+        const chars = this.currentChars();
+        let cursor = index;
+        for (const char of filtered) {
+            if (cursor >= this.maxLength())
+                break;
+            chars[cursor] = char;
+            cursor++;
+        }
+        this.commitValue(chars);
+        this.focusBox(cursor < this.maxLength() ? cursor : this.maxLength() - 1);
+    }
+    onBoxFocus(index) {
+        this.internalFocused.set(true);
+        this.focusedIndex.set(index);
+    }
+    onBoxBlur() {
+        this.internalFocused.set(false);
+        this.focusedIndex.set(-1);
+        this.markAsTouched();
+    }
+    boxAriaLabel(index) {
+        return this.translateWithDefault('solaris.otp-input.box', `Digit ${index + 1} of ${this.maxLength()}`, { current: index + 1, total: this.maxLength() });
+    }
+    showSeparatorAfter(index) {
+        const every = this.separatorEvery();
+        return (every > 0 && (index + 1) % every === 0 && index < this.maxLength() - 1);
+    }
+    currentChars() {
+        return [...this.boxChars()];
+    }
+    commitValue(chars) {
+        this.boxChars.set([...chars]);
+        const newValue = chars.join('');
+        this.onChange(newValue);
+        this.valueChange.emit(newValue);
+        if (newValue.length === this.maxLength()) {
+            this.completed.emit();
+        }
+    }
+    handleBackspace(index) {
+        const chars = this.currentChars();
+        if (chars[index]) {
+            chars[index] = '';
+            this.commitValue(chars);
+        }
+        else if (index > 0) {
+            chars[index - 1] = '';
+            this.commitValue(chars);
+            this.focusBox(index - 1);
+        }
+    }
+    handleDelete(index) {
+        const chars = this.currentChars();
+        if (chars[index]) {
+            chars[index] = '';
+            this.commitValue(chars);
+        }
+    }
+    filterChars(value) {
+        if (this.charType() === 'numeric') {
+            return value.replace(/\D+/g, '');
+        }
+        return value.toUpperCase().replace(/[^A-Z0-9]/g, '');
+    }
+    emptyChars() {
+        return Array.from({ length: this.maxLength() }, () => '');
+    }
+    distributeValue(value) {
+        const chars = this.emptyChars();
+        const source = String(value ?? '');
+        for (let i = 0; i < source.length && i < this.maxLength(); i++) {
+            chars[i] = source[i];
+        }
+        return chars;
+    }
+    focusBox(index) {
+        if (index < 0 || index >= this.maxLength()) {
+            return;
+        }
+        const ref = this.boxRefs()[index];
+        ref?.nativeElement.focus();
+    }
+    markAsTouched() {
+        if (!this.touched()) {
+            this.touched.set(true);
+            this.onTouched();
+        }
+    }
+    translateWithDefault(key, defaultText, params) {
+        const result = this.translateService.translate(key, params);
+        return result !== key ? result : defaultText;
+    }
+    translateKey(key) {
+        if (key) {
+            const translated = this.translateService.translate(key);
+            return translated !== key ? translated : undefined;
+        }
+        return undefined;
+    }
+    buildError(direct, key, fallbackKey, fallbackDefault) {
+        return (direct ??
+            this.translateKey(key) ??
+            this.translateWithDefault(fallbackKey, fallbackDefault));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisOtpInputComponent, isStandalone: true, selector: "solaris-otp-input", inputs: { hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, requiredError: { classPropertyName: "requiredError", publicName: "requiredError", isSignal: true, isRequired: false, transformFunction: null }, invalidError: { classPropertyName: "invalidError", publicName: "invalidError", isSignal: true, isRequired: false, transformFunction: null }, requiredErrorKey: { classPropertyName: "requiredErrorKey", publicName: "requiredErrorKey", isSignal: true, isRequired: false, transformFunction: null }, invalidErrorKey: { classPropertyName: "invalidErrorKey", publicName: "invalidErrorKey", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, manualInvalid: { classPropertyName: "manualInvalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, charType: { classPropertyName: "charType", publicName: "charType", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, separatorEvery: { classPropertyName: "separatorEvery", publicName: "separatorEvery", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", completed: "completed" }, host: { properties: { "attr.id": "elementId()", "attr.data-density": "effectiveDensity()", "attr.data-appearance": "appearance()", "attr.data-length": "maxLength()", "attr.data-masked": "masked() ? \"\" : null", "attr.data-char-type": "charType()", "attr.data-invalid": "isFieldInvalid() ? \"\" : null" }, classAttribute: "solaris-otp-input" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisOtpInputComponent),
+                multi: true,
+            },
+            {
+                provide: SolarisFormControl,
+                useExisting: forwardRef(() => SolarisOtpInputComponent),
+            },
+        ], viewQueries: [{ propertyName: "boxRefs", predicate: ["box"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"density()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [control]=\"this\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n", styles: [":host{--solaris-otp-input-gap: var(--solaris-spacing-2);--solaris-otp-input-box-radius: var(--solaris-radius-sm);--solaris-otp-input-box-border-color: var(--solaris-border-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm);--solaris-otp-input-box-background: transparent;--solaris-otp-input-box-color: var(--solaris-text-default);--solaris-otp-input-box-focus-border-color: var(--solaris-primary-base);--solaris-otp-input-box-error-border-color: var(--solaris-danger-base);--solaris-otp-input-box-width: calc(var(--solaris-density-min-height) * .9);--solaris-otp-input-box-height: calc( var(--solaris-density-min-height) * 1.15 );--solaris-otp-input-separator-color: var(--solaris-text-muted);display:block;box-sizing:border-box}:host solaris-form-field ::ng-deep .solaris-form-field__control-wrapper{background:transparent;border:0;border-color:transparent}.solaris-otp-input__boxes{display:flex;box-sizing:border-box;align-items:center;gap:var(--solaris-otp-input-gap);padding-block:var(--solaris-spacing-2)}.solaris-otp-input__box{box-sizing:border-box;width:var(--solaris-otp-input-box-width);height:var(--solaris-otp-input-box-height);margin:0;padding:0;text-align:center;color:var(--solaris-otp-input-box-color);font-size:var(--solaris-density-font-size);line-height:var(--solaris-line-height-none);background:var(--solaris-otp-input-box-background);border-radius:var(--solaris-otp-input-box-radius);border:var(--solaris-otp-input-box-border-width) solid var(--solaris-otp-input-box-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-otp-input__box:focus{outline:none;border-color:var(--solaris-otp-input-box-focus-border-color);box-shadow:0 0 0 2px var(--solaris-otp-input-box-focus-border-color)}.solaris-otp-input__box[data-active]{border-color:var(--solaris-otp-input-box-focus-border-color)}.solaris-otp-input__box[disabled]{cursor:not-allowed;opacity:.5}:host([data-appearance=surface]){--solaris-otp-input-box-background: var(--solaris-surface-subtle);--solaris-otp-input-box-border-width: 0}:host([data-appearance=filled]){--solaris-otp-input-box-background: var(--solaris-surface-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm)}:host([data-invalid]) .solaris-otp-input__box{border-color:var(--solaris-otp-input-box-error-border-color)}.solaris-otp-input__separator{flex:0 0 auto;-webkit-user-select:none;user-select:none;color:var(--solaris-otp-input-separator-color);font-size:var(--solaris-density-font-size);line-height:var(--solaris-line-height-none)}@media(prefers-reduced-motion:reduce){.solaris-otp-input__box{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOtpInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-otp-input', standalone: true, imports: [
+                        FormsModule,
+                        SolarisFormFieldComponent,
+                        SolarisFormFieldTriggerDirective,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisOtpInputComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: SolarisFormControl,
+                            useExisting: forwardRef(() => SolarisOtpInputComponent),
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-otp-input',
+                        '[attr.id]': 'elementId()',
+                        '[attr.data-density]': 'effectiveDensity()',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-length]': 'maxLength()',
+                        '[attr.data-masked]': 'masked() ? "" : null',
+                        '[attr.data-char-type]': 'charType()',
+                        '[attr.data-invalid]': 'isFieldInvalid() ? "" : null',
+                    }, template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"density()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [control]=\"this\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n", styles: [":host{--solaris-otp-input-gap: var(--solaris-spacing-2);--solaris-otp-input-box-radius: var(--solaris-radius-sm);--solaris-otp-input-box-border-color: var(--solaris-border-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm);--solaris-otp-input-box-background: transparent;--solaris-otp-input-box-color: var(--solaris-text-default);--solaris-otp-input-box-focus-border-color: var(--solaris-primary-base);--solaris-otp-input-box-error-border-color: var(--solaris-danger-base);--solaris-otp-input-box-width: calc(var(--solaris-density-min-height) * .9);--solaris-otp-input-box-height: calc( var(--solaris-density-min-height) * 1.15 );--solaris-otp-input-separator-color: var(--solaris-text-muted);display:block;box-sizing:border-box}:host solaris-form-field ::ng-deep .solaris-form-field__control-wrapper{background:transparent;border:0;border-color:transparent}.solaris-otp-input__boxes{display:flex;box-sizing:border-box;align-items:center;gap:var(--solaris-otp-input-gap);padding-block:var(--solaris-spacing-2)}.solaris-otp-input__box{box-sizing:border-box;width:var(--solaris-otp-input-box-width);height:var(--solaris-otp-input-box-height);margin:0;padding:0;text-align:center;color:var(--solaris-otp-input-box-color);font-size:var(--solaris-density-font-size);line-height:var(--solaris-line-height-none);background:var(--solaris-otp-input-box-background);border-radius:var(--solaris-otp-input-box-radius);border:var(--solaris-otp-input-box-border-width) solid var(--solaris-otp-input-box-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-otp-input__box:focus{outline:none;border-color:var(--solaris-otp-input-box-focus-border-color);box-shadow:0 0 0 2px var(--solaris-otp-input-box-focus-border-color)}.solaris-otp-input__box[data-active]{border-color:var(--solaris-otp-input-box-focus-border-color)}.solaris-otp-input__box[disabled]{cursor:not-allowed;opacity:.5}:host([data-appearance=surface]){--solaris-otp-input-box-background: var(--solaris-surface-subtle);--solaris-otp-input-box-border-width: 0}:host([data-appearance=filled]){--solaris-otp-input-box-background: var(--solaris-surface-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm)}:host([data-invalid]) .solaris-otp-input__box{border-color:var(--solaris-otp-input-box-error-border-color)}.solaris-otp-input__separator{flex:0 0 auto;-webkit-user-select:none;user-select:none;color:var(--solaris-otp-input-separator-color);font-size:var(--solaris-density-font-size);line-height:var(--solaris-line-height-none)}@media(prefers-reduced-motion:reduce){.solaris-otp-input__box{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { boxRefs: [{ type: i0.ViewChildren, args: ['box', { isSignal: true }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], requiredError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredError", required: false }] }], invalidError: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidError", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], invalidErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidErrorKey", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], manualInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], charType: [{ type: i0.Input, args: [{ isSignal: true, alias: "charType", required: false }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }], separatorEvery: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorEvery", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
+
+function solarisOtpValidator(minLength, maxLength) {
+    return (control) => {
+        const value = control.value;
+        if (value == null || value === '') {
+            return null;
+        }
+        const length = String(value).length;
+        if (length < minLength || length > maxLength) {
+            return {
+                solarisOtpLength: {
+                    requiredLength: maxLength,
+                    actualLength: length,
+                },
+            };
+        }
+        return null;
+    };
+}
+
 class SolarisSkeletonComponent {
     variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     animation = input('pulse', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
@@ -14610,5 +15221,5 @@ function provideSolaris(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPhoneCountryListComponent, SolarisPhoneFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator, solarisPhoneValidator };
+export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisOtpInputComponent, SolarisPasswordFieldComponent, SolarisPhoneCountryListComponent, SolarisPhoneFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisOtpValidator, solarisPasswordValidator, solarisPhoneValidator };
 //# sourceMappingURL=educarehq-solaris-ui.mjs.map