@ascentgl/ads-ui 21.114.1 → 21.114.2
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.
|
@@ -2813,6 +2813,8 @@ class AbstractBaseComponent {
|
|
|
2813
2813
|
return false;
|
|
2814
2814
|
if (this.skipValidationWhenEmpty && this.isEmptyValue(this.valueControl.value))
|
|
2815
2815
|
return false;
|
|
2816
|
+
if (this.hasOnlyStaleRequiredError(this.valueControl))
|
|
2817
|
+
return false;
|
|
2816
2818
|
return !!this.valueControl.errors && (this.valueControl.touched || this.immediateValidation);
|
|
2817
2819
|
}
|
|
2818
2820
|
/** @ignore */
|
|
@@ -2821,24 +2823,38 @@ class AbstractBaseComponent {
|
|
|
2821
2823
|
}
|
|
2822
2824
|
/**
|
|
2823
2825
|
* @ignore
|
|
2824
|
-
*
|
|
2825
|
-
*
|
|
2826
|
-
*
|
|
2827
|
-
*
|
|
2828
|
-
* This
|
|
2826
|
+
* Detects stale 'required' errors produced by Angular's RequiredValidator directive
|
|
2827
|
+
* that is still enabled in the current change detection cycle but will be disabled
|
|
2828
|
+
* once the `[required]` binding is re-evaluated on the child `<input>` element.
|
|
2829
|
+
*
|
|
2830
|
+
* This happens because `[ngClass]` on `mat-form-field` (parent) is evaluated BEFORE
|
|
2831
|
+
* `[required]` on `<input>` (child), so `canShowError()` sees errors from the
|
|
2832
|
+
* still-enabled directive even though `Validators.required` was already removed
|
|
2833
|
+
* programmatically via `removeValidators`.
|
|
2829
2834
|
*/
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
if (
|
|
2833
|
-
return true;
|
|
2834
|
-
}
|
|
2835
|
-
// Fallback: run the current validator against an empty value to detect 'required' error
|
|
2836
|
-
const validator = control.validator;
|
|
2837
|
-
if (!validator) {
|
|
2835
|
+
hasOnlyStaleRequiredError(control) {
|
|
2836
|
+
const errors = control.errors;
|
|
2837
|
+
if (!errors || !('required' in errors))
|
|
2838
2838
|
return false;
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2839
|
+
return Object.keys(errors).length === 1 && !control.hasValidator(Validators.required);
|
|
2840
|
+
}
|
|
2841
|
+
/**
|
|
2842
|
+
* @ignore
|
|
2843
|
+
* Checks whether a control has a required validator.
|
|
2844
|
+
*
|
|
2845
|
+
* Uses Angular's `hasValidator(Validators.required)` which checks `_rawValidators`
|
|
2846
|
+
* by reference. In Angular 21 this handles all standard usage patterns:
|
|
2847
|
+
* - `new FormControl(null, Validators.required)`
|
|
2848
|
+
* - `new FormControl(null, [Validators.required, ...])`
|
|
2849
|
+
* - `control.addValidators(Validators.required)`
|
|
2850
|
+
*
|
|
2851
|
+
* NOTE: We intentionally do NOT fall back to running the composed validator against
|
|
2852
|
+
* an empty value. That approach creates a circular dependency with Angular's
|
|
2853
|
+
* `RequiredValidator` directive (which is auto-instantiated by `[required][formControl]`
|
|
2854
|
+
* in the template and merged into the control's validators by `setUpValidators`).
|
|
2855
|
+
*/
|
|
2856
|
+
hasRequiredValidatorCheck(control) {
|
|
2857
|
+
return control.hasValidator(Validators.required);
|
|
2842
2858
|
}
|
|
2843
2859
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2844
2860
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AbstractBaseComponent, isStandalone: true, inputs: { skipValidationWhenEmpty: "skipValidationWhenEmpty", showValidationError: "showValidationError", control: "control", immediateValidation: "immediateValidation", errorMessages: "errorMessages", hint: "hint", successMessage: "successMessage", id: "id", label: "label", showFooter: "showFooter", width: "width", shrink: "shrink" }, usesOnChanges: true, ngImport: i0 }); }
|
|
@@ -12026,14 +12042,35 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
|
|
|
12026
12042
|
this.dropdownControl.enable({ emitEvent: false });
|
|
12027
12043
|
this.inputControl.enable({ emitEvent: false });
|
|
12028
12044
|
}
|
|
12045
|
+
this.syncRequiredValidator();
|
|
12029
12046
|
});
|
|
12030
12047
|
const value = this.valueControl.value;
|
|
12031
12048
|
if (value && !value.startsWith('+') && /^\d+$/.test(value)) {
|
|
12032
12049
|
this.valueControl.setValue(`+${value}`);
|
|
12033
12050
|
}
|
|
12034
|
-
|
|
12035
|
-
|
|
12036
|
-
|
|
12051
|
+
this.syncRequiredValidator();
|
|
12052
|
+
// Monkey-patch validator mutation methods so required state is always synced to inputControl.
|
|
12053
|
+
// This mirrors the existing monkey-patches for setValue / reset above.
|
|
12054
|
+
const origAddValidators = this.valueControl.addValidators.bind(this.valueControl);
|
|
12055
|
+
this.valueControl.addValidators = ((validators) => {
|
|
12056
|
+
origAddValidators(validators);
|
|
12057
|
+
this.syncRequiredValidator();
|
|
12058
|
+
});
|
|
12059
|
+
const origRemoveValidators = this.valueControl.removeValidators.bind(this.valueControl);
|
|
12060
|
+
this.valueControl.removeValidators = ((validators) => {
|
|
12061
|
+
origRemoveValidators(validators);
|
|
12062
|
+
this.syncRequiredValidator();
|
|
12063
|
+
});
|
|
12064
|
+
const origSetValidators = this.valueControl.setValidators.bind(this.valueControl);
|
|
12065
|
+
this.valueControl.setValidators = ((validators) => {
|
|
12066
|
+
origSetValidators(validators);
|
|
12067
|
+
this.syncRequiredValidator();
|
|
12068
|
+
});
|
|
12069
|
+
const origClearValidators = this.valueControl.clearValidators.bind(this.valueControl);
|
|
12070
|
+
this.valueControl.clearValidators = (() => {
|
|
12071
|
+
origClearValidators();
|
|
12072
|
+
this.syncRequiredValidator();
|
|
12073
|
+
});
|
|
12037
12074
|
if (value) {
|
|
12038
12075
|
this.parsePhoneNumber(value);
|
|
12039
12076
|
}
|
|
@@ -12098,6 +12135,10 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
|
|
|
12098
12135
|
}
|
|
12099
12136
|
}
|
|
12100
12137
|
/** @ignore */
|
|
12138
|
+
ngDoCheck() {
|
|
12139
|
+
this.syncRequiredValidator();
|
|
12140
|
+
}
|
|
12141
|
+
/** @ignore */
|
|
12101
12142
|
ngAfterViewInit() {
|
|
12102
12143
|
super.ngAfterViewInit();
|
|
12103
12144
|
const width = this.wrapperRef?.nativeElement.offsetWidth;
|
|
@@ -12119,6 +12160,10 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
|
|
|
12119
12160
|
}
|
|
12120
12161
|
/** @ignore */
|
|
12121
12162
|
canShowError() {
|
|
12163
|
+
if (!this.showValidationError)
|
|
12164
|
+
return false;
|
|
12165
|
+
if (this.hasOnlyStaleRequiredError(this.inputControl))
|
|
12166
|
+
return false;
|
|
12122
12167
|
return !!this.inputControl.errors && (this.inputControl.touched || this.immediateValidation);
|
|
12123
12168
|
}
|
|
12124
12169
|
/** @ignore */
|
|
@@ -12151,12 +12196,25 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
|
|
|
12151
12196
|
return `${this.genericError} (${firstErrorKey})`;
|
|
12152
12197
|
}
|
|
12153
12198
|
}
|
|
12199
|
+
/** @ignore */
|
|
12200
|
+
syncRequiredValidator() {
|
|
12201
|
+
const isRequired = this.hasRequiredValidatorCheck(this.valueControl);
|
|
12202
|
+
const inputHasRequired = this.inputControl.hasValidator(Validators.required);
|
|
12203
|
+
if (isRequired && !inputHasRequired) {
|
|
12204
|
+
this.inputControl.addValidators(Validators.required);
|
|
12205
|
+
this.inputControl.updateValueAndValidity({ emitEvent: false });
|
|
12206
|
+
}
|
|
12207
|
+
else if (!isRequired && inputHasRequired) {
|
|
12208
|
+
this.inputControl.removeValidators(Validators.required);
|
|
12209
|
+
this.inputControl.updateValueAndValidity({ emitEvent: false });
|
|
12210
|
+
}
|
|
12211
|
+
}
|
|
12154
12212
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInternationalPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12155
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInternationalPhoneFieldComponent, isStandalone: false, selector: "ads-international-phone-field", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: false, isRequired: false, transformFunction: null }, selectedCountry: { classPropertyName: "selectedCountry", publicName: "selectedCountry", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapperRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n <div class=\"form-controls-wrapper\">\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: '87px' }\"\n >\n <ads-dropdown\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"countryOptions\"\n [immediateValidation]=\"immediateValidation\"\n [showValidationError]=\"showValidationError\"\n [optionTemplate]=\"optionTemplate\"\n [fitContent]=\"true\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [triggerTemplate]=\"triggerTemplate\"\n [panelClass]=\"'full-width-panel'\"\n [closeOnOutOfView]=\"closeOnOutOfView\"\n [outOfViewRootMargin]=\"outOfViewRootMargin\"\n />\n </div>\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: showValidationError &&
|
|
12213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInternationalPhoneFieldComponent, isStandalone: false, selector: "ads-international-phone-field", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: false, isRequired: false, transformFunction: null }, selectedCountry: { classPropertyName: "selectedCountry", publicName: "selectedCountry", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapperRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n <div class=\"form-controls-wrapper\">\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: '87px' }\"\n >\n <ads-dropdown\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"countryOptions\"\n [immediateValidation]=\"immediateValidation\"\n [showValidationError]=\"showValidationError\"\n [optionTemplate]=\"optionTemplate\"\n [fitContent]=\"true\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [triggerTemplate]=\"triggerTemplate\"\n [panelClass]=\"'full-width-panel'\"\n [closeOnOutOfView]=\"closeOnOutOfView\"\n [outOfViewRootMargin]=\"outOfViewRootMargin\"\n />\n </div>\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: showValidationError && valueControl.invalid && valueControl.touched,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: '100%' }\"\n >\n <ads-input\n [control]=\"inputControl\"\n [mask]=\"phoneMask\"\n [id]=\"id\"\n [width]=\"'100%'\"\n [placeholder]=\"placeholder\"\n [label]=\"label\"\n [showClearButton]=\"showClearButton\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showValidationError]=\"showValidationError\"\n [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n [immediateValidation]=\"immediateValidation\"\n [dropSpecialCharacters]=\"true\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [onBlur]=\"onInputBlur\"\n />\n </div>\n\n </div>\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n <div class=\"flag-option\">\n <div>\n <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n <span>{{option.name}}</span>\n </div>\n <span class=\"code\">{{option.code}}</span>\n </div>\n</ng-template>\n\n<ng-template #triggerTemplate let-option=\"option\">\n <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options", "optionTemplate", "triggerTemplate", "panelClass", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
12156
12214
|
}
|
|
12157
12215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInternationalPhoneFieldComponent, decorators: [{
|
|
12158
12216
|
type: Component,
|
|
12159
|
-
args: [{ selector: 'ads-international-phone-field', standalone: false, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n <div class=\"form-controls-wrapper\">\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: '87px' }\"\n >\n <ads-dropdown\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"countryOptions\"\n [immediateValidation]=\"immediateValidation\"\n [showValidationError]=\"showValidationError\"\n [optionTemplate]=\"optionTemplate\"\n [fitContent]=\"true\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [triggerTemplate]=\"triggerTemplate\"\n [panelClass]=\"'full-width-panel'\"\n [closeOnOutOfView]=\"closeOnOutOfView\"\n [outOfViewRootMargin]=\"outOfViewRootMargin\"\n />\n </div>\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: showValidationError &&
|
|
12217
|
+
args: [{ selector: 'ads-international-phone-field', standalone: false, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n <div class=\"form-controls-wrapper\">\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: '87px' }\"\n >\n <ads-dropdown\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"countryOptions\"\n [immediateValidation]=\"immediateValidation\"\n [showValidationError]=\"showValidationError\"\n [optionTemplate]=\"optionTemplate\"\n [fitContent]=\"true\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [triggerTemplate]=\"triggerTemplate\"\n [panelClass]=\"'full-width-panel'\"\n [closeOnOutOfView]=\"closeOnOutOfView\"\n [outOfViewRootMargin]=\"outOfViewRootMargin\"\n />\n </div>\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: showValidationError && valueControl.invalid && valueControl.touched,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: '100%' }\"\n >\n <ads-input\n [control]=\"inputControl\"\n [mask]=\"phoneMask\"\n [id]=\"id\"\n [width]=\"'100%'\"\n [placeholder]=\"placeholder\"\n [label]=\"label\"\n [showClearButton]=\"showClearButton\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showValidationError]=\"showValidationError\"\n [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n [immediateValidation]=\"immediateValidation\"\n [dropSpecialCharacters]=\"true\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [onBlur]=\"onInputBlur\"\n />\n </div>\n\n </div>\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n <div class=\"flag-option\">\n <div>\n <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n <span>{{option.name}}</span>\n </div>\n <span class=\"code\">{{option.code}}</span>\n </div>\n</ng-template>\n\n<ng-template #triggerTemplate let-option=\"option\">\n <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"] }]
|
|
12160
12218
|
}], ctorParameters: () => [], propDecorators: { dropdownId: [{
|
|
12161
12219
|
type: Input
|
|
12162
12220
|
}], selectedCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountry", required: false }] }], closeOnOutOfView: [{
|