@descope/web-components-ui 1.0.227 → 1.0.228
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +21 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +37 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4803.js +1 -1
- package/dist/umd/boolean-fields-descope-boolean-field-internal-index-js.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-grid-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/booleanFieldMixin.js +9 -1
- package/src/components/boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js +16 -0
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +4 -0
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +8 -0
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}\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
|
+
"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","readonly"]}),(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([[769],{1250:(e,t,s)=>{s.d(t,{Z:()=>r,f:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[769],{1250:(e,t,s)=>{s.d(t,{Z:()=>r,f:()=>n});var i=s(3878),c=s(4567);const n=(0,c.iY)("boolean-field-internal"),a=["disabled","label","invalid","readonly"],h=(0,i.P)({componentName:n,baseSelector:"div"}),r=class extends h{static get observedAttributes(){return["readonly"]}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,c.oP)(this,this.checkbox,{includeAttrs:a}),(0,c.tg)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"readonly"===e&&this.onReadOnlyChange(null!==s)}onReadOnlyChange(e){this.baseElement.setAttribute("inert",e)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},6676:(e,t,s)=>{s.r(t);var i=s(1250);customElements.define(i.f,i.Z)}}]);
|
@@ -1 +1 @@
|
|
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),
|
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),a=r(4201);const c=(0,o.iY)("checkbox"),{host:d,component:s,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:{...d,property:"width"},fontSize:[d,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"},{...s,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,a.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\n vaadin-text-field::part(input-field)::after {\n content: none;\n }\n `,excludeAttrsSync:["label","tabindex"],componentName:c}));r(3092),r(9789),r(6676),customElements.define(c,k)}}]);
|
@@ -1 +1 @@
|
|
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),
|
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),a=o(1e3),c=o(818),i=o(6882),p=o(4201);const l=(0,r.iY)("switch-toggle"),{host:d,component:s,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,a.yk)({mappings:{hostWidth:{...d,property:"width"},fontSize:[s,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"}}}),a.e4,(0,a.dj)({proxyProps:["value","selectionStart"]}),a.Ae,c.h)((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${i.Z}\n\t\t\t${(0,p.bi)(f.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 vaadin-text-field::part(input-field)::after {\n content: none;\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(3092),o(9789),o(6676),customElements.define(l,f)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,769,3726,9662,7487,1383,3705,4803],{818:(t,e,n)=>{n.d(e,{h:()=>i});var r=n(4567),o=n(1250);const i=t=>class extends t{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,r.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled"]}),(0,r.Db)(this.inputElement,this,["checked"]),(0,r.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(t,e,n)=>{n.d(e,{Z:()=>r});const r=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,n(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`},1250:(t,e,n)=>{n.d(e,{Z:()=>l,f:()=>i});var r=n(3878),o=n(4567);const i=(0,o.iY)("boolean-field-internal"),s=["disabled","label","invalid","readonly"],a=(0,r.P)({componentName:i,baseSelector:"div"}),l=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(t){this.checkbox.checked=t}get checked(){return this.value}set checked(t){this.value=t}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.checkbox.focus()})),super.init?.(),(0,o.oP)(this,this.checkbox,{includeAttrs:s}),(0,o.tg)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},6676:(t,e,n)=>{n.r(e);var r=n(1250);customElements.define(r.f,r.Z)},3483:(t,e,n)=>{n.r(e),n.d(e,{CheckboxClass:()=>x});var r=n(4567),o=n(2061),i=n(1e3),s=n(818),a=n(6882),l=n(4201);const d=(0,r.iY)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:m,requiredIndicator:b,helperText:g,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)"}},x=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...c,property:"width"},fontSize:[c,h,m],fontFamily:[m,g,f],labelTextColor:{...m,property:"color"},labelSpacing:{...m,property:"padding-left"},labelLineHeight:{...m,property:"line-height"},labelFontWeight:{...m,property:"font-weight"},labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...f,property:"color"},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"},{...p,property:"font-size"}]}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,s.h)((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n ${(0,l.bi)(x.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:d}));n(3092),n(9789),n(6676),customElements.define(d,x)},9690:(t,e,n)=>{n.d(e,{n:()=>c,f:()=>s});var r=n(2061),o=n(4567),i=n(1e3);const s=(0,o.iY)("button"),{host:a,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const c=(0,r.qC)((0,i.yk)({mappings:{hostWidth:{...a,property:"width"},hostHeight:{property:"height"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),i.e4,i.Ae)((0,i.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s})),{color:p,fontSize:h}=c.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${h}) / 2));\n\t\tleft: calc(50% - (var(${h}) / 2));\n\t\tborder-width: calc(var(${h}) / 10);\n\t\twidth: var(${h});\n\t\theight: var(${h});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},2018:(t,e,n)=>{n.r(e),n.d(e,{ButtonClass:()=>r.n}),n(729);var r=n(9690);customElements.define(r.f,r.n)},426:(t,e,n)=>{n.r(e),n.d(e,{GridSelectionColumnClass:()=>a,componentName:()=>o});var r=n(9629);n(3483);const o=(0,n(4567).iY)("grid-selection-column"),i=()=>{const t=document.createElement("descope-checkbox");return t.setAttribute("bordered","true"),t.setAttribute("size","xs"),t},s=t=>t.selectedItems.length===t.items?.length;class a extends r.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(t){const e=t.parentNode;let n=t.querySelector("descope-checkbox");n||(n=i(),n.addEventListener("input",(()=>{const t=s(e);e.selectedItems=t?[]:e.items})),t.appendChild(n)),n.setAttribute("checked",s(e))}_defaultRenderer(t,e,n){const r=t.parentNode;let o=t.querySelector("descope-checkbox");o||(o=i(),t.appendChild(o)),o.onchange=()=>{o.checked?r.selectItem(n.item):r.deselectItem(n.item)},o.setAttribute("checked",n.selected)}}customElements.define(o,a)},830:(t,e,n)=>{n.r(e),n.d(e,{GridStatusColumnClass:()=>i,componentName:()=>o});var r=n(6551);const o=(0,n(4567).iY)("grid-status-column");class i extends r.C{_defaultRenderer(t,e,n){const r=this.getAttribute("status");if(!r)return void(t.innerHTML=n.item[this.path]);const[o,i]=r.split(","),s=n.item[this.path]?o:i;t.innerHTML=`<div style="padding:0 0.25em; border-radius:4px; background:${n.item[this.path]?"lightgreen":"pink"};">${s}</div>`}}customElements.define(o,i)},2356:(t,e,n)=>{n.r(e),n.d(e,{GridTextColumnClass:()=>i,componentName:()=>o});var r=n(6551);n(2018);const o=(0,n(4567).iY)("grid-text-column");class i extends r.C{}customElements.define(o,i)},9950:(t,e,n)=>{n.r(e),n.d(e,{GridClass:()=>f}),n(2873),n(2356),n(830),n(426);var r=n(2061),o=n(4567),i=n(1e3);const s=t=>{const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e},a=(0,o.iY)("grid"),{host:l,headerRow:d,contentRow:c,firstRow:p,sortIndicators:h,activeSortIndicator:u,selectedRow:m,rowSeparator:b,resizeHandle:g}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::part(header-cell)"},contentRow:{selector:()=>"::part(cell)"},firstRow:{selector:()=>"::part(first-header-row-cell)"},selectedRow:{selector:()=>"::part(selected-row-cell)"},sortIndicators:{selector:()=>"vaadin-grid-sorter::part(indicators)"},activeSortIndicator:{selector:()=>"vaadin-grid-sorter[direction]"},rowSeparator:{selector:()=>"vaadin-grid::part(body-cell)"},resizeHandle:{selector:()=>"::part(resize-handle)"}},f=(0,r.qC)((0,i.yk)({componentNameOverride:(0,o.iY)("input-wrapper")}),(0,i.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...d},{...c}],fontSize:[{...d},{...c}],fontWeight:{...c},valueTextColor:{...c,property:"color"},sortIndicatorsColor:{...h,property:"color"},activeSortIndicator:{...u,property:"color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...m,property:"background-color"},selectedTextColor:{...m,property:"color"},separatorColor:[{...p,property:"border-bottom-color"},{...b,property:"border-top-color"}],resizeHandleColor:{...g,property:"background-color"}}}),i.e4,i.Ae,(t=>class extends t{#t;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange()}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(t=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:t.detail}))}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"columns"===t&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#t=Array.from(this.children).map((t=>({path:t.getAttribute("path"),header:t.getAttribute("header"),type:t.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((e,n)=>{const r=t.getAttribute(n);return r&&(e[n]=r),e}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const t=JSON.parse(this.columnsAttr);s(t)&&(this.columns=t)}catch(t){console.error('could not parse data string from attribute "columns" -',t.message)}}#e=({path:t,header:e,type:n,attrs:r})=>{const o=`descope-grid-${n}-column`;return`<${o} header="${e}" path="${t}" ${Object.entries(r).map((([t,e])=>`${t}="${e}"`)).join(" ")}></${o}>`};get renderColumn(){return this.#e}set renderColumn(t){this.#e=t,this.renderColumns()}getColumnsTemplate(){return this.#t?.reduce?.(((t,e)=>t+(this.renderColumn?.(e||{})||"")),"")}renderColumns(){const t=this.getColumnsTemplate();t&&(this.innerHTML=t)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(t){if(s(t)&&this.grid.items!==t&&(this.grid.items=t,this.grid.selectedItems)){const t=new Set(this.grid.items.map((t=>t[this.uniqueColumnId]??t)));this.grid.selectedItems=this.grid.selectedItems.filter((e=>t.has(e[this.uniqueColumnId]??e)))}}get columns(){return this.#t}set columns(t){this.#t=t,this.renderColumns()}get paths(){return this.columns.map((t=>t.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,i.DM)({slots:[""],wrappedEleName:"vaadin-grid",style:()=>"\n vaadin-grid {\n overflow: hidden;\n height: 100%;\n min-height: 300px;\n }\n vaadin-grid-cell-content {\n display: flex;\n }\n\t\t",excludeAttrsSync:["columns","tabindex"],componentName:a}));customElements.define(a,f)}}]);
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,769,3726,9662,7487,1383,3705,4803],{818:(t,e,n)=>{n.d(e,{h:()=>i});var r=n(4567),o=n(1250);const i=t=>class extends t{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,r.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,r.Db)(this.inputElement,this,["checked"]),(0,r.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(t,e,n)=>{n.d(e,{Z:()=>r});const r=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,n(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`},1250:(t,e,n)=>{n.d(e,{Z:()=>l,f:()=>i});var r=n(3878),o=n(4567);const i=(0,o.iY)("boolean-field-internal"),s=["disabled","label","invalid","readonly"],a=(0,r.P)({componentName:i,baseSelector:"div"}),l=class extends a{static get observedAttributes(){return["readonly"]}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(t){this.checkbox.checked=t}get checked(){return this.value}set checked(t){this.value=t}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.checkbox.focus()})),super.init?.(),(0,o.oP)(this,this.checkbox,{includeAttrs:s}),(0,o.tg)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"readonly"===t&&this.onReadOnlyChange(null!==n)}onReadOnlyChange(t){this.baseElement.setAttribute("inert",t)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},6676:(t,e,n)=>{n.r(e);var r=n(1250);customElements.define(r.f,r.Z)},3483:(t,e,n)=>{n.r(e),n.d(e,{CheckboxClass:()=>y});var r=n(4567),o=n(2061),i=n(1e3),s=n(818),a=n(6882),l=n(4201);const d=(0,r.iY)("checkbox"),{host:c,component:h,checkboxElement:p,checkboxSurface:u,checkboxLabel:b,requiredIndicator:m,helperText:g,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)"}},y=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...c,property:"width"},fontSize:[c,p,b],fontFamily:[b,g,f],labelTextColor:{...b,property:"color"},labelSpacing:{...b,property:"padding-left"},labelLineHeight:{...b,property:"line-height"},labelFontWeight:{...b,property:"font-weight"},labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...p,property:"background-color"},inputBorderRadius:{...p,property:"border-radius"},inputBorderWidth:{...p,property:"border-width"},inputBorderOffset:{...p,property:"border-offset"},inputBorderColor:{...p,property:"border-color"},inputBorderStyle:{...p,property:"border-style"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineOffset:{...p,property:"outline-offset"},inputOutlineColor:{...p,property:"outline-color"},inputOutlineStyle:{...p,property:"outline-style"},inputSize:[{...p,property:"width"},{...p,property:"height"},{...u,property:"font-size"},{...h,property:"font-size"}]}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,s.h)((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n ${(0,l.bi)(y.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\n vaadin-text-field::part(input-field)::after {\n content: none;\n }\n `,excludeAttrsSync:["label","tabindex"],componentName:d}));n(3092),n(9789),n(6676),customElements.define(d,y)},9690:(t,e,n)=>{n.d(e,{n:()=>c,f:()=>s});var r=n(2061),o=n(4567),i=n(1e3);const s=(0,o.iY)("button"),{host:a,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const c=(0,r.qC)((0,i.yk)({mappings:{hostWidth:{...a,property:"width"},hostHeight:{property:"height"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),i.e4,i.Ae)((0,i.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s})),{color:h,fontSize:p}=c.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${h});\n\t\ttop: calc(50% - (var(${p}) / 2));\n\t\tleft: calc(50% - (var(${p}) / 2));\n\t\tborder-width: calc(var(${p}) / 10);\n\t\twidth: var(${p});\n\t\theight: var(${p});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},2018:(t,e,n)=>{n.r(e),n.d(e,{ButtonClass:()=>r.n}),n(729);var r=n(9690);customElements.define(r.f,r.n)},426:(t,e,n)=>{n.r(e),n.d(e,{GridSelectionColumnClass:()=>a,componentName:()=>o});var r=n(9629);n(3483);const o=(0,n(4567).iY)("grid-selection-column"),i=()=>{const t=document.createElement("descope-checkbox");return t.setAttribute("bordered","true"),t.setAttribute("size","xs"),t},s=t=>t.selectedItems.length===t.items?.length;class a extends r.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(t){const e=t.parentNode;let n=t.querySelector("descope-checkbox");n||(n=i(),n.addEventListener("input",(()=>{const t=s(e);e.selectedItems=t?[]:e.items})),t.appendChild(n)),n.setAttribute("checked",s(e))}_defaultRenderer(t,e,n){const r=t.parentNode;let o=t.querySelector("descope-checkbox");o||(o=i(),t.appendChild(o)),o.onchange=()=>{o.checked?r.selectItem(n.item):r.deselectItem(n.item)},o.setAttribute("checked",n.selected)}}customElements.define(o,a)},830:(t,e,n)=>{n.r(e),n.d(e,{GridStatusColumnClass:()=>i,componentName:()=>o});var r=n(6551);const o=(0,n(4567).iY)("grid-status-column");class i extends r.C{_defaultRenderer(t,e,n){const r=this.getAttribute("status");if(!r)return void(t.innerHTML=n.item[this.path]);const[o,i]=r.split(","),s=n.item[this.path]?o:i;t.innerHTML=`<div style="padding:0 0.25em; border-radius:4px; background:${n.item[this.path]?"lightgreen":"pink"};">${s}</div>`}}customElements.define(o,i)},2356:(t,e,n)=>{n.r(e),n.d(e,{GridTextColumnClass:()=>i,componentName:()=>o});var r=n(6551);n(2018);const o=(0,n(4567).iY)("grid-text-column");class i extends r.C{}customElements.define(o,i)},9950:(t,e,n)=>{n.r(e),n.d(e,{GridClass:()=>f}),n(2873),n(2356),n(830),n(426);var r=n(2061),o=n(4567),i=n(1e3);const s=t=>{const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e},a=(0,o.iY)("grid"),{host:l,headerRow:d,contentRow:c,firstRow:h,sortIndicators:p,activeSortIndicator:u,selectedRow:b,rowSeparator:m,resizeHandle:g}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::part(header-cell)"},contentRow:{selector:()=>"::part(cell)"},firstRow:{selector:()=>"::part(first-header-row-cell)"},selectedRow:{selector:()=>"::part(selected-row-cell)"},sortIndicators:{selector:()=>"vaadin-grid-sorter::part(indicators)"},activeSortIndicator:{selector:()=>"vaadin-grid-sorter[direction]"},rowSeparator:{selector:()=>"vaadin-grid::part(body-cell)"},resizeHandle:{selector:()=>"::part(resize-handle)"}},f=(0,r.qC)((0,i.yk)({componentNameOverride:(0,o.iY)("input-wrapper")}),(0,i.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...d},{...c}],fontSize:[{...d},{...c}],fontWeight:{...c},valueTextColor:{...c,property:"color"},sortIndicatorsColor:{...p,property:"color"},activeSortIndicator:{...u,property:"color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...b,property:"background-color"},selectedTextColor:{...b,property:"color"},separatorColor:[{...h,property:"border-bottom-color"},{...m,property:"border-top-color"}],resizeHandleColor:{...g,property:"background-color"}}}),i.e4,i.Ae,(t=>class extends t{#t;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange()}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(t=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:t.detail}))}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"columns"===t&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#t=Array.from(this.children).map((t=>({path:t.getAttribute("path"),header:t.getAttribute("header"),type:t.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((e,n)=>{const r=t.getAttribute(n);return r&&(e[n]=r),e}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const t=JSON.parse(this.columnsAttr);s(t)&&(this.columns=t)}catch(t){console.error('could not parse data string from attribute "columns" -',t.message)}}#e=({path:t,header:e,type:n,attrs:r})=>{const o=`descope-grid-${n}-column`;return`<${o} header="${e}" path="${t}" ${Object.entries(r).map((([t,e])=>`${t}="${e}"`)).join(" ")}></${o}>`};get renderColumn(){return this.#e}set renderColumn(t){this.#e=t,this.renderColumns()}getColumnsTemplate(){return this.#t?.reduce?.(((t,e)=>t+(this.renderColumn?.(e||{})||"")),"")}renderColumns(){const t=this.getColumnsTemplate();t&&(this.innerHTML=t)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(t){if(s(t)&&this.grid.items!==t&&(this.grid.items=t,this.grid.selectedItems)){const t=new Set(this.grid.items.map((t=>t[this.uniqueColumnId]??t)));this.grid.selectedItems=this.grid.selectedItems.filter((e=>t.has(e[this.uniqueColumnId]??e)))}}get columns(){return this.#t}set columns(t){this.#t=t,this.renderColumns()}get paths(){return this.columns.map((t=>t.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,i.DM)({slots:[""],wrappedEleName:"vaadin-grid",style:()=>"\n vaadin-grid {\n overflow: hidden;\n height: 100%;\n min-height: 300px;\n }\n vaadin-grid-cell-content {\n display: flex;\n }\n\t\t",excludeAttrsSync:["columns","tabindex"],componentName:a}));customElements.define(a,f)}}]);
|
package/package.json
CHANGED
@@ -19,7 +19,15 @@ export const booleanFieldMixin = (superclass) =>
|
|
19
19
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
20
20
|
|
21
21
|
forwardAttrs(this, this.inputElement, {
|
22
|
-
includeAttrs: [
|
22
|
+
includeAttrs: [
|
23
|
+
'required',
|
24
|
+
'full-width',
|
25
|
+
'size',
|
26
|
+
'label',
|
27
|
+
'invalid',
|
28
|
+
'disabled',
|
29
|
+
'readonly',
|
30
|
+
],
|
23
31
|
});
|
24
32
|
|
25
33
|
forwardProps(this.inputElement, this, ['checked']);
|
package/src/components/boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js
CHANGED
@@ -8,6 +8,10 @@ const forwardAttributes = ['disabled', 'label', 'invalid', 'readonly'];
|
|
8
8
|
const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
|
9
9
|
|
10
10
|
class BooleanInputInternal extends BaseInputClass {
|
11
|
+
static get observedAttributes() {
|
12
|
+
return ['readonly'];
|
13
|
+
}
|
14
|
+
|
11
15
|
constructor() {
|
12
16
|
super();
|
13
17
|
this.innerHTML = `
|
@@ -50,6 +54,18 @@ class BooleanInputInternal extends BaseInputClass {
|
|
50
54
|
this.handleFocusEventsDispatching([this.checkbox]);
|
51
55
|
}
|
52
56
|
|
57
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
58
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
59
|
+
|
60
|
+
if (attrName === 'readonly') {
|
61
|
+
this.onReadOnlyChange(newValue !== null);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
onReadOnlyChange(val) {
|
66
|
+
this.baseElement.setAttribute('inert', val);
|
67
|
+
}
|
68
|
+
|
53
69
|
getValidity() {
|
54
70
|
if (this.isRequired && !this.value) {
|
55
71
|
return { valueMissing: true };
|
@@ -94,6 +94,14 @@ export const SwitchToggleClass = compose(
|
|
94
94
|
max-width: 100%;
|
95
95
|
}
|
96
96
|
|
97
|
+
vaadin-text-field {
|
98
|
+
width: 100%;
|
99
|
+
}
|
100
|
+
|
101
|
+
vaadin-text-field::part(input-field)::after {
|
102
|
+
content: none;
|
103
|
+
}
|
104
|
+
|
97
105
|
descope-boolean-field-internal {
|
98
106
|
padding: 0;
|
99
107
|
width: 100%;
|