@descope/web-components-ui 1.0.325 → 1.0.326
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +45 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +1 -0
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +44 -9
package/dist/index.esm.js
CHANGED
@@ -5835,10 +5835,10 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
5835
5835
|
|
5836
5836
|
const componentName$y = getComponentName('phone-field-internal');
|
5837
5837
|
|
5838
|
-
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'
|
5838
|
+
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5839
5839
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
5840
5840
|
const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
|
5841
|
-
const labelTypeAttrs = ['country-input-label', 'phone-input-label'];
|
5841
|
+
const labelTypeAttrs = ['label-type', 'country-input-label', 'phone-input-label'];
|
5842
5842
|
const mapAttrs$1 = {
|
5843
5843
|
'country-input-label': 'label',
|
5844
5844
|
'phone-input-label': 'label',
|
@@ -6002,6 +6002,43 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
6002
6002
|
this.handleInputEventDispatching();
|
6003
6003
|
}
|
6004
6004
|
|
6005
|
+
handleLabelTypeAttrs(attrName, newValue) {
|
6006
|
+
// set or remove label attributes from inner text/combo components on `label-type` change
|
6007
|
+
const attr = mapAttrs$1[attrName] || attrName;
|
6008
|
+
|
6009
|
+
if (attrName === 'label-type') {
|
6010
|
+
this.onLabelTypeChange(newValue);
|
6011
|
+
}
|
6012
|
+
// on inner components label attr change - set label attributes for text/combo components
|
6013
|
+
// only if label-type is `floating`
|
6014
|
+
else if (this.getAttribute('label-type') === 'floating') {
|
6015
|
+
if (attrName === 'country-input-label') {
|
6016
|
+
this.countryCodeInput.setAttribute(attr, newValue);
|
6017
|
+
} else if (attrName === 'phone-input-label') {
|
6018
|
+
this.phoneNumberInput.setAttribute(attr, newValue);
|
6019
|
+
}
|
6020
|
+
}
|
6021
|
+
}
|
6022
|
+
|
6023
|
+
onLabelTypeChange(newValue) {
|
6024
|
+
if (newValue === 'floating') {
|
6025
|
+
// on change to `floating` label - set inner components `label` and `placeholder`
|
6026
|
+
this.countryCodeInput.setAttribute('label', this.getAttribute('country-input-label') || '');
|
6027
|
+
this.countryCodeInput.setAttribute(
|
6028
|
+
'placeholder',
|
6029
|
+
this.getAttribute('country-input-placeholder') || ''
|
6030
|
+
);
|
6031
|
+
this.phoneNumberInput.setAttribute('label', this.getAttribute('phone-input-label') || '');
|
6032
|
+
this.phoneNumberInput.setAttribute(
|
6033
|
+
'placeholder',
|
6034
|
+
this.getAttribute('phone-input-placeholder') || ''
|
6035
|
+
);
|
6036
|
+
} else {
|
6037
|
+
// for other cases - reset inner components label-type and labels
|
6038
|
+
this.inputs.forEach((input) => input.removeAttribute('label'));
|
6039
|
+
}
|
6040
|
+
}
|
6041
|
+
|
6005
6042
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
6006
6043
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
6007
6044
|
|
@@ -6017,15 +6054,13 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
6017
6054
|
this.countryCodeInput.setAttribute(attr, newValue);
|
6018
6055
|
} else if (phoneAttrs.includes(attrName)) {
|
6019
6056
|
this.phoneNumberInput.setAttribute(attr, newValue);
|
6020
|
-
} else if (labelTypeAttrs.includes(attrName)) {
|
6021
|
-
if (attrName === 'country-input-label') {
|
6022
|
-
this.countryCodeInput.setAttribute(attr, newValue);
|
6023
|
-
}
|
6024
|
-
if (attrName === 'phone-input-label') {
|
6025
|
-
this.phoneNumberInput.setAttribute(attr, newValue);
|
6026
|
-
}
|
6027
6057
|
}
|
6028
6058
|
}
|
6059
|
+
|
6060
|
+
if (labelTypeAttrs.includes(attrName)) {
|
6061
|
+
this.handleLabelTypeAttrs(attrName, newValue);
|
6062
|
+
}
|
6063
|
+
|
6029
6064
|
if (attrName === 'restrict-countries') {
|
6030
6065
|
this.updateCountryCodeItems(this.getRestrictedCountries());
|
6031
6066
|
}
|
@@ -6078,6 +6113,7 @@ const customMixin$6 = (superclass) =>
|
|
6078
6113
|
'country-input-label',
|
6079
6114
|
'phone-input-label',
|
6080
6115
|
'readonly',
|
6116
|
+
'label-type',
|
6081
6117
|
],
|
6082
6118
|
});
|
6083
6119
|
}
|