@descope/web-components-ui 1.0.272 → 1.0.274

package/dist/umd/2481.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[2481],{2481:(t,e,r)=>{r.d(e,{v:()=>v,f:()=>p});var n=r(1e3),o=r(2061),i=r(4567);var a=r(4201);const p=(0,i.iY)("password"),{host:s,inputField:d,inputElement:l,inputElementPlaceholder:u,revealButtonContainer:c,revealButtonIcon:h,label:y,requiredIndicator:b,errorMessage:f,helperText:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButtonContainer:{selector:()=>"::part(reveal-button)"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...s,property:"width"},hostMinWidth:{...s,property:"min-width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[y,d,f,g],inputHeight:{...d,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"}],inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelTextColor:[{...y,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:[{...l,property:"color"},{...h,property:"color"}],inputPlaceholderTextColor:{...u,property:"color"},revealButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],revealButtonSize:{...c,property:"font-size"}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"]}),n.Ae,(t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable&&this.isReadOnly){const e=this.baseElement.querySelector("input"),r=e.getAttribute("type");e.setAttribute("type","text"),setTimeout((()=>e.focus()));const n=o=>{e.setAttribute("type",r),t.target.removeEventListener("mouseup",n),t.target.removeEventListener("dragend",n)};t.target.addEventListener("mouseup",n,{once:!0}),t.target.addEventListener("dragend",n,{once:!0})}})),super.init?.()}}))((0,n.DM)({slots:["","suffix"],wrappedEleName:"vaadin-password-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 10em;\n        box-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,a.bi)(v.cssVarList)}\n\t\t\t${(0,a.Pd)("vaadin-password-field")}\n      ${(0,a.Wf)("vaadin-password-field")}\n\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tmin-height: 0;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\t\t\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t[readonly] vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${v.cssVarList.inputOutlineColor});\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p}))}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[2481],{2481:(t,e,r)=>{r.d(e,{v:()=>v,f:()=>p});var n=r(1e3),o=r(2061),i=r(4567);var a=r(4201);const p=(0,i.iY)("password"),{host:s,inputField:d,inputElement:l,inputElementPlaceholder:u,revealButtonContainer:c,revealButtonIcon:h,label:y,requiredIndicator:b,errorMessage:f,helperText:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButtonContainer:{selector:()=>"::part(reveal-button)"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...s,property:"width"},hostMinWidth:{...s,property:"min-width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[y,d,f,g],inputHeight:{...d,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"}],inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelTextColor:[{...y,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...l,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},revealButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],revealButtonSize:{...c,property:"font-size"},revealButtonColor:{...h,property:"color"}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"]}),n.Ae,(t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable&&this.isReadOnly){const e=this.baseElement.querySelector("input"),r=e.getAttribute("type");e.setAttribute("type","text"),setTimeout((()=>e.focus()));const n=o=>{e.setAttribute("type",r),t.target.removeEventListener("mouseup",n),t.target.removeEventListener("dragend",n)};t.target.addEventListener("mouseup",n,{once:!0}),t.target.addEventListener("dragend",n,{once:!0})}})),super.init?.()}}))((0,n.DM)({slots:["","suffix"],wrappedEleName:"vaadin-password-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 10em;\n        box-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,a.bi)(v.cssVarList)}\n\t\t\t${(0,a.Pd)("vaadin-password-field")}\n      ${(0,a.Wf)("vaadin-password-field")}\n\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tmin-height: 0;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\t\t\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t[readonly] vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${v.cssVarList.inputOutlineColor});\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p}))}}]);

package/dist/umd/7044.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7044],{7044:(e,r,t)=>{t.d(r,{C:()=>a});var s=t(322);class a extends s.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,r,t){const s=t.item[this.path]||"";e.innerHTML=s,Array.isArray(s)&&(e.innerHTML=s.join(", "))}_defaultHeaderRenderer(e,r){this.sortable?super._defaultHeaderRenderer(e,r):e.innerHTML=this.__getHeader(this.header,this.path)}}}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7044],{7044:(e,t,r)=>{r.d(t,{C:()=>a});var s=r(322);class a extends s.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const s=r.item[this.path]||"";e.innerHTML=s,e.title=s,Array.isArray(s)&&(e.innerHTML=s.join(", "))}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):e.innerHTML=this.__getHeader(this.header,this.path)}}}}]);

