@descope/web-components-ui 1.0.165 → 1.0.167

package/dist/umd/boolean-fields-descope-checkbox-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>g});var o=r(4567),p=r(2061),l=r(1e3),i=r(818),c=r(6882),n=r(4201);const a=(0,o.iY)("checkbox"),{host:s,component:d,checkboxElement:h,checkboxSurface:u,checkboxHiddenLabel:b,label:y,requiredIndicator:f,helperText:x,errorMessage:k}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,p.qC)((0,l.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[s,h,y,b],fontFamily:[y,b,x,k],labelTextColor:[{...y,property:"color"},{...f,property:"color"},{...y,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...f,property:"content"},errorMessageTextColor:{...k,property:"color"},labelFontWeight:[{...y,property:"font-weight"},{...b,property:"font-weight"}],labelSpacing:[{...y,property:"left"},{...b,property:"padding-left"}],inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...h,property:"background-color"},inputBorderRadius:{...h,property:"border-radius"},inputBorderWidth:{...h,property:"border-width"},inputBorderOffset:{...h,property:"border-offset"},inputBorderColor:{...h,property:"border-color"},inputBorderStyle:{...h,property:"border-style"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"},inputSize:[{...h,property:"width"},{...h,property:"height"},{...u,property:"font-size"},{...d,property:"font-size"},{...b,property:"line-height"},{...y,property:"margin-left"},{...y,property:"line-height"}]}}),l.e4,l.dj,l.Ae,i.h)((0,l.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${c.Z}\n\t\t\tvaadin-checkbox::part(checkbox)::after {\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t\t${(0,n.bi)(g.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a}));r(9515),r(9789),r(6676),customElements.define(a,g)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>g});var o=r(4567),p=r(2061),l=r(1e3),i=r(818),c=r(6882),n=r(4201);const a=(0,o.iY)("checkbox"),{host:s,component:d,checkboxElement:h,checkboxSurface:u,checkboxHiddenLabel:b,label:y,requiredIndicator:f,helperText:x,errorMessage:k}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,p.qC)((0,l.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[s,h,y,b],fontFamily:[y,b,x,k],labelTextColor:[{...y,property:"color"},{...f,property:"color"},{...y,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...f,property:"content"},errorMessageTextColor:{...k,property:"color"},labelFontWeight:[{...y,property:"font-weight"},{...b,property:"font-weight"}],labelSpacing:[{...y,property:"left"},{...b,property:"padding-left"}],inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...h,property:"background-color"},inputBorderRadius:{...h,property:"border-radius"},inputBorderWidth:{...h,property:"border-width"},inputBorderOffset:{...h,property:"border-offset"},inputBorderColor:{...h,property:"border-color"},inputBorderStyle:{...h,property:"border-style"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"},inputSize:[{...h,property:"width"},{...h,property:"height"},{...u,property:"font-size"},{...d,property:"font-size"},{...b,property:"line-height"},{...y,property:"margin-left"},{...y,property:"line-height"}]}}),l.e4,l.dj,l.Ae,i.h)((0,l.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${c.Z}\n      vaadin-checkbox::part(checkbox)::after {\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t\t${(0,n.bi)(g.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a}));r(9515),r(9789),r(6676),customElements.define(a,g)}}]);

package/dist/umd/descope-email-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9760],{1272:(t,e,s)=>{s.r(e),s.d(e,{EmailFieldClass:()=>p}),s(9437);var i=s(1e3),a=s(4447),n=s(2061),l=s(4567),c=s(4201);const d=(0,l.iY)("email-field"),p=(0,n.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}))\n\t\t\t}\n\t\t\t${(0,c.bi)(p.cssVarList)}\n\t\t\t${(0,c.wm)("vaadin-email-field",p.cssVarList)}\t\t\n\t\t`,excludeAttrsSync:["tabindex"],componentName:d}));customElements.define(d,p)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9760],{1272:(t,e,s)=>{s.r(e),s.d(e,{EmailFieldClass:()=>p}),s(9437);var i=s(1e3),n=s(4447),a=s(2061),l=s(4567),c=s(4201);const d=(0,l.iY)("email-field"),p=(0,a.qC)((0,i.yk)({mappings:n.Z}),i.e4,i.dj,i.Ae,(t=>class extends t{init(){super.init?.(),this.baseElement.setAttribute("pattern","^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$")}}))((0,i.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}))\n\t\t\t}\n\t\t\t${(0,c.bi)(p.cssVarList)}\n\t\t\t${(0,c.wm)("vaadin-email-field",p.cssVarList)}\t\t\n\t\t`,excludeAttrsSync:["tabindex"],componentName:d}));customElements.define(d,p)}}]);

