@descope/web-components-ui 1.0.81 → 1.0.83

package/dist/umd/descope-checkbox-descope-checkbox-internal-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[409],{7877:(e,t,c)=>{c.d(t,{Z:()=>a,f:()=>h});var s=c(3878),i=c(4567);const h=(0,i.iY)("checkbox-internal"),n=["disabled","label","invalid","readonly"],r=(0,s.P)({componentName:h,baseSelector:"div"}),a=class extends r{constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper">\n\t\t\t\t<vaadin-checkbox></vaadin-checkbox>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.querySelector("div"),this.checkbox=this.querySelector("vaadin-checkbox")}get value(){return this.checkbox?.checked}set value(e){this.checkbox.checked=e}get checked(){return this.value}set checked(e){this.value=e}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.checkbox.focus()})),super.init?.(),(0,i.oP)(this,this.checkbox,{includeAttrs:n}),(0,i.tg)(this,this.checkbox,{includeAttrs:["checked"]})}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},3537:(e,t,c)=>{c.r(t);var s=c(7877);customElements.define(s.f,s.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[409],{7877:(e,t,s)=>{s.d(t,{Z:()=>r,f:()=>h});var c=s(3878),i=s(4567);const h=(0,i.iY)("checkbox-internal"),n=["disabled","label","invalid","readonly"],a=(0,c.P)({componentName:h,baseSelector:"div"}),r=class extends a{constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper">\n\t\t\t\t<vaadin-checkbox></vaadin-checkbox>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.querySelector("div"),this.checkbox=this.querySelector("vaadin-checkbox")}get value(){return this.checkbox?.checked}set value(e){this.checkbox.checked=e}get checked(){return this.value}set checked(e){this.value=e}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.checkbox.focus()})),super.init?.(),(0,i.oP)(this,this.checkbox,{includeAttrs:n}),(0,i.tg)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},3537:(e,t,s)=>{s.r(t);var c=s(7877);customElements.define(c.f,c.Z)}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[761],{7904:(t,e,n)=>{n.r(e);var i=n(4567),o=n(7877),r=n(2061),a=n(4988);const c=(0,i.iY)("checkbox"),{host:l,component:d,checkboxElement:p,checkboxSurface:h,checkboxHiddenLabel:s,label:b,requiredIndicator:u}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"::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"]'}},x=(0,r.qC)((0,a.yk)({mappings:{width:l,cursor:d,checkboxBackgroundColor:{...p,property:"background-color"},checkboxRadius:{...p,property:"border-radius"},checkboxWidth:[{...p,property:"width"},{...b,property:"margin-left"}],checkboxHeight:{...p,property:"height"},checkboxOutlineWidth:{...p},checkboxOutlineOffset:{...p},checkboxOutlineColor:{...p},checkboxOutlineStyle:{...p},checkmarkSize:[{...h,property:"font-size"},{...d,property:"font-size"}],checkmarkTextColor:{...h,property:"color"},labelFontSize:[{...b,property:"font-size"},{...s,property:"font-size"}],labelLineHeight:[{...b,property:"line-height"},{...s,property:"line-height"}],labelFontWeight:[{...b,property:"font-weight"},{...s,property:"font-weight"}],labelMargin:[{...b,property:"left"},{...s,property:"padding-left"}],labelTextColor:[{...b,property:"color"},{...u,property:"color"}]}}),a.e4,a.dj,a.Ae,(t=>class extends t{constructor(){super()}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\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,i.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid"]}),(0,i.Db)(this.inputElement,this,["checked"]),(0,i.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}))((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:'\n\t\t:host {\n\t\t\t--vaadin-field-default-width: auto;\n\t\t\tdisplay: inline-flex;\n\t\t}\n\t\t.wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\tvaadin-text-field {\n\t\t\tposition: relative;\n\t\t\tpadding: 0;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: flex-start;\n\t\t}\n\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\tbox-shadow: none;\n\t\t}\n\t\tvaadin-text-field::before {\n\t\t\theight: auto;\n\t\t\tmargin: 0;\n\t\t}\n\t\tvaadin-text-field::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbackground: none;\n\t\t\tmin-height: 0;\n\t\t}\n\t\tvaadin-text-field::part(input-field)::after {\n\t\t\tbackground: none;\n\t\t}\t\t\n\t\tvaadin-text-field::part(label) {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t}\t\t\n\t\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\t\tcontent: "*";\n\t\t}\n\n\t\tvaadin-checkbox [slot="label"] {\n\t\t\topacity: 0;\n\t\t\theight: 100%;\n\t\t\talign-self: flex-start;\n\t\t\tpadding: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t[required] vaadin-checkbox [slot="label"] {\n\t\t\tpadding-right: 1em;\n\t\t}\n\t\tvaadin-checkbox::part(checkbox) {\n\t\t\tmargin: 0;\n\t\t}\n\t\tvaadin-checkbox[focus-ring]::part(checkbox) {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\tdescope-checkbox-internal {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\t',excludeAttrsSync:["tabindex"],componentName:c}));n(9515),n(9789),n(3537),customElements.define(c,x)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[761],{7904:(t,e,n)=>{n.r(e);var o=n(4567),i=n(7877),r=n(2061),a=n(4988);const c=(0,o.iY)("checkbox"),{host:l,component:p,checkboxElement:d,checkboxSurface:h,checkboxHiddenLabel:s,label:b,requiredIndicator:u}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"::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"]'}},x=(0,r.qC)((0,a.yk)({mappings:{width:l,cursor:p,checkboxBackgroundColor:{...d,property:"background-color"},checkboxRadius:{...d,property:"border-radius"},checkboxWidth:[{...d,property:"width"},{...b,property:"margin-left"}],checkboxHeight:{...d,property:"height"},checkboxOutlineWidth:{...d,property:"outline-width"},checkboxOutlineOffset:{...d,property:"outline-offset"},checkboxOutlineColor:{...d,property:"outline-color"},checkboxOutlineStyle:{...d,property:"outline-style"},checkmarkSize:[{...h,property:"font-size"},{...p,property:"font-size"}],checkmarkTextColor:{...h,property:"color"},labelFontSize:[{...b,property:"font-size"},{...s,property:"font-size"}],labelLineHeight:[{...b,property:"line-height"},{...s,property:"line-height"}],labelFontWeight:[{...b,property:"font-weight"},{...s,property:"font-weight"}],labelMargin:[{...b,property:"left"},{...s,property:"padding-left"}],labelTextColor:[{...b,property:"color"},{...u,property:"color"}]}}),a.e4,a.dj,a.Ae,(t=>class extends t{constructor(){super()}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.f} \n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,o.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid"]}),(0,o.Db)(this.inputElement,this,["checked"]),(0,o.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}))((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:'\n\t\t:host {\n\t\t\t--vaadin-field-default-width: auto;\n\t\t\tdisplay: inline-flex;\n\t\t}\n\t\t.wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\tvaadin-text-field {\n\t\t\tposition: relative;\n\t\t\tpadding: 0;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: flex-start;\n\t\t}\n\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\tbox-shadow: none;\n\t\t}\n\t\tvaadin-text-field::before {\n\t\t\theight: auto;\n\t\t\tmargin: 0;\n\t\t}\n\t\tvaadin-text-field::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbackground: none;\n\t\t\tmin-height: 0;\n\t\t}\n\t\tvaadin-text-field::part(input-field)::after {\n\t\t\tbackground: none;\n\t\t}\t\t\n\t\tvaadin-text-field::part(label) {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t}\t\t\n\t\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\t\tcontent: "*";\n\t\t}\n\n\t\tvaadin-checkbox [slot="label"] {\n\t\t\topacity: 0;\n\t\t\theight: 100%;\n\t\t\talign-self: flex-start;\n\t\t\tpadding: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t[required] vaadin-checkbox [slot="label"] {\n\t\t\tpadding-right: 1em;\n\t\t}\n\t\tvaadin-checkbox::part(checkbox) {\n\t\t\tmargin: 0;\n\t\t}\n\t\tvaadin-checkbox[focus-ring]::part(checkbox) {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\tdescope-checkbox-internal {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\t',excludeAttrsSync:["tabindex"],componentName:c}));n(9515),n(9789),n(3537),customElements.define(c,x)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.81",
+	"version": "1.0.83",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/descope-checkbox/Checkbox.js

@@ -80,10 +80,10 @@ const Checkbox = compose(
 			],
 			checkboxHeight: { ...checkboxElement, property: 'height' },
 
-			checkboxOutlineWidth: { ...checkboxElement },
-			checkboxOutlineOffset: { ...checkboxElement },
-			checkboxOutlineColor: { ...checkboxElement },
-			checkboxOutlineStyle: { ...checkboxElement },
+			checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
+			checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
+			checkboxOutlineColor: { ...checkboxElement, property: 'outline-color' },
+			checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
 
 			// Checkmark
 			checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],

package/src/components/descope-checkbox/descope-checkbox-internal/CheckboxInternal.js

@@ -50,6 +50,9 @@ class CheckboxInternal extends BaseInputClass {
 
 		forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes });
 		syncAttrs(this, this.checkbox, { includeAttrs: ['checked'] });
+
+		// we need it in order to set the focus ring and trigger validation on descope-checkbox
+		this.handleFocusEventsDispatching([this.checkbox])
 	}
 
 	getValidity() {