@acorex/components 20.3.32 → 20.3.34
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.
- package/fesm2022/acorex-components-action-sheet.mjs +2 -2
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation.mjs +1 -1
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation2.mjs +3 -3
- package/fesm2022/acorex-components-conversation2.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +2 -2
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +13 -5
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-phone-box.mjs +75 -26
- package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
- package/fesm2022/acorex-components-popover.mjs +50 -7
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +6 -6
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +6 -0
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/media-viewer/index.d.ts +2 -0
- package/package.json +15 -15
- package/phone-box/index.d.ts +13 -3
- package/popover/index.d.ts +13 -1
- package/tree-view/index.d.ts +6 -0
|
@@ -46,6 +46,10 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
|
|
|
46
46
|
*/
|
|
47
47
|
this.excluded = input([], ...(ngDevMode ? [{ debugName: "excluded" }] : []));
|
|
48
48
|
this.selectBox = viewChild('s', ...(ngDevMode ? [{ debugName: "selectBox" }] : []));
|
|
49
|
+
/** @ignore */
|
|
50
|
+
this.countries = signal([], ...(ngDevMode ? [{ debugName: "countries" }] : []));
|
|
51
|
+
/** @ignore */
|
|
52
|
+
this.selectedCountry = signal(null, ...(ngDevMode ? [{ debugName: "selectedCountry" }] : []));
|
|
49
53
|
this.#countriesChanged = effect(() => {
|
|
50
54
|
this.included();
|
|
51
55
|
this.excluded();
|
|
@@ -53,18 +57,16 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
|
|
|
53
57
|
this.cdr.detectChanges();
|
|
54
58
|
this.selectBox().refresh();
|
|
55
59
|
}, ...(ngDevMode ? [{ debugName: "#countriesChanged" }] : []));
|
|
56
|
-
this.#eff =
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
this.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
/** @ignore */
|
|
67
|
-
this.selectedCountry = signal(null, ...(ngDevMode ? [{ debugName: "selectedCountry" }] : []));
|
|
60
|
+
this.#eff = afterNextRender(() => {
|
|
61
|
+
setTimeout(() => {
|
|
62
|
+
if (this.country() && !this.value) {
|
|
63
|
+
this.selectedCountry.set(this.countries().find((c) => c.code === this.country()));
|
|
64
|
+
}
|
|
65
|
+
else if (!this.country() && !this.value) {
|
|
66
|
+
this.selectedCountry.set(this.countries()[0]);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
});
|
|
68
70
|
/** @ignore */
|
|
69
71
|
this.dataSource = new AXDataSource({
|
|
70
72
|
pageSize: 10,
|
|
@@ -112,30 +114,32 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
|
|
|
112
114
|
#countriesChanged;
|
|
113
115
|
#eff;
|
|
114
116
|
/** @ignore */
|
|
115
|
-
_handleModelChange(
|
|
117
|
+
_handleModelChange(e) {
|
|
116
118
|
// Prevent value change if component is disabled or readonly
|
|
117
119
|
if (this.disabled || this.readonly) {
|
|
118
120
|
return;
|
|
119
121
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
/** @ignore */
|
|
123
|
-
handleCountryOnClosed() {
|
|
124
|
-
setTimeout(() => {
|
|
125
|
-
this.textbox?.focus();
|
|
126
|
-
}, 300);
|
|
122
|
+
if (e.isUserInteraction && e.value)
|
|
123
|
+
this.commitValue(e.value, true);
|
|
127
124
|
}
|
|
128
|
-
/** @ignore */
|
|
129
|
-
#init;
|
|
130
125
|
internalValueChanged(value) {
|
|
131
126
|
if (!value)
|
|
132
127
|
return;
|
|
133
128
|
const result = this.parsePhoneNumber(value);
|
|
134
129
|
if (result.country) {
|
|
130
|
+
this.removeValidation();
|
|
135
131
|
this.selectedCountry.set(result.country);
|
|
136
132
|
this.commitValue(result.nationalNumber);
|
|
137
133
|
}
|
|
138
134
|
}
|
|
135
|
+
/** @ignore */
|
|
136
|
+
handleCountryOnClosed() {
|
|
137
|
+
setTimeout(() => {
|
|
138
|
+
this.textbox?.focus();
|
|
139
|
+
}, 300);
|
|
140
|
+
}
|
|
141
|
+
/** @ignore */
|
|
142
|
+
#init;
|
|
139
143
|
/**
|
|
140
144
|
* Updates the list of countries based on included or excluded codes.
|
|
141
145
|
*
|
|
@@ -190,7 +194,8 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
|
|
|
190
194
|
for (const country of sorted) {
|
|
191
195
|
if (normalized.startsWith(country.iso2code)) {
|
|
192
196
|
const countryCode = country.iso2code;
|
|
193
|
-
const
|
|
197
|
+
const rawNationalNumber = normalized.slice(countryCode.length);
|
|
198
|
+
const nationalNumber = this.formatNationalNumber(rawNationalNumber, country.format);
|
|
194
199
|
return {
|
|
195
200
|
country,
|
|
196
201
|
countryCode,
|
|
@@ -205,13 +210,57 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
|
|
|
205
210
|
nationalNumber: normalized,
|
|
206
211
|
};
|
|
207
212
|
}
|
|
213
|
+
/**
|
|
214
|
+
* Formats a national phone number according to the country's format pattern.
|
|
215
|
+
* The format pattern uses '0' as digit placeholders and preserves other characters (like spaces).
|
|
216
|
+
*
|
|
217
|
+
* @param number - The raw national number (digits only)
|
|
218
|
+
* @param format - The country's phone number format pattern (e.g., '000 000 0000')
|
|
219
|
+
* @returns The formatted national number with spaces according to the format
|
|
220
|
+
*/
|
|
221
|
+
formatNationalNumber(number, format) {
|
|
222
|
+
if (!format || !number) {
|
|
223
|
+
return number;
|
|
224
|
+
}
|
|
225
|
+
let result = '';
|
|
226
|
+
let numberIndex = 0;
|
|
227
|
+
for (let i = 0; i < format.length && numberIndex < number.length; i++) {
|
|
228
|
+
if (format[i] === '0') {
|
|
229
|
+
result += number[numberIndex];
|
|
230
|
+
numberIndex++;
|
|
231
|
+
}
|
|
232
|
+
else {
|
|
233
|
+
result += format[i];
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
// Append any remaining digits that exceed the format length
|
|
237
|
+
if (numberIndex < number.length) {
|
|
238
|
+
result += number.slice(numberIndex);
|
|
239
|
+
}
|
|
240
|
+
return result;
|
|
241
|
+
}
|
|
208
242
|
/** @ignore */
|
|
209
243
|
_handleCountryValueChanged(event) {
|
|
210
244
|
// Prevent value change if component is disabled or readonly
|
|
211
245
|
if (this.disabled || this.readonly) {
|
|
212
246
|
return;
|
|
213
247
|
}
|
|
214
|
-
|
|
248
|
+
//remove validation rule before add new one
|
|
249
|
+
if (event.isUserInteraction) {
|
|
250
|
+
this.removeValidation();
|
|
251
|
+
this.selectedCountry.set(event.component.selectedItems[0]);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
removeValidation() {
|
|
255
|
+
this.textbox.removeValidationRule({
|
|
256
|
+
rule: 'regex',
|
|
257
|
+
disabled: false,
|
|
258
|
+
options: {
|
|
259
|
+
pattern: this.selectedCountry()?.regex,
|
|
260
|
+
},
|
|
261
|
+
});
|
|
262
|
+
this.textbox.reset();
|
|
263
|
+
this.textbox.resetErrors();
|
|
215
264
|
}
|
|
216
265
|
get __hostName() {
|
|
217
266
|
return this.name;
|
|
@@ -227,7 +276,7 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
|
|
|
227
276
|
useExisting: forwardRef(() => AXPhoneBoxComponent),
|
|
228
277
|
multi: true,
|
|
229
278
|
},
|
|
230
|
-
], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["s"], descendants: true, isSignal: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box\n dir=\"ltr\"\n [look]=\"look\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [mask-options]=\"{ mask: selectedCountry()?.format }\"\n [placeholder]=\"selectedCountry()?.format\"\n [ngModel]=\"value\"\n (
|
|
279
|
+
], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["s"], descendants: true, isSignal: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box\n dir=\"ltr\"\n [look]=\"look\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [mask-options]=\"{ mask: selectedCountry()?.format }\"\n [placeholder]=\"selectedCountry()?.format\"\n [ngModel]=\"value\"\n (onValueChanged)=\"_handleModelChange($event)\"\n (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n (onKeyDown)=\"handleKeyDown($event.nativeEvent)\"\n (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n <ng-content select=\"ax-validation-rule\"> </ng-content>\n\n @if (selectedCountry()?.regex && messageError) {\n <ax-validation-rule\n rule=\"regex\"\n [options]=\"{\n message: messageError,\n pattern: selectedCountry()?.regex,\n }\"\n >\n </ax-validation-rule>\n }\n\n <ax-prefix>\n @if (precode()) {\n <ax-text>{{ precode() }}</ax-text>\n } @else {\n <ax-select-box\n #s\n look=\"blank\"\n [disabled]=\"disabled || readonly\"\n [readonly]=\"readonly\"\n [dropdownWidth]=\"'320px'\"\n [dataSource]=\"dataSource\"\n [ngModel]=\"selectedCountry()\"\n [textField]=\"'iso2code'\"\n [multiple]=\"false\"\n [valueField]=\"'code'\"\n [itemTemplate]=\"customItemTemplate\"\n [selectedTemplate]=\"selectedTemplate\"\n (onValueChanged)=\"_handleCountryValueChanged($event)\"\n (onClosed)=\"handleCountryOnClosed()\"\n [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n >\n <ax-search-box class=\"ax-sm\" look=\"fill\">\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n <ng-template #customItemTemplate let-item>\n <div class=\"ax-country-item\">\n <div\n class=\"ax-country-flag\"\n [ngStyle]=\"{\n 'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n 'background-image': 'url(' + flags() + ')',\n }\"\n ></div>\n <div>\n <span class=\"ax-country-name\">{{ item.data.name }}</span>\n <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n </div>\n </div>\n </ng-template>\n <ng-template #selectedTemplate let-item>\n <div class=\"ax-selected-country\">\n <span>{{ item.data.iso2code }}</span>\n </div>\n </ng-template>\n <ng-template #loading></ng-template>\n </ax-select-box>\n }\n </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-phone-box .ax-editor-container{--ax-comp-editor-space-start-size: 0}ax-phone-box.ax-state-disabled ax-text-box{pointer-events:auto;opacity:.6;cursor:not-allowed}ax-phone-box.ax-state-disabled ax-text-box .ax-editor,ax-phone-box.ax-state-disabled ax-text-box .ax-input{pointer-events:auto;cursor:not-allowed;-webkit-user-select:none;user-select:none}ax-phone-box.ax-state-disabled ax-select-box{pointer-events:none;opacity:.6}ax-phone-box.ax-state-disabled ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important;cursor:not-allowed}ax-phone-box.ax-state-disabled ax-select-box .ax-editor-button{pointer-events:none;cursor:not-allowed}ax-phone-box.ax-state-readonly ax-text-box .ax-editor,ax-phone-box.ax-state-readonly ax-text-box .ax-input{-webkit-user-select:text;user-select:text}ax-phone-box.ax-state-readonly ax-select-box{pointer-events:none}ax-phone-box.ax-state-readonly ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important;cursor:default}ax-phone-box.ax-state-readonly ax-select-box .ax-editor-button{pointer-events:none;cursor:default}ax-phone-box ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important}ax-phone-box ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-box-outline-width: 0;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-editor,ax-phone-box ax-select-box ax-dropdown-box .ax-input{--ax-comp-editor-space-start-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-content{padding-top:0!important}.ax-country-item{padding:.75rem .5rem;cursor:pointer;display:flex;gap:.5rem;align-items:center}.ax-country-item:hover{background-color:rgba(var(--ax-sys-color-ghost-lighter-surface))}.ax-country-item .ax-country-name{font-weight:500;margin-inline-end:.5rem}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{width:25px!important;height:20px!important;background-repeat:no-repeat}.ax-selected-country{display:flex;gap:.5rem;align-items:center;padding-inline-start:.5rem}\n"], dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
231
280
|
}
|
|
232
281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPhoneBoxComponent, decorators: [{
|
|
233
282
|
type: Component,
|
|
@@ -277,7 +326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
277
326
|
AXDecoratorClearButtonComponent,
|
|
278
327
|
NgStyle,
|
|
279
328
|
AXFormModule,
|
|
280
|
-
], template: "<ax-text-box\n dir=\"ltr\"\n [look]=\"look\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [mask-options]=\"{ mask: selectedCountry()?.format }\"\n [placeholder]=\"selectedCountry()?.format\"\n [ngModel]=\"value\"\n (
|
|
329
|
+
], template: "<ax-text-box\n dir=\"ltr\"\n [look]=\"look\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [mask-options]=\"{ mask: selectedCountry()?.format }\"\n [placeholder]=\"selectedCountry()?.format\"\n [ngModel]=\"value\"\n (onValueChanged)=\"_handleModelChange($event)\"\n (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n (onKeyDown)=\"handleKeyDown($event.nativeEvent)\"\n (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n <ng-content select=\"ax-validation-rule\"> </ng-content>\n\n @if (selectedCountry()?.regex && messageError) {\n <ax-validation-rule\n rule=\"regex\"\n [options]=\"{\n message: messageError,\n pattern: selectedCountry()?.regex,\n }\"\n >\n </ax-validation-rule>\n }\n\n <ax-prefix>\n @if (precode()) {\n <ax-text>{{ precode() }}</ax-text>\n } @else {\n <ax-select-box\n #s\n look=\"blank\"\n [disabled]=\"disabled || readonly\"\n [readonly]=\"readonly\"\n [dropdownWidth]=\"'320px'\"\n [dataSource]=\"dataSource\"\n [ngModel]=\"selectedCountry()\"\n [textField]=\"'iso2code'\"\n [multiple]=\"false\"\n [valueField]=\"'code'\"\n [itemTemplate]=\"customItemTemplate\"\n [selectedTemplate]=\"selectedTemplate\"\n (onValueChanged)=\"_handleCountryValueChanged($event)\"\n (onClosed)=\"handleCountryOnClosed()\"\n [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n >\n <ax-search-box class=\"ax-sm\" look=\"fill\">\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n <ng-template #customItemTemplate let-item>\n <div class=\"ax-country-item\">\n <div\n class=\"ax-country-flag\"\n [ngStyle]=\"{\n 'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n 'background-image': 'url(' + flags() + ')',\n }\"\n ></div>\n <div>\n <span class=\"ax-country-name\">{{ item.data.name }}</span>\n <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n </div>\n </div>\n </ng-template>\n <ng-template #selectedTemplate let-item>\n <div class=\"ax-selected-country\">\n <span>{{ item.data.iso2code }}</span>\n </div>\n </ng-template>\n <ng-template #loading></ng-template>\n </ax-select-box>\n }\n </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-phone-box .ax-editor-container{--ax-comp-editor-space-start-size: 0}ax-phone-box.ax-state-disabled ax-text-box{pointer-events:auto;opacity:.6;cursor:not-allowed}ax-phone-box.ax-state-disabled ax-text-box .ax-editor,ax-phone-box.ax-state-disabled ax-text-box .ax-input{pointer-events:auto;cursor:not-allowed;-webkit-user-select:none;user-select:none}ax-phone-box.ax-state-disabled ax-select-box{pointer-events:none;opacity:.6}ax-phone-box.ax-state-disabled ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important;cursor:not-allowed}ax-phone-box.ax-state-disabled ax-select-box .ax-editor-button{pointer-events:none;cursor:not-allowed}ax-phone-box.ax-state-readonly ax-text-box .ax-editor,ax-phone-box.ax-state-readonly ax-text-box .ax-input{-webkit-user-select:text;user-select:text}ax-phone-box.ax-state-readonly ax-select-box{pointer-events:none}ax-phone-box.ax-state-readonly ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important;cursor:default}ax-phone-box.ax-state-readonly ax-select-box .ax-editor-button{pointer-events:none;cursor:default}ax-phone-box ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important}ax-phone-box ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-box-outline-width: 0;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-editor,ax-phone-box ax-select-box ax-dropdown-box .ax-input{--ax-comp-editor-space-start-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-content{padding-top:0!important}.ax-country-item{padding:.75rem .5rem;cursor:pointer;display:flex;gap:.5rem;align-items:center}.ax-country-item:hover{background-color:rgba(var(--ax-sys-color-ghost-lighter-surface))}.ax-country-item .ax-country-name{font-weight:500;margin-inline-end:.5rem}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{width:25px!important;height:20px!important;background-repeat:no-repeat}.ax-selected-country{display:flex;gap:.5rem;align-items:center;padding-inline-start:.5rem}\n"] }]
|
|
281
330
|
}], propDecorators: { textbox: [{
|
|
282
331
|
type: ViewChild,
|
|
283
332
|
args: [AXTextBoxComponent, { static: true }]
|