package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6656],{4873:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>u});var s=o(1e3),n=o(2561),r=o(2061),i=o(4567),a=o(9690);const c=(0,i.iY)("button-selection-group-item");class l extends((0,n.s)({componentName:c,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n      descope-button {\n        max-width: 100%;\n      }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n        text-overflow: ellipsis;\n        display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n        max-width: 100%\n\t\t\t}\n\t\t</style>\n    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n      <slot></slot>\n    </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const u=(0,r.qC)((0,s.yk)({mappings:{hostDirection:{selector:()=>a.n.componentName,property:a.n.cssVarList.hostDirection},backgroundColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.labelTextColor},borderColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderColor},borderStyle:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderStyle},borderRadius:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderRadius}}}),s.e4,s.Ae)(l);o(2018),customElements.define(c,u)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6656],{4873:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>u});var s=o(1e3),n=o(2561),r=o(2061),i=o(4567),c=o(9690);const a=(0,i.iY)("button-selection-group-item");class l extends((0,n.s)({componentName:a,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n      descope-button {\n        max-width: 100%;\n      }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n        text-overflow: ellipsis;\n        display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n        max-width: 100%\n\t\t\t}\n\t\t</style>\n    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n      <slot></slot>\n    </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]}),(0,i.oP)(this.baseElement,this,{includeAttrs:["focused","active"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const u=(0,r.qC)((0,s.yk)({mappings:{hostDirection:{selector:()=>c.n.componentName,property:c.n.cssVarList.hostDirection},backgroundColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.labelTextColor},borderColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderColor},borderStyle:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderStyle},borderRadius:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderRadius},outlineColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.outlineColor}}}),s.e4,s.Ae)(l);o(2018),customElements.define(a,u)}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,3726,5988,7487,3705,4803,7044],{818:(e,t,r)=>{r.d(t,{h:()=>i});var n=r(4567),o=r(1250);const i=e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.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(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,n.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,n.Db)(this.inputElement,this,["checked"]),(0,n.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(e,t,r)=>{r.d(t,{Z:()=>n});const n=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,r(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-inline-end: 1em;\n}\ndescope-boolean-field-internal {\n  -webkit-mask-image: none;\n  min-height: initial;\n}\n`},3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>f});var n=r(4567),o=r(2061),i=r(1e3),s=r(818),a=r(6882),l=r(4201);const d=(0,n.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)"}},f=(0,o.qC)((0,i.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"}]}}),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)(f.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,f)},9278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>s});var n=r(4567),o=r(7044);class i extends o.C{_defaultRenderer(e,t,r){const n=r.item[this.path]||"",o=Array.from(this.children).find((e=>{const t=e.getAttribute("data-pattern");return!t||new RegExp(t).test(n)}));if(!o)return void(e.innerHTML=r.item[this.path]||"");const i=o.cloneNode(!0);i.innerHTML=n||"",e.innerHTML="",e.append(i)}}const s=(0,n.iY)("grid-custom-column");customElements.define(s,i)},2238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l}),r(3483);var n=r(4567),o=r(8623);const i=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},s=e=>!!e.items?.length&&e.selectedItems.length===e.items.length;class a extends o.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=i(),r.addEventListener("input",(()=>{const e=s(t);t.selectedItems=e?[]:t.items})),e.appendChild(r)),r.setAttribute("checked",s(t))}_defaultRenderer(e,t,r){const n=e.parentNode;let o=e.querySelector("descope-checkbox");o||(o=i(),e.appendChild(o)),o.onchange=()=>{o.checked?n.selectItem(r.item):n.deselectItem(r.item)},o.setAttribute("checked",r.selected)}}const l=(0,n.iY)("grid-selection-column");customElements.define(l,a)},7044:(e,t,r)=>{r.d(t,{C:()=>o});var n=r(322);class o extends n.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const n=r.item[this.path]||"";e.innerHTML=n,Array.isArray(n)&&(e.innerHTML=n.join(", "))}_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:()=>i});var n=r(4567),o=r(7044);const i=(0,n.iY)("grid-text-column");customElements.define(i,o.C)},9950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>f}),r(4595),r(2356),r(9278),r(2238);var n=r(2061),o=r(4567),i=r(1e3);const s=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},a=(0,o.iY)("grid"),{host:l,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)"}},f=(0,n.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},{...p}],fontSize:[{...d},{...p}],fontWeight:{...p},valueTextColor:{...p,property:"color"},backgroundColor:[{...l,property:"background-color"},{...p,property:"background-color"}],sortIndicatorsColor:{...u,property:"color"},activeSortIndicator:{...m,property:"color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,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"}}}),i.e4,i.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 n=e.getAttribute(r);return n&&(t[r]=n),t}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const e=JSON.parse(this.columnsAttr);s(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:n})=>{const o=`descope-grid-${r}-column`;return`<${o} header="${t}" path="${e}" ${Object.entries(n).map((([e,t])=>`${e}="${t}"`)).join(" ")}></${o}>`};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(s(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,i.DM)({delegatesFocus:!1,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)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,3726,5988,7487,3705,4803,7044],{818:(e,t,r)=>{r.d(t,{h:()=>i});var n=r(4567),o=r(1250);const i=e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.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(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,n.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,n.Db)(this.inputElement,this,["checked"]),(0,n.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(e,t,r)=>{r.d(t,{Z:()=>n});const n=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,r(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-inline-end: 1em;\n}\ndescope-boolean-field-internal {\n  -webkit-mask-image: none;\n  min-height: initial;\n}\n`},3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>f});var n=r(4567),o=r(2061),i=r(1e3),s=r(818),a=r(6882),l=r(4201);const d=(0,n.iY)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:m,requiredIndicator:b,helperText:g,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)"}},f=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,h,m],fontFamily:[m,g,y],labelTextColor:{...m,property:"color"},labelSpacing:{...m,property:"padding-inline-start"},labelLineHeight:{...m,property:"line-height"},labelFontWeight:{...m,property:"font-weight"},labelRequiredIndicator:{...b,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"}]}}),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)(f.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,f)},9278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>s});var n=r(4567),o=r(7044);class i extends o.C{_defaultRenderer(e,t,r){const n=r.item[this.path]||"",o=Array.from(this.children).find((e=>{const t=e.getAttribute("data-pattern");return!t||new RegExp(t).test(n)}));if(!o)return void(e.innerHTML=r.item[this.path]||"");const i=o.cloneNode(!0);i.innerHTML=n||"",e.innerHTML="",e.append(i)}}const s=(0,n.iY)("grid-custom-column");customElements.define(s,i)},2238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l}),r(3483);var n=r(4567),o=r(8623);const i=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},s=e=>!!e.items?.length&&e.selectedItems.length===e.items.length;class a extends o.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=i(),r.addEventListener("input",(()=>{const e=s(t);t.selectedItems=e?[]:t.items})),e.appendChild(r)),r.setAttribute("checked",s(t))}_defaultRenderer(e,t,r){const n=e.parentNode;let o=e.querySelector("descope-checkbox");o||(o=i(),e.appendChild(o)),o.onchange=()=>{o.checked?n.selectItem(r.item):n.deselectItem(r.item)},o.setAttribute("checked",r.selected)}}const l=(0,n.iY)("grid-selection-column");customElements.define(l,a)},7044:(e,t,r)=>{r.d(t,{C:()=>o});var n=r(322);class o extends n.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const n=r.item[this.path]||"";e.innerHTML=n,e.title=n,Array.isArray(n)&&(e.innerHTML=n.join(", "))}_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:()=>i});var n=r(4567),o=r(7044);const i=(0,n.iY)("grid-text-column");customElements.define(i,o.C)},9950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>f}),r(4595),r(2356),r(9278),r(2238);var n=r(2061),o=r(4567),i=r(1e3);const s=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},a=(0,o.iY)("grid"),{host:l,headerRow:d,headerRowCell:c,contentRow:p,firstRow:h,sortIndicators:u,activeSortIndicator:m,selectedRow:b,rowSeparator:g,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)"}},f=(0,n.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},{...p}],fontSize:[{...d},{...p}],fontWeight:{...p},valueTextColor:{...p,property:"color"},backgroundColor:[{...l,property:"background-color"},{...p,property:"background-color"}],sortIndicatorsColor:{...u,property:"color"},activeSortIndicator:{...m,property:"color"},borderColor:{...l,property:"border-color"},borderWidth:{...l,property:"border-width"},borderStyle:{...l,property:"border-style"},borderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...b,property:"background-color"},headerRowTextColor:{...c,property:"color"},separatorColor:[{...h,property:"border-bottom-color"},{...g,property:"border-top-color"}],resizeHandleColor:{...y,property:"background-color"}}}),i.e4,i.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 n=e.getAttribute(r);return n&&(t[r]=n),t}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const e=JSON.parse(this.columnsAttr);s(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:n})=>{const o=`descope-grid-${r}-column`;return`<${o} header="${t}" path="${e}" ${Object.entries(n).map((([e,t])=>`${e}="${t}"`)).join(" ")}></${o}>`};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(s(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,i.DM)({delegatesFocus:!1,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      vaadin-grid::part(selected-row-cell) {\n        background-image: none;\n      }\n\t\t",excludeAttrsSync:["columns","tabindex"],componentName:a}));customElements.define(a,f)}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9655],{1845:(e,t,n)=>{n.r(t),n.d(t,{NotificationClass:()=>s}),n(6542);var i=n(4567);const o=window.customElements.get("vaadin-notification-container");if(!o)throw new Error("could not get vaadin-notification-container class");customElements.define((0,i.iY)("notification-container"),class extends o{}),n(5400);var a=n(2061),c=n(1e3);const r=(0,i.iY)("notification"),s=(0,a.qC)(c.e4,c.Ae,c._A,(e=>class t extends e{#e;constructor(){super();const e=this;Object.defineProperty(this.baseElement,"_container",{get:()=>(t._container||(t._container=document.createElement("descope-notification-container"),document.body.appendChild(t._container)),t._container.isConnected||setTimeout((()=>e.parentNode.appendChild(t._container))),t._container)}),Object.defineProperty(this.baseElement,"_card",{get:()=>e.#e}),this.baseElement._removeNotificationCard=this.close.bind(this)}close(){this.#e.close()}init(){super.init?.(),this.createCard(),(0,i.oP)(this,this.#e),(0,i.tg)(this.#e,this,{includeAttrs:["opened"]}),this.baseElement.renderer=e=>{Array.from(this.childNodes).forEach((t=>e.appendChild(t)))}}get isContainerEmpty(){return!t._container.children.length}removeContainer(){t._container.remove()}removeNotification(){this.remove(),this.isContainerEmpty&&this.removeContainer()}createCard(){this.#e=document.createElement("descope-notification-card"),this.#e.addEventListener("card-closed",this.removeNotification.bind(this))}}))((0,c.DM)({wrappedEleName:"vaadin-notification",excludeAttrsSync:["tabindex"],componentName:r}));customElements.define(r,s)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9655],{1845:(e,t,n)=>{n.r(t),n.d(t,{NotificationClass:()=>s}),n(6542);var i=n(4567);const o=window.customElements.get("vaadin-notification-container");if(!o)throw new Error("could not get vaadin-notification-container class");customElements.define((0,i.iY)("notification-container"),class extends o{}),n(5400);var a=n(2061),c=n(1e3);const r=(0,i.iY)("notification"),s=(0,a.qC)(c.e4,c.Ae,c._A,(e=>class t extends e{#e;constructor(){super();const e=this;Object.defineProperty(this.baseElement,"_container",{get:()=>(t._container||(t._container=document.createElement("descope-notification-container"),t._container.style.position="absolute",document.body.appendChild(t._container)),t._container.isConnected||setTimeout((()=>e.parentNode.appendChild(t._container))),t._container)}),Object.defineProperty(this.baseElement,"_card",{get:()=>e.#e}),this.baseElement._removeNotificationCard=this.close.bind(this)}close(){this.#e.close()}init(){super.init?.(),this.createCard(),(0,i.oP)(this,this.#e),(0,i.tg)(this.#e,this,{includeAttrs:["opened"]}),this.baseElement.renderer=e=>{Array.from(this.childNodes).forEach((t=>e.appendChild(t)))}}get isContainerEmpty(){return!t._container.children.length}removeContainer(){t._container.remove()}removeNotification(){this.remove(),this.isContainerEmpty&&this.removeContainer()}createCard(){this.#e=document.createElement("descope-notification-card"),this.#e.addEventListener("card-closed",this.removeNotification.bind(this))}}))((0,c.DM)({wrappedEleName:"vaadin-notification",excludeAttrsSync:["tabindex"],componentName:r}));customElements.define(r,s)}}]);

package/package.json

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

package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js

@@ -51,6 +51,7 @@ class RawSelectItem extends createBaseClass({
 	`;
 
     forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
+    forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
   }
 
   handleFocus() {
@@ -99,6 +100,10 @@ export const ButtonSelectionGroupItemClass = compose(
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderRadius,
       },
+      outlineColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.outlineColor,
+      },
     },
   }),
   draggableMixin,

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

@@ -209,12 +209,11 @@ export const GridClass = compose(
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      inputBorderColor: { ...host, property: 'border-color' },
-      inputBorderWidth: { ...host, property: 'border-width' },
-      inputBorderStyle: { ...host, property: 'border-style' },
-      inputBorderRadius: { ...host, property: 'border-radius' },
+      borderColor: { ...host, property: 'border-color' },
+      borderWidth: { ...host, property: 'border-width' },
+      borderStyle: { ...host, property: 'border-style' },
+      borderRadius: { ...host, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
-      selectedTextColor: { ...selectedRow, property: 'color' },
       headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
         { ...firstRow, property: 'border-bottom-color' },
@@ -239,6 +238,9 @@ export const GridClass = compose(
       }
       vaadin-grid-cell-content {
         display: flex;
+      }
+      vaadin-grid::part(selected-row-cell) {
+        background-image: none;
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],

package/src/components/descope-grid/descope-grid-text-column/GridTextColumnClass.js

@@ -9,6 +9,7 @@ export class GridTextColumnClass extends GridSortColumn {
   _defaultRenderer(cell, _col, model) {
     const content = model.item[this.path] || '';
     cell.innerHTML = content;
+    cell.title = content;
     if (Array.isArray(content)) {
       cell.innerHTML = content.join(', ');
     }

package/src/components/descope-notification/NotificationClass.js

@@ -25,6 +25,9 @@ const NotificationMixin = (superclass) =>
               'descope-notification-container'
             );
 
+            // we are overriding the container position to be absolute because we want to keep in inside the flow/widget boundaries
+            NotificationMixinClass._container.style.position = 'absolute';
+
             // we're adding the container to body to avoid Vaadin's container's `openChanged`
             // from breaking when trying to remove it directly from the body.
             document.body.appendChild(NotificationMixinClass._container);

package/src/components/descope-password/PasswordClass.js

@@ -72,10 +72,7 @@ export const PasswordClass = compose(
       labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
       errorMessageTextColor: { ...errorMessage, property: 'color' },
 
-      inputValueTextColor: [
-        { ...inputElement, property: 'color' },
-        { ...revealButtonIcon, property: 'color' },
-      ],
+      inputValueTextColor: { ...inputElement, property: 'color' },
       inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 
       revealButtonOffset: [
@@ -83,6 +80,7 @@ export const PasswordClass = compose(
         { ...revealButtonContainer, property: 'margin-left' },
       ],
       revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
+      revealButtonColor: { ...revealButtonIcon, property: 'color' },
     },
   }),
   draggableMixin,

package/src/darkTheme.js

@@ -0,0 +1,48 @@
+import merge from 'lodash.merge';
+import { defaultTheme } from './theme';
+
+export const colors = {
+  surface: {
+    main: '#181a1c',
+    dark: '#bec4ca',
+    light: '#555f68',
+    highlight: '#22262a',
+    contrast: '#f5f6f7',
+  },
+  primary: {
+    main: '#1f80ff',
+    dark: '#71aeff',
+    light: '#004094',
+    highlight: '#00214d',
+    contrast: '#000000',
+  },
+  secondary: {
+    main: '#a665eb',
+    dark: '#b9a0f3',
+    light: '#683ae6',
+    highlight: '#361299',
+    contrast: '#000000',
+  },
+  success: {
+    main: '#27963c',
+    dark: '#8bc3a2',
+    light: '#004d0f',
+    highlight: '#001f00',
+    contrast: '#000000',
+  },
+  error: {
+    main: '#f85249',
+    dark: '#fa7c75',
+    light: '#c51107',
+    highlight: '#4a0603',
+    contrast: '#000000',
+  },
+};
+
+const darkTheme = merge({}, defaultTheme, {
+  globals: {
+    colors,
+  },
+});
+
+export default darkTheme;

package/src/helpers/themeHelpers/colorsHelpers.js

@@ -1,5 +1,6 @@
 import Color from 'color';
 
+// TODO: fix generated colors strategy
 const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
 const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
 const genContrast = (c, percentage = 0.9) => {
@@ -17,6 +18,7 @@ export const genColor = (color) => {
     main: mainColor.hex(),
     dark: color.dark || genDark(mainColor),
     light: color.light || genLight(mainColor),
+    highlight: color.highlight || genLight(mainColor),
     contrast: color.contrast || genContrast(mainColor),
   };
 };

package/src/index.d.ts

@@ -7,8 +7,8 @@ export {
   componentsThemeManager,
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
-export { defaultTheme, themeVars } from './theme';
-
+export { defaultTheme, themeVars } from './defaultTheme';
+export { default as darkTheme } from './darkTheme';
 export { ButtonClass } from './components/descope-button';
 export { CheckboxClass } from './components/boolean-fields/descope-checkbox';
 export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle';

package/src/index.js

@@ -40,3 +40,4 @@ export {
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
 export { defaultTheme, themeVars } from './theme';
+export { default as darkTheme } from './darkTheme';

package/src/theme/components/badge.js

@@ -37,7 +37,7 @@ const badge = {
     default: {
       [vars.textColor]: globalRefs.colors.surface.dark,
       _bordered: {
-        [vars.borderColor]: globalRefs.colors.surface.main,
+        [vars.borderColor]: globalRefs.colors.surface.light,
       },
     },
     primary: {

package/src/theme/components/button.js

@@ -69,10 +69,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars.main]: globalRefs.colors.surface.main,
+    [helperVars.main]: globalRefs.colors.surface.light,
     [helperVars.dark]: globalRefs.colors.surface.dark,
     [helperVars.light]: globalRefs.colors.surface.light,
-    [helperVars.contrast]: globalRefs.colors.surface.contrast,
+    [helperVars.contrast]: globalRefs.colors.surface.main,
   },
 
   variant: {
@@ -92,12 +92,14 @@ const button = {
 
     outline: {
       [compVars.labelTextColor]: helperRefs.main,
-      [compVars.borderColor]: 'currentColor',
+      [compVars.borderColor]: helperRefs.main,
       _hover: {
         [compVars.labelTextColor]: helperRefs.dark,
+        [compVars.borderColor]: helperRefs.dark,
       },
       _active: {
         [compVars.labelTextColor]: helperRefs.main,
+        [compVars.borderColor]: helperRefs.main,
       },
     },
 
@@ -108,13 +110,13 @@ const button = {
         [compVars.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars.labelTextColor]: helperRefs.dark,
+        [compVars.labelTextColor]: helperRefs.main,
       },
     },
   },
 
   _focused: {
-    [compVars.outlineColor]: globalRefs.colors.surface.main,
+    [compVars.outlineColor]: helperRefs.light,
   },
 };
 

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js

@@ -8,20 +8,25 @@ export const vars = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
   [vars.hostDirection]: 'inherit',
-  [vars.backgroundColor]: globalRefs.colors.surface.light,
+  [vars.backgroundColor]: globalRefs.colors.surface.main,
   [vars.labelTextColor]: globalRefs.colors.surface.contrast,
-  [vars.borderColor]: globalRefs.colors.surface.main,
+  [vars.borderColor]: globalRefs.colors.surface.light,
   [vars.borderStyle]: 'solid',
   [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.outlineColor]: 'transparent',
 
   _hover: {
-    [vars.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+    [vars.backgroundColor]: globalRefs.colors.surface.highlight,
+  },
+
+  _focused: {
+    [vars.outlineColor]: globalRefs.colors.surface.light,
   },
 
   _selected: {
     [vars.borderColor]: globalRefs.colors.surface.contrast,
     [vars.backgroundColor]: globalRefs.colors.surface.contrast,
-    [vars.labelTextColor]: globalRefs.colors.surface.light,
+    [vars.labelTextColor]: globalRefs.colors.surface.main,
   },
 };
 

package/src/theme/components/comboBox.js

@@ -27,7 +27,7 @@ export const comboBox = {
   [vars.inputBackgroundColor]: refs.backgroundColor,
   [vars.inputHorizontalPadding]: refs.horizontalPadding,
   [vars.inputHeight]: refs.inputHeight,
-  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.main,
+  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,
   [vars.inputDropdownButtonCursor]: 'pointer',
   [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,

package/src/theme/components/container.js

@@ -34,7 +34,7 @@ const container = {
 
   [compVars.hostWidth]: '100%',
   [compVars.boxShadow]: 'none',
-  [compVars.backgroundColor]: globalRefs.colors.surface.light,
+  [compVars.backgroundColor]: globalRefs.colors.surface.main,
   [compVars.color]: globalRefs.colors.surface.contrast,
   [compVars.borderRadius]: '0px',
   [compVars.hostDirection]: globalRefs.direction,

package/src/theme/components/divider.js

@@ -21,7 +21,7 @@ const divider = {
   [compVars.flexDirection]: 'row',
   [compVars.alignSelf]: 'stretch',
   [compVars.hostWidth]: '100%',
-  [compVars.stripeColor]: globalRefs.colors.surface.main,
+  [compVars.stripeColor]: globalRefs.colors.surface.light,
   [compVars.stripeColorOpacity]: '0.5',
   [compVars.stripeHorizontalThickness]: helperRefs.thickness,
   [compVars.labelTextWidth]: 'fit-content',

package/src/theme/components/grid.js

@@ -11,28 +11,28 @@ export const grid = {
   [vars.hostHeight]: '100%',
   [vars.hostMinHeight]: '400px',
   [vars.fontWeight]: '400',
-  [vars.backgroundColor]: globalRefs.colors.surface.light,
+  [vars.backgroundColor]: globalRefs.colors.surface.main,
 
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
 
-  [vars.sortIndicatorsColor]: globalRefs.colors.surface.main,
+  [vars.sortIndicatorsColor]: globalRefs.colors.surface.light,
   [vars.activeSortIndicator]: globalRefs.colors.surface.dark,
-  [vars.resizeHandleColor]: globalRefs.colors.surface.main,
+  [vars.resizeHandleColor]: globalRefs.colors.surface.light,
 
-  [vars.inputBorderWidth]: refs.borderWidth,
-  [vars.inputBorderStyle]: refs.borderStyle,
-  [vars.inputBorderRadius]: refs.borderRadius,
-  [vars.inputBorderColor]: 'transparent',
+  [vars.borderWidth]: refs.borderWidth,
+  [vars.borderStyle]: refs.borderStyle,
+  [vars.borderRadius]: refs.borderRadius,
+  [vars.borderColor]: 'transparent',
 
   [vars.headerRowTextColor]: globalRefs.colors.surface.dark,
-  [vars.separatorColor]: globalRefs.colors.surface.main,
+  [vars.separatorColor]: globalRefs.colors.surface.light,
 
   [vars.valueTextColor]: globalRefs.colors.surface.contrast,
-  [vars.selectedBackgroundColor]: globalRefs.colors.primary.contrast,
+  [vars.selectedBackgroundColor]: globalRefs.colors.surface.highlight,
 
   _bordered: {
-    [vars.inputBorderColor]: refs.borderColor,
+    [vars.borderColor]: refs.borderColor,
   },
 };
 

package/src/theme/components/inputWrapper.js

@@ -7,9 +7,9 @@ const globalRefs = getThemeRefs(globals);
 
 const [theme, refs, vars] = createHelperVars(
   {
-    labelTextColor: globalRefs.colors.surface.contrast,
+    labelTextColor: globalRefs.colors.surface.dark,
     valueTextColor: globalRefs.colors.surface.contrast,
-    placeholderTextColor: globalRefs.colors.surface.main,
+    placeholderTextColor: globalRefs.colors.surface.dark,
     requiredIndicator: "'*'",
     errorMessageTextColor: globalRefs.colors.error.main,
 
@@ -28,7 +28,7 @@ const [theme, refs, vars] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs.colors.surface.light,
+    backgroundColor: globalRefs.colors.surface.main,
 
     fontFamily: globalRefs.fonts.font1.family,
 
@@ -48,7 +48,7 @@ const [theme, refs, vars] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs.colors.surface.main,
+      outlineColor: globalRefs.colors.surface.light,
       _invalid: {
         outlineColor: globalRefs.colors.error.main,
       },
@@ -56,7 +56,7 @@ const [theme, refs, vars] = createHelperVars(
 
     _bordered: {
       outlineWidth: globalRefs.border.xs,
-      borderColor: globalRefs.colors.surface.main,
+      borderColor: globalRefs.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
         borderColor: globalRefs.colors.error.main,
@@ -64,10 +64,10 @@ const [theme, refs, vars] = createHelperVars(
     },
 
     _disabled: {
-      labelTextColor: globalRefs.colors.surface.main,
-      borderColor: globalRefs.colors.surface.main,
-      valueTextColor: globalRefs.colors.surface.dark,
-      placeholderTextColor: globalRefs.colors.surface.dark,
+      labelTextColor: globalRefs.colors.surface.light,
+      borderColor: globalRefs.colors.surface.light,
+      valueTextColor: globalRefs.colors.surface.light,
+      placeholderTextColor: globalRefs.colors.surface.light,
       backgroundColor: globalRefs.colors.surface.main,
     },
   },

package/src/theme/components/loader/loaderLinear.js

@@ -12,7 +12,7 @@ const loaderLinear = {
   [vars.barColor]: globalRefs.colors.surface.contrast,
   [vars.barWidth]: '20%',
 
-  [vars.barBackgroundColor]: globalRefs.colors.surface.main,
+  [vars.barBackgroundColor]: globalRefs.colors.surface.light,
   [vars.barBorderRadius]: '4px',
 
   [vars.animationDuration]: '2s',

package/src/theme/components/modal.js

@@ -7,7 +7,7 @@ const globalRefs = getThemeRefs(globals);
 const compVars = ModalClass.cssVarList;
 
 const modal = {
-  [compVars.overlayBackgroundColor]: globalRefs.colors.surface.light,
+  [compVars.overlayBackgroundColor]: globalRefs.colors.surface.main,
   [compVars.overlayShadow]: globalRefs.shadow.wide['2xl'],
   [compVars.overlayWidth]: '540px',
 };

package/src/theme/components/multiSelectComboBox.js

@@ -28,7 +28,7 @@ export const multiSelectComboBox = {
   [vars.inputHorizontalPadding]: refs.horizontalPadding,
   [vars.inputVerticalPadding]: refs.verticalPadding,
   [vars.inputHeight]: refs.inputHeight,
-  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.main,
+  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,
   [vars.inputDropdownButtonCursor]: 'pointer',
   [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
@@ -36,7 +36,7 @@ export const multiSelectComboBox = {
   [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
   [vars.chipFontSize]: refs.chipFontSize,
   [vars.chipTextColor]: globalRefs.colors.surface.contrast,
-  [vars.chipBackgroundColor]: globalRefs.colors.surface.main,
+  [vars.chipBackgroundColor]: globalRefs.colors.surface.light,
 
   _readonly: {
     [vars.inputDropdownButtonCursor]: 'default',

package/src/theme/components/password.js

@@ -29,6 +29,7 @@ const password = {
   [vars.inputOutlineOffset]: refs.outlineOffset,
   [vars.revealButtonOffset]: globalRefs.spacing.md,
   [vars.revealButtonSize]: refs.toggleButtonSize,
+  [vars.revealButtonColor]: refs.placeholderTextColor,
 };
 
 export default password;

package/src/theme/components/switchToggle.js

@@ -23,7 +23,7 @@ const switchToggle = {
   [vars.trackBorderStyle]: refs.borderStyle,
   [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
   [vars.trackBorderColor]: refs.borderColor,
-  [vars.trackBackgroundColor]: 'none',
+  [vars.trackBackgroundColor]: refs.backgroundColor,
   [vars.trackBorderRadius]: globalRefs.radius.md,
   [vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
   [vars.trackHeight]: checkboxHeight,
@@ -32,7 +32,7 @@ const switchToggle = {
   [vars.knobRadius]: '50%',
   [vars.knobTopOffset]: '1px',
   [vars.knobLeftOffset]: knobMargin,
-  [vars.knobColor]: refs.valueTextColor,
+  [vars.knobColor]: refs.labelTextColor,
   [vars.knobTransitionDuration]: '0.3s',
 
   [vars.labelTextColor]: refs.labelTextColor,
@@ -44,7 +44,6 @@ const switchToggle = {
 
   _checked: {
     [vars.trackBorderColor]: refs.borderColor,
-    [vars.trackBackgroundColor]: refs.backgroundColor,
     [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
     [vars.knobColor]: refs.valueTextColor,
     [vars.knobTextColor]: refs.valueTextColor,
@@ -52,7 +51,7 @@ const switchToggle = {
 
   _disabled: {
     [vars.knobColor]: globalRefs.colors.surface.light,
-    [vars.trackBorderColor]: globalRefs.colors.surface.main,
+    [vars.trackBorderColor]: globalRefs.colors.surface.light,
     [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
     [vars.labelTextColor]: refs.labelTextColor,
     _checked: {

package/src/theme/components/text.js

@@ -50,10 +50,10 @@ const text = {
 
   mode: {
     primary: {
-      [vars.textColor]: globalRefs.colors.primary.main,
+      [vars.textColor]: globalRefs.colors.surface.contrast,
     },
     secondary: {
-      [vars.textColor]: globalRefs.colors.secondary.main,
+      [vars.textColor]: globalRefs.colors.surface.dark,
     },
     error: {
       [vars.textColor]: globalRefs.colors.error.main,

package/src/theme/components/textArea.js

@@ -1,9 +1,6 @@
-import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
 import { TextAreaClass } from '../../components/descope-text-area/TextAreaClass';
 import { refs } from './inputWrapper';
 
-const globalRefs = getThemeRefs(globals);
 const vars = TextAreaClass.cssVarList;
 
 const textArea = {
@@ -34,10 +31,6 @@ const textArea = {
     center: { [vars.inputTextAlign]: 'center' },
   },
 
-  _disabled: {
-    [vars.inputBackgroundColor]: globalRefs.colors.surface.light,
-  },
-
   _readonly: {
     [vars.inputResizeType]: 'none',
   },