@descope/web-components-ui 1.0.226 → 1.0.228

package/dist/index.esm.js

@@ -1388,6 +1388,10 @@ const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
 const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$5 {
+  static get observedAttributes() {
+    return ['readonly'];
+  }
+
   constructor() {
     super();
     this.innerHTML = `
@@ -1430,6 +1434,18 @@ class BooleanInputInternal extends BaseInputClass$5 {
     this.handleFocusEventsDispatching([this.checkbox]);
   }
 
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (attrName === 'readonly') {
+      this.onReadOnlyChange(newValue !== null);
+    }
+  }
+
+  onReadOnlyChange(val) {
+    this.baseElement.setAttribute('inert', val);
+  }
+
   getValidity() {
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
@@ -1456,7 +1472,15 @@ const booleanFieldMixin = (superclass) =>
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
-        includeAttrs: ['required', 'full-width', 'size', 'label', 'invalid', 'disabled'],
+        includeAttrs: [
+          'required',
+          'full-width',
+          'size',
+          'label',
+          'invalid',
+          'disabled',
+          'readonly',
+        ],
       });
 
       forwardProps(this.inputElement, this, ['checked']);
@@ -1710,6 +1734,10 @@ const CheckboxClass = compose(
         top: 0;
         left: 0;
       }
+
+      vaadin-text-field::part(input-field)::after {
+        content: none;
+      }
     `,
     excludeAttrsSync: ['label', 'tabindex'],
     componentName: componentName$z,
@@ -1803,6 +1831,14 @@ const SwitchToggleClass = compose(
 				max-width: 100%;
       }
 
+      vaadin-text-field {
+        width: 100%;
+      }
+
+      vaadin-text-field::part(input-field)::after {
+        content: none;
+      }
+
       descope-boolean-field-internal {
 				padding: 0;
         width: 100%;
@@ -8585,8 +8621,6 @@ const ModalClass = compose(
 const compVars = ModalClass.cssVarList;
 
 const modal = {
-  [compVars.hostWidth]: '400px',
-  [compVars.hostHeight]: '400px',
   [compVars.overlayShadow]: 'none',
   [compVars.overlayWidth]: '700px',
 };