package/dist/umd/descope-phone-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6414],{3721:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>$}),n(4772),n(1294),n(9357);var o=n(5076),r=n(4567),i=n(2061),p=n(1e3),d=n(6417),l=n(4049),a=n(6094),s=n(4201);const u=d.z.cssVarList,c=l.H.cssVarList,h=(0,r.iY)("phone-field"),{host:y,label:f,requiredIndicator:b,inputField:x,countryCodeInput:m,phoneInput:g,separator:w,errorMessage:C,helperText:v}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},$=(0,i.qC)((0,p.yk)({mappings:{fontSize:[y,x,{selector:d.z.componentName,property:d.z.cssVarList.fontSize},{selector:l.H.componentName,property:l.H.cssVarList.fontSize}],fontFamily:[f,C,v,{...m,property:l.H.cssVarList.overlay.fontFamily}],hostWidth:[{...y,property:"width"},{...g,property:"width"},{...m,property:"--vaadin-combo-box-overlay-width"}],inputBorderStyle:[{...x,property:"border-style"},{...w,property:"border-left-style"}],inputBorderWidth:[{...x,property:"border-width"},{...w,property:"border-left-width"}],inputBorderColor:[{...x,property:"border-color"},{...w,property:"border-left-color"}],inputBorderRadius:{...x,property:"border-radius"},countryCodeInputWidth:{...m,property:c.hostWidth},countryCodeDropdownWidth:{...m,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...g,property:"width"},labelTextColor:[{...f,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...C,property:"color"},inputValueTextColor:[{...g,property:u.inputValueTextColor},{...m,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...g,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...x,property:"outline-style"},inputOutlineColor:{...x,property:"outline-color"},inputOutlineWidth:{...x,property:"outline-width"},inputOutlineOffset:{...x,property:"outline-offset"}}}),p.e4,p.dj,(t=>class extends t{static get CountryCodes(){return a.Z}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,r.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder"]})}}))((0,p.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,s.bi)($.cssVarList)}\n\t\t\t${(0,s.Pd)("vaadin-text-field")}\n\t\t\t${(0,s.B)("vaadin-text-field")}\n\t\t\t${(0,s.DY)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tmin-height: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\tmin-height: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n\t\t\t\tmin-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}));customElements.define(h,$)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6414],{3721:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>$}),n(4772),n(1294),n(9357);var o=n(5076),r=n(4567),i=n(2061),p=n(1e3),d=n(6417),l=n(4049),a=n(6094),s=n(4201);const u=d.z.cssVarList,c=l.H.cssVarList,h=(0,r.iY)("phone-field"),{host:y,label:f,requiredIndicator:b,inputField:x,countryCodeInput:m,phoneInput:g,separator:w,errorMessage:C,helperText:v}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},$=(0,i.qC)((0,p.yk)({mappings:{fontSize:[y,x,{selector:d.z.componentName,property:d.z.cssVarList.fontSize},{selector:l.H.componentName,property:l.H.cssVarList.fontSize}],fontFamily:[f,C,v,{...m,property:l.H.cssVarList.overlay.fontFamily}],hostWidth:[{...y,property:"width"},{...g,property:"width"},{...m,property:"--vaadin-combo-box-overlay-width"}],inputBorderStyle:[{...x,property:"border-style"},{...w,property:"border-left-style"}],inputBorderWidth:[{...x,property:"border-width"},{...w,property:"border-left-width"}],inputBorderColor:[{...x,property:"border-color"},{...w,property:"border-left-color"}],inputBorderRadius:{...x,property:"border-radius"},countryCodeInputWidth:{...m,property:c.hostWidth},countryCodeDropdownWidth:{...m,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...g,property:"width"},labelTextColor:[{...f,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...C,property:"color"},inputValueTextColor:[{...g,property:u.inputValueTextColor},{...m,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...g,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...x,property:"outline-style"},inputOutlineColor:{...x,property:"outline-color"},inputOutlineWidth:{...x,property:"outline-width"},inputOutlineOffset:{...x,property:"outline-offset"}}}),p.e4,p.dj,(t=>class extends t{static get CountryCodes(){return a.Z}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,r.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled"]})}}))((0,p.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,s.bi)($.cssVarList)}\n\t\t\t${(0,s.Pd)("vaadin-text-field")}\n\t\t\t${(0,s.B)("vaadin-text-field")}\n\t\t\t${(0,s.DY)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tmin-height: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\tmin-height: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n\t\t\t\tmin-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}));customElements.define(h,$)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.165",
+  "version": "1.0.167",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -16,6 +16,12 @@
   },
   "scripts": {
     "test": "jest",
+    "test:playwright": "playwright test",
+    "test:playwright:updateSnapshots": "npm run test:playwright -- --update-snapshots",
+    "test:ui": "playwright test --ui",
+    "test:ui:debug": "PWDEBUG=1 npm run test:playwright -- --update-snapshots",
+    "test:ci": "npm run container:build && docker run --rm --network host -v $(pwd):/work/ -w /work/ descope-wcui-playwright-image",
+    "test:ci:updateSnapshots": "npm run test:ci -- --update-snapshots",
     "lint": "eslint --fix --max-warnings 0",
     "lint:all": "npm run lint .",
     "build:umd": "webpack -c webpack.prod.js",
@@ -25,7 +31,11 @@
     "format": "prettier -w --ignore-path .gitignore",
     "format:all": "npm run format .",
     "format-lint": "lint-staged",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "container:build": "docker build -t descope-wcui-playwright-image .",
+    "container:debug": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.38.0-jammy /bin/bash"
   },
   "lint-staged": {
     "src/**/*.{js,jsx}": [
@@ -40,7 +50,15 @@
   "license": "UNLICENSED",
   "devDependencies": {
     "@babel/preset-env": "^7.22.2",
+    "@playwright/test": "^1.38.1",
     "@rollup/plugin-node-resolve": "^15.0.2",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-controls": "^6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/html": "^6.4.9",
+    "@storybook/manager-api": "^7.4.6",
+    "@types/node": "^20.8.0",
     "eslint": "^8.48.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",

package/src/baseClasses/createBaseClass.js

@@ -40,9 +40,9 @@ export const createBaseClass = ({ componentName, baseSelector = '' }) => {
       return this.shadowRoot || this;
     }
 
-    get name () {
-			return this.getAttribute('name');
-		}
+    get name() {
+      return this.getAttribute('name');
+    }
 
     connectedCallback() {
       super.connectedCallback?.();

package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js

@@ -94,7 +94,7 @@ export const CheckboxClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => `
 			${commonStyles}
-			vaadin-checkbox::part(checkbox)::after {
+      vaadin-checkbox::part(checkbox)::after {
 				top: 0;
 				left: 0;
 			}

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -54,8 +54,8 @@ const ComboBoxMixin = (superclass) =>
       overlay._attachOverlay = () => {
         overlay.bringToFront();
       };
-      overlay._detachOverlay = () => { };
-      overlay._enterModalState = () => { };
+      overlay._detachOverlay = () => {};
+      overlay._enterModalState = () => {};
     }
 
     init() {

package/src/components/descope-email-field/EmailFieldClass.js

@@ -15,13 +15,21 @@ import {
 
 export const componentName = getComponentName('email-field');
 
+const customMixin = (superclass) =>
+  class EmailFieldMixinClass extends superclass {
+    init() {
+      super.init?.();
+      this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
+    }
+  };
 export const EmailFieldClass = compose(
   createStyleMixin({
     mappings: textFieldMappings,
   }),
   draggableMixin,
   proxyInputMixin,
-  componentNameValidationMixin
+  componentNameValidationMixin,
+  customMixin
 )(
   createProxy({
     slots: ['suffix'],

package/src/components/descope-phone-field/PhoneFieldClass.js

@@ -49,6 +49,7 @@ const customMixin = (superclass) =>
           'default-code',
           'country-input-placeholder',
           'phone-input-placeholder',
+          'disabled',
         ],
       });
     }

package/src/components/descope-recaptcha/RecaptchaClass.js

@@ -156,6 +156,4 @@ class RawRecaptcha extends BaseClass {
   }
 }
 
-export const RecaptchaClass = compose(
-  draggableMixin
-)(RawRecaptcha);
+export const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);