@educarehq/solaris-ui 0.12.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
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
|
|
2
|
+
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';
|
|
3
3
|
import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
|
|
4
4
|
import { FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
|
|
5
5
|
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
|
|
6
6
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
7
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
8
|
+
import { getCountries, getCountryCallingCode, Metadata, AsYouType, parsePhoneNumberFromString, getExampleNumber } from 'libphonenumber-js';
|
|
9
|
+
import * as FLAG_3X2 from 'country-flag-icons/string/3x2';
|
|
10
|
+
import { hasFlag } from 'country-flag-icons';
|
|
11
|
+
import examples from 'libphonenumber-js/examples.mobile.json';
|
|
7
12
|
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
8
13
|
import { Subject } from 'rxjs';
|
|
9
14
|
import { TestBed } from '@angular/core/testing';
|
|
@@ -114,6 +119,15 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
|
|
|
114
119
|
'solaris.password-field.strength.weak': 'Weak',
|
|
115
120
|
'solaris.password-field.strength.medium': 'Medium',
|
|
116
121
|
'solaris.password-field.strength.strong': 'Strong',
|
|
122
|
+
'solaris.phone-field.required': 'Phone number is required.',
|
|
123
|
+
'solaris.phone-field.invalid': 'Enter a valid phone number.',
|
|
124
|
+
'solaris.phone-field.search.placeholder': 'Search country or code',
|
|
125
|
+
'solaris.phone-field.empty': 'No countries available',
|
|
126
|
+
'solaris.phone-field.noResults': 'No results found',
|
|
127
|
+
'solaris.phone-field.country': 'Select country code',
|
|
128
|
+
'solaris.otp-input.required': 'Code is required.',
|
|
129
|
+
'solaris.otp-input.invalid': 'Enter a valid code.',
|
|
130
|
+
'solaris.otp-input.box': 'Digit {{current}} of {{total}}',
|
|
117
131
|
},
|
|
118
132
|
'pt-BR': {
|
|
119
133
|
'solaris.button.loading': 'Carregando...',
|
|
@@ -184,6 +198,15 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
|
|
|
184
198
|
'solaris.password-field.strength.weak': 'Fraca',
|
|
185
199
|
'solaris.password-field.strength.medium': 'Média',
|
|
186
200
|
'solaris.password-field.strength.strong': 'Forte',
|
|
201
|
+
'solaris.phone-field.required': 'O número de telefone é obrigatório.',
|
|
202
|
+
'solaris.phone-field.invalid': 'Insira um número de telefone válido.',
|
|
203
|
+
'solaris.phone-field.search.placeholder': 'Buscar país ou código',
|
|
204
|
+
'solaris.phone-field.empty': 'Nenhum país disponível',
|
|
205
|
+
'solaris.phone-field.noResults': 'Nenhum resultado encontrado',
|
|
206
|
+
'solaris.phone-field.country': 'Selecionar código do país',
|
|
207
|
+
'solaris.otp-input.required': 'O código é obrigatório.',
|
|
208
|
+
'solaris.otp-input.invalid': 'Insira um código válido.',
|
|
209
|
+
'solaris.otp-input.box': 'Dígito {{current}} de {{total}}',
|
|
187
210
|
},
|
|
188
211
|
},
|
|
189
212
|
useBrowserLocale: true,
|
|
@@ -3795,14 +3818,14 @@ class SolarisPopoverPanelComponent {
|
|
|
3795
3818
|
}
|
|
3796
3819
|
}
|
|
3797
3820
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3798
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SolarisPopoverPanelComponent, isStandalone: true, selector: "solaris-popover-panel", host: { properties: { "attr.tabindex": "data.autoFocus === \"panel\" ? \"-1\" : null" }, classAttribute: "solaris-popover-panel" }, ngImport: i0, template: "<div\n class=\"solaris-popover-panel__container\"\n [attr.data-appearance]=\"data.appearance\"\n [attr.data-padding]=\"data.padding\"\n [attr.data-radius]=\"data.radius\"\n [attr.data-connected-side]=\"data.connectedSide ?? null\"\n [attr.role]=\"data.role\"\n [id]=\"data.panelId\"\n tabindex=\"-1\"\n>\n <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3821
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SolarisPopoverPanelComponent, isStandalone: true, selector: "solaris-popover-panel", host: { properties: { "attr.tabindex": "data.autoFocus === \"panel\" ? \"-1\" : null" }, classAttribute: "solaris-popover-panel" }, ngImport: i0, template: "<div\n class=\"solaris-popover-panel__container\"\n [attr.data-appearance]=\"data.appearance\"\n [attr.data-padding]=\"data.padding\"\n [attr.data-radius]=\"data.radius\"\n [attr.data-connected-side]=\"data.connectedSide ?? null\"\n [attr.role]=\"data.role\"\n [id]=\"data.panelId\"\n tabindex=\"-1\"\n>\n <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-appearance=filled]{border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3799
3822
|
}
|
|
3800
3823
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPopoverPanelComponent, decorators: [{
|
|
3801
3824
|
type: Component,
|
|
3802
3825
|
args: [{ selector: 'solaris-popover-panel', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3803
3826
|
class: 'solaris-popover-panel',
|
|
3804
3827
|
'[attr.tabindex]': 'data.autoFocus === "panel" ? "-1" : null',
|
|
3805
|
-
}, template: "<div\n class=\"solaris-popover-panel__container\"\n [attr.data-appearance]=\"data.appearance\"\n [attr.data-padding]=\"data.padding\"\n [attr.data-radius]=\"data.radius\"\n [attr.data-connected-side]=\"data.connectedSide ?? null\"\n [attr.role]=\"data.role\"\n [id]=\"data.panelId\"\n tabindex=\"-1\"\n>\n <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"] }]
|
|
3828
|
+
}, template: "<div\n class=\"solaris-popover-panel__container\"\n [attr.data-appearance]=\"data.appearance\"\n [attr.data-padding]=\"data.padding\"\n [attr.data-radius]=\"data.radius\"\n [attr.data-connected-side]=\"data.connectedSide ?? null\"\n [attr.role]=\"data.role\"\n [id]=\"data.panelId\"\n tabindex=\"-1\"\n>\n <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-appearance=filled]{border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"] }]
|
|
3806
3829
|
}] });
|
|
3807
3830
|
|
|
3808
3831
|
function getBasePosition(placement, align) {
|
|
@@ -4083,11 +4106,13 @@ class SolarisPopoverTriggerDirective {
|
|
|
4083
4106
|
this.panelContainerRef.dataset['formField'] = '';
|
|
4084
4107
|
}
|
|
4085
4108
|
}
|
|
4086
|
-
this.
|
|
4087
|
-
this.connectedSide
|
|
4088
|
-
|
|
4089
|
-
|
|
4090
|
-
formFieldWrapper
|
|
4109
|
+
if (this.solarisPopoverTopConnected()) {
|
|
4110
|
+
this.elementRef.nativeElement.dataset['connectedSide'] =
|
|
4111
|
+
this.connectedSide;
|
|
4112
|
+
const formFieldWrapper = this.elementRef.nativeElement.querySelector(':scope > .solaris-form-field__control-wrapper');
|
|
4113
|
+
if (formFieldWrapper) {
|
|
4114
|
+
formFieldWrapper.dataset['connectedSide'] = this.connectedSide;
|
|
4115
|
+
}
|
|
4091
4116
|
}
|
|
4092
4117
|
});
|
|
4093
4118
|
}
|
|
@@ -9447,6 +9472,1066 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9447
9472
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-form-field\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"density()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"required()\"\n [optional]=\"optional()\"\n [readonly]=\"readonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n>\n @if (prefix() && !projectedPrefix()) {\n <span solaris-form-prefix>\n <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-prefix]\"\n ngProjectAs=\"[solaris-form-prefix]\"\n />\n <input\n type=\"email\"\n #inputElement\n solaris-input\n data-bwignore=\"true\"\n [density]=\"density()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"readonly()\"\n (focus)=\"onInputFocus()\"\n [attr.id]=\"id() ?? null\"\n (input)=\"onInput($event)\"\n [value]=\"internalValue()\"\n [attr.inputmode]=\"'email'\"\n [attr.spellcheck]=\"'false'\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"'none'\"\n [attr.autocomplete]=\"autocomplete()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\n }\n <ng-content\n select=\"[solaris-form-suffix]\"\n ngProjectAs=\"[solaris-form-suffix]\"\n />\n <ng-content\n select=\"[solaris-form-label-action]\"\n ngProjectAs=\"[solaris-form-label-action]\"\n />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"] }]
|
|
9448
9473
|
}], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidError: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidError", required: false }] }], requiredError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredError", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], invalidErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidErrorKey", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], allowedDomainError: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomainError", required: false }] }], blockedDomainError: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomainError", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], trimOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "trimOnBlur", required: false }] }], allowedDomainErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomainErrorKey", required: false }] }], blockedDomainErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomainErrorKey", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], normalizeLowercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalizeLowercase", required: false }] }], allowedDomains: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomains", required: false }] }], blockedDomains: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomains", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], validateDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateDomain", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
|
|
9449
9474
|
|
|
9475
|
+
// SECURITY_EXCEPTION_FILE: this pipe trusts a string only when rendered via [innerHTML] in the
|
|
9476
|
+
// phone-field country list. The value is a flag SVG returned by the pinned `country-flag-icons`
|
|
9477
|
+
// dependency (static data). It is never derived from user input, so bypassing Angular's sanitizer
|
|
9478
|
+
// here is safe and justified. A test documents this behavior.
|
|
9479
|
+
class SolarisSafeHtmlPipe {
|
|
9480
|
+
sanitizer = inject(DomSanitizer);
|
|
9481
|
+
transform(value) {
|
|
9482
|
+
return this.sanitizer.bypassSecurityTrustHtml(value);
|
|
9483
|
+
}
|
|
9484
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
9485
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SolarisSafeHtmlPipe, isStandalone: true, name: "solarisSafeHtml" });
|
|
9486
|
+
}
|
|
9487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSafeHtmlPipe, decorators: [{
|
|
9488
|
+
type: Pipe,
|
|
9489
|
+
args: [{
|
|
9490
|
+
name: 'solarisSafeHtml',
|
|
9491
|
+
standalone: true,
|
|
9492
|
+
}]
|
|
9493
|
+
}] });
|
|
9494
|
+
|
|
9495
|
+
class SolarisPhoneCountryListComponent {
|
|
9496
|
+
countries = input([], ...(ngDevMode ? [{ debugName: "countries" }] : /* istanbul ignore next */ []));
|
|
9497
|
+
selectedCode = input(...(ngDevMode ? [undefined, { debugName: "selectedCode" }] : /* istanbul ignore next */ []));
|
|
9498
|
+
searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
9499
|
+
searchPlaceholder = input('', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
9500
|
+
noResultsText = input('', ...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
|
|
9501
|
+
emptyText = input('', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
9502
|
+
maxHeight = input(...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
|
|
9503
|
+
countrySelected = output();
|
|
9504
|
+
closeRequest = output();
|
|
9505
|
+
listId = nextIdFor('solaris-phone-country-list');
|
|
9506
|
+
searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
|
|
9507
|
+
activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
9508
|
+
filtered = computed(() => {
|
|
9509
|
+
const query = this.searchQuery().toLowerCase().trim();
|
|
9510
|
+
const list = this.countries();
|
|
9511
|
+
if (!query) {
|
|
9512
|
+
return list;
|
|
9513
|
+
}
|
|
9514
|
+
return list.filter((country) => country.name.toLowerCase().includes(query) ||
|
|
9515
|
+
country.code.toLowerCase().includes(query) ||
|
|
9516
|
+
country.callingCode.includes(query));
|
|
9517
|
+
}, ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
|
|
9518
|
+
showEmpty = computed(() => {
|
|
9519
|
+
return this.countries().length === 0;
|
|
9520
|
+
}, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
|
|
9521
|
+
showNoResults = computed(() => {
|
|
9522
|
+
return this.countries().length > 0 && this.filtered().length === 0;
|
|
9523
|
+
}, ...(ngDevMode ? [{ debugName: "showNoResults" }] : /* istanbul ignore next */ []));
|
|
9524
|
+
activeDescendantId = computed(() => {
|
|
9525
|
+
const index = this.activeIndex();
|
|
9526
|
+
if (index < 0 || index >= this.filtered().length) {
|
|
9527
|
+
return null;
|
|
9528
|
+
}
|
|
9529
|
+
return this.optionId(index);
|
|
9530
|
+
}, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
|
|
9531
|
+
optionId(index) {
|
|
9532
|
+
return `${this.listId}-option-${index}`;
|
|
9533
|
+
}
|
|
9534
|
+
onSearch(event) {
|
|
9535
|
+
const target = event.target;
|
|
9536
|
+
this.searchQuery.set(target.value);
|
|
9537
|
+
this.activeIndex.set(-1);
|
|
9538
|
+
}
|
|
9539
|
+
onSearchKeydown(event) {
|
|
9540
|
+
switch (event.key) {
|
|
9541
|
+
case 'ArrowDown':
|
|
9542
|
+
event.preventDefault();
|
|
9543
|
+
this.moveActive(1);
|
|
9544
|
+
break;
|
|
9545
|
+
case 'ArrowUp':
|
|
9546
|
+
event.preventDefault();
|
|
9547
|
+
this.moveActive(-1);
|
|
9548
|
+
break;
|
|
9549
|
+
case 'Enter':
|
|
9550
|
+
event.preventDefault();
|
|
9551
|
+
this.selectActive();
|
|
9552
|
+
break;
|
|
9553
|
+
case 'Escape':
|
|
9554
|
+
event.preventDefault();
|
|
9555
|
+
if (this.searchQuery()) {
|
|
9556
|
+
this.searchQuery.set('');
|
|
9557
|
+
this.activeIndex.set(-1);
|
|
9558
|
+
}
|
|
9559
|
+
else {
|
|
9560
|
+
this.closeRequest.emit();
|
|
9561
|
+
}
|
|
9562
|
+
break;
|
|
9563
|
+
case 'Tab':
|
|
9564
|
+
this.closeRequest.emit();
|
|
9565
|
+
break;
|
|
9566
|
+
}
|
|
9567
|
+
}
|
|
9568
|
+
onListClick(event) {
|
|
9569
|
+
const target = event.target;
|
|
9570
|
+
const optionEl = target.closest('.solaris-phone-country-list__option');
|
|
9571
|
+
if (!optionEl) {
|
|
9572
|
+
return;
|
|
9573
|
+
}
|
|
9574
|
+
const current = event.currentTarget;
|
|
9575
|
+
const index = Array.from(current.children).indexOf(optionEl);
|
|
9576
|
+
const list = this.filtered();
|
|
9577
|
+
if (index >= 0 && index < list.length) {
|
|
9578
|
+
this.countrySelected.emit(list[index]);
|
|
9579
|
+
}
|
|
9580
|
+
}
|
|
9581
|
+
onListKeydown(event) {
|
|
9582
|
+
const list = this.filtered();
|
|
9583
|
+
if (list.length === 0) {
|
|
9584
|
+
return;
|
|
9585
|
+
}
|
|
9586
|
+
let index = this.activeIndex();
|
|
9587
|
+
switch (event.key) {
|
|
9588
|
+
case 'ArrowDown':
|
|
9589
|
+
event.preventDefault();
|
|
9590
|
+
index = index >= list.length - 1 ? 0 : index + 1;
|
|
9591
|
+
break;
|
|
9592
|
+
case 'ArrowUp':
|
|
9593
|
+
event.preventDefault();
|
|
9594
|
+
index = index <= 0 ? list.length - 1 : index - 1;
|
|
9595
|
+
break;
|
|
9596
|
+
case 'Home':
|
|
9597
|
+
event.preventDefault();
|
|
9598
|
+
index = 0;
|
|
9599
|
+
break;
|
|
9600
|
+
case 'End':
|
|
9601
|
+
event.preventDefault();
|
|
9602
|
+
index = list.length - 1;
|
|
9603
|
+
break;
|
|
9604
|
+
case 'Enter':
|
|
9605
|
+
case ' ':
|
|
9606
|
+
event.preventDefault();
|
|
9607
|
+
if (index >= 0 && index < list.length) {
|
|
9608
|
+
this.countrySelected.emit(list[index]);
|
|
9609
|
+
}
|
|
9610
|
+
return;
|
|
9611
|
+
case 'Escape':
|
|
9612
|
+
event.preventDefault();
|
|
9613
|
+
this.closeRequest.emit();
|
|
9614
|
+
return;
|
|
9615
|
+
case 'Tab':
|
|
9616
|
+
this.closeRequest.emit();
|
|
9617
|
+
return;
|
|
9618
|
+
default:
|
|
9619
|
+
return;
|
|
9620
|
+
}
|
|
9621
|
+
this.activeIndex.set(index);
|
|
9622
|
+
}
|
|
9623
|
+
moveActive(direction) {
|
|
9624
|
+
const list = this.filtered();
|
|
9625
|
+
if (list.length === 0) {
|
|
9626
|
+
return;
|
|
9627
|
+
}
|
|
9628
|
+
let index = this.activeIndex();
|
|
9629
|
+
index =
|
|
9630
|
+
index < 0
|
|
9631
|
+
? direction === 1
|
|
9632
|
+
? 0
|
|
9633
|
+
: list.length - 1
|
|
9634
|
+
: (index + direction + list.length) % list.length;
|
|
9635
|
+
this.activeIndex.set(index);
|
|
9636
|
+
}
|
|
9637
|
+
selectActive() {
|
|
9638
|
+
const list = this.filtered();
|
|
9639
|
+
const index = this.activeIndex();
|
|
9640
|
+
if (index >= 0 && index < list.length) {
|
|
9641
|
+
this.countrySelected.emit(list[index]);
|
|
9642
|
+
}
|
|
9643
|
+
}
|
|
9644
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneCountryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPhoneCountryListComponent, isStandalone: true, selector: "solaris-phone-country-list", inputs: { countries: { classPropertyName: "countries", publicName: "countries", isSignal: true, isRequired: false, transformFunction: null }, selectedCode: { classPropertyName: "selectedCode", publicName: "selectedCode", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countrySelected: "countrySelected", closeRequest: "closeRequest" }, ngImport: i0, template: "<div class=\"solaris-phone-country-list\">\n @if (searchable()) {\n <div class=\"solaris-phone-country-list__search\">\n <solaris-icon\n name=\"search\"\n [decorative]=\"true\"\n class=\"solaris-phone-country-list__search-icon\"\n />\n <input\n type=\"text\"\n class=\"solaris-phone-country-list__search-input\"\n role=\"searchbox\"\n autocomplete=\"off\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearch($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n </div>\n }\n\n @if (showEmpty()) {\n <div class=\"solaris-phone-country-list__empty\">\n <span class=\"solaris-phone-country-list__empty-text\">{{\n emptyText()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-phone-country-list__no-results\">\n <span class=\"solaris-phone-country-list__no-results-text\">{{\n noResultsText()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-phone-country-list__list\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"-1\"\n [style.max-height]=\"maxHeight()\"\n (click)=\"onListClick($event)\"\n (keydown)=\"onListKeydown($event)\"\n >\n @for (country of filtered(); track country.code; let index = $index) {\n <div\n class=\"solaris-phone-country-list__option\"\n role=\"option\"\n [attr.id]=\"optionId(index)\"\n [attr.data-active]=\"activeIndex() === index ? '' : null\"\n [attr.data-selected]=\"selectedCode() === country.code ? '' : null\"\n [attr.aria-selected]=\"selectedCode() === country.code\"\n >\n <span\n class=\"solaris-phone-country-list__flag\"\n [innerHTML]=\"country.flag | solarisSafeHtml\"\n ></span>\n <span class=\"solaris-phone-country-list__name\">{{\n country.name\n }}</span>\n <span class=\"solaris-phone-country-list__code\"\n >+{{ country.callingCode }}</span\n >\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{--solaris-phone-country-option-radius: var(--solaris-radius-sm);--solaris-phone-country-search-bg: var(--solaris-surface-subtle);--solaris-phone-country-option-hover-bg: var(--solaris-surface-muted);--solaris-phone-country-option-active-bg: var(--solaris-primary-surface);--solaris-phone-country-option-active-color: var(--solaris-primary-text);width:260px;display:block;max-width:100%;box-sizing:border-box}.solaris-phone-country-list{display:flex;box-sizing:border-box;flex-direction:column;gap:var(--solaris-spacing-2)}.solaris-phone-country-list__search{display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0 var(--solaris-spacing-3);border-radius:var(--solaris-phone-country-option-radius);background:var(--solaris-phone-country-search-bg)}.solaris-phone-country-list__search-icon{flex-shrink:0;color:var(--solaris-text-muted)}.solaris-phone-country-list__search-input{all:unset;box-sizing:border-box;flex:1;min-width:0;padding:var(--solaris-spacing-2) 0;color:var(--solaris-text-default);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-phone-country-list__search-input::placeholder{color:var(--solaris-text-muted)}.solaris-phone-country-list__search-input:focus-visible{outline:none}.solaris-phone-country-list__list{display:flex;overflow-y:auto;max-height:320px;scrollbar-width:thin;box-sizing:border-box;flex-direction:column;gap:var(--solaris-spacing-1);scrollbar-color:var(--solaris-border-soft) transparent}.solaris-phone-country-list__list::-webkit-scrollbar{width:6px}.solaris-phone-country-list__list::-webkit-scrollbar-track{background:transparent}.solaris-phone-country-list__list::-webkit-scrollbar-thumb{background:var(--solaris-border-soft);border-radius:var(--solaris-radius-full)}.solaris-phone-country-list__list::-webkit-scrollbar-thumb:hover{background:var(--solaris-border-strong)}.solaris-phone-country-list__option{display:flex;cursor:pointer;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-3);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);border-radius:var(--solaris-phone-country-option-radius);padding:var(--solaris-spacing-2) var(--solaris-spacing-3)}.solaris-phone-country-list__option:hover{background:var(--solaris-phone-country-option-hover-bg)}.solaris-phone-country-list__option[data-active]{background:var(--solaris-phone-country-option-active-bg);color:var(--solaris-phone-country-option-active-color)}.solaris-phone-country-list__flag{flex-shrink:0;line-height:1;align-items:center;display:inline-flex;justify-content:center;width:var(--solaris-font-size-xl);font-size:var(--solaris-font-size-lg)}.solaris-phone-country-list__flag svg{display:block;width:100%;height:auto}.solaris-phone-country-list__name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-phone-country-list__code{flex-shrink:0;color:var(--solaris-text-muted)}.solaris-phone-country-list__empty,.solaris-phone-country-list__no-results{padding:var(--solaris-spacing-3);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}@media(prefers-reduced-motion:reduce){.solaris-phone-country-list__option{transition:none}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "pipe", type: SolarisSafeHtmlPipe, name: "solarisSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9646
|
+
}
|
|
9647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneCountryListComponent, decorators: [{
|
|
9648
|
+
type: Component,
|
|
9649
|
+
args: [{ selector: 'solaris-phone-country-list', standalone: true, imports: [SolarisIconComponent, SolarisSafeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-phone-country-list\">\n @if (searchable()) {\n <div class=\"solaris-phone-country-list__search\">\n <solaris-icon\n name=\"search\"\n [decorative]=\"true\"\n class=\"solaris-phone-country-list__search-icon\"\n />\n <input\n type=\"text\"\n class=\"solaris-phone-country-list__search-input\"\n role=\"searchbox\"\n autocomplete=\"off\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [value]=\"searchQuery()\"\n (input)=\"onSearch($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n </div>\n }\n\n @if (showEmpty()) {\n <div class=\"solaris-phone-country-list__empty\">\n <span class=\"solaris-phone-country-list__empty-text\">{{\n emptyText()\n }}</span>\n </div>\n } @else if (showNoResults()) {\n <div class=\"solaris-phone-country-list__no-results\">\n <span class=\"solaris-phone-country-list__no-results-text\">{{\n noResultsText()\n }}</span>\n </div>\n } @else {\n <div\n class=\"solaris-phone-country-list__list\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"-1\"\n [style.max-height]=\"maxHeight()\"\n (click)=\"onListClick($event)\"\n (keydown)=\"onListKeydown($event)\"\n >\n @for (country of filtered(); track country.code; let index = $index) {\n <div\n class=\"solaris-phone-country-list__option\"\n role=\"option\"\n [attr.id]=\"optionId(index)\"\n [attr.data-active]=\"activeIndex() === index ? '' : null\"\n [attr.data-selected]=\"selectedCode() === country.code ? '' : null\"\n [attr.aria-selected]=\"selectedCode() === country.code\"\n >\n <span\n class=\"solaris-phone-country-list__flag\"\n [innerHTML]=\"country.flag | solarisSafeHtml\"\n ></span>\n <span class=\"solaris-phone-country-list__name\">{{\n country.name\n }}</span>\n <span class=\"solaris-phone-country-list__code\"\n >+{{ country.callingCode }}</span\n >\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{--solaris-phone-country-option-radius: var(--solaris-radius-sm);--solaris-phone-country-search-bg: var(--solaris-surface-subtle);--solaris-phone-country-option-hover-bg: var(--solaris-surface-muted);--solaris-phone-country-option-active-bg: var(--solaris-primary-surface);--solaris-phone-country-option-active-color: var(--solaris-primary-text);width:260px;display:block;max-width:100%;box-sizing:border-box}.solaris-phone-country-list{display:flex;box-sizing:border-box;flex-direction:column;gap:var(--solaris-spacing-2)}.solaris-phone-country-list__search{display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0 var(--solaris-spacing-3);border-radius:var(--solaris-phone-country-option-radius);background:var(--solaris-phone-country-search-bg)}.solaris-phone-country-list__search-icon{flex-shrink:0;color:var(--solaris-text-muted)}.solaris-phone-country-list__search-input{all:unset;box-sizing:border-box;flex:1;min-width:0;padding:var(--solaris-spacing-2) 0;color:var(--solaris-text-default);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-phone-country-list__search-input::placeholder{color:var(--solaris-text-muted)}.solaris-phone-country-list__search-input:focus-visible{outline:none}.solaris-phone-country-list__list{display:flex;overflow-y:auto;max-height:320px;scrollbar-width:thin;box-sizing:border-box;flex-direction:column;gap:var(--solaris-spacing-1);scrollbar-color:var(--solaris-border-soft) transparent}.solaris-phone-country-list__list::-webkit-scrollbar{width:6px}.solaris-phone-country-list__list::-webkit-scrollbar-track{background:transparent}.solaris-phone-country-list__list::-webkit-scrollbar-thumb{background:var(--solaris-border-soft);border-radius:var(--solaris-radius-full)}.solaris-phone-country-list__list::-webkit-scrollbar-thumb:hover{background:var(--solaris-border-strong)}.solaris-phone-country-list__option{display:flex;cursor:pointer;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-3);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);border-radius:var(--solaris-phone-country-option-radius);padding:var(--solaris-spacing-2) var(--solaris-spacing-3)}.solaris-phone-country-list__option:hover{background:var(--solaris-phone-country-option-hover-bg)}.solaris-phone-country-list__option[data-active]{background:var(--solaris-phone-country-option-active-bg);color:var(--solaris-phone-country-option-active-color)}.solaris-phone-country-list__flag{flex-shrink:0;line-height:1;align-items:center;display:inline-flex;justify-content:center;width:var(--solaris-font-size-xl);font-size:var(--solaris-font-size-lg)}.solaris-phone-country-list__flag svg{display:block;width:100%;height:auto}.solaris-phone-country-list__name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-phone-country-list__code{flex-shrink:0;color:var(--solaris-text-muted)}.solaris-phone-country-list__empty,.solaris-phone-country-list__no-results{padding:var(--solaris-spacing-3);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}@media(prefers-reduced-motion:reduce){.solaris-phone-country-list__option{transition:none}}\n"] }]
|
|
9650
|
+
}], propDecorators: { countries: [{ type: i0.Input, args: [{ isSignal: true, alias: "countries", required: false }] }], selectedCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCode", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], countrySelected: [{ type: i0.Output, args: ["countrySelected"] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] } });
|
|
9651
|
+
|
|
9652
|
+
// SECURITY_EXCEPTION_FILE: flag SVG strings are returned from the pinned, trusted `country-flag-icons`
|
|
9653
|
+
// dependency (static data, never user input). They are rendered safely through a sanitizing pipe
|
|
9654
|
+
// (SolarisSafeHtmlPipe) and this module never interpolates user-controlled values into SVG markup.
|
|
9655
|
+
const FLAG_INDEX = FLAG_3X2;
|
|
9656
|
+
function flagEmojiFallback(code) {
|
|
9657
|
+
return code
|
|
9658
|
+
.toUpperCase()
|
|
9659
|
+
.replace(/./g, (char) => String.fromCodePoint(0x1f1e6 + (char.charCodeAt(0) - 65)));
|
|
9660
|
+
}
|
|
9661
|
+
function getCountryFlag(code) {
|
|
9662
|
+
if (hasFlag(code)) {
|
|
9663
|
+
return FLAG_INDEX[code] ?? flagEmojiFallback(code);
|
|
9664
|
+
}
|
|
9665
|
+
return flagEmojiFallback(code);
|
|
9666
|
+
}
|
|
9667
|
+
function buildCountries(locale = 'en-US') {
|
|
9668
|
+
const displayNames = new Intl.DisplayNames([locale], { type: 'region' });
|
|
9669
|
+
return getCountries()
|
|
9670
|
+
.map((code) => {
|
|
9671
|
+
const cc = code;
|
|
9672
|
+
const name = displayNames.of(code) ?? code;
|
|
9673
|
+
return {
|
|
9674
|
+
code,
|
|
9675
|
+
callingCode: String(getCountryCallingCode(cc)),
|
|
9676
|
+
name,
|
|
9677
|
+
flag: getCountryFlag(code),
|
|
9678
|
+
};
|
|
9679
|
+
})
|
|
9680
|
+
.sort((a, b) => a.name.localeCompare(b.name, locale));
|
|
9681
|
+
}
|
|
9682
|
+
|
|
9683
|
+
const SOLARIS_PHONE_COUNTRY_LIST = new InjectionToken('SOLARIS_PHONE_COUNTRY_LIST', {
|
|
9684
|
+
factory: () => buildCountries,
|
|
9685
|
+
});
|
|
9686
|
+
|
|
9687
|
+
function getMaxNationalNumberLength(country) {
|
|
9688
|
+
const metadata = new Metadata();
|
|
9689
|
+
metadata.selectNumberingPlan(country);
|
|
9690
|
+
const lengths = metadata.numberingPlan?.possibleLengths() ?? [];
|
|
9691
|
+
return lengths.length > 0 ? Math.max(...lengths) : 0;
|
|
9692
|
+
}
|
|
9693
|
+
function formatAsYouType(value, country) {
|
|
9694
|
+
return new AsYouType(country).input(value);
|
|
9695
|
+
}
|
|
9696
|
+
function toE164(value, country) {
|
|
9697
|
+
const parsed = parsePhoneNumberFromString(value, country);
|
|
9698
|
+
return parsed?.number ?? '';
|
|
9699
|
+
}
|
|
9700
|
+
function toValidE164(value, country) {
|
|
9701
|
+
const parsed = parsePhoneNumberFromString(value, country);
|
|
9702
|
+
return parsed && parsed.isValid() ? parsed.number : '';
|
|
9703
|
+
}
|
|
9704
|
+
function detectCountry(value) {
|
|
9705
|
+
const parsed = parsePhoneNumberFromString(value);
|
|
9706
|
+
return parsed?.country;
|
|
9707
|
+
}
|
|
9708
|
+
function formatE164(value) {
|
|
9709
|
+
const parsed = parsePhoneNumberFromString(value);
|
|
9710
|
+
return parsed ? parsed.formatNational() : value;
|
|
9711
|
+
}
|
|
9712
|
+
function getExampleNumberFor(country) {
|
|
9713
|
+
const number = getExampleNumber(country, examples);
|
|
9714
|
+
return number ? number.formatNational() : '';
|
|
9715
|
+
}
|
|
9716
|
+
|
|
9717
|
+
// SECURITY_EXCEPTION_FILE: nativeElement.value assignment is required to keep the native input in
|
|
9718
|
+
// sync with the as-you-type formatted value. Angular's data binding may not reflect synchronous
|
|
9719
|
+
// value changes to the native input. Same approach is standard for CVA blur/format normalization.
|
|
9720
|
+
// SECURITY_EXCEPTION_FILE: nativeElement.value read in onInput to obtain the current raw value.
|
|
9721
|
+
class SolarisPhoneFieldComponent {
|
|
9722
|
+
translateService = inject(SolarisTranslateService);
|
|
9723
|
+
countryListFactory = inject(SOLARIS_PHONE_COUNTRY_LIST);
|
|
9724
|
+
themeService = inject(SolarisThemeService);
|
|
9725
|
+
inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
|
|
9726
|
+
popoverTrigger = viewChild(SolarisPopoverTriggerDirective, ...(ngDevMode ? [{ debugName: "popoverTrigger" }] : /* istanbul ignore next */ []));
|
|
9727
|
+
projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
|
|
9728
|
+
projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
|
|
9729
|
+
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
9730
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
9731
|
+
hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
|
|
9732
|
+
hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
9733
|
+
labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
9734
|
+
errorKey = input(...(ngDevMode ? [undefined, { debugName: "errorKey" }] : /* istanbul ignore next */ []));
|
|
9735
|
+
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9736
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
9737
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
9738
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
9739
|
+
invalidError = input(...(ngDevMode ? [undefined, { debugName: "invalidError" }] : /* istanbul ignore next */ []));
|
|
9740
|
+
requiredError = input(...(ngDevMode ? [undefined, { debugName: "requiredError" }] : /* istanbul ignore next */ []));
|
|
9741
|
+
placeholderKey = input(...(ngDevMode ? [undefined, { debugName: "placeholderKey" }] : /* istanbul ignore next */ []));
|
|
9742
|
+
invalidErrorKey = input(...(ngDevMode ? [undefined, { debugName: "invalidErrorKey" }] : /* istanbul ignore next */ []));
|
|
9743
|
+
requiredErrorKey = input(...(ngDevMode ? [undefined, { debugName: "requiredErrorKey" }] : /* istanbul ignore next */ []));
|
|
9744
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
9745
|
+
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
9746
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
9747
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
9748
|
+
autocomplete = input('tel', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
9749
|
+
invalid = input(...(ngDevMode ? [undefined, { debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
9750
|
+
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
9751
|
+
radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
9752
|
+
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
9753
|
+
maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
9754
|
+
suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
|
|
9755
|
+
defaultCountry = input(...(ngDevMode ? [undefined, { debugName: "defaultCountry" }] : /* istanbul ignore next */ []));
|
|
9756
|
+
country = input(...(ngDevMode ? [undefined, { debugName: "country" }] : /* istanbul ignore next */ []));
|
|
9757
|
+
searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
9758
|
+
allowAnyCountry = input(true, ...(ngDevMode ? [{ debugName: "allowAnyCountry" }] : /* istanbul ignore next */ []));
|
|
9759
|
+
countryList = input(...(ngDevMode ? [undefined, { debugName: "countryList" }] : /* istanbul ignore next */ []));
|
|
9760
|
+
emptyText = input(...(ngDevMode ? [undefined, { debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
9761
|
+
emptyTextKey = input(...(ngDevMode ? [undefined, { debugName: "emptyTextKey" }] : /* istanbul ignore next */ []));
|
|
9762
|
+
noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : /* istanbul ignore next */ []));
|
|
9763
|
+
noResultsTextKey = input(...(ngDevMode ? [undefined, { debugName: "noResultsTextKey" }] : /* istanbul ignore next */ []));
|
|
9764
|
+
searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
9765
|
+
searchPlaceholderKey = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholderKey" }] : /* istanbul ignore next */ []));
|
|
9766
|
+
countryButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "countryButtonLabel" }] : /* istanbul ignore next */ []));
|
|
9767
|
+
countryButtonLabelKey = input(...(ngDevMode ? [undefined, { debugName: "countryButtonLabelKey" }] : /* istanbul ignore next */ []));
|
|
9768
|
+
panelMaxWidth = input(...(ngDevMode ? [undefined, { debugName: "panelMaxWidth" }] : /* istanbul ignore next */ []));
|
|
9769
|
+
panelMaxHeight = input(...(ngDevMode ? [undefined, { debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
|
|
9770
|
+
valueChange = output();
|
|
9771
|
+
countryChange = output();
|
|
9772
|
+
internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
|
|
9773
|
+
displayValue = signal('', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
9774
|
+
internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
|
|
9775
|
+
internalFocused = signal(false, ...(ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []));
|
|
9776
|
+
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
9777
|
+
dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
9778
|
+
selectedCountry = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCountry" }] : /* istanbul ignore next */ []));
|
|
9779
|
+
panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
|
|
9780
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
9781
|
+
onChange = () => { };
|
|
9782
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
9783
|
+
onTouched = () => { };
|
|
9784
|
+
popoverSubscriptions = [];
|
|
9785
|
+
allCountries = computed(() => {
|
|
9786
|
+
return this.countryListFactory(this.translateService.locale);
|
|
9787
|
+
}, ...(ngDevMode ? [{ debugName: "allCountries" }] : /* istanbul ignore next */ []));
|
|
9788
|
+
countries = computed(() => {
|
|
9789
|
+
const list = this.allCountries();
|
|
9790
|
+
const restrict = this.countryList();
|
|
9791
|
+
if (restrict && restrict.length > 0) {
|
|
9792
|
+
return list.filter((country) => restrict.includes(country.code));
|
|
9793
|
+
}
|
|
9794
|
+
return list;
|
|
9795
|
+
}, ...(ngDevMode ? [{ debugName: "countries" }] : /* istanbul ignore next */ []));
|
|
9796
|
+
effectiveCountry = computed(() => {
|
|
9797
|
+
const explicit = this.country();
|
|
9798
|
+
if (explicit)
|
|
9799
|
+
return explicit;
|
|
9800
|
+
const selected = this.selectedCountry();
|
|
9801
|
+
if (selected)
|
|
9802
|
+
return selected;
|
|
9803
|
+
const fromValue = this.internalValue()
|
|
9804
|
+
? detectCountry(this.internalValue())
|
|
9805
|
+
: undefined;
|
|
9806
|
+
if (fromValue && this.countryAllowed(fromValue))
|
|
9807
|
+
return fromValue;
|
|
9808
|
+
const def = this.defaultCountry();
|
|
9809
|
+
if (def)
|
|
9810
|
+
return def;
|
|
9811
|
+
const first = this.countries()[0];
|
|
9812
|
+
return first?.code ?? 'US';
|
|
9813
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveCountry" }] : /* istanbul ignore next */ []));
|
|
9814
|
+
selectedCountryObject = computed(() => {
|
|
9815
|
+
const code = this.effectiveCountry();
|
|
9816
|
+
return (this.countries().find((country) => country.code === code) ??
|
|
9817
|
+
this.countries()[0]);
|
|
9818
|
+
}, ...(ngDevMode ? [{ debugName: "selectedCountryObject" }] : /* istanbul ignore next */ []));
|
|
9819
|
+
selectedFlag = computed(() => this.selectedCountryObject()?.flag ?? '', ...(ngDevMode ? [{ debugName: "selectedFlag" }] : /* istanbul ignore next */ []));
|
|
9820
|
+
selectedCallingCode = computed(() => this.selectedCountryObject()?.callingCode ?? '', ...(ngDevMode ? [{ debugName: "selectedCallingCode" }] : /* istanbul ignore next */ []));
|
|
9821
|
+
hasPrefix = computed(() => true, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
|
|
9822
|
+
hasSuffix = computed(() => {
|
|
9823
|
+
return !!this.projectedSuffix() || !!this.suffix();
|
|
9824
|
+
}, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
|
|
9825
|
+
isEffectivelyDisabled = computed(() => {
|
|
9826
|
+
return this.disabled() || this.internalDisabled();
|
|
9827
|
+
}, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
|
|
9828
|
+
effectiveDensity = computed(() => {
|
|
9829
|
+
return this.density() ?? this.themeService.density;
|
|
9830
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
|
|
9831
|
+
isEffectivelyReadonly = computed(() => {
|
|
9832
|
+
return this.readonly();
|
|
9833
|
+
}, ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
|
|
9834
|
+
canOpen = computed(() => {
|
|
9835
|
+
return (this.allowAnyCountry() &&
|
|
9836
|
+
!this.isEffectivelyDisabled() &&
|
|
9837
|
+
!this.isEffectivelyReadonly());
|
|
9838
|
+
}, ...(ngDevMode ? [{ debugName: "canOpen" }] : /* istanbul ignore next */ []));
|
|
9839
|
+
popoverAppearance = computed(() => {
|
|
9840
|
+
const appearance = this.appearance();
|
|
9841
|
+
if (appearance === 'outline')
|
|
9842
|
+
return 'outline';
|
|
9843
|
+
if (appearance === 'filled')
|
|
9844
|
+
return 'filled';
|
|
9845
|
+
return 'surface';
|
|
9846
|
+
}, ...(ngDevMode ? [{ debugName: "popoverAppearance" }] : /* istanbul ignore next */ []));
|
|
9847
|
+
effectiveMaxLength = computed(() => {
|
|
9848
|
+
const explicit = this.maxLength();
|
|
9849
|
+
if (explicit !== undefined) {
|
|
9850
|
+
return explicit;
|
|
9851
|
+
}
|
|
9852
|
+
return getMaxNationalNumberLength(this.effectiveCountry());
|
|
9853
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveMaxLength" }] : /* istanbul ignore next */ []));
|
|
9854
|
+
placeholderText = computed(() => {
|
|
9855
|
+
const key = this.placeholderKey();
|
|
9856
|
+
if (key) {
|
|
9857
|
+
return this.translateService.translate(key);
|
|
9858
|
+
}
|
|
9859
|
+
if (this.placeholder() != null) {
|
|
9860
|
+
return this.placeholder();
|
|
9861
|
+
}
|
|
9862
|
+
return getExampleNumberFor(this.effectiveCountry());
|
|
9863
|
+
}, ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
|
|
9864
|
+
searchPlaceholderText = computed(() => {
|
|
9865
|
+
const key = this.searchPlaceholderKey();
|
|
9866
|
+
if (key) {
|
|
9867
|
+
return this.translateService.translate(key);
|
|
9868
|
+
}
|
|
9869
|
+
if (this.searchPlaceholder()) {
|
|
9870
|
+
return this.searchPlaceholder();
|
|
9871
|
+
}
|
|
9872
|
+
return this.translateWithDefault('solaris.phone-field.search.placeholder', 'Search country or code');
|
|
9873
|
+
}, ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : /* istanbul ignore next */ []));
|
|
9874
|
+
emptyTextValue = computed(() => {
|
|
9875
|
+
const key = this.emptyTextKey();
|
|
9876
|
+
if (key) {
|
|
9877
|
+
return this.translateService.translate(key);
|
|
9878
|
+
}
|
|
9879
|
+
if (this.emptyText()) {
|
|
9880
|
+
return this.emptyText();
|
|
9881
|
+
}
|
|
9882
|
+
return this.translateWithDefault('solaris.phone-field.empty', 'No countries available');
|
|
9883
|
+
}, ...(ngDevMode ? [{ debugName: "emptyTextValue" }] : /* istanbul ignore next */ []));
|
|
9884
|
+
noResultsTextValue = computed(() => {
|
|
9885
|
+
const key = this.noResultsTextKey();
|
|
9886
|
+
if (key) {
|
|
9887
|
+
return this.translateService.translate(key);
|
|
9888
|
+
}
|
|
9889
|
+
if (this.noResultsText()) {
|
|
9890
|
+
return this.noResultsText();
|
|
9891
|
+
}
|
|
9892
|
+
return this.translateWithDefault('solaris.phone-field.noResults', 'No results found');
|
|
9893
|
+
}, ...(ngDevMode ? [{ debugName: "noResultsTextValue" }] : /* istanbul ignore next */ []));
|
|
9894
|
+
countryButtonLabelText = computed(() => {
|
|
9895
|
+
const key = this.countryButtonLabelKey();
|
|
9896
|
+
if (key) {
|
|
9897
|
+
return this.translateService.translate(key);
|
|
9898
|
+
}
|
|
9899
|
+
if (this.countryButtonLabel()) {
|
|
9900
|
+
return this.countryButtonLabel();
|
|
9901
|
+
}
|
|
9902
|
+
return this.translateWithDefault('solaris.phone-field.country', 'Select country code');
|
|
9903
|
+
}, ...(ngDevMode ? [{ debugName: "countryButtonLabelText" }] : /* istanbul ignore next */ []));
|
|
9904
|
+
computedError = computed(() => {
|
|
9905
|
+
const manualError = this.error() || this.translateKey(this.errorKey());
|
|
9906
|
+
if (manualError)
|
|
9907
|
+
return manualError;
|
|
9908
|
+
const isTouchedOrDirty = this.touched() || this.dirty();
|
|
9909
|
+
if (!isTouchedOrDirty || this.internalFocused())
|
|
9910
|
+
return '';
|
|
9911
|
+
if (!this.displayValue() || this.displayValue().trim().length === 0) {
|
|
9912
|
+
if (this.required()) {
|
|
9913
|
+
return this.buildError(this.requiredError(), this.requiredErrorKey(), 'solaris.phone-field.required', 'Phone number is required.');
|
|
9914
|
+
}
|
|
9915
|
+
return '';
|
|
9916
|
+
}
|
|
9917
|
+
if (!this.internalValue()) {
|
|
9918
|
+
return this.buildError(this.invalidError(), this.invalidErrorKey(), 'solaris.phone-field.invalid', 'Enter a valid phone number.');
|
|
9919
|
+
}
|
|
9920
|
+
return '';
|
|
9921
|
+
}, ...(ngDevMode ? [{ debugName: "computedError" }] : /* istanbul ignore next */ []));
|
|
9922
|
+
isFieldInvalid = computed(() => {
|
|
9923
|
+
const manual = this.invalid();
|
|
9924
|
+
if (manual !== undefined) {
|
|
9925
|
+
return manual;
|
|
9926
|
+
}
|
|
9927
|
+
if (this.internalFocused()) {
|
|
9928
|
+
return false;
|
|
9929
|
+
}
|
|
9930
|
+
const isTouchedOrDirty = this.touched() || this.dirty();
|
|
9931
|
+
if (!isTouchedOrDirty) {
|
|
9932
|
+
return false;
|
|
9933
|
+
}
|
|
9934
|
+
return !!this.computedError();
|
|
9935
|
+
}, ...(ngDevMode ? [{ debugName: "isFieldInvalid" }] : /* istanbul ignore next */ []));
|
|
9936
|
+
constructor() {
|
|
9937
|
+
effect(() => {
|
|
9938
|
+
const value = this.value();
|
|
9939
|
+
if (value !== this.lastAppliedValue) {
|
|
9940
|
+
this.lastAppliedValue = value;
|
|
9941
|
+
this.internalValue.set(value);
|
|
9942
|
+
this.applyDisplayFromValue(value);
|
|
9943
|
+
}
|
|
9944
|
+
});
|
|
9945
|
+
}
|
|
9946
|
+
lastAppliedValue = '';
|
|
9947
|
+
ngAfterViewInit() {
|
|
9948
|
+
const trigger = this.popoverTrigger();
|
|
9949
|
+
if (trigger) {
|
|
9950
|
+
const openedSub = trigger.solarisPopoverOpened.subscribe(() => {
|
|
9951
|
+
this.panelOpen.set(true);
|
|
9952
|
+
});
|
|
9953
|
+
const closedSub = trigger.solarisPopoverClosed.subscribe(() => {
|
|
9954
|
+
this.panelOpen.set(false);
|
|
9955
|
+
this.markAsTouched();
|
|
9956
|
+
});
|
|
9957
|
+
this.popoverSubscriptions.push(() => openedSub.unsubscribe(), () => closedSub.unsubscribe());
|
|
9958
|
+
}
|
|
9959
|
+
}
|
|
9960
|
+
ngOnDestroy() {
|
|
9961
|
+
this.popoverSubscriptions.forEach((fn) => fn());
|
|
9962
|
+
}
|
|
9963
|
+
writeValue(value) {
|
|
9964
|
+
const safe = value ?? '';
|
|
9965
|
+
this.internalValue.set(safe);
|
|
9966
|
+
this.applyDisplayFromValue(safe);
|
|
9967
|
+
}
|
|
9968
|
+
registerOnChange(fn) {
|
|
9969
|
+
this.onChange = fn;
|
|
9970
|
+
}
|
|
9971
|
+
registerOnTouched(fn) {
|
|
9972
|
+
this.onTouched = fn;
|
|
9973
|
+
}
|
|
9974
|
+
setDisabledState(isDisabled) {
|
|
9975
|
+
this.internalDisabled.set(isDisabled);
|
|
9976
|
+
}
|
|
9977
|
+
onInput(event) {
|
|
9978
|
+
const target = event.target;
|
|
9979
|
+
const raw = target.value;
|
|
9980
|
+
if (!this.dirty()) {
|
|
9981
|
+
this.dirty.set(true);
|
|
9982
|
+
}
|
|
9983
|
+
const startsWithPlus = raw.trim().startsWith('+');
|
|
9984
|
+
let country = this.effectiveCountry();
|
|
9985
|
+
let digits = raw.replace(/\D+/g, '');
|
|
9986
|
+
if (startsWithPlus) {
|
|
9987
|
+
const detected = detectCountry(raw);
|
|
9988
|
+
if (detected && !this.country() && this.countryAllowed(detected)) {
|
|
9989
|
+
this.selectedCountry.set(detected);
|
|
9990
|
+
this.countryChange.emit(detected);
|
|
9991
|
+
country = detected;
|
|
9992
|
+
}
|
|
9993
|
+
const callingCode = this.selectedCallingCode();
|
|
9994
|
+
if (callingCode && digits.startsWith(callingCode)) {
|
|
9995
|
+
digits = digits.slice(callingCode.length);
|
|
9996
|
+
}
|
|
9997
|
+
}
|
|
9998
|
+
digits = digits.slice(0, this.effectiveMaxLength());
|
|
9999
|
+
const formatted = formatAsYouType(digits, country);
|
|
10000
|
+
this.displayValue.set(formatted);
|
|
10001
|
+
if (target.value !== formatted) {
|
|
10002
|
+
target.value = formatted;
|
|
10003
|
+
}
|
|
10004
|
+
const e164 = toValidE164(formatted, country);
|
|
10005
|
+
if (e164) {
|
|
10006
|
+
this.internalValue.set(e164);
|
|
10007
|
+
this.onChange(e164);
|
|
10008
|
+
this.valueChange.emit(e164);
|
|
10009
|
+
}
|
|
10010
|
+
else {
|
|
10011
|
+
this.internalValue.set('');
|
|
10012
|
+
this.onChange('');
|
|
10013
|
+
this.valueChange.emit('');
|
|
10014
|
+
}
|
|
10015
|
+
}
|
|
10016
|
+
onInputFocus() {
|
|
10017
|
+
this.internalFocused.set(true);
|
|
10018
|
+
}
|
|
10019
|
+
onInputBlur() {
|
|
10020
|
+
this.internalFocused.set(false);
|
|
10021
|
+
this.markAsTouched();
|
|
10022
|
+
}
|
|
10023
|
+
onCountryToggle(event) {
|
|
10024
|
+
event.stopPropagation();
|
|
10025
|
+
if (this.canOpen()) {
|
|
10026
|
+
this.popoverTrigger()?.toggle();
|
|
10027
|
+
}
|
|
10028
|
+
}
|
|
10029
|
+
closeCountryPanel() {
|
|
10030
|
+
this.popoverTrigger()?.close();
|
|
10031
|
+
}
|
|
10032
|
+
onInputClick(event) {
|
|
10033
|
+
event.stopPropagation();
|
|
10034
|
+
}
|
|
10035
|
+
selectCountry(country) {
|
|
10036
|
+
this.selectedCountry.set(country.code);
|
|
10037
|
+
this.countryChange.emit(country.code);
|
|
10038
|
+
const digits = this.displayValue().replace(/\D+/g, '');
|
|
10039
|
+
if (digits) {
|
|
10040
|
+
const formatted = formatAsYouType(digits, country.code);
|
|
10041
|
+
this.displayValue.set(formatted);
|
|
10042
|
+
const e164 = toValidE164(formatted, country.code);
|
|
10043
|
+
if (e164) {
|
|
10044
|
+
this.internalValue.set(e164);
|
|
10045
|
+
this.onChange(e164);
|
|
10046
|
+
this.valueChange.emit(e164);
|
|
10047
|
+
}
|
|
10048
|
+
}
|
|
10049
|
+
this.popoverTrigger()?.close();
|
|
10050
|
+
}
|
|
10051
|
+
applyDisplayFromValue(e164) {
|
|
10052
|
+
if (!e164) {
|
|
10053
|
+
this.displayValue.set('');
|
|
10054
|
+
return;
|
|
10055
|
+
}
|
|
10056
|
+
const country = detectCountry(e164);
|
|
10057
|
+
if (country && !this.country() && this.countryAllowed(country)) {
|
|
10058
|
+
this.selectedCountry.set(country);
|
|
10059
|
+
}
|
|
10060
|
+
this.displayValue.set(formatE164(e164));
|
|
10061
|
+
}
|
|
10062
|
+
countryAllowed(code) {
|
|
10063
|
+
return this.countries().some((country) => country.code === code);
|
|
10064
|
+
}
|
|
10065
|
+
markAsTouched() {
|
|
10066
|
+
if (!this.touched()) {
|
|
10067
|
+
this.touched.set(true);
|
|
10068
|
+
this.onTouched();
|
|
10069
|
+
}
|
|
10070
|
+
}
|
|
10071
|
+
translateWithDefault(key, defaultText, params) {
|
|
10072
|
+
const result = this.translateService.translate(key, params);
|
|
10073
|
+
return result !== key ? result : defaultText;
|
|
10074
|
+
}
|
|
10075
|
+
translateKey(key) {
|
|
10076
|
+
if (key) {
|
|
10077
|
+
const translated = this.translateService.translate(key);
|
|
10078
|
+
return translated !== key ? translated : undefined;
|
|
10079
|
+
}
|
|
10080
|
+
return undefined;
|
|
10081
|
+
}
|
|
10082
|
+
buildError(direct, key, fallbackKey, fallbackDefault) {
|
|
10083
|
+
return (direct ??
|
|
10084
|
+
this.translateKey(key) ??
|
|
10085
|
+
this.translateWithDefault(fallbackKey, fallbackDefault));
|
|
10086
|
+
}
|
|
10087
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10088
|
+
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: [
|
|
10089
|
+
{
|
|
10090
|
+
provide: NG_VALUE_ACCESSOR,
|
|
10091
|
+
useExisting: forwardRef(() => SolarisPhoneFieldComponent),
|
|
10092
|
+
multi: true,
|
|
10093
|
+
},
|
|
10094
|
+
], 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 });
|
|
10095
|
+
}
|
|
10096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneFieldComponent, decorators: [{
|
|
10097
|
+
type: Component,
|
|
10098
|
+
args: [{ selector: 'solaris-phone-field', standalone: true, imports: [
|
|
10099
|
+
FormsModule,
|
|
10100
|
+
SolarisFormFieldComponent,
|
|
10101
|
+
SolarisFormPrefixDirective,
|
|
10102
|
+
SolarisFormSuffixDirective,
|
|
10103
|
+
SolarisInputDirective,
|
|
10104
|
+
SolarisIconComponent,
|
|
10105
|
+
SolarisPopoverDirective,
|
|
10106
|
+
SolarisPopoverTriggerDirective,
|
|
10107
|
+
SolarisPhoneCountryListComponent,
|
|
10108
|
+
SolarisSafeHtmlPipe,
|
|
10109
|
+
], providers: [
|
|
10110
|
+
{
|
|
10111
|
+
provide: NG_VALUE_ACCESSOR,
|
|
10112
|
+
useExisting: forwardRef(() => SolarisPhoneFieldComponent),
|
|
10113
|
+
multi: true,
|
|
10114
|
+
},
|
|
10115
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10116
|
+
class: 'solaris-phone-field',
|
|
10117
|
+
'[attr.data-open]': 'panelOpen() ? "" : null',
|
|
10118
|
+
'[attr.data-density]': 'effectiveDensity()',
|
|
10119
|
+
}, 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"] }]
|
|
10120
|
+
}], 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"] }] } });
|
|
10121
|
+
|
|
10122
|
+
function solarisPhoneValidator(country) {
|
|
10123
|
+
return (control) => {
|
|
10124
|
+
const value = control.value;
|
|
10125
|
+
if (value == null || value === '') {
|
|
10126
|
+
return null;
|
|
10127
|
+
}
|
|
10128
|
+
const parsed = parsePhoneNumberFromString(String(value), country);
|
|
10129
|
+
if (!parsed || !parsed.isValid()) {
|
|
10130
|
+
return { solarisPhoneInvalid: true };
|
|
10131
|
+
}
|
|
10132
|
+
return null;
|
|
10133
|
+
};
|
|
10134
|
+
}
|
|
10135
|
+
|
|
10136
|
+
// SECURITY_EXCEPTION_FILE: nativeElement.focus() required to move focus between OTP boxes on typing/navigation.
|
|
10137
|
+
// Standard DOM method used by Angular CDK. ElementRef SSR-safe.
|
|
10138
|
+
// SECURITY_EXCEPTION_FILE: nativeElement.value read in onBoxInput to obtain the raw box value.
|
|
10139
|
+
const MASK_CHAR = '•';
|
|
10140
|
+
class SolarisOtpInputComponent extends SolarisFormControl {
|
|
10141
|
+
elementRef = inject(ElementRef);
|
|
10142
|
+
translateService = inject(SolarisTranslateService);
|
|
10143
|
+
themeService = inject(SolarisThemeService);
|
|
10144
|
+
boxRefs = viewChildren('box', ...(ngDevMode ? [{ debugName: "boxRefs" }] : /* istanbul ignore next */ []));
|
|
10145
|
+
hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
|
|
10146
|
+
hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
10147
|
+
labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
10148
|
+
errorKey = input(...(ngDevMode ? [undefined, { debugName: "errorKey" }] : /* istanbul ignore next */ []));
|
|
10149
|
+
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10150
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
10151
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
10152
|
+
requiredError = input(...(ngDevMode ? [undefined, { debugName: "requiredError" }] : /* istanbul ignore next */ []));
|
|
10153
|
+
invalidError = input(...(ngDevMode ? [undefined, { debugName: "invalidError" }] : /* istanbul ignore next */ []));
|
|
10154
|
+
requiredErrorKey = input(...(ngDevMode ? [undefined, { debugName: "requiredErrorKey" }] : /* istanbul ignore next */ []));
|
|
10155
|
+
invalidErrorKey = input(...(ngDevMode ? [undefined, { debugName: "invalidErrorKey" }] : /* istanbul ignore next */ []));
|
|
10156
|
+
requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
|
|
10157
|
+
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
10158
|
+
disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
|
|
10159
|
+
readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
|
|
10160
|
+
manualInvalid = input(undefined, { ...(ngDevMode ? { debugName: "manualInvalid" } : /* istanbul ignore next */ {}), alias: 'invalid' });
|
|
10161
|
+
maxLength = input(12, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
10162
|
+
minLength = input(1, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
|
|
10163
|
+
charType = input('numeric', ...(ngDevMode ? [{ debugName: "charType" }] : /* istanbul ignore next */ []));
|
|
10164
|
+
masked = input(false, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
|
|
10165
|
+
separatorEvery = input(0, ...(ngDevMode ? [{ debugName: "separatorEvery" }] : /* istanbul ignore next */ []));
|
|
10166
|
+
autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
10167
|
+
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
10168
|
+
density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
|
|
10169
|
+
radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
10170
|
+
valueChange = output();
|
|
10171
|
+
completed = output();
|
|
10172
|
+
boxChars = signal([], ...(ngDevMode ? [{ debugName: "boxChars" }] : /* istanbul ignore next */ []));
|
|
10173
|
+
internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
|
|
10174
|
+
internalFocused = signal(false, ...(ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []));
|
|
10175
|
+
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
10176
|
+
dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
10177
|
+
focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
|
|
10178
|
+
_describedByIds = signal([], ...(ngDevMode ? [{ debugName: "_describedByIds" }] : /* istanbul ignore next */ []));
|
|
10179
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
10180
|
+
onChange = () => { };
|
|
10181
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
10182
|
+
onTouched = () => { };
|
|
10183
|
+
elementId = computed(() => {
|
|
10184
|
+
return resolveElementId(this.elementRef, 'solaris-otp-input');
|
|
10185
|
+
}, ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
|
|
10186
|
+
effectiveDensity = computed(() => {
|
|
10187
|
+
return this.density() ?? this.themeService.density;
|
|
10188
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
|
|
10189
|
+
isEffectivelyDisabled = computed(() => {
|
|
10190
|
+
return this.disabledInput() || this.internalDisabled();
|
|
10191
|
+
}, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
|
|
10192
|
+
isEffectivelyReadonly = computed(() => {
|
|
10193
|
+
return this.readonlyInput();
|
|
10194
|
+
}, ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
|
|
10195
|
+
inputmode = computed(() => {
|
|
10196
|
+
return this.charType() === 'numeric' ? 'numeric' : 'text';
|
|
10197
|
+
}, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
|
|
10198
|
+
boxes = computed(() => {
|
|
10199
|
+
const masked = this.masked();
|
|
10200
|
+
return this.boxChars().map((char) => (masked && char ? MASK_CHAR : char));
|
|
10201
|
+
}, ...(ngDevMode ? [{ debugName: "boxes" }] : /* istanbul ignore next */ []));
|
|
10202
|
+
valueString = computed(() => {
|
|
10203
|
+
return this.boxChars().join('');
|
|
10204
|
+
}, ...(ngDevMode ? [{ debugName: "valueString" }] : /* istanbul ignore next */ []));
|
|
10205
|
+
groupAriaLabel = computed(() => {
|
|
10206
|
+
const key = this.labelKey();
|
|
10207
|
+
if (key) {
|
|
10208
|
+
return this.translateService.translate(key) || this.label() || '';
|
|
10209
|
+
}
|
|
10210
|
+
return this.label() ?? '';
|
|
10211
|
+
}, ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
|
|
10212
|
+
ariaDescribedBy = computed(() => {
|
|
10213
|
+
const ids = this._describedByIds();
|
|
10214
|
+
return ids.length > 0 ? ids.join(' ') : null;
|
|
10215
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
10216
|
+
computedError = computed(() => {
|
|
10217
|
+
const manualError = this.error() || this.translateKey(this.errorKey());
|
|
10218
|
+
if (manualError)
|
|
10219
|
+
return manualError;
|
|
10220
|
+
const isTouchedOrDirty = this.touched() || this.dirty();
|
|
10221
|
+
if (!isTouchedOrDirty || this.internalFocused())
|
|
10222
|
+
return '';
|
|
10223
|
+
const value = this.valueString();
|
|
10224
|
+
if (!value) {
|
|
10225
|
+
if (this.requiredInput()) {
|
|
10226
|
+
return this.buildError(this.requiredError(), this.requiredErrorKey(), 'solaris.otp-input.required', 'Code is required.');
|
|
10227
|
+
}
|
|
10228
|
+
return '';
|
|
10229
|
+
}
|
|
10230
|
+
if (value.length < this.minLength()) {
|
|
10231
|
+
return this.buildError(this.invalidError(), this.invalidErrorKey(), 'solaris.otp-input.invalid', 'Enter a valid code.');
|
|
10232
|
+
}
|
|
10233
|
+
return '';
|
|
10234
|
+
}, ...(ngDevMode ? [{ debugName: "computedError" }] : /* istanbul ignore next */ []));
|
|
10235
|
+
isFieldInvalid = computed(() => {
|
|
10236
|
+
const manual = this.manualInvalid();
|
|
10237
|
+
if (manual !== undefined) {
|
|
10238
|
+
return manual;
|
|
10239
|
+
}
|
|
10240
|
+
if (this.internalFocused()) {
|
|
10241
|
+
return false;
|
|
10242
|
+
}
|
|
10243
|
+
const isTouchedOrDirty = this.touched() || this.dirty();
|
|
10244
|
+
if (!isTouchedOrDirty) {
|
|
10245
|
+
return false;
|
|
10246
|
+
}
|
|
10247
|
+
return !!this.computedError();
|
|
10248
|
+
}, ...(ngDevMode ? [{ debugName: "isFieldInvalid" }] : /* istanbul ignore next */ []));
|
|
10249
|
+
constructor() {
|
|
10250
|
+
super();
|
|
10251
|
+
this.boxChars.set(this.emptyChars());
|
|
10252
|
+
effect(() => {
|
|
10253
|
+
const length = this.maxLength();
|
|
10254
|
+
const current = this.boxChars();
|
|
10255
|
+
if (current.length !== length) {
|
|
10256
|
+
const resized = Array.from({ length }, (_, index) => current[index] ?? '');
|
|
10257
|
+
this.boxChars.set(resized);
|
|
10258
|
+
}
|
|
10259
|
+
});
|
|
10260
|
+
effect(() => {
|
|
10261
|
+
const value = this.value();
|
|
10262
|
+
if (value !== this.lastAppliedValue) {
|
|
10263
|
+
this.lastAppliedValue = value;
|
|
10264
|
+
this.boxChars.set(this.distributeValue(value));
|
|
10265
|
+
}
|
|
10266
|
+
});
|
|
10267
|
+
}
|
|
10268
|
+
lastAppliedValue = '';
|
|
10269
|
+
get id() {
|
|
10270
|
+
return this.elementId();
|
|
10271
|
+
}
|
|
10272
|
+
get focused() {
|
|
10273
|
+
return this.internalFocused();
|
|
10274
|
+
}
|
|
10275
|
+
get disabled() {
|
|
10276
|
+
return this.isEffectivelyDisabled();
|
|
10277
|
+
}
|
|
10278
|
+
get readonly() {
|
|
10279
|
+
return this.isEffectivelyReadonly();
|
|
10280
|
+
}
|
|
10281
|
+
get invalid() {
|
|
10282
|
+
return this.isFieldInvalid();
|
|
10283
|
+
}
|
|
10284
|
+
get required() {
|
|
10285
|
+
return this.requiredInput();
|
|
10286
|
+
}
|
|
10287
|
+
get describedByIds() {
|
|
10288
|
+
return this._describedByIds();
|
|
10289
|
+
}
|
|
10290
|
+
setDescribedByIds(ids) {
|
|
10291
|
+
this._describedByIds.set([...ids]);
|
|
10292
|
+
}
|
|
10293
|
+
focus() {
|
|
10294
|
+
const index = this.boxChars().findIndex((char) => !char);
|
|
10295
|
+
this.focusBox(index >= 0 ? index : 0);
|
|
10296
|
+
}
|
|
10297
|
+
ngAfterViewInit() {
|
|
10298
|
+
if (this.autoFocus()) {
|
|
10299
|
+
this.focusBox(0);
|
|
10300
|
+
}
|
|
10301
|
+
}
|
|
10302
|
+
writeValue(value) {
|
|
10303
|
+
this.boxChars.set(this.distributeValue(value));
|
|
10304
|
+
}
|
|
10305
|
+
registerOnChange(fn) {
|
|
10306
|
+
this.onChange = fn;
|
|
10307
|
+
}
|
|
10308
|
+
registerOnTouched(fn) {
|
|
10309
|
+
this.onTouched = fn;
|
|
10310
|
+
}
|
|
10311
|
+
setDisabledState(isDisabled) {
|
|
10312
|
+
this.internalDisabled.set(isDisabled);
|
|
10313
|
+
}
|
|
10314
|
+
onBoxInput(event, index) {
|
|
10315
|
+
const target = event.target;
|
|
10316
|
+
const raw = target.value;
|
|
10317
|
+
if (!this.dirty()) {
|
|
10318
|
+
this.dirty.set(true);
|
|
10319
|
+
}
|
|
10320
|
+
const filtered = this.filterChars(raw);
|
|
10321
|
+
const chars = this.currentChars();
|
|
10322
|
+
let cursor = index;
|
|
10323
|
+
for (const char of filtered) {
|
|
10324
|
+
if (cursor >= this.maxLength())
|
|
10325
|
+
break;
|
|
10326
|
+
chars[cursor] = char;
|
|
10327
|
+
cursor++;
|
|
10328
|
+
}
|
|
10329
|
+
this.commitValue(chars);
|
|
10330
|
+
target.value = chars[index] ?? '';
|
|
10331
|
+
const next = cursor < this.maxLength() ? cursor : this.maxLength() - 1;
|
|
10332
|
+
this.focusBox(next);
|
|
10333
|
+
}
|
|
10334
|
+
onBoxKeydown(event, index) {
|
|
10335
|
+
switch (event.key) {
|
|
10336
|
+
case 'Backspace':
|
|
10337
|
+
event.preventDefault();
|
|
10338
|
+
this.handleBackspace(index);
|
|
10339
|
+
break;
|
|
10340
|
+
case 'Delete':
|
|
10341
|
+
event.preventDefault();
|
|
10342
|
+
this.handleDelete(index);
|
|
10343
|
+
break;
|
|
10344
|
+
case 'ArrowLeft':
|
|
10345
|
+
event.preventDefault();
|
|
10346
|
+
this.focusBox(index - 1);
|
|
10347
|
+
break;
|
|
10348
|
+
case 'ArrowRight':
|
|
10349
|
+
event.preventDefault();
|
|
10350
|
+
this.focusBox(index + 1);
|
|
10351
|
+
break;
|
|
10352
|
+
case 'Home':
|
|
10353
|
+
event.preventDefault();
|
|
10354
|
+
this.focusBox(0);
|
|
10355
|
+
break;
|
|
10356
|
+
case 'End':
|
|
10357
|
+
event.preventDefault();
|
|
10358
|
+
this.focusBox(this.maxLength() - 1);
|
|
10359
|
+
break;
|
|
10360
|
+
case 'Enter':
|
|
10361
|
+
event.preventDefault();
|
|
10362
|
+
break;
|
|
10363
|
+
}
|
|
10364
|
+
}
|
|
10365
|
+
onBoxPaste(event, index) {
|
|
10366
|
+
event.preventDefault();
|
|
10367
|
+
const text = event.clipboardData?.getData('text') ?? '';
|
|
10368
|
+
if (!text)
|
|
10369
|
+
return;
|
|
10370
|
+
const filtered = this.filterChars(text);
|
|
10371
|
+
const chars = this.currentChars();
|
|
10372
|
+
let cursor = index;
|
|
10373
|
+
for (const char of filtered) {
|
|
10374
|
+
if (cursor >= this.maxLength())
|
|
10375
|
+
break;
|
|
10376
|
+
chars[cursor] = char;
|
|
10377
|
+
cursor++;
|
|
10378
|
+
}
|
|
10379
|
+
this.commitValue(chars);
|
|
10380
|
+
this.focusBox(cursor < this.maxLength() ? cursor : this.maxLength() - 1);
|
|
10381
|
+
}
|
|
10382
|
+
onBoxFocus(index) {
|
|
10383
|
+
this.internalFocused.set(true);
|
|
10384
|
+
this.focusedIndex.set(index);
|
|
10385
|
+
}
|
|
10386
|
+
onBoxBlur() {
|
|
10387
|
+
this.internalFocused.set(false);
|
|
10388
|
+
this.focusedIndex.set(-1);
|
|
10389
|
+
this.markAsTouched();
|
|
10390
|
+
}
|
|
10391
|
+
boxAriaLabel(index) {
|
|
10392
|
+
return this.translateWithDefault('solaris.otp-input.box', `Digit ${index + 1} of ${this.maxLength()}`, { current: index + 1, total: this.maxLength() });
|
|
10393
|
+
}
|
|
10394
|
+
showSeparatorAfter(index) {
|
|
10395
|
+
const every = this.separatorEvery();
|
|
10396
|
+
return (every > 0 && (index + 1) % every === 0 && index < this.maxLength() - 1);
|
|
10397
|
+
}
|
|
10398
|
+
currentChars() {
|
|
10399
|
+
return [...this.boxChars()];
|
|
10400
|
+
}
|
|
10401
|
+
commitValue(chars) {
|
|
10402
|
+
this.boxChars.set([...chars]);
|
|
10403
|
+
const newValue = chars.join('');
|
|
10404
|
+
this.onChange(newValue);
|
|
10405
|
+
this.valueChange.emit(newValue);
|
|
10406
|
+
if (newValue.length === this.maxLength()) {
|
|
10407
|
+
this.completed.emit();
|
|
10408
|
+
}
|
|
10409
|
+
}
|
|
10410
|
+
handleBackspace(index) {
|
|
10411
|
+
const chars = this.currentChars();
|
|
10412
|
+
if (chars[index]) {
|
|
10413
|
+
chars[index] = '';
|
|
10414
|
+
this.commitValue(chars);
|
|
10415
|
+
}
|
|
10416
|
+
else if (index > 0) {
|
|
10417
|
+
chars[index - 1] = '';
|
|
10418
|
+
this.commitValue(chars);
|
|
10419
|
+
this.focusBox(index - 1);
|
|
10420
|
+
}
|
|
10421
|
+
}
|
|
10422
|
+
handleDelete(index) {
|
|
10423
|
+
const chars = this.currentChars();
|
|
10424
|
+
if (chars[index]) {
|
|
10425
|
+
chars[index] = '';
|
|
10426
|
+
this.commitValue(chars);
|
|
10427
|
+
}
|
|
10428
|
+
}
|
|
10429
|
+
filterChars(value) {
|
|
10430
|
+
if (this.charType() === 'numeric') {
|
|
10431
|
+
return value.replace(/\D+/g, '');
|
|
10432
|
+
}
|
|
10433
|
+
return value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
|
10434
|
+
}
|
|
10435
|
+
emptyChars() {
|
|
10436
|
+
return Array.from({ length: this.maxLength() }, () => '');
|
|
10437
|
+
}
|
|
10438
|
+
distributeValue(value) {
|
|
10439
|
+
const chars = this.emptyChars();
|
|
10440
|
+
const source = String(value ?? '');
|
|
10441
|
+
for (let i = 0; i < source.length && i < this.maxLength(); i++) {
|
|
10442
|
+
chars[i] = source[i];
|
|
10443
|
+
}
|
|
10444
|
+
return chars;
|
|
10445
|
+
}
|
|
10446
|
+
focusBox(index) {
|
|
10447
|
+
if (index < 0 || index >= this.maxLength()) {
|
|
10448
|
+
return;
|
|
10449
|
+
}
|
|
10450
|
+
const ref = this.boxRefs()[index];
|
|
10451
|
+
ref?.nativeElement.focus();
|
|
10452
|
+
}
|
|
10453
|
+
markAsTouched() {
|
|
10454
|
+
if (!this.touched()) {
|
|
10455
|
+
this.touched.set(true);
|
|
10456
|
+
this.onTouched();
|
|
10457
|
+
}
|
|
10458
|
+
}
|
|
10459
|
+
translateWithDefault(key, defaultText, params) {
|
|
10460
|
+
const result = this.translateService.translate(key, params);
|
|
10461
|
+
return result !== key ? result : defaultText;
|
|
10462
|
+
}
|
|
10463
|
+
translateKey(key) {
|
|
10464
|
+
if (key) {
|
|
10465
|
+
const translated = this.translateService.translate(key);
|
|
10466
|
+
return translated !== key ? translated : undefined;
|
|
10467
|
+
}
|
|
10468
|
+
return undefined;
|
|
10469
|
+
}
|
|
10470
|
+
buildError(direct, key, fallbackKey, fallbackDefault) {
|
|
10471
|
+
return (direct ??
|
|
10472
|
+
this.translateKey(key) ??
|
|
10473
|
+
this.translateWithDefault(fallbackKey, fallbackDefault));
|
|
10474
|
+
}
|
|
10475
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10476
|
+
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: [
|
|
10477
|
+
{
|
|
10478
|
+
provide: NG_VALUE_ACCESSOR,
|
|
10479
|
+
useExisting: forwardRef(() => SolarisOtpInputComponent),
|
|
10480
|
+
multi: true,
|
|
10481
|
+
},
|
|
10482
|
+
{
|
|
10483
|
+
provide: SolarisFormControl,
|
|
10484
|
+
useExisting: forwardRef(() => SolarisOtpInputComponent),
|
|
10485
|
+
},
|
|
10486
|
+
], 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 });
|
|
10487
|
+
}
|
|
10488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOtpInputComponent, decorators: [{
|
|
10489
|
+
type: Component,
|
|
10490
|
+
args: [{ selector: 'solaris-otp-input', standalone: true, imports: [
|
|
10491
|
+
FormsModule,
|
|
10492
|
+
SolarisFormFieldComponent,
|
|
10493
|
+
SolarisFormFieldTriggerDirective,
|
|
10494
|
+
], providers: [
|
|
10495
|
+
{
|
|
10496
|
+
provide: NG_VALUE_ACCESSOR,
|
|
10497
|
+
useExisting: forwardRef(() => SolarisOtpInputComponent),
|
|
10498
|
+
multi: true,
|
|
10499
|
+
},
|
|
10500
|
+
{
|
|
10501
|
+
provide: SolarisFormControl,
|
|
10502
|
+
useExisting: forwardRef(() => SolarisOtpInputComponent),
|
|
10503
|
+
},
|
|
10504
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10505
|
+
class: 'solaris-otp-input',
|
|
10506
|
+
'[attr.id]': 'elementId()',
|
|
10507
|
+
'[attr.data-density]': 'effectiveDensity()',
|
|
10508
|
+
'[attr.data-appearance]': 'appearance()',
|
|
10509
|
+
'[attr.data-length]': 'maxLength()',
|
|
10510
|
+
'[attr.data-masked]': 'masked() ? "" : null',
|
|
10511
|
+
'[attr.data-char-type]': 'charType()',
|
|
10512
|
+
'[attr.data-invalid]': 'isFieldInvalid() ? "" : null',
|
|
10513
|
+
}, 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"] }]
|
|
10514
|
+
}], 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"] }] } });
|
|
10515
|
+
|
|
10516
|
+
function solarisOtpValidator(minLength, maxLength) {
|
|
10517
|
+
return (control) => {
|
|
10518
|
+
const value = control.value;
|
|
10519
|
+
if (value == null || value === '') {
|
|
10520
|
+
return null;
|
|
10521
|
+
}
|
|
10522
|
+
const length = String(value).length;
|
|
10523
|
+
if (length < minLength || length > maxLength) {
|
|
10524
|
+
return {
|
|
10525
|
+
solarisOtpLength: {
|
|
10526
|
+
requiredLength: maxLength,
|
|
10527
|
+
actualLength: length,
|
|
10528
|
+
},
|
|
10529
|
+
};
|
|
10530
|
+
}
|
|
10531
|
+
return null;
|
|
10532
|
+
};
|
|
10533
|
+
}
|
|
10534
|
+
|
|
9450
10535
|
class SolarisSkeletonComponent {
|
|
9451
10536
|
variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
9452
10537
|
animation = input('pulse', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
|
|
@@ -13935,5 +15020,5 @@ function provideSolaris(config) {
|
|
|
13935
15020
|
* Generated bundle index. Do not edit.
|
|
13936
15021
|
*/
|
|
13937
15022
|
|
|
13938
|
-
export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator };
|
|
15023
|
+
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 };
|
|
13939
15024
|
//# sourceMappingURL=educarehq-solaris-ui.mjs.map
|