@descope/web-components-ui 1.0.324 → 1.0.326

package/dist/index.esm.js

@@ -1496,6 +1496,7 @@ const ButtonClass = compose(
       borderWidth: {},
 
       verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-right' }, { property: 'padding-left' }],
 
       labelTextColor: { property: 'color' },
       iconColor: {
@@ -5834,10 +5835,10 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 
 const componentName$y = getComponentName('phone-field-internal');
 
-const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly', 'label-type'];
+const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
 const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
-const labelTypeAttrs = ['country-input-label', 'phone-input-label'];
+const labelTypeAttrs = ['label-type', 'country-input-label', 'phone-input-label'];
 const mapAttrs$1 = {
   'country-input-label': 'label',
   'phone-input-label': 'label',
@@ -6001,6 +6002,43 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
     this.handleInputEventDispatching();
   }
 
+  handleLabelTypeAttrs(attrName, newValue) {
+    // set or remove label attributes from inner text/combo components on `label-type` change
+    const attr = mapAttrs$1[attrName] || attrName;
+
+    if (attrName === 'label-type') {
+      this.onLabelTypeChange(newValue);
+    }
+    // on inner components label attr change - set label attributes for text/combo components
+    // only if label-type is `floating`
+    else if (this.getAttribute('label-type') === 'floating') {
+      if (attrName === 'country-input-label') {
+        this.countryCodeInput.setAttribute(attr, newValue);
+      } else if (attrName === 'phone-input-label') {
+        this.phoneNumberInput.setAttribute(attr, newValue);
+      }
+    }
+  }
+
+  onLabelTypeChange(newValue) {
+    if (newValue === 'floating') {
+      // on change to `floating` label - set inner components `label` and `placeholder`
+      this.countryCodeInput.setAttribute('label', this.getAttribute('country-input-label') || '');
+      this.countryCodeInput.setAttribute(
+        'placeholder',
+        this.getAttribute('country-input-placeholder') || ''
+      );
+      this.phoneNumberInput.setAttribute('label', this.getAttribute('phone-input-label') || '');
+      this.phoneNumberInput.setAttribute(
+        'placeholder',
+        this.getAttribute('phone-input-placeholder') || ''
+      );
+    } else {
+      // for other cases - reset inner components label-type and labels
+      this.inputs.forEach((input) => input.removeAttribute('label'));
+    }
+  }
+
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback(attrName, oldValue, newValue);
 
@@ -6016,15 +6054,13 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
           this.countryCodeInput.setAttribute(attr, newValue);
         } else if (phoneAttrs.includes(attrName)) {
           this.phoneNumberInput.setAttribute(attr, newValue);
-        } else if (labelTypeAttrs.includes(attrName)) {
-          if (attrName === 'country-input-label') {
-            this.countryCodeInput.setAttribute(attr, newValue);
-          }
-          if (attrName === 'phone-input-label') {
-            this.phoneNumberInput.setAttribute(attr, newValue);
-          }
         }
       }
+
+      if (labelTypeAttrs.includes(attrName)) {
+        this.handleLabelTypeAttrs(attrName, newValue);
+      }
+
       if (attrName === 'restrict-countries') {
         this.updateCountryCodeItems(this.getRestrictedCountries());
       }
@@ -6077,6 +6113,7 @@ const customMixin$6 = (superclass) =>
           'country-input-label',
           'phone-input-label',
           'readonly',
+          'label-type',
         ],
       });
     }
@@ -12087,6 +12124,7 @@ const button = {
   },
 
   [compVars$5.verticalPadding]: '1em',
+  [compVars$5.horizontalPadding]: '0.875em',
 
   [compVars$5.outlineWidth]: globals.border.sm,
   [compVars$5.outlineOffset]: '0px', // keep `px` unit for external calc