@descope/web-components-ui 1.0.217 → 1.0.219
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +114 -111
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +105 -102
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4803.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-selection-group-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/commonStyles.js +8 -25
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +35 -32
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +49 -33
- package/src/components/descope-button-selection-group/ButtonSelectionGroupClass.js +1 -1
- package/src/components/descope-combo-box/ComboBoxClass.js +1 -1
- package/src/theme/components/checkbox.js +4 -2
- package/src/theme/components/switchToggle.js +3 -4
- package/src/theme/components/text.js +1 -1
package/dist/umd/4803.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4803],{818:(n,t,e)=>{e.d(t,{h:()=>l});var i=e(4567),a=e(1250);const l=n=>class extends n{init(){super.init?.();const n=document.createElement("template");n.innerHTML=`\n\t\t\t\t<${a.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(n.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,i.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled"]}),(0,i.Db)(this.inputElement,this,["checked"]),(0,i.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(n,t,e)=>{e.d(t,{Z:()=>i});const i=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,e(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4803],{818:(n,t,e)=>{e.d(t,{h:()=>l});var i=e(4567),a=e(1250);const l=n=>class extends n{init(){super.init?.();const n=document.createElement("template");n.innerHTML=`\n\t\t\t\t<${a.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(n.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,i.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled"]}),(0,i.Db)(this.inputElement,this,["checked"]),(0,i.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(n,t,e)=>{e.d(t,{Z:()=>i});const i=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,e(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n position: absolute;\n top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n align-self: flex-start;\n padding: 0;\n}\n[required] vaadin-checkbox [slot="label"]:not(:empty) {\n\tpadding-right: 1em;\n}\ndescope-boolean-field-internal {\n -webkit-mask-image: none;\n min-height: initial;\n}\n`}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>k});var o=r(4567),n=r(2061),p=r(1e3),i=r(818),l=r(6882),c=r(4201);const a=(0,o.iY)("checkbox"),{host:s,component:d,checkboxElement:h,checkboxSurface:b,checkboxLabel:u,requiredIndicator:y,helperText:x,errorMessage:f}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},k=(0,n.qC)((0,p.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[s,h,u],fontFamily:[u,x,f],labelTextColor:{...u,property:"color"},labelSpacing:{...u,property:"padding-left"},labelLineHeight:{...u,property:"line-height"},labelFontWeight:{...u,property:"font-weight"},labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...b,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"},{...b,property:"font-size"},{...d,property:"font-size"}]}}),p.e4,(0,p.dj)({proxyProps:["value","selectionStart"]}),p.Ae,i.h)((0,p.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${l.Z}\n ${(0,c.bi)(k.cssVarList)}\n \n :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n }\n\n vaadin-text-field {\n width: 100%;\n }\n\n descope-boolean-field-internal {\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n height: 100%;\n }\n\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n }\n\n vaadin-checkbox::part(checkbox)::after {\n top: 0;\n left: 0;\n }\n `,excludeAttrsSync:["label","tabindex"],componentName:a}));r(9515),r(9789),r(6676),customElements.define(a,k)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4483],{9203:(t,e,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4483],{9203:(t,e,o)=>{o.r(e),o.d(e,{SwitchToggleClass:()=>f});var r=o(4567),n=o(2061),c=o(1e3),a=o(818),p=o(6882),i=o(4201);const l=(0,r.iY)("switch-toggle"),{host:s,component:d,checkboxElement:h,checkboxSurface:b,checkboxLabel:k,requiredIndicator:y,helperText:u,errorMessage:x}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},f=(0,n.qC)((0,c.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[d,k,k],fontFamily:[k,u,x],labelTextColor:{...k,property:"color"},labelSpacing:{...k,property:"padding-left"},labelLineHeight:{...k,property:"line-height"},labelFontWeight:{...k,property:"font-weight"},labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...x,property:"color"},trackBorderWidth:{...h,property:"border-width"},trackBorderStyle:{...h,property:"border-style"},trackBorderColor:{...h,property:"border-color"},trackBackgroundColor:{...h,property:"background-color"},trackBorderRadius:{...h,property:"border-radius"},trackWidth:[{...h,property:"width"}],trackHeight:[{...b,property:"font-size"},{...h,property:"height"}],knobSize:[{...b,property:"width"},{...b,property:"height"}],knobTextColor:{...b,property:"color"},knobRadius:{...b,property:"border-radius"},knobTransitionDuration:{...b,property:"transition"},knobColor:{...b,property:"background-color"},knobTopOffset:{...b,property:"top"},knobLeftOffset:{...b,property:"left"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"}}}),c.e4,(0,c.dj)({proxyProps:["value","selectionStart"]}),c.Ae,a.h)((0,c.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${p.Z}\n\t\t\t${(0,i.bi)(f.cssVarList)}\n\n :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n }\n\n descope-boolean-field-internal {\n\t\t\t\tpadding: 0;\n width: 100%;\n }\n\n vaadin-text-field::part(input-field) {\n cursor: pointer;\n }\n\n vaadin-checkbox {\n cursor: pointer;\n }\n\n vaadin-checkbox [slot="label"]:not(:empty) {\n cursor: pointer;\n\t\t\t}\n\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n\t\t\t}\n\n vaadin-checkbox::part(checkbox)::before {\n content: '';\n\t\t\t}\n\n vaadin-checkbox[active]::part(checkbox) {\n\t\t\t\ttransform: none;\n\t\t\t}\n\n vaadin-checkbox::part(checkbox)::after {\n\t\t\t\tposition: absolute;\n\t\t\t\topacity: 1;\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t`,excludeAttrsSync:["label","tabindex"],componentName:l}));o(9515),o(9789),o(6676),customElements.define(l,f)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),a=n(3547),i=n(2061),s=n(4567),o=n(4201);const d=(0,s.iY)("button-selection-group"),{host:l,label:p,requiredIndicator:c,internalWrapper:u,errorMessage:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-button-selection-group-internal slot"},errorMessage:{selector:"::part(error-message)"}},m=(0,i.qC)((0,r.yk)({mappings:{hostWidth:{...l,property:"width"},fontFamily:l,labelTextColor:[{...p,property:"color"},{...c,property:"color"}],labelRequiredIndicator:{...c,property:"content"},errorMessageTextColor:{...h,property:"color"},itemsSpacing:{...u,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{#t=({value:t,label:e})=>`<descope-button-selection-group-item value="${t}">${e}</descope-button-selection-group-item>`;#e;get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get size(){return this.inputElement?.size}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" - ',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f}\n\t\t\t\tname="button-selection-group"\n\t\t\t\tslot="input"\n tabindex="-1"\n\t\t\t>\n <slot></slot>\n </${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,s.oP)(this,this.inputElement,{includeAttrs:["size","default-value","allow-deselect"]}),this.renderItems(),(0,s.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,s.P$)(this,(({addedNodes:t})=>{t.forEach((t=>{t.setAttribute("size",this.size)}))}))}}))((0,r.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}\n\t\t\t${(0,o.DY)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n\t\t\tdescope-button-selection-group-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n display:inline-block;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t${(0,o.Pd)("vaadin-text-field")}\n `,excludeAttrsSync:["tabindex"],componentName:d}));n(8460),customElements.define(d,m)}}]);
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),a=n(3547),i=n(2061),s=n(4567),o=n(4201);const d=(0,s.iY)("button-selection-group"),{host:l,label:p,requiredIndicator:c,internalWrapper:u,errorMessage:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-button-selection-group-internal slot"},errorMessage:{selector:"::part(error-message)"}},m=(0,i.qC)((0,r.yk)({mappings:{hostWidth:{...l,property:"width"},fontFamily:l,labelTextColor:[{...p,property:"color"},{...c,property:"color"}],labelRequiredIndicator:{...c,property:"content"},errorMessageTextColor:{...h,property:"color"},itemsSpacing:{...u,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{#t=({value:t,label:e})=>`<descope-button-selection-group-item value="${t}">${e}</descope-button-selection-group-item>`;#e;get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get size(){return this.inputElement?.size}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" - ',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f}\n\t\t\t\tname="button-selection-group"\n\t\t\t\tslot="input"\n tabindex="-1"\n\t\t\t>\n <slot></slot>\n </${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,s.oP)(this,this.inputElement,{includeAttrs:["size","default-value","allow-deselect"]}),this.renderItems(),(0,s.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,s.P$)(this,(({addedNodes:t})=>{t.forEach((t=>{t.setAttribute("size",this.size)}))}))}}))((0,r.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}\n\t\t\t${(0,o.DY)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n\t\t\tdescope-button-selection-group-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n display: inline-block;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t${(0,o.Pd)("vaadin-text-field")}\n `,excludeAttrsSync:["tabindex"],componentName:d}));n(8460),customElements.define(d,m)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9483],{4049:(e,t,r)=>{r.d(t,{H:()=>g,f:()=>s});var o=r(2061),i=r(4567),a=r(4201),n=r(1e3);const s=(0,i.iY)("combo-box"),{host:l,inputField:d,inputElement:p,placeholder:c,toggle:u,label:h,requiredIndicator:m,helperText:b,errorMessage:y}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...l,property:"width"},fontSize:[{},l],fontFamily:[h,c,d,b,y],labelTextColor:[{...h,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...y,property:"color"},inputHeight:{...d,property:"height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:{...u,property:"cursor"},inputDropdownButtonColor:{...u,property:"color"},inputDropdownButtonSize:{...u,property:"font-size"},inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],overlayBackground:{property:()=>g.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>g.cssVarList.overlay.border},overlayFontSize:{property:()=>g.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>g.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>g.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>g.cssVarList.overlay.itemBoxShadow}}}),n.e4,(0,n.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"}},forward:{include:!1,attributes:["size"]}}),(0,n.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),n.Ae,(e=>class extends e{#e=({displayName:e,value:t,label:r})=>`<span data-name="${r}" data-id="${t}">${e}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){const e=this.getItemsTemplate();e&&(this.innerHTML=e)}handleSelectedItem(){const e=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,e&&(this.value=e),this.value||this.setDefaultValue()}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(r){if(!t.baseElement.items?.length)return;const o=t.customValueTransformFn(r)||"";o!==this.value&&e.set.call(this,o)}}})}#r(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),e.items=t,setTimeout((()=>{this.handleSelectedItem()}),0)),e.renderer=(e,t,r)=>{e.innerHTML=r.item.outerHTML}}#o(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.renderItems(),(0,i.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,i.P$)(this,this.#r.bind(this)),this.setDefaultValue()}setDefaultValue(){this.value=this.defaultValue}set value(e){if(e){const t=this.baseElement.items?.find((t=>t["data-id"]===e));t&&(this.baseElement.selectedItem=t)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,n.DM)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,a.bi)(g.cssVarList)}\n\t\t${(0,a.PH)("vaadin-combo-box")}\n\t\t${(0,a.jI)("vaadin-combo-box")}\n\t\t${(0,a.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(e,t,r)=>{r.r(t),r.d(t,{ComboBoxClass:()=>o.H}),r(1883);var o=r(4049);customElements.define(o.f,o.H)}}]);
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9483],{4049:(e,t,r)=>{r.d(t,{H:()=>g,f:()=>s});var o=r(2061),i=r(4567),a=r(4201),n=r(1e3);const s=(0,i.iY)("combo-box"),{host:l,inputField:d,inputElement:p,placeholder:c,toggle:u,label:h,requiredIndicator:m,helperText:b,errorMessage:y}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...l,property:"width"},fontSize:[{},l],fontFamily:[h,c,d,b,y],labelTextColor:[{...h,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...y,property:"color"},inputHeight:{...d,property:"height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:{...u,property:"cursor"},inputDropdownButtonColor:{...u,property:"color"},inputDropdownButtonSize:{...u,property:"font-size"},inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],overlayBackground:{property:()=>g.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>g.cssVarList.overlay.border},overlayFontSize:{property:()=>g.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>g.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>g.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>g.cssVarList.overlay.itemBoxShadow}}}),n.e4,(0,n.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"}},forward:{include:!1,attributes:["size"]}}),(0,n.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),n.Ae,(e=>class extends e{#e=({displayName:e,value:t,label:r})=>`<span data-name="${r}" data-id="${t}">${e||r}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){const e=this.getItemsTemplate();e&&(this.innerHTML=e)}handleSelectedItem(){const e=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,e&&(this.value=e),this.value||this.setDefaultValue()}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(r){if(!t.baseElement.items?.length)return;const o=t.customValueTransformFn(r)||"";o!==this.value&&e.set.call(this,o)}}})}#r(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),e.items=t,setTimeout((()=>{this.handleSelectedItem()}),0)),e.renderer=(e,t,r)=>{e.innerHTML=r.item.outerHTML}}#o(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.renderItems(),(0,i.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,i.P$)(this,this.#r.bind(this)),this.setDefaultValue()}setDefaultValue(){this.value=this.defaultValue}set value(e){if(e){const t=this.baseElement.items?.find((t=>t["data-id"]===e));t&&(this.baseElement.selectedItem=t)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,n.DM)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,a.bi)(g.cssVarList)}\n\t\t${(0,a.PH)("vaadin-combo-box")}\n\t\t${(0,a.jI)("vaadin-combo-box")}\n\t\t${(0,a.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(e,t,r)=>{r.r(t),r.d(t,{ComboBoxClass:()=>o.H}),r(1883);var o=r(4049);customElements.define(o.f,o.H)}}]);
|
package/package.json
CHANGED
@@ -11,7 +11,6 @@ ${resetInputFieldDefaultWidth()}
|
|
11
11
|
display: flex;
|
12
12
|
box-sizing: border-box;
|
13
13
|
}
|
14
|
-
|
15
14
|
vaadin-text-field {
|
16
15
|
position: relative;
|
17
16
|
padding: 0;
|
@@ -23,8 +22,8 @@ vaadin-text-field::before {
|
|
23
22
|
margin: 0;
|
24
23
|
}
|
25
24
|
vaadin-text-field::part(label) {
|
26
|
-
|
27
|
-
|
25
|
+
position: absolute;
|
26
|
+
top: 0;
|
28
27
|
}
|
29
28
|
vaadin-text-field::part(input-field) {
|
30
29
|
padding: 0;
|
@@ -32,37 +31,21 @@ vaadin-text-field::part(input-field) {
|
|
32
31
|
min-height: 0;
|
33
32
|
}
|
34
33
|
vaadin-text-field::part(input-field)::after {
|
35
|
-
|
34
|
+
background: none;
|
36
35
|
}
|
37
36
|
vaadin-text-field[focus-ring]::part(input-field) {
|
38
37
|
box-shadow: none;
|
39
38
|
}
|
40
39
|
|
41
40
|
vaadin-checkbox [slot="label"] {
|
42
|
-
|
43
|
-
|
44
|
-
padding: 0;
|
41
|
+
align-self: flex-start;
|
42
|
+
padding: 0;
|
45
43
|
}
|
46
|
-
[required] vaadin-checkbox [slot="label"] {
|
44
|
+
[required] vaadin-checkbox [slot="label"]:not(:empty) {
|
47
45
|
padding-right: 1em;
|
48
46
|
}
|
49
|
-
vaadin-checkbox::part(checkbox) {
|
50
|
-
margin: 0;
|
51
|
-
}
|
52
|
-
vaadin-checkbox[focus-ring]::part(checkbox) {
|
53
|
-
box-shadow: none;
|
54
|
-
}
|
55
|
-
|
56
47
|
descope-boolean-field-internal {
|
57
|
-
|
58
|
-
|
59
|
-
padding: 0;
|
60
|
-
}
|
61
|
-
|
62
|
-
[slot="label"],
|
63
|
-
vaadin-checkbox,
|
64
|
-
vaadin-checkbox::part(checkbox) {
|
65
|
-
height: 100%;
|
66
|
-
cursor: pointer;
|
48
|
+
-webkit-mask-image: none;
|
49
|
+
min-height: initial;
|
67
50
|
}
|
68
51
|
`;
|
@@ -18,19 +18,17 @@ const {
|
|
18
18
|
component,
|
19
19
|
checkboxElement,
|
20
20
|
checkboxSurface,
|
21
|
-
|
22
|
-
label,
|
21
|
+
checkboxLabel,
|
23
22
|
requiredIndicator,
|
24
23
|
helperText,
|
25
24
|
errorMessage,
|
26
25
|
} = {
|
27
26
|
host: { selector: () => ':host' },
|
28
|
-
|
29
|
-
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
27
|
+
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
30
28
|
component: { selector: 'vaadin-checkbox' },
|
31
29
|
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
32
30
|
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
33
|
-
|
31
|
+
checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
|
34
32
|
helperText: { selector: '::part(helper-text)' },
|
35
33
|
errorMessage: { selector: '::part(error-message)' },
|
36
34
|
};
|
@@ -40,25 +38,17 @@ export const CheckboxClass = compose(
|
|
40
38
|
mappings: {
|
41
39
|
hostWidth: { ...host, property: 'width' },
|
42
40
|
|
43
|
-
fontSize: [host, checkboxElement,
|
44
|
-
fontFamily: [
|
41
|
+
fontSize: [host, checkboxElement, checkboxLabel],
|
42
|
+
fontFamily: [checkboxLabel, helperText, errorMessage],
|
45
43
|
|
46
|
-
labelTextColor:
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
],
|
44
|
+
labelTextColor: { ...checkboxLabel, property: 'color' },
|
45
|
+
labelSpacing: { ...checkboxLabel, property: 'padding-left' },
|
46
|
+
labelLineHeight: { ...checkboxLabel, property: 'line-height' },
|
47
|
+
labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
|
51
48
|
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
49
|
+
|
52
50
|
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
53
51
|
|
54
|
-
labelFontWeight: [
|
55
|
-
{ ...label, property: 'font-weight' },
|
56
|
-
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
57
|
-
],
|
58
|
-
labelSpacing: [
|
59
|
-
{ ...label, property: 'left' },
|
60
|
-
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
61
|
-
],
|
62
52
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
63
53
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
64
54
|
|
@@ -78,9 +68,6 @@ export const CheckboxClass = compose(
|
|
78
68
|
{ ...checkboxElement, property: 'height' },
|
79
69
|
{ ...checkboxSurface, property: 'font-size' },
|
80
70
|
{ ...component, property: 'font-size' },
|
81
|
-
{ ...checkboxHiddenLabel, property: 'line-height' },
|
82
|
-
{ ...label, property: 'margin-left' },
|
83
|
-
{ ...label, property: 'line-height' },
|
84
71
|
],
|
85
72
|
},
|
86
73
|
}),
|
@@ -94,17 +81,33 @@ export const CheckboxClass = compose(
|
|
94
81
|
wrappedEleName: 'vaadin-text-field',
|
95
82
|
style: () => `
|
96
83
|
${commonStyles}
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
84
|
+
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
85
|
+
|
86
|
+
:host {
|
87
|
+
display: inline-flex;
|
88
|
+
max-width: 100%;
|
89
|
+
}
|
101
90
|
|
102
|
-
vaadin-text-field
|
103
|
-
width:
|
91
|
+
vaadin-text-field {
|
92
|
+
width: 100%;
|
93
|
+
}
|
94
|
+
|
95
|
+
descope-boolean-field-internal {
|
96
|
+
padding: 0;
|
97
|
+
width: 100%;
|
98
|
+
height: 100%;
|
99
|
+
}
|
100
|
+
|
101
|
+
vaadin-checkbox::part(checkbox) {
|
102
|
+
margin: 0;
|
103
|
+
}
|
104
|
+
|
105
|
+
vaadin-checkbox::part(checkbox)::after {
|
106
|
+
top: 0;
|
107
|
+
left: 0;
|
104
108
|
}
|
105
|
-
|
106
|
-
|
107
|
-
excludeAttrsSync: ['tabindex'],
|
109
|
+
`,
|
110
|
+
excludeAttrsSync: ['label', 'tabindex'],
|
108
111
|
componentName,
|
109
112
|
})
|
110
113
|
);
|
@@ -18,19 +18,17 @@ const {
|
|
18
18
|
component,
|
19
19
|
checkboxElement: track,
|
20
20
|
checkboxSurface: knob,
|
21
|
-
|
22
|
-
label,
|
21
|
+
checkboxLabel,
|
23
22
|
requiredIndicator,
|
24
23
|
helperText,
|
25
24
|
errorMessage,
|
26
25
|
} = {
|
27
26
|
host: { selector: () => ':host' },
|
28
|
-
|
29
|
-
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
27
|
+
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
30
28
|
component: { selector: 'vaadin-checkbox' },
|
31
29
|
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
32
30
|
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
33
|
-
|
31
|
+
checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
|
34
32
|
helperText: { selector: '::part(helper-text)' },
|
35
33
|
errorMessage: { selector: '::part(error-message)' },
|
36
34
|
};
|
@@ -39,8 +37,18 @@ export const SwitchToggleClass = compose(
|
|
39
37
|
createStyleMixin({
|
40
38
|
mappings: {
|
41
39
|
hostWidth: { ...host, property: 'width' },
|
42
|
-
|
43
|
-
|
40
|
+
|
41
|
+
fontSize: [component, checkboxLabel, checkboxLabel],
|
42
|
+
fontFamily: [checkboxLabel, helperText, errorMessage],
|
43
|
+
|
44
|
+
labelTextColor: { ...checkboxLabel, property: 'color' },
|
45
|
+
labelSpacing: { ...checkboxLabel, property: 'padding-left' },
|
46
|
+
labelLineHeight: { ...checkboxLabel, property: 'line-height' },
|
47
|
+
labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
|
48
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
49
|
+
|
50
|
+
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
51
|
+
|
44
52
|
trackBorderWidth: { ...track, property: 'border-width' },
|
45
53
|
trackBorderStyle: { ...track, property: 'border-style' },
|
46
54
|
trackBorderColor: { ...track, property: 'border-color' },
|
@@ -63,25 +71,6 @@ export const SwitchToggleClass = compose(
|
|
63
71
|
knobTopOffset: { ...knob, property: 'top' },
|
64
72
|
knobLeftOffset: { ...knob, property: 'left' },
|
65
73
|
|
66
|
-
labelSpacing: [
|
67
|
-
{ ...label, property: 'padding-left' },
|
68
|
-
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
69
|
-
],
|
70
|
-
labelLineHeight: [
|
71
|
-
{ ...label, property: 'line-height' },
|
72
|
-
{ ...checkboxHiddenLabel, property: 'line-height' },
|
73
|
-
],
|
74
|
-
labelFontWeight: [
|
75
|
-
{ ...label, property: 'font-weight' },
|
76
|
-
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
77
|
-
],
|
78
|
-
labelTextColor: [
|
79
|
-
{ ...label, property: 'color' },
|
80
|
-
{ ...requiredIndicator, property: 'color' },
|
81
|
-
{ ...label, property: '-webkit-text-fill-color' },
|
82
|
-
],
|
83
|
-
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
84
|
-
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
85
74
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
86
75
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
87
76
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
@@ -99,21 +88,48 @@ export const SwitchToggleClass = compose(
|
|
99
88
|
style: () => `
|
100
89
|
${commonStyles}
|
101
90
|
${useHostExternalPadding(SwitchToggleClass.cssVarList)}
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
91
|
+
|
92
|
+
:host {
|
93
|
+
display: inline-flex;
|
94
|
+
max-width: 100%;
|
95
|
+
}
|
96
|
+
|
97
|
+
descope-boolean-field-internal {
|
98
|
+
padding: 0;
|
99
|
+
width: 100%;
|
100
|
+
}
|
101
|
+
|
102
|
+
vaadin-text-field::part(input-field) {
|
103
|
+
cursor: pointer;
|
104
|
+
}
|
105
|
+
|
106
|
+
vaadin-checkbox {
|
107
|
+
cursor: pointer;
|
108
|
+
}
|
109
|
+
|
110
|
+
vaadin-checkbox [slot="label"]:not(:empty) {
|
111
|
+
cursor: pointer;
|
106
112
|
}
|
107
|
-
|
113
|
+
|
114
|
+
vaadin-checkbox::part(checkbox) {
|
115
|
+
margin: 0;
|
116
|
+
}
|
117
|
+
|
118
|
+
vaadin-checkbox::part(checkbox)::before {
|
119
|
+
content: '';
|
120
|
+
}
|
121
|
+
|
122
|
+
vaadin-checkbox[active]::part(checkbox) {
|
108
123
|
transform: none;
|
109
124
|
}
|
110
|
-
|
125
|
+
|
126
|
+
vaadin-checkbox::part(checkbox)::after {
|
111
127
|
position: absolute;
|
112
128
|
opacity: 1;
|
113
129
|
content: '';
|
114
130
|
}
|
115
131
|
`,
|
116
|
-
excludeAttrsSync: ['tabindex'],
|
132
|
+
excludeAttrsSync: ['label', 'tabindex'],
|
117
133
|
componentName,
|
118
134
|
})
|
119
135
|
);
|
@@ -25,7 +25,7 @@ const ComboBoxMixin = (superclass) =>
|
|
25
25
|
class ComboBoxMixinClass extends superclass {
|
26
26
|
// eslint-disable-next-line class-methods-use-this
|
27
27
|
#renderItem = ({ displayName, value, label }) => {
|
28
|
-
return `<span data-name="${label}" data-id="${value}">${displayName}</span>`;
|
28
|
+
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
29
29
|
};
|
30
30
|
|
31
31
|
#data;
|
@@ -2,6 +2,7 @@ import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/
|
|
2
2
|
import { refs } from './inputWrapper';
|
3
3
|
|
4
4
|
const vars = CheckboxClass.cssVarList;
|
5
|
+
const checkboxSize = '1.35em';
|
5
6
|
|
6
7
|
const checkbox = {
|
7
8
|
[vars.hostWidth]: refs.width,
|
@@ -10,7 +11,8 @@ const checkbox = {
|
|
10
11
|
[vars.labelTextColor]: refs.labelTextColor,
|
11
12
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
12
13
|
[vars.labelFontWeight]: '400',
|
13
|
-
[vars.
|
14
|
+
[vars.labelLineHeight]: checkboxSize,
|
15
|
+
[vars.labelSpacing]: '1em',
|
14
16
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
15
17
|
[vars.inputOutlineWidth]: refs.outlineWidth,
|
16
18
|
[vars.inputOutlineOffset]: refs.outlineOffset,
|
@@ -21,7 +23,7 @@ const checkbox = {
|
|
21
23
|
[vars.inputBorderWidth]: refs.borderWidth,
|
22
24
|
[vars.inputBorderStyle]: refs.borderStyle,
|
23
25
|
[vars.inputBackgroundColor]: refs.backgroundColor,
|
24
|
-
[vars.inputSize]:
|
26
|
+
[vars.inputSize]: checkboxSize,
|
25
27
|
|
26
28
|
_checked: {
|
27
29
|
[vars.inputValueTextColor]: refs.valueTextColor,
|
@@ -10,6 +10,7 @@ const globalRefs = getThemeRefs(globals);
|
|
10
10
|
const vars = SwitchToggleClass.cssVarList;
|
11
11
|
|
12
12
|
const switchToggle = {
|
13
|
+
[vars.hostWidth]: refs.width,
|
13
14
|
[vars.fontSize]: refs.fontSize,
|
14
15
|
[vars.fontFamily]: refs.fontFamily,
|
15
16
|
|
@@ -35,13 +36,11 @@ const switchToggle = {
|
|
35
36
|
|
36
37
|
[vars.labelTextColor]: refs.labelTextColor,
|
37
38
|
[vars.labelFontWeight]: '400',
|
38
|
-
[vars.labelLineHeight]:
|
39
|
-
[vars.labelSpacing]: '
|
39
|
+
[vars.labelLineHeight]: '1.35em',
|
40
|
+
[vars.labelSpacing]: '1em',
|
40
41
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
41
42
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
42
43
|
|
43
|
-
[vars.hostWidth]: refs.width,
|
44
|
-
|
45
44
|
_checked: {
|
46
45
|
[vars.trackBorderColor]: refs.borderColor,
|
47
46
|
[vars.trackBackgroundColor]: refs.backgroundColor,
|