@descope/web-components-ui 1.0.325 → 1.0.327
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +6 -2
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +50 -12
- 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/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +5 -2
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +44 -10
- package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +1 -0
package/dist/index.esm.js
CHANGED
@@ -5835,13 +5835,12 @@ 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', '
|
5841
|
+
const labelTypeAttrs = ['label-type', 'country-input-label', 'label'];
|
5842
5842
|
const mapAttrs$1 = {
|
5843
5843
|
'country-input-label': 'label',
|
5844
|
-
'phone-input-label': 'label',
|
5845
5844
|
'country-input-placeholder': 'placeholder',
|
5846
5845
|
'phone-input-placeholder': 'placeholder',
|
5847
5846
|
};
|
@@ -6002,6 +6001,43 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
6002
6001
|
this.handleInputEventDispatching();
|
6003
6002
|
}
|
6004
6003
|
|
6004
|
+
handleLabelTypeAttrs(attrName, newValue) {
|
6005
|
+
// set or remove label attributes from inner text/combo components on `label-type` change
|
6006
|
+
const attr = mapAttrs$1[attrName] || attrName;
|
6007
|
+
|
6008
|
+
if (attrName === 'label-type') {
|
6009
|
+
this.onLabelTypeChange(newValue);
|
6010
|
+
}
|
6011
|
+
// on inner components label attr change - set label attributes for text/combo components
|
6012
|
+
// only if label-type is `floating`
|
6013
|
+
else if (this.getAttribute('label-type') === 'floating') {
|
6014
|
+
if (attrName === 'country-input-label') {
|
6015
|
+
this.countryCodeInput.setAttribute(attr, newValue);
|
6016
|
+
} else if (attrName === 'label') {
|
6017
|
+
this.phoneNumberInput.setAttribute(attr, newValue);
|
6018
|
+
}
|
6019
|
+
}
|
6020
|
+
}
|
6021
|
+
|
6022
|
+
onLabelTypeChange(newValue) {
|
6023
|
+
if (newValue === 'floating') {
|
6024
|
+
// on change to `floating` label - set inner components `label` and `placeholder`
|
6025
|
+
this.countryCodeInput.setAttribute('label', this.getAttribute('country-input-label') || '');
|
6026
|
+
this.countryCodeInput.setAttribute(
|
6027
|
+
'placeholder',
|
6028
|
+
this.getAttribute('country-input-placeholder') || ''
|
6029
|
+
);
|
6030
|
+
this.phoneNumberInput.setAttribute('label', this.getAttribute('label') || '');
|
6031
|
+
this.phoneNumberInput.setAttribute(
|
6032
|
+
'placeholder',
|
6033
|
+
this.getAttribute('phone-input-placeholder') || ''
|
6034
|
+
);
|
6035
|
+
} else {
|
6036
|
+
// for other cases - reset inner components label-type and labels
|
6037
|
+
this.inputs.forEach((input) => input.removeAttribute('label'));
|
6038
|
+
}
|
6039
|
+
}
|
6040
|
+
|
6005
6041
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
6006
6042
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
6007
6043
|
|
@@ -6017,15 +6053,13 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
6017
6053
|
this.countryCodeInput.setAttribute(attr, newValue);
|
6018
6054
|
} else if (phoneAttrs.includes(attrName)) {
|
6019
6055
|
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
6056
|
}
|
6028
6057
|
}
|
6058
|
+
|
6059
|
+
if (labelTypeAttrs.includes(attrName)) {
|
6060
|
+
this.handleLabelTypeAttrs(attrName, newValue);
|
6061
|
+
}
|
6062
|
+
|
6029
6063
|
if (attrName === 'restrict-countries') {
|
6030
6064
|
this.updateCountryCodeItems(this.getRestrictedCountries());
|
6031
6065
|
}
|
@@ -6074,10 +6108,10 @@ const customMixin$6 = (superclass) =>
|
|
6074
6108
|
'phone-input-placeholder',
|
6075
6109
|
'disabled',
|
6076
6110
|
'restrict-countries',
|
6077
|
-
'label-type',
|
6078
6111
|
'country-input-label',
|
6079
|
-
'phone-input-label',
|
6080
6112
|
'readonly',
|
6113
|
+
'label',
|
6114
|
+
'label-type',
|
6081
6115
|
],
|
6082
6116
|
});
|
6083
6117
|
}
|
@@ -6275,6 +6309,9 @@ const PhoneFieldClass = compose(
|
|
6275
6309
|
${textVars$1.inputBorderRadius}: 0;
|
6276
6310
|
}
|
6277
6311
|
|
6312
|
+
:host([label-type="floating"]) vaadin-text-field::part(label) {
|
6313
|
+
display: none;
|
6314
|
+
}
|
6278
6315
|
descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
6279
6316
|
opacity: 0;
|
6280
6317
|
}
|
@@ -6492,6 +6529,7 @@ const customMixin$5 = (superclass) =>
|
|
6492
6529
|
'default-code',
|
6493
6530
|
'disabled',
|
6494
6531
|
'phone-input-placeholder',
|
6532
|
+
'label',
|
6495
6533
|
'label-type',
|
6496
6534
|
],
|
6497
6535
|
});
|