@descope/web-components-ui 1.0.237 → 1.0.239

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,3726,5988,7487,3705,7044],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>C});var o=r(4567),n=r(2061),s=r(1e3),i=r(818),a=r(6882),l=r(4201);const d=(0,o.iY)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:m,requiredIndicator:g,helperText:b,errorMessage:y}={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)"}},C=(0,n.qC)((0,s.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,h,m],fontFamily:[m,b,y],labelTextColor:{...m,property:"color"},labelSpacing:{...m,property:"padding-inline-start"},labelLineHeight:{...m,property:"line-height"},labelFontWeight:{...m,property:"font-weight"},labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...y,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"}]}}),s.e4,(0,s.dj)({proxyProps:["value","selectionStart"]}),s.Ae,i.h)((0,s.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n      ${(0,l.bi)(C.cssVarList)}\n\n      :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n      }\n\n      :host ::part(error-message) {\n        direction: ltr;\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}));r(3092),r(9789),r(6676),customElements.define(d,C)},9278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(4567),n=r(7044);class s extends n.C{_defaultRenderer(e,t,r){const o=r.item[this.path],n=Array.from(this.children).find((e=>{const t=e.getAttribute("pattern");return!t||new RegExp(t).test(o)}));if(!n)return void(e.innerHTML=r.item[this.path]);const s=n.cloneNode(!0);s.innerHTML=o,e.innerHTML="",e.append(s)}}const i=(0,o.iY)("grid-custom-column");customElements.define(i,s)},2238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l}),r(3483);var o=r(4567),n=r(8623);const s=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},i=e=>e.selectedItems.length===e.items?.length;class a extends n.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=s(),r.addEventListener("input",(()=>{const e=i(t);t.selectedItems=e?[]:t.items})),e.appendChild(r)),r.setAttribute("checked",i(t))}_defaultRenderer(e,t,r){const o=e.parentNode;let n=e.querySelector("descope-checkbox");n||(n=s(),e.appendChild(n)),n.onchange=()=>{n.checked?o.selectItem(r.item):o.deselectItem(r.item)},n.setAttribute("checked",r.selected)}}const l=(0,o.iY)("grid-selection-column");customElements.define(l,a)},7044:(e,t,r)=>{r.d(t,{C:()=>n});var o=r(322);class n extends o.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):e.innerHTML=this.__getHeader(this.header,this.path)}}},2356:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>s});var o=r(4567),n=r(7044);const s=(0,o.iY)("grid-text-column");customElements.define(s,n.C)},9950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>y}),r(849),r(2356),r(9278),r(2238);var o=r(2061),n=r(4567),s=r(1e3);const i=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},a=(0,n.iY)("grid"),{host:l,headerRow:d,contentRow:c,firstRow:p,sortIndicators:h,activeSortIndicator:u,selectedRow:m,rowSeparator:g,resizeHandle:b}={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)"}},y=(0,o.qC)((0,s.yk)({componentNameOverride:(0,n.iY)("input-wrapper")}),(0,s.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"},{...g,property:"border-top-color"}],resizeHandleColor:{...b,property:"background-color"}}}),s.e4,s.Ae,(e=>class extends e{#e;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{}}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(e=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:e.detail}))}))}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),"columns"===e&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#e=Array.from(this.children).map((e=>({path:e.getAttribute("path"),header:e.getAttribute("header"),type:e.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((t,r)=>{const o=e.getAttribute(r);return o&&(t[r]=o),t}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const e=JSON.parse(this.columnsAttr);i(e)&&(this.columns=e)}catch(e){console.error('could not parse data string from attribute "columns" -',e.message)}}#t=({path:e,header:t,type:r,attrs:o})=>{const n=`descope-grid-${r}-column`;return`<${n} header="${t}" path="${e}" ${Object.entries(o).map((([e,t])=>`${e}="${t}"`)).join(" ")}></${n}>`};get renderColumn(){return this.#t}set renderColumn(e){this.#t=e,this.renderColumns()}getColumnsTemplate(){return this.#e?.reduce?.(((e,t)=>e+(this.renderColumn?.(t||{})||"")),"")}renderColumns(){const e=this.getColumnsTemplate();e&&(this.innerHTML=e)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(e){if(i(e)&&this.grid.items!==e&&(this.grid.items=e,this.grid.selectedItems)){const e=new Set(this.grid.items.map((e=>e[this.uniqueColumnId]??e))),t=this.grid.selectedItems.filter((t=>e.has(t[this.uniqueColumnId]??t)));this.grid.selectedItems.length!==t.length&&(this.grid.selectedItems=t)}}get columns(){return this.#e}set columns(e){this.#e=e,this.renderColumns()}get paths(){return this.columns.map((e=>e.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,s.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,y)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,3726,5988,7487,3705,7044],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>C});var o=r(4567),n=r(2061),s=r(1e3),i=r(818),l=r(6882),a=r(4201);const d=(0,o.iY)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:m,requiredIndicator:g,helperText:b,errorMessage:y}={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)"}},C=(0,n.qC)((0,s.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,h,m],fontFamily:[m,b,y],labelTextColor:{...m,property:"color"},labelSpacing:{...m,property:"padding-inline-start"},labelLineHeight:{...m,property:"line-height"},labelFontWeight:{...m,property:"font-weight"},labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...y,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"}]}}),s.e4,(0,s.dj)({proxyProps:["value","selectionStart"]}),s.Ae,i.h)((0,s.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${l.Z}\n      ${(0,a.bi)(C.cssVarList)}\n\n      :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n      }\n\n      :host ::part(error-message) {\n        direction: ltr;\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}));r(3092),r(9789),r(6676),customElements.define(d,C)},9278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(4567),n=r(7044);class s extends n.C{_defaultRenderer(e,t,r){const o=r.item[this.path],n=Array.from(this.children).find((e=>{const t=e.getAttribute("pattern");return!t||new RegExp(t).test(o)}));if(!n)return void(e.innerHTML=r.item[this.path]);const s=n.cloneNode(!0);s.innerHTML=o,e.innerHTML="",e.append(s)}}const i=(0,o.iY)("grid-custom-column");customElements.define(i,s)},2238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>a}),r(3483);var o=r(4567),n=r(8623);const s=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},i=e=>e.selectedItems.length===e.items?.length;class l extends n.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=s(),r.addEventListener("input",(()=>{const e=i(t);t.selectedItems=e?[]:t.items})),e.appendChild(r)),r.setAttribute("checked",i(t))}_defaultRenderer(e,t,r){const o=e.parentNode;let n=e.querySelector("descope-checkbox");n||(n=s(),e.appendChild(n)),n.onchange=()=>{n.checked?o.selectItem(r.item):o.deselectItem(r.item)},n.setAttribute("checked",r.selected)}}const a=(0,o.iY)("grid-selection-column");customElements.define(a,l)},7044:(e,t,r)=>{r.d(t,{C:()=>n});var o=r(322);class n extends o.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):e.innerHTML=this.__getHeader(this.header,this.path)}}},2356:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>s});var o=r(4567),n=r(7044);const s=(0,o.iY)("grid-text-column");customElements.define(s,n.C)},9950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>C}),r(849),r(2356),r(9278),r(2238);var o=r(2061),n=r(4567),s=r(1e3);const i=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},l=(0,n.iY)("grid"),{host:a,headerRow:d,headerRowCell:c,contentRow:p,firstRow:h,sortIndicators:u,activeSortIndicator:m,selectedRow:g,rowSeparator:b,resizeHandle:y}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::part(header-cell)"},headerRowCell:{selector:()=>"vaadin-grid::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)"}},C=(0,o.qC)((0,s.yk)({componentNameOverride:(0,n.iY)("input-wrapper")}),(0,s.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...d},{...p}],fontSize:[{...d},{...p}],fontWeight:{...p},valueTextColor:{...p,property:"color"},backgroundColor:[{...a,property:"background-color"},{...p,property:"background-color"}],sortIndicatorsColor:{...u,property:"color"},activeSortIndicator:{...m,property:"color"},inputBorderColor:{...a,property:"border-color"},inputBorderWidth:{...a,property:"border-width"},inputBorderStyle:{...a,property:"border-style"},inputBorderRadius:{...a,property:"border-radius"},selectedBackgroundColor:{...g,property:"background-color"},selectedTextColor:{...g,property:"color"},headerRowTextColor:{...c,property:"color"},separatorColor:[{...h,property:"border-bottom-color"},{...b,property:"border-top-color"}],resizeHandleColor:{...y,property:"background-color"}}}),s.e4,s.Ae,(e=>class extends e{#e;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{}}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(e=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:e.detail}))}))}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),"columns"===e&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#e=Array.from(this.children).map((e=>({path:e.getAttribute("path"),header:e.getAttribute("header"),type:e.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((t,r)=>{const o=e.getAttribute(r);return o&&(t[r]=o),t}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const e=JSON.parse(this.columnsAttr);i(e)&&(this.columns=e)}catch(e){console.error('could not parse data string from attribute "columns" -',e.message)}}#t=({path:e,header:t,type:r,attrs:o})=>{const n=`descope-grid-${r}-column`;return`<${n} header="${t}" path="${e}" ${Object.entries(o).map((([e,t])=>`${e}="${t}"`)).join(" ")}></${n}>`};get renderColumn(){return this.#t}set renderColumn(e){this.#t=e,this.renderColumns()}getColumnsTemplate(){return this.#e?.reduce?.(((e,t)=>e+(this.renderColumn?.(t||{})||"")),"")}renderColumns(){const e=this.getColumnsTemplate();e&&(this.innerHTML=e)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(e){if(i(e)&&this.grid.items!==e&&(this.grid.items=e,this.grid.selectedItems)){const e=new Set(this.grid.items.map((e=>e[this.uniqueColumnId]??e))),t=this.grid.selectedItems.filter((t=>e.has(t[this.uniqueColumnId]??t)));this.grid.selectedItems.length!==t.length&&(this.grid.selectedItems=t)}}get columns(){return this.#e}set columns(e){this.#e=e,this.renderColumns()}get paths(){return this.columns.map((e=>e.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,s.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:l}));customElements.define(l,C)}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4641],{958:(e,t,o)=>{o.r(t),o.d(t,{ModalClass:()=>n}),o(1932);var s=o(2061),a=o(4567),r=o(1e3);const l=(0,a.iY)("modal"),n=(0,s.qC)((0,r.yk)({mappings:{overlayBackgroundColor:{property:()=>n.cssVarList.overlay.backgroundColor},overlayShadow:{property:()=>n.cssVarList.overlay.shadow},overlayWidth:{property:()=>n.cssVarList.overlay.width}}}),(0,r.Iw)({name:"overlay",selector:"",mappings:{hostDisplay:{selector:()=>":host(.descope-modal)",property:"display",important:!0},backgroundColor:{selector:()=>"::part(content)",property:"background-color"},width:{selector:()=>"::part(overlay)",property:"width"},shadow:{selector:()=>"::part(overlay)",property:"box-shadow"}},forward:{include:!1,attributes:["opened"]}}),r.e4,r.Ae,(e=>class extends e{get opened(){return"true"===this.getAttribute("opened")}handleOpened(){(0,a.oP)(this,this.baseElement,{includeAttrs:["opened"]}),this.opened?this.style.display="":this.style.display="none"}init(){super.init?.(),this.style.display="none",setTimeout((()=>{this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay").appendChild(document.createElement("slot")),this.#e(),this.handleOpened()}))}#e(){const e=this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay");e._attachOverlay=()=>{e.bringToFront(),this.baseElement.setAttribute("style","display:flex!important;")},e._detachOverlay=()=>{this.baseElement.style.display="none"},e._enterModalState=()=>{},e.close=()=>!1}}))((0,r.DM)({slots:[""],wrappedEleName:"vaadin-dialog",style:()=>"",excludeAttrsSync:["tabindex","opened"],componentName:l}));customElements.define(l,n)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4641],{958:(e,t,o)=>{o.r(t),o.d(t,{ModalClass:()=>n}),o(1932);var r=o(2061),s=o(4567),a=o(1e3);const l=(0,s.iY)("modal"),n=(0,r.qC)((0,a.yk)({mappings:{overlayBackgroundColor:{property:()=>n.cssVarList.overlay.backgroundColor},overlayShadow:{property:()=>n.cssVarList.overlay.shadow},overlayWidth:{property:()=>n.cssVarList.overlay.width}}}),(0,a.Iw)({name:"overlay",selector:"",mappings:{hostDisplay:{selector:()=>":host(.descope-modal)",property:"display",important:!0},backgroundColor:[{selector:()=>"::part(content)",property:"background-color"},{selector:()=>"::part(overlay)",property:"background-color"}],width:{selector:()=>"::part(overlay)",property:"width"},shadow:{selector:()=>"::part(overlay)",property:"box-shadow"}},forward:{include:!1,attributes:["opened"]}}),a.e4,a.Ae,(e=>class extends e{get opened(){return"true"===this.getAttribute("opened")}handleOpened(){(0,s.oP)(this,this.baseElement,{includeAttrs:["opened"]}),this.opened?this.style.display="":this.style.display="none"}init(){super.init?.(),this.style.display="none",setTimeout((()=>{this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay").appendChild(document.createElement("slot")),this.#e(),this.handleOpened()}))}#e(){const e=this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay");e._attachOverlay=()=>{e.bringToFront(),this.baseElement.setAttribute("style","display:flex!important;")},e._detachOverlay=()=>{this.baseElement.style.display="none"},e._enterModalState=()=>{},e.close=()=>!1}}))((0,a.DM)({slots:[""],wrappedEleName:"vaadin-dialog",style:()=>"",excludeAttrsSync:["tabindex","opened"],componentName:l}));customElements.define(l,n)}}]);

package/package.json

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

package/src/components/descope-grid/GridClass.js

@@ -171,6 +171,7 @@ const GridMixin = (superclass) =>
 const {
   host,
   headerRow,
+  headerRowCell,
   contentRow,
   firstRow,
   sortIndicators,
@@ -181,6 +182,7 @@ const {
 } = {
   host: { selector: () => 'vaadin-grid' },
   headerRow: { selector: () => '::part(header-cell)' },
+  headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
   contentRow: { selector: () => '::part(cell)' },
   firstRow: { selector: () => '::part(first-header-row-cell)' },
   selectedRow: { selector: () => '::part(selected-row-cell)' },
@@ -201,6 +203,10 @@ export const GridClass = compose(
       fontSize: [{ ...headerRow }, { ...contentRow }],
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
+      backgroundColor: [
+        { ...host, property: 'background-color' },
+        { ...contentRow, property: 'background-color' },
+      ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
       inputBorderColor: { ...host, property: 'border-color' },
@@ -209,6 +215,7 @@ export const GridClass = compose(
       inputBorderRadius: { ...host, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
       selectedTextColor: { ...selectedRow, property: 'color' },
+      headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
         { ...firstRow, property: 'border-bottom-color' },
         { ...rowSeparator, property: 'border-top-color' },

package/src/components/descope-modal/ModalClass.js

@@ -86,7 +86,10 @@ export const ModalClass = compose(
         property: 'display',
         important: true,
       },
-      backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
+      backgroundColor: [
+        { selector: () => '::part(content)', property: 'background-color' },
+        { selector: () => '::part(overlay)', property: 'background-color' },
+      ],
       width: { selector: () => '::part(overlay)', property: 'width' },
       shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
     },

package/src/theme/components/badge.js

@@ -18,7 +18,7 @@ const badge = {
   [vars.horizontalPadding]: '0.5em',
 
   [vars.borderWidth]: globalRefs.border.xs,
-  [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.borderRadius]: globalRefs.radius.xs,
   [vars.borderColor]: 'transparent',
   [vars.borderStyle]: 'solid',
 
@@ -53,9 +53,9 @@ const badge = {
       },
     },
     error: {
-      [vars.borderColor]: globalRefs.colors.error.light,
+      [vars.textColor]: globalRefs.colors.error.main,
       _bordered: {
-        [vars.textColor]: globalRefs.colors.error.main,
+        [vars.borderColor]: globalRefs.colors.error.light,
       },
     },
     success: {

package/src/theme/components/grid.js

@@ -10,12 +10,13 @@ export const grid = {
   [vars.hostWidth]: '100%',
   [vars.hostHeight]: '100%',
   [vars.hostMinHeight]: '400px',
+  [vars.backgroundColor]: globalRefs.colors.surface.light,
 
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
 
-  [vars.sortIndicatorsColor]: globalRefs.colors.primary.main,
-  [vars.activeSortIndicator]: globalRefs.colors.primary.main,
+  [vars.sortIndicatorsColor]: globalRefs.colors.surface.main,
+  [vars.activeSortIndicator]: globalRefs.colors.surface.dark,
   [vars.resizeHandleColor]: globalRefs.colors.surface.main,
 
   [vars.inputBorderWidth]: refs.borderWidth,
@@ -23,11 +24,11 @@ export const grid = {
   [vars.inputBorderRadius]: refs.borderRadius,
   [vars.inputBorderColor]: 'transparent',
 
-  [vars.separatorColor]: refs.borderColor,
+  [vars.headerRowTextColor]: globalRefs.colors.surface.dark,
+  [vars.separatorColor]: globalRefs.colors.surface.main,
 
   [vars.valueTextColor]: globalRefs.colors.surface.contrast,
-  [vars.selectedBackgroundColor]: globalRefs.colors.primary.main,
-  [vars.selectedTextColor]: globalRefs.colors.primary.contrast,
+  [vars.selectedBackgroundColor]: globalRefs.colors.primary.contrast,
 
   _bordered: {
     [vars.inputBorderColor]: refs.borderColor,

package/src/theme/components/modal.js

@@ -1,8 +1,13 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import { ModalClass } from '../../components/descope-modal/ModalClass';
 
+const globalRefs = getThemeRefs(globals);
+
 const compVars = ModalClass.cssVarList;
 
 const modal = {
+  [compVars.overlayBackgroundColor]: globalRefs.colors.surface.light,
   [compVars.overlayShadow]: 'none',
   [compVars.overlayWidth]: '700px',
 };

package/src/theme/components/notificationCard.js

@@ -14,9 +14,9 @@ const notification = {
   [vars.backgroundColor]: globalRefs.colors.surface.main,
   [vars.textColor]: globalRefs.colors.surface.contrast,
   [vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
-  [vars.verticalPadding]: '0.45em',
-  [vars.horizontalPadding]: '1em',
-  [vars.borderRadius]: globalRefs.radius.md,
+  [vars.verticalPadding]: '0.625em',
+  [vars.horizontalPadding]: '1.5em',
+  [vars.borderRadius]: globalRefs.radius.xs,
 
   _bordered: {
     [vars.borderWidth]: globalRefs.border.sm,