@educarehq/solaris-ui 2.0.4 → 2.0.5
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.
|
@@ -52658,7 +52658,7 @@ function getMaxNationalNumberLength(country) {
|
|
|
52658
52658
|
const metadata = new Metadata();
|
|
52659
52659
|
metadata.selectNumberingPlan(country);
|
|
52660
52660
|
const lengths = metadata.numberingPlan?.possibleLengths() ?? [];
|
|
52661
|
-
return lengths.length > 0 ? Math.max(...lengths) :
|
|
52661
|
+
return lengths.length > 0 ? Math.max(...lengths) : 15;
|
|
52662
52662
|
}
|
|
52663
52663
|
function formatAsYouType(value, country) {
|
|
52664
52664
|
return new AsYouType(country).input(value);
|
|
@@ -52863,6 +52863,13 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
52863
52863
|
if (explicit !== void 0) return explicit;
|
|
52864
52864
|
return getMaxNationalNumberLength(this.effectiveCountry());
|
|
52865
52865
|
}, ...ngDevMode ? [{ debugName: "effectiveMaxLength" }] : /* istanbul ignore next */ []);
|
|
52866
|
+
inputMaxLength = computed(() => {
|
|
52867
|
+
const max = this.effectiveMaxLength();
|
|
52868
|
+
if (!max || max <= 0) return null;
|
|
52869
|
+
const country = this.effectiveCountry();
|
|
52870
|
+
const formatted = formatAsYouType("9".repeat(max), country);
|
|
52871
|
+
return Math.max(formatted.length, max);
|
|
52872
|
+
}, ...ngDevMode ? [{ debugName: "inputMaxLength" }] : /* istanbul ignore next */ []);
|
|
52866
52873
|
placeholderText = computed(() => {
|
|
52867
52874
|
const key = this.placeholderKey();
|
|
52868
52875
|
if (key) return this.translateService.translate(key);
|
|
@@ -53445,8 +53452,8 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
|
|
|
53445
53452
|
}],
|
|
53446
53453
|
usesInheritance: true,
|
|
53447
53454
|
ngImport: i0,
|
|
53448
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\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 <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\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 <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 <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\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]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\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]=\"
|
|
53449
|
-
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-neutral-text-secondary);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);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:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.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-neutral-text-secondary);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-
|
|
53455
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\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 <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\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 <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 <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\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]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\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]=\"inputMaxLength()\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n\n @if (canClear() && !loading()) {\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-phone-field__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\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",
|
|
53456
|
+
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-neutral-text-secondary);--solaris-phone-field-dial-code-gap: var(--solaris-spacing-3);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);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:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.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-neutral-text-secondary);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-phone-field-dial-code-gap)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--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: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--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-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"],
|
|
53450
53457
|
dependencies: [
|
|
53451
53458
|
{
|
|
53452
53459
|
kind: "ngmodule",
|
|
@@ -53626,8 +53633,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
53626
53633
|
"[attr.data-open]": "panelOpen() ? \"\" : null",
|
|
53627
53634
|
"[attr.data-density]": "effectiveDensity()"
|
|
53628
53635
|
},
|
|
53629
|
-
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\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 <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\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 <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 <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\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]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\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]=\"
|
|
53630
|
-
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-neutral-text-secondary);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);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:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.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-neutral-text-secondary);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-
|
|
53636
|
+
template: "<solaris-form-field\n [control]=\"this\"\n [hint]=\"hint()\"\n [label]=\"label()\"\n [radius]=\"radius()\"\n [density]=\"effectiveDensity()\"\n [size]=\"size()\"\n [hintKey]=\"hintKey()\"\n [labelKey]=\"labelKey()\"\n [errorKey]=\"errorKey()\"\n [required]=\"requiredInput()\"\n [optional]=\"optional()\"\n [readonly]=\"isEffectivelyReadonly()\"\n [appearance]=\"appearance()\"\n [invalid]=\"isFieldInvalid()\"\n [error]=\"error() || computedError()\"\n [disabled]=\"isEffectivelyDisabled()\"\n [loading]=\"loading()\"\n [hasPrefix]=\"hasPrefix()\"\n [hasSuffix]=\"hasSuffix()\"\n [hasSuffixAction]=\"!!projectedSuffixAction()\"\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 <ng-content\n select=\"[solaris-form-suffix-action]\"\n ngProjectAs=\"[solaris-form-suffix-action]\"\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 <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 <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\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]=\"effectiveDensity()\"\n [size]=\"size()\"\n (blur)=\"onInputBlur()\"\n [readonly]=\"isEffectivelyReadonly()\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputClick($event)\"\n [attr.id]=\"fieldId() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\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]=\"inputMaxLength()\"\n [attr.placeholder]=\"placeholderText() || null\"\n />\n\n @if (canClear() && !loading()) {\n <button\n type=\"button\"\n solaris-form-suffix\n class=\"solaris-phone-field__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n tabindex=\"-1\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n }\n @if (suffix() && !projectedSuffix()) {\n <span solaris-form-suffix>\n <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n </span>\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",
|
|
53637
|
+
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-neutral-text-secondary);--solaris-phone-field-dial-code-gap: var(--solaris-spacing-3);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);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:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.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-neutral-text-secondary);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-phone-field-dial-code-gap)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--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: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--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-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"]
|
|
53631
53638
|
}]
|
|
53632
53639
|
}],
|
|
53633
53640
|
ctorParameters: () => [],
|