@descope/web-components-ui 1.0.386 → 1.0.388

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2200,7362,3521],{25827:(e,t,r)=>{r.d(t,{y:()=>i});var o=r(7138),n=r(94619),l=r(70263);const i=(...e)=>(0,o.Zz)(n.XX,n._$,n.yF,n.jd)((0,l.q)(...e))},38777:(e,t,r)=>{r.d(t,{A:()=>l});var o=r(14944),n=r(62751);const l=e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${n.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.T}>\n\t\t\t`,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.T),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,o.EA)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,o.q)(this.inputElement,this,["checked"]),(0,o.Gh)(this,this.inputElement,{includeAttrs:["checked"]})}}},89345:(e,t,r)=>{r.d(t,{A:()=>o});const o=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,r(33177).X6)()}\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`},62751:(e,t,r)=>{r.d(t,{A:()=>a,T:()=>l});var o=r(25827),n=r(14944);const l=(0,n.xE)("boolean-field-internal"),i=["disabled","label","invalid","readonly"],s=(0,o.y)({componentName:l,baseSelector:"div"}),a=class extends s{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,n.EA)(this,this.checkbox,{includeAttrs:i}),(0,n.Gh)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),"readonly"===e&&this.onReadOnlyChange(null!==r)}onReadOnlyChange(e){this.baseElement.setAttribute("inert",e)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},53716:(e,t,r)=>{r.r(t);var o=r(62751);customElements.define(o.T,o.A)},10796:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>x});var o=r(14944),n=r(7138),l=r(94619),i=r(38777),s=r(89345),a=r(33177);const d=(0,o.xE)("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)"}},x=(0,n.Zz)((0,l.RF)({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"}]}}),l.VO,(0,l.OZ)({proxyProps:["value","selectionStart"]}),l.tQ,i.A)((0,l.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${s.A}\n      ${(0,a.cy)(x.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(94494),r(39542),r(53716),customElements.define(d,x)},52475:(e,t,r)=>{r.r(t),r.d(t,{CodeSnippetClass:()=>oe});var o=r(19878),n=r(94619),l=r(7138),i=r(14944),s=r(70263);const a=(0,i.xE)("code-snippet");class d extends((0,s.q)({componentName:a,baseSelector:":host > code"})){static get observedAttributes(){return["lang","inline"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n        width: 100%;\n      }\n      code {\n        display: block;\n        width: 100%;\n        min-height: 1em;\n        overflow-x: scroll;\n        overflow-y: scroll;\n      }\n      pre {\n        margin: 0;\n      }\n    </style>\n    <code class="hljs"></code>\n    '}init(){super.init?.(),this.lang=this.getAttribute("lang"),this.isInline="true"===this.getAttribute("inline"),(0,i.Ge)(this,this.#e.bind(this))}get contentNode(){return this.shadowRoot.querySelector(this.baseSelector)}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),t!==r&&("inline"===e&&(this.isInline=r),"lang"===e&&(this.lang=r),this.#e())}#e(){const e=(e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.value})(this.textContent),t=this.lang;if(!t)return void(this.contentNode.textContent=e);const{value:r}=o.A.highlight(e,{language:t});var n;this.contentNode.innerHTML=(n=r,this.isInline?n:`<pre>${n}</pre>`)}}const{root:c,docTag:p,keyword:h,metaKeyword:u,templateTag:m,templateVariable:g,type:b,variableLanguage:y,title:x,titleClass:C,titleClassInherited:v,titleFunction:f,attr:w,attribute:k,literal:T,meta:j,number:$,operator:_,variable:E,selectorAttr:R,selectorClass:A,selectorId:S,regexp:I,string:q,metaString:O,builtIn:D,symbol:L,comment:z,code:P,formula:H,name:B,quote:N,selectorTag:F,selectorPseudo:M,subst:V,section:W,bullet:G,emphasis:Z,strong:J,addition:K,deletion:Q,charEscape:X,link:U,params:Y,property:ee,punctuation:te,tag:re}={root:{selector:()=>".hljs"},docTag:{selector:()=>".hljs-doctag"},keyword:{selector:()=>".hljs-keyword"},metaKeyword:{selector:()=>".hljs-meta .hljs-keyword"},templateTag:{selector:()=>".hljs-template-tag"},templateVariable:{selector:()=>".hljs-template-variable"},type:{selector:()=>".hljs-type"},variableLanguage:{selector:()=>".hljs-variable.language"},title:{selector:()=>".hljs-title"},titleClass:{selector:()=>".hljs-title.class_"},titleClassInherited:{selector:()=>".hljs-title.class_.inherited__"},titleFunction:{selector:()=>".hljs-title.function_"},attr:{selector:()=>".hljs-attr"},attribute:{selector:()=>".hljs-attribute"},literal:{selector:()=>".hljs-literal"},meta:{selector:()=>".hljs-meta"},number:{selector:()=>".hljs-number"},operator:{selector:()=>".hljs-operator"},variable:{selector:()=>".hljs-variable"},selectorAttr:{selector:()=>".hljs-selector-attr"},selectorClass:{selector:()=>".hljs-selector-class"},selectorId:{selector:()=>".hljs-selector-id"},regexp:{selector:()=>".hljs-regexp"},string:{selector:()=>".hljs-string"},metaString:{selector:()=>".hljs-meta .hljs-string"},builtIn:{selector:()=>".hljs-built_in"},symbol:{selector:()=>".hljs-symbol"},comment:{selector:()=>".hljs-comment"},code:{selector:()=>".hljs-code"},formula:{selector:()=>".hljs-formula"},name:{selector:()=>".hljs-name"},quote:{selector:()=>".hljs-quote"},selectorTag:{selector:()=>".hljs-selector-tag"},selectorPseudo:{selector:()=>".hljs-selector-pseudo"},subst:{selector:()=>".hljs-subst"},section:{selector:()=>".hljs-section"},bullet:{selector:()=>".hljs-bullet"},emphasis:{selector:()=>".hljs-emphasis"},strong:{selector:()=>".hljs-strong"},addition:{selector:()=>".hljs-addition"},deletion:{selector:()=>".hljs-deletion"},charEscape:{selector:()=>".hljs-char.escape"},link:{selector:()=>".hljs-link"},params:{selector:()=>".hljs-params"},property:{selector:()=>".hljs-property"},punctuation:{selector:()=>".hljs-punctuation"},tag:{selector:()=>".hljs-tag"}},oe=(0,l.Zz)((0,n.RF)({mappings:{rootBgColor:{...c,property:"background-color"},rootTextColor:{...c,property:"color"},docTagTextColor:{...p,property:"color"},keywordTextColor:{...h,property:"color"},metaKeywordTextColor:{...u,property:"color"},templateTagTextColor:{...m,property:"color"},templateVariableTextColor:{...g,property:"color"},typeTextColor:{...b,property:"color"},variableLanguageTextColor:{...y,property:"color"},titleTextColor:{...x,property:"color"},titleClassTextColor:{...C,property:"color"},titleClassInheritedTextColor:{...v,property:"color"},titleFunctionTextColor:{...f,property:"color"},attrTextColor:{...w,property:"color"},attributeTextColor:{...k,property:"color"},literalTextColor:{...T,property:"color"},metaTextColor:{...j,property:"color"},numberTextColor:{...$,property:"color"},operatorTextColor:{..._,property:"color"},variableTextColor:{...E,property:"color"},selectorAttrTextColor:{...R,property:"color"},selectorClassTextColor:{...A,property:"color"},selectorIdTextColor:{...S,property:"color"},regexpTextColor:{...I,property:"color"},stringTextColor:{...q,property:"color"},metaStringTextColor:{...O,property:"color"},builtInTextColor:{...D,property:"color"},symbolTextColor:{...L,property:"color"},commentTextColor:{...z,property:"color"},codeTextColor:{...P,property:"color"},formulaTextColor:{...H,property:"color"},nameTextColor:{...B,property:"color"},quoteTextColor:{...N,property:"color"},selectorTagTextColor:{...F,property:"color"},selectorPseudoTextColor:{...M,property:"color"},substTextColor:{...V,property:"color"},sectionTextColor:{...W,property:"color"},bulletTextColor:{...G,property:"color"},emphasisTextColor:{...Z,property:"color"},strongTextColor:{...J,property:"color"},additionTextColor:{...K,property:"color"},additionBgColor:{...K,property:"background-color"},deletionTextColor:{...Q,property:"color"},deletionBgColor:{...Q,property:"background-color"},charEscapeTextColor:{...X,property:"color"},linkTextColor:{...U,property:"color"},paramsTextColor:{...Y,property:"color"},propertyTextColor:{...ee,property:"color"},punctuationTextColor:{...te,property:"color"},tagTextColor:{...re,property:"color"}}}),n.VO,n.tQ)(d);customElements.define(a,oe)},96969:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(14944),n=r(57345);class l extends n.i{_defaultRenderer(e,t,r){const o=r.item[this.path]||"",n=Array.from(this.children).find((e=>{const t=e.getAttribute("data-pattern");return!t||new RegExp(t).test(o)}));if(!n)return void this.__setTextContent(e,r.item[this.path]||"");const l=n.cloneNode(!0);l.textContent=o||"",e.innerHTML="",e.append(l)}}const i=(0,o.xE)("grid-custom-column");customElements.define(i,l)},85198:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(14944),n=r(82907);class l extends n.v{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const o=t._gridValue,n=o.detailsOpenedItems?.indexOf(r.item)??-1,l=-1!==n,i=document.createElement("vaadin-icon");i.icon=l?"vaadin:angle-up":"vaadin:angle-down",i.classList.add("toggle-details-button",l?"opened":"closed"),e.innerHTML="",e.append(i),i.onclick=()=>{o.detailsOpenedItems=l?o.detailsOpenedItems.toSpliced(n,1):[...o.detailsOpenedItems,r.item]}}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):this.__setTextContent(e,this.__getHeader(this.header,this.path))}}r(56637),r(66418);const i=(0,o.xE)("grid-item-details-column");customElements.define(i,l)},79120:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>a}),r(10796);var o=r(14944),n=r(55722);const l=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},i=e=>!!e.items?.length&&e.selectedItems.length===e.items.length;class s extends n.${_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=l(),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=l(),e.appendChild(n)),n.onchange=()=>{n.checked?o.selectItem(r.item):o.deselectItem(r.item)},n.setAttribute("checked",r.selected)}}const a=(0,o.xE)("grid-selection-column");customElements.define(a,s)},57345:(e,t,r)=>{r.d(t,{i:()=>n});var o=r(82907);class n extends o.v{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const o=r.item[this.path]||"",n=Array.isArray(o)?o.join(", "):o;this.__setTextContent(e,n),e.title=n}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):this.__setTextContent(e,this.__getHeader(this.header,this.path))}}},36486:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l});var o=r(14944),n=r(57345);const l=(0,o.xE)("grid-text-column");customElements.define(l,n.i)},30954:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>A}),r(11362),r(36486),r(96969),r(79120),r(85198),r(52475);var o=r(7138),n=r(14944),l=r(94619);const i=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},s=e=>(e=>e?.constructor===Object)(e)?"object":Array.isArray(e)?"array":/^\s*<[\s\S]*>/.test(e)?"xml":"text",a=(e,t)=>`<descope-code-snippet lang="${t}" class="row-details__value code">${e}</descope-code-snippet>`,d=e=>`<div class="row-details__value text" title="${e}">${e}</div>`,c=e=>a(JSON.stringify(e,null,2),"json"),p=(e,t)=>`\n  <div class="row-details">\n  ${Object.entries(e).map((([e,r])=>`<div class="row-details__item" >\n          <div class="row-details__label">${t[e]||(0,o.wy)(e)}</div>\n          ${(e=>{const t=s(e);return"object"===t?c(e):"xml"===t?(e=>a((e=>{const t=document.createElement("div");return t.textContent=e,t.innerHTML})(e),"xml"))(e):"array"===t?e.some((e=>"object"===s(e)))?c(e):d(e.join(",\n")):d(e)})(r)}\n        </div>`)).join("\n")}\n</div>\n  `,h=(0,n.xE)("grid"),{host:u,headerRow:m,headerRowCell:g,contentRow:b,firstRow:y,sortIndicators:x,activeSortIndicator:C,selectedRow:v,rowSeparator:f,resizeHandle:w,toggleDetailsPanelButton:k,toggleDetailsPanelButtonOpened:T,toggleDetailsPanelButtonClosed:j,detailsPanel:$,detailsPanelLabels:_,selectedRowCell:E,detailsPanelContent:R}={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)"},selectedRowCell:{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)"},toggleDetailsPanelButton:{selector:()=>"vaadin-grid vaadin-icon.toggle-details-button"},toggleDetailsPanelButtonOpened:{selector:()=>"vaadin-grid vaadin-icon.toggle-details-button.opened"},toggleDetailsPanelButtonClosed:{selector:()=>"vaadin-grid vaadin-icon.toggle-details-button.closed"},detailsPanel:{selector:()=>"vaadin-grid::part(details-cell)"},detailsPanelLabels:{selector:()=>"vaadin-grid .row-details__label"},detailsPanelContent:{selector:()=>"vaadin-grid .row-details"}},A=(0,o.Zz)((0,l.RF)({componentNameOverride:(0,n.xE)("input-wrapper")}),(0,l.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...m},{...b}],fontSize:[{...m},{...b}],fontWeight:{...b},valueTextColor:{...b,property:"color"},backgroundColor:[{...u,property:"background-color"},{...b,property:"background-color"}],sortIndicatorsColor:{...x,property:"color"},activeSortIndicator:{...C,property:"color"},borderColor:{...u,property:"border-color"},borderWidth:{...u,property:"border-width"},borderStyle:{...u,property:"border-style"},borderRadius:{...u,property:"border-radius"},selectedBackgroundColor:[{...v,property:"background-color"},{...E,property:"background-color"}],headerRowTextColor:{...g,property:"color"},separatorColor:[{...y,property:"border-bottom-color"},{...f,property:"border-top-color"}],resizeHandleColor:{...w,property:"background-color"},hostDirection:{...u,property:"direction",fallback:"ltr"},toggleDetailsPanelButtonSize:[{...k,property:"width"},{...k,property:"height"}],toggleDetailsPanelButtonOpenedColor:{...T,property:"color"},toggleDetailsPanelButtonClosedColor:{...j,property:"color"},toggleDetailsPanelButtonCursor:{...k,property:"cursor"},detailsPanelBackgroundColor:{...$,property:"background-color"},detailsPanelBorderTopColor:{...$,property:"border-top-color"},detailsPanelLabelsColor:{..._,property:"color"},detailsPanelLabelsFontSize:{..._,property:"font-size"},detailsPanelItemsGap:{...R,property:"grid-gap"},detailsPanelPadding:{...R,property:"padding"}}}),l.VO,l.tQ,(e=>class extends e{#t;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{};const e=this.baseElement._updateDetailsCellHeight;this.baseElement._updateDetailsCellHeight=t=>{t&&e.call(this.baseElement,t)},this.baseElement.rowDetailsRenderer=this.#r.bind(this)}#r=async(e,t,r)=>{e.addEventListener("mousedown",(e=>e.stopImmediatePropagation()),!0);const o=this.getRowDetailsTemplate(r.item);e.innerHTML="",e.append(o.content.cloneNode(!0))};getRowDetailsTemplate(e){const t=this.#t.reduce(((e,{path:t,header:r})=>t&&r?{...e,[t]:r}:e),{}),r=this.rowDetailsRenderer?.(e,t)??p(e,t);switch(!0){case r instanceof HTMLTemplateElement:return r;case"string"==typeof r:return Object.assign(document.createElement("template"),{innerHTML:r});default:throw new Error("rowDetailsRenderer should return a string or a template")}}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.#t=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)}}#o=({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.#o}set renderColumn(e){this.#o=e,this.renderColumns()}getColumnsTemplate(){return this.#t?.reduce?.(((e,t)=>e+(this.renderColumn?.(t||{})||"")),"")}reassignRowDetailsRenderer(){this.baseElement.rowDetailsRenderer=null,setTimeout((()=>{this.baseElement.rowDetailsRenderer=this.#r.bind(this)}),0)}renderColumns(){const e=this.getColumnsTemplate();e&&(this.reassignRowDetailsRenderer(),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.#t}set columns(e){this.#t=e,this.renderColumns()}get paths(){return this.columns.map((e=>e.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,l.tz)({delegatesFocus:!1,slots:[""],wrappedEleName:"vaadin-grid",style:()=>`\n      /*css*/\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        box-shadow: none;\n        background-color: inherit;\n      }\n      vaadin-grid::part(details-cell) {\n        border-top-style: dashed;\n        border-top-width: 1px;\n      }\n      vaadin-grid .row-details {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${A.cssVarList.detailsPanelItemsGap}))), 1fr));\n        width: 100%;\n      }\n      vaadin-grid .row-details__item:has(.row-details__value.code) {\n        grid-column: 1 / -1;\n        order: 2;\n      }\n      vaadin-grid .row-details__value.text {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: pre;\n      }\n      vaadin-grid .row-details__value.code {\n        margin-top: 5px;\n        max-height: 120px;\n        overflow: scroll;\n        font-size: 0.85em;\n      }\n      vaadin-grid vaadin-icon.toggle-details-button {\n        margin: auto;\n      }\n    /*!css*/\n\t\t`,excludeAttrsSync:["columns","tabindex"],componentName:h}));customElements.define(h,A)},33177:(e,t,r)=>{r.d(t,{$J:()=>h,I4:()=>i,Kl:()=>u,LJ:()=>p,Qv:()=>l,X6:()=>a,cy:()=>o,fu:()=>d,kG:()=>c,lS:()=>s,zm:()=>n});const o=e=>`\n    :host {\n        padding: calc(var(${e.inputOutlineWidth}) + var(${e.inputOutlineOffset}))\n    }\n`,n=e=>`\n    ${e} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,l=e=>`\n    ${e}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,i=e=>`\n    ${e} > label,\n    ${e}::part(label),\n    ${e}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,s=(e,t="input")=>`\n    ${e}[disabled] > ${t}:placeholder-shown,\n\t${e}[readonly] > ${t}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,a=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",d=e=>`\n    ${e}::part(input-field)::after {\n        opacity: 0;\n    }\n`,c=e=>`\n    ${e}::part(input-field)::after {\n        background: none;\n    }\n`,p=(e,t)=>`\n    ${n(e)}\n    ${i(e)}\n    ${s(e)}\n    ${l(e)}\n    ${((e,t)=>`\n    ${e} input:-webkit-autofill,\n    ${e} input:-webkit-autofill::first-line,\n    ${e} input:-webkit-autofill:hover,\n    ${e} input:-webkit-autofill:active,\n    ${e} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${t.inputValueTextColor});\n        box-shadow: 0 0 0 var(${t.inputHeight}) var(${t.inputBackgroundColor}) inset;\n    }\n`)(e,t)}\n    ${c(e)}\n    ${(e=>`\n    ${e}::before {\n\t\theight: unset;\n\t}\n`)(e)}\n    ${(e=>`\n    ${e} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(e)}\n    ${(e=>`\n    ${e}::part(input-field)::after {\n        border: none;\n    }\n`)(e)}\n`,h=e=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${e} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,u=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2200,7362,3521],{25827:(e,t,r)=>{r.d(t,{y:()=>i});var o=r(7138),n=r(94619),l=r(70263);const i=(...e)=>(0,o.Zz)(n.XX,n._$,n.yF,n.jd)((0,l.q)(...e))},38777:(e,t,r)=>{r.d(t,{A:()=>l});var o=r(14944),n=r(62751);const l=e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${n.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.T}>\n\t\t\t`,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.T),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,o.EA)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,o.q)(this.inputElement,this,["checked"]),(0,o.Gh)(this,this.inputElement,{includeAttrs:["checked"]})}}},89345:(e,t,r)=>{r.d(t,{A:()=>o});const o=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,r(33177).X6)()}\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  content: unset;\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`},62751:(e,t,r)=>{r.d(t,{A:()=>a,T:()=>l});var o=r(25827),n=r(14944);const l=(0,n.xE)("boolean-field-internal"),i=["disabled","label","invalid","readonly"],s=(0,o.y)({componentName:l,baseSelector:"div"}),a=class extends s{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,n.EA)(this,this.checkbox,{includeAttrs:i}),(0,n.Gh)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),"readonly"===e&&this.onReadOnlyChange(null!==r)}onReadOnlyChange(e){this.baseElement.setAttribute("inert",e)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},53716:(e,t,r)=>{r.r(t);var o=r(62751);customElements.define(o.T,o.A)},16611:(e,t,r)=>{r.d(t,{T:()=>d,q:()=>x});var o=r(14944),n=r(7138),l=r(94619),i=r(38777),s=r(89345),a=r(33177);const d=(0,o.xE)("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)"}},x=(0,n.Zz)((0,l.RF)({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"}]}}),l.VO,(0,l.OZ)({proxyProps:["value","selectionStart"]}),l.tQ,i.A)((0,l.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${s.A}\n      ${(0,a.cy)(x.cssVarList)}\n\n      :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n        margin: 1px;\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        -webkit-text-fill-color: initial;\n      }\n\n       vaadin-checkbox label {\n        -webkit-text-fill-color: initial;\n      }\n\n      vaadin-text-field::part(input-field)::after {\n        content: none;\n      }\n    `,excludeAttrsSync:["label","tabindex"],componentName:d}))},12388:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>o.q});var o=r(16611);r(94494),r(39542),r(53716),customElements.define(o.T,o.q)},52475:(e,t,r)=>{r.r(t),r.d(t,{CodeSnippetClass:()=>oe});var o=r(19878),n=r(94619),l=r(7138),i=r(14944),s=r(70263);const a=(0,i.xE)("code-snippet");class d extends((0,s.q)({componentName:a,baseSelector:":host > code"})){static get observedAttributes(){return["lang","inline"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n        width: 100%;\n      }\n      code {\n        display: block;\n        width: 100%;\n        min-height: 1em;\n        overflow-x: scroll;\n        overflow-y: scroll;\n      }\n      pre {\n        margin: 0;\n      }\n    </style>\n    <code class="hljs"></code>\n    '}init(){super.init?.(),this.lang=this.getAttribute("lang"),this.isInline="true"===this.getAttribute("inline"),(0,i.Ge)(this,this.#e.bind(this))}get contentNode(){return this.shadowRoot.querySelector(this.baseSelector)}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),t!==r&&("inline"===e&&(this.isInline=r),"lang"===e&&(this.lang=r),this.#e())}#e(){const e=(e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.value})(this.textContent),t=this.lang;if(!t)return void(this.contentNode.textContent=e);const{value:r}=o.A.highlight(e,{language:t});var n;this.contentNode.innerHTML=(n=r,this.isInline?n:`<pre>${n}</pre>`)}}const{root:c,docTag:p,keyword:h,metaKeyword:u,templateTag:m,templateVariable:g,type:b,variableLanguage:y,title:x,titleClass:C,titleClassInherited:v,titleFunction:f,attr:w,attribute:k,literal:T,meta:j,number:$,operator:_,variable:E,selectorAttr:R,selectorClass:A,selectorId:S,regexp:I,string:q,metaString:O,builtIn:D,symbol:L,comment:z,code:P,formula:H,name:B,quote:N,selectorTag:F,selectorPseudo:M,subst:V,section:W,bullet:G,emphasis:Z,strong:J,addition:K,deletion:Q,charEscape:X,link:U,params:Y,property:ee,punctuation:te,tag:re}={root:{selector:()=>".hljs"},docTag:{selector:()=>".hljs-doctag"},keyword:{selector:()=>".hljs-keyword"},metaKeyword:{selector:()=>".hljs-meta .hljs-keyword"},templateTag:{selector:()=>".hljs-template-tag"},templateVariable:{selector:()=>".hljs-template-variable"},type:{selector:()=>".hljs-type"},variableLanguage:{selector:()=>".hljs-variable.language"},title:{selector:()=>".hljs-title"},titleClass:{selector:()=>".hljs-title.class_"},titleClassInherited:{selector:()=>".hljs-title.class_.inherited__"},titleFunction:{selector:()=>".hljs-title.function_"},attr:{selector:()=>".hljs-attr"},attribute:{selector:()=>".hljs-attribute"},literal:{selector:()=>".hljs-literal"},meta:{selector:()=>".hljs-meta"},number:{selector:()=>".hljs-number"},operator:{selector:()=>".hljs-operator"},variable:{selector:()=>".hljs-variable"},selectorAttr:{selector:()=>".hljs-selector-attr"},selectorClass:{selector:()=>".hljs-selector-class"},selectorId:{selector:()=>".hljs-selector-id"},regexp:{selector:()=>".hljs-regexp"},string:{selector:()=>".hljs-string"},metaString:{selector:()=>".hljs-meta .hljs-string"},builtIn:{selector:()=>".hljs-built_in"},symbol:{selector:()=>".hljs-symbol"},comment:{selector:()=>".hljs-comment"},code:{selector:()=>".hljs-code"},formula:{selector:()=>".hljs-formula"},name:{selector:()=>".hljs-name"},quote:{selector:()=>".hljs-quote"},selectorTag:{selector:()=>".hljs-selector-tag"},selectorPseudo:{selector:()=>".hljs-selector-pseudo"},subst:{selector:()=>".hljs-subst"},section:{selector:()=>".hljs-section"},bullet:{selector:()=>".hljs-bullet"},emphasis:{selector:()=>".hljs-emphasis"},strong:{selector:()=>".hljs-strong"},addition:{selector:()=>".hljs-addition"},deletion:{selector:()=>".hljs-deletion"},charEscape:{selector:()=>".hljs-char.escape"},link:{selector:()=>".hljs-link"},params:{selector:()=>".hljs-params"},property:{selector:()=>".hljs-property"},punctuation:{selector:()=>".hljs-punctuation"},tag:{selector:()=>".hljs-tag"}},oe=(0,l.Zz)((0,n.RF)({mappings:{rootBgColor:{...c,property:"background-color"},rootTextColor:{...c,property:"color"},docTagTextColor:{...p,property:"color"},keywordTextColor:{...h,property:"color"},metaKeywordTextColor:{...u,property:"color"},templateTagTextColor:{...m,property:"color"},templateVariableTextColor:{...g,property:"color"},typeTextColor:{...b,property:"color"},variableLanguageTextColor:{...y,property:"color"},titleTextColor:{...x,property:"color"},titleClassTextColor:{...C,property:"color"},titleClassInheritedTextColor:{...v,property:"color"},titleFunctionTextColor:{...f,property:"color"},attrTextColor:{...w,property:"color"},attributeTextColor:{...k,property:"color"},literalTextColor:{...T,property:"color"},metaTextColor:{...j,property:"color"},numberTextColor:{...$,property:"color"},operatorTextColor:{..._,property:"color"},variableTextColor:{...E,property:"color"},selectorAttrTextColor:{...R,property:"color"},selectorClassTextColor:{...A,property:"color"},selectorIdTextColor:{...S,property:"color"},regexpTextColor:{...I,property:"color"},stringTextColor:{...q,property:"color"},metaStringTextColor:{...O,property:"color"},builtInTextColor:{...D,property:"color"},symbolTextColor:{...L,property:"color"},commentTextColor:{...z,property:"color"},codeTextColor:{...P,property:"color"},formulaTextColor:{...H,property:"color"},nameTextColor:{...B,property:"color"},quoteTextColor:{...N,property:"color"},selectorTagTextColor:{...F,property:"color"},selectorPseudoTextColor:{...M,property:"color"},substTextColor:{...V,property:"color"},sectionTextColor:{...W,property:"color"},bulletTextColor:{...G,property:"color"},emphasisTextColor:{...Z,property:"color"},strongTextColor:{...J,property:"color"},additionTextColor:{...K,property:"color"},additionBgColor:{...K,property:"background-color"},deletionTextColor:{...Q,property:"color"},deletionBgColor:{...Q,property:"background-color"},charEscapeTextColor:{...X,property:"color"},linkTextColor:{...U,property:"color"},paramsTextColor:{...Y,property:"color"},propertyTextColor:{...ee,property:"color"},punctuationTextColor:{...te,property:"color"},tagTextColor:{...re,property:"color"}}}),n.VO,n.tQ)(d);customElements.define(a,oe)},96969:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(14944),n=r(57345);class l extends n.i{_defaultRenderer(e,t,r){const o=r.item[this.path]||"",n=Array.from(this.children).find((e=>{const t=e.getAttribute("data-pattern");return!t||new RegExp(t).test(o)}));if(!n)return void this.__setTextContent(e,r.item[this.path]||"");const l=n.cloneNode(!0);l.textContent=o||"",e.innerHTML="",e.append(l)}}const i=(0,o.xE)("grid-custom-column");customElements.define(i,l)},85198:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(14944),n=r(82907);class l extends n.v{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const o=t._gridValue,n=o.detailsOpenedItems?.indexOf(r.item)??-1,l=-1!==n,i=document.createElement("vaadin-icon");i.icon=l?"vaadin:angle-up":"vaadin:angle-down",i.classList.add("toggle-details-button",l?"opened":"closed"),e.innerHTML="",e.append(i),i.onclick=()=>{o.detailsOpenedItems=l?o.detailsOpenedItems.toSpliced(n,1):[...o.detailsOpenedItems,r.item]}}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):this.__setTextContent(e,this.__getHeader(this.header,this.path))}}r(56637),r(66418);const i=(0,o.xE)("grid-item-details-column");customElements.define(i,l)},79120:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>a}),r(12388);var o=r(14944),n=r(55722);const l=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},i=e=>!!e.items?.length&&e.selectedItems.length===e.items.length;class s extends n.${_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=l(),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=l(),e.appendChild(n)),n.onchange=()=>{n.checked?o.selectItem(r.item):o.deselectItem(r.item)},n.setAttribute("checked",r.selected)}}const a=(0,o.xE)("grid-selection-column");customElements.define(a,s)},57345:(e,t,r)=>{r.d(t,{i:()=>n});var o=r(82907);class n extends o.v{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const o=r.item[this.path]||"",n=Array.isArray(o)?o.join(", "):o;this.__setTextContent(e,n),e.title=n}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):this.__setTextContent(e,this.__getHeader(this.header,this.path))}}},36486:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l});var o=r(14944),n=r(57345);const l=(0,o.xE)("grid-text-column");customElements.define(l,n.i)},30954:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>A}),r(11362),r(36486),r(96969),r(79120),r(85198),r(52475);var o=r(7138),n=r(14944),l=r(94619);const i=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},s=e=>(e=>e?.constructor===Object)(e)?"object":Array.isArray(e)?"array":/^\s*<[\s\S]*>/.test(e)?"xml":"text",a=(e,t)=>`<descope-code-snippet lang="${t}" class="row-details__value code">${e}</descope-code-snippet>`,d=e=>`<div class="row-details__value text" title="${e}">${e}</div>`,c=e=>a(JSON.stringify(e,null,2),"json"),p=(e,t)=>`\n  <div class="row-details">\n  ${Object.entries(e).map((([e,r])=>`<div class="row-details__item" >\n          <div class="row-details__label">${t[e]||(0,o.wy)(e)}</div>\n          ${(e=>{const t=s(e);return"object"===t?c(e):"xml"===t?(e=>a((e=>{const t=document.createElement("div");return t.textContent=e,t.innerHTML})(e),"xml"))(e):"array"===t?e.some((e=>"object"===s(e)))?c(e):d(e.join(",\n")):d(e)})(r)}\n        </div>`)).join("\n")}\n</div>\n  `,h=(0,n.xE)("grid"),{host:u,headerRow:m,headerRowCell:g,contentRow:b,firstRow:y,sortIndicators:x,activeSortIndicator:C,selectedRow:v,rowSeparator:f,resizeHandle:w,toggleDetailsPanelButton:k,toggleDetailsPanelButtonOpened:T,toggleDetailsPanelButtonClosed:j,detailsPanel:$,detailsPanelLabels:_,selectedRowCell:E,detailsPanelContent:R}={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)"},selectedRowCell:{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)"},toggleDetailsPanelButton:{selector:()=>"vaadin-grid vaadin-icon.toggle-details-button"},toggleDetailsPanelButtonOpened:{selector:()=>"vaadin-grid vaadin-icon.toggle-details-button.opened"},toggleDetailsPanelButtonClosed:{selector:()=>"vaadin-grid vaadin-icon.toggle-details-button.closed"},detailsPanel:{selector:()=>"vaadin-grid::part(details-cell)"},detailsPanelLabels:{selector:()=>"vaadin-grid .row-details__label"},detailsPanelContent:{selector:()=>"vaadin-grid .row-details"}},A=(0,o.Zz)((0,l.RF)({componentNameOverride:(0,n.xE)("input-wrapper")}),(0,l.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...m},{...b}],fontSize:[{...m},{...b}],fontWeight:{...b},valueTextColor:{...b,property:"color"},backgroundColor:[{...u,property:"background-color"},{...b,property:"background-color"}],sortIndicatorsColor:{...x,property:"color"},activeSortIndicator:{...C,property:"color"},borderColor:{...u,property:"border-color"},borderWidth:{...u,property:"border-width"},borderStyle:{...u,property:"border-style"},borderRadius:{...u,property:"border-radius"},selectedBackgroundColor:[{...v,property:"background-color"},{...E,property:"background-color"}],headerRowTextColor:{...g,property:"color"},separatorColor:[{...y,property:"border-bottom-color"},{...f,property:"border-top-color"}],resizeHandleColor:{...w,property:"background-color"},hostDirection:{...u,property:"direction",fallback:"ltr"},toggleDetailsPanelButtonSize:[{...k,property:"width"},{...k,property:"height"}],toggleDetailsPanelButtonOpenedColor:{...T,property:"color"},toggleDetailsPanelButtonClosedColor:{...j,property:"color"},toggleDetailsPanelButtonCursor:{...k,property:"cursor"},detailsPanelBackgroundColor:{...$,property:"background-color"},detailsPanelBorderTopColor:{...$,property:"border-top-color"},detailsPanelLabelsColor:{..._,property:"color"},detailsPanelLabelsFontSize:{..._,property:"font-size"},detailsPanelItemsGap:{...R,property:"grid-gap"},detailsPanelPadding:{...R,property:"padding"}}}),l.VO,l.tQ,(e=>class extends e{#t;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{};const e=this.baseElement._updateDetailsCellHeight;this.baseElement._updateDetailsCellHeight=t=>{t&&e.call(this.baseElement,t)},this.baseElement.rowDetailsRenderer=this.#r.bind(this)}#r=async(e,t,r)=>{e.addEventListener("mousedown",(e=>e.stopImmediatePropagation()),!0);const o=this.getRowDetailsTemplate(r.item);e.innerHTML="",e.append(o.content.cloneNode(!0))};getRowDetailsTemplate(e){const t=this.#t.reduce(((e,{path:t,header:r})=>t&&r?{...e,[t]:r}:e),{}),r=this.rowDetailsRenderer?.(e,t)??p(e,t);switch(!0){case r instanceof HTMLTemplateElement:return r;case"string"==typeof r:return Object.assign(document.createElement("template"),{innerHTML:r});default:throw new Error("rowDetailsRenderer should return a string or a template")}}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.#t=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)}}#o=({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.#o}set renderColumn(e){this.#o=e,this.renderColumns()}getColumnsTemplate(){return this.#t?.reduce?.(((e,t)=>e+(this.renderColumn?.(t||{})||"")),"")}reassignRowDetailsRenderer(){this.baseElement.rowDetailsRenderer=null,setTimeout((()=>{this.baseElement.rowDetailsRenderer=this.#r.bind(this)}),0)}renderColumns(){const e=this.getColumnsTemplate();e&&(this.reassignRowDetailsRenderer(),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.#t}set columns(e){this.#t=e,this.renderColumns()}get paths(){return this.columns.map((e=>e.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,l.tz)({delegatesFocus:!1,slots:[""],wrappedEleName:"vaadin-grid",style:()=>`\n      /*css*/\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        box-shadow: none;\n        background-color: inherit;\n      }\n      vaadin-grid::part(details-cell) {\n        border-top-style: dashed;\n        border-top-width: 1px;\n      }\n      vaadin-grid .row-details {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${A.cssVarList.detailsPanelItemsGap}))), 1fr));\n        width: 100%;\n      }\n      vaadin-grid .row-details__item:has(.row-details__value.code) {\n        grid-column: 1 / -1;\n        order: 2;\n      }\n      vaadin-grid .row-details__value.text {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: pre;\n      }\n      vaadin-grid .row-details__value.code {\n        margin-top: 5px;\n        max-height: 120px;\n        overflow: scroll;\n        font-size: 0.85em;\n      }\n      vaadin-grid vaadin-icon.toggle-details-button {\n        margin: auto;\n      }\n    /*!css*/\n\t\t`,excludeAttrsSync:["columns","tabindex"],componentName:h}));customElements.define(h,A)},33177:(e,t,r)=>{r.d(t,{$J:()=>h,I4:()=>i,Kl:()=>u,LJ:()=>p,Qv:()=>l,X6:()=>a,cy:()=>o,fu:()=>d,kG:()=>c,lS:()=>s,zm:()=>n});const o=e=>`\n    :host {\n        padding: calc(var(${e.inputOutlineWidth}) + var(${e.inputOutlineOffset}))\n    }\n`,n=e=>`\n    ${e} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,l=e=>`\n    ${e}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,i=e=>`\n    ${e} > label,\n    ${e}::part(label),\n    ${e}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,s=(e,t="input")=>`\n    ${e}[disabled] > ${t}:placeholder-shown,\n\t${e}[readonly] > ${t}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,a=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",d=e=>`\n    ${e}::part(input-field)::after {\n        opacity: 0;\n    }\n`,c=e=>`\n    ${e}::part(input-field)::after {\n        background: none;\n    }\n`,p=(e,t)=>`\n    ${n(e)}\n    ${i(e)}\n    ${s(e)}\n    ${l(e)}\n    ${((e,t)=>`\n    ${e} input:-webkit-autofill,\n    ${e} input:-webkit-autofill::first-line,\n    ${e} input:-webkit-autofill:hover,\n    ${e} input:-webkit-autofill:active,\n    ${e} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${t.inputValueTextColor});\n        box-shadow: 0 0 0 var(${t.inputHeight}) var(${t.inputBackgroundColor}) inset;\n    }\n`)(e,t)}\n    ${c(e)}\n    ${(e=>`\n    ${e}::before {\n\t\theight: unset;\n\t}\n`)(e)}\n    ${(e=>`\n    ${e} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(e)}\n    ${(e=>`\n    ${e}::part(input-field)::after {\n        border: none;\n    }\n`)(e)}\n`,h=e=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${e} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,u=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '}}]);

package/dist/umd/descope-scopes-list-index-js.js

@@ -0,0 +1,2 @@
+/*! For license information please see descope-scopes-list-index-js.js.LICENSE.txt */
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1674,7362,4838,7640],{25827:(t,e,n)=>{n.d(e,{y:()=>a});var r=n(7138),o=n(94619),i=n(70263);const a=(...t)=>(0,r.Zz)(o.XX,o._$,o.yF,o.jd)((0,i.q)(...t))},38777:(t,e,n)=>{n.d(e,{A:()=>i});var r=n(14944),o=n(62751);const i=t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,r.EA)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,r.q)(this.inputElement,this,["checked"]),(0,r.Gh)(this,this.inputElement,{includeAttrs:["checked"]})}}},89345:(t,e,n)=>{n.d(e,{A:()=>r});const r=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,n(33177).X6)()}\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  content: unset;\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`},62751:(t,e,n)=>{n.d(e,{A:()=>l,T:()=>i});var r=n(25827),o=n(14944);const i=(0,o.xE)("boolean-field-internal"),a=["disabled","label","invalid","readonly"],s=(0,r.y)({componentName:i,baseSelector:"div"}),l=class extends s{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.EA)(this,this.checkbox,{includeAttrs:a}),(0,o.Gh)(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}:{}}}},53716:(t,e,n)=>{n.r(e);var r=n(62751);customElements.define(r.T,r.A)},16611:(t,e,n)=>{n.d(e,{T:()=>d,q:()=>f});var r=n(14944),o=n(7138),i=n(94619),a=n(38777),s=n(89345),l=n(33177);const d=(0,r.xE)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:b,requiredIndicator:m,helperText:y,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,o.Zz)((0,i.RF)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,h,b],fontFamily:[b,y,x],labelTextColor:{...b,property:"color"},labelSpacing:{...b,property:"padding-inline-start"},labelLineHeight:{...b,property:"line-height"},labelFontWeight:{...b,property:"font-weight"},labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...x,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.VO,(0,i.OZ)({proxyProps:["value","selectionStart"]}),i.tQ,a.A)((0,i.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${s.A}\n      ${(0,l.cy)(f.cssVarList)}\n\n      :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n        margin: 1px;\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        -webkit-text-fill-color: initial;\n      }\n\n       vaadin-checkbox label {\n        -webkit-text-fill-color: initial;\n      }\n\n      vaadin-text-field::part(input-field)::after {\n        content: none;\n      }\n    `,excludeAttrsSync:["label","tabindex"],componentName:d}))},12388:(t,e,n)=>{n.r(e),n.d(e,{CheckboxClass:()=>r.q});var r=n(16611);n(94494),n(39542),n(53716),customElements.define(r.T,r.q)},93020:(t,e,n)=>{n.d(e,{H:()=>f,T:()=>d});var r=n(14944),o=n(7138),i=n(94619),a=n(38777),s=n(89345),l=n(33177);const d=(0,r.xE)("switch-toggle"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:b,requiredIndicator:m,helperText:y,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,o.Zz)((0,i.RF)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[p,b,b],fontFamily:[b,y,x],labelTextColor:{...b,property:"color"},labelSpacing:{...b,property:"padding-inline-start"},labelLineHeight:{...b,property:"line-height"},labelFontWeight:{...b,property:"font-weight"},labelRequiredIndicator:{...m,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:[{...u,property:"font-size"},{...h,property:"height"}],knobSize:[{...u,property:"width"},{...u,property:"height"}],knobTextColor:{...u,property:"color"},knobRadius:{...u,property:"border-radius"},knobTransitionDuration:{...u,property:"transition"},knobColor:{...u,property:"background-color"},knobTopOffset:{...u,property:"top"},knobLeftOffset:{...u,property:"left"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"}}}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"]}),i.tQ,a.A)((0,i.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${s.A}\n\t\t\t${(0,l.cy)(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      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:d}))},36911:(t,e,n)=>{n.r(e),n.d(e,{ListClass:()=>p});var r=n(94619),o=n(70263),i=n(7138),a=n(14944);const s=(0,a.xE)("list-item"),l=(0,i.Zz)((0,r.RF)({mappings:{padding:{},backgroundColor:{},borderColor:{},borderStyle:{},borderWidth:{},borderRadius:{},outline:{},cursor:{},gap:{},maxWidth:{selector:()=>":host"},alignItems:{},flexDirection:{},transition:{}}}),r.VO,r.tQ,(t=>class extends t{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n      <style>\n        /*css*/\n        slot {\n            width: 100%;\n            display: flex;\n            overflow: hidden;\n            box-sizing: border-box;\n        }\n        :host {\n          display: block;\n        }\n\n        /*!css*/\n      </style>\n      <slot></slot>\n    "}}),(t=>class extends t{init(){super.init?.(),this.baseElement.addEventListener("mousedown",(t=>{t.preventDefault(),this.setAttribute("active","true"),window.addEventListener("mouseup",(()=>this.removeAttribute("active")),{once:!0})}))}}))((0,o.q)({componentName:s,baseSelector:"slot"})),d=(0,a.xE)("list");class c extends((0,o.q)({componentName:d,baseSelector:".wrapper"})){static get observedAttributes(){return["variant","readonly"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t<style>\n\t    /*css*/\n      .wrapper {\n        overflow: auto;\n        display: grid;\n        max-height: 100%;\n        width: 100%;\n      }\n\n      :host {\n        display: inline-flex;\n        width: 100%;\n      }\n      slot[name="empty-state"] {\n        justify-content: center;\n        align-items: center;\n        display: flex;\n        flex-grow: 1;\n      }\n\n      :host slot[name="empty-state"] {\n        display: none;\n      }\n      :host([empty]) slot[name="empty-state"] {\n        display: flex;\n      }\n      ::slotted(:not([slot])) {\n        width: 100%;\n      }\n      /*!css*/\n\t\t</style>\n\n    <div class="wrapper">\n    <slot></slot>\n    <slot name="empty-state">\n      No item...\n    </slot>\n    </div>\n\t'}get items(){return this.shadowRoot.querySelector("slot").assignedElements()}#t(){0===this.items.length?this.setAttribute("empty","true"):this.removeAttribute("empty")}get variant(){return this.getAttribute("variant")||"list"}#e(){this.items.forEach((t=>{let e=t;e.localName!==l.componentName&&(e=t.querySelector(l.componentName));const n="tiles"===this.variant?"tile":"row";e.setAttribute("variant",n)}))}init(){super.init?.(),(0,a.Ge)(this,(()=>{this.#t(),this.#e(),this.#n()}))}get isReadOnly(){return"true"===this.getAttribute("readonly")}#n(){this.items.forEach((t=>{this.isReadOnly?t.setAttribute("inert",""):t.removeAttribute("inert")}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),n!==e&&("variant"===t?this.#e():"readonly"===t&&this.#n())}}const p=(0,i.Zz)((0,r.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},maxHeight:{selector:()=>":host"},minHeight:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],hostDirection:{selector:()=>":host",property:"direction"},fontFamily:{},gap:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{},gridTemplateColumns:{},maxItemsWidth:{selector:()=>"::slotted(:not([slot]))",property:"max-width"},minItemsWidth:{selector:()=>"::slotted(:not([slot]))",property:"min-width"},itemsHorizontalAlign:{selector:()=>"::slotted(*)",property:"justify-self"},emptyStateTextColor:{selector:()=>'slot[name="empty-state"]',property:"color"},emptyStateTextFontFamily:{selector:()=>'slot[name="empty-state"]',property:"font-family"}}}),r.VO,r.tQ)(c);customElements.define(d,p),customElements.define(s,l)},78538:(t,e,n)=>{n.r(e),n.d(e,{ScopesListClass:()=>u});var r=n(70263),o=n(7138),i=n(14944),a=n(94619),s=n(84461),l=n(16611),d=n(93020);const c=(0,i.xE)("scopes-list"),p=["checkbox","switch"];class h extends((0,r.q)({componentName:c,baseSelector:"div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n      :host {\n        display: inline-flex;\n      }\n\n      div {\n        display: flex;\n        flex-direction: column;\n      }\n\n\t\t</style>\n    <div></div>\n\t\t"}get isReadOnly(){return"true"===this.getAttribute("readonly")}get size(){return this.getAttribute("size")||"sm"}get value(){return Array.from(this.shadowRoot.querySelector("div").children).reduce(((t,e)=>({...t,[e.getAttribute("data-id")]:e.checked})),{})}get variant(){const t=this.getAttribute("variant");return p.includes(t)?t:p[0]}}const u=(0,o.Zz)((0,a.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:[{selector:()=>":host",property:"direction"},{selector:()=>l.q.componentName,property:l.q.cssVarList.hostDirection},{selector:()=>d.H.componentName,property:d.H.cssVarList.hostDirection}],gap:{selector:()=>"div",property:"gap"},requiredInputBorderColor:[{selector:`${l.q.componentName}[required="true"]`,property:l.q.cssVarList.inputBorderColor},{selector:`${d.H.componentName}[required="true"]`,property:d.H.cssVarList.inputBorderColor}],requiredInputValueTextColor:[{selector:`${l.q.componentName}[required="true"]`,property:l.q.cssVarList.inputValueTextColor},{selector:`${d.H.componentName}[required="true"]`,property:d.H.cssVarList.knobColor}]}}),(0,s.t)({itemRenderer:({id:t,desc:e,required:n=!1},r,o)=>{const i="checkbox"===o.variant?l.q:d.H;return`\n    <${i.componentName}\n      bordered="true"\n      size=${o.size}\n      label="${e}"\n      data-id="${t}"\n      readonly="${n||o.isReadOnly}"\n      required="${n}"\n      checked="true"\n    ></${i.componentName}>\n`},rerenderAttrsList:["size","variant"]}),a.VO,a.tQ)(h);n(36911),n(12388),customElements.define(c,u)},33177:(t,e,n)=>{n.d(e,{$J:()=>h,I4:()=>a,Kl:()=>u,LJ:()=>p,Qv:()=>i,X6:()=>l,cy:()=>r,fu:()=>d,kG:()=>c,lS:()=>s,zm:()=>o});const r=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,o=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,i=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,a=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,s=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",d=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,c=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,p=(t,e)=>`\n    ${o(t)}\n    ${a(t)}\n    ${s(t)}\n    ${i(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${c(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,h=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,u=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},84461:(t,e,n)=>{n.d(e,{t:()=>a});var r=n(14944);const o=()=>!0,i=t=>`<pre>${JSON.stringify(t,null,4)}</pre>`,a=({itemRenderer:t=i,validateSchema:e=o,slotName:n,rerenderAttrsList:a=[]})=>o=>class extends o{#r=[];#o(t){if(!e)return!0;const n=e(t);return!0===n||(console.error("Data schema validation failed",n||""),!1)}#i(){const t=n?`*[slot="${n}"]`:":not([slot])";this.baseElement.querySelectorAll(t).forEach((t=>t.remove()))}#a(){this.#i(),this.data.forEach(((e,n)=>{const r="string"==typeof(o=t(e,n,this))?(t=>{const e=document.createElement("template");return e.innerHTML=t,e})(o).content:o instanceof HTMLTemplateElement?o.content:(console.error("Invalid template",o),null);var o;this.baseElement.appendChild(r?.cloneNode(!0))}))}set data(t){this.#o(t)&&(this.#r=t,this.#a())}get data(){return this.#r}init(){super.init?.(),(0,r.mx)(this,(t=>{t.includes("data")?this.#s():this.#a()}),{includeAttrs:[...a,"data"]})}#s(){const t=this.getAttribute("data");if(t)try{this.data=JSON.parse(t)}catch(e){console.warn("Invalid JSON data",t)}}}},15408:(t,e,n)=>{n.d(e,{f:()=>o});var r=n(32065);class o extends r.r{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}}}]);

package/dist/umd/descope-scopes-list-index-js.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */

package/dist/umd/index.js

@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"object"==typeof module?module.exports=s():"function"==typeof define&&define.amd?define([],s):"object"==typeof exports?exports.DescopeUI=s():e.DescopeUI=s()}(self,(()=>(()=>{var e,s,o,d={97301:(e,s,o)=>{var d={"./boolean-fields/descope-boolean-field-internal/index.js":[53716,650,4619,7362],"./boolean-fields/descope-checkbox/index.js":[10796,650,8164,9895,3222,9167,1033,5273,4619,4838],"./boolean-fields/descope-switch-toggle/index.js":[19792,650,8164,9895,3222,9167,1033,5273,4619,1448],"./button-selection-group-fields/descope-button-multi-selection-group-internal/index.js":[39173,650,4619,8399],"./button-selection-group-fields/descope-button-multi-selection-group/index.js":[82329,650,8164,9895,1033,2838,7824,4619,3829],"./button-selection-group-fields/descope-button-selection-group-internal/index.js":[19509,650,4619,7079],"./button-selection-group-fields/descope-button-selection-group-item/index.js":[42426,650,8164,9895,1033,2838,7824,4619,1837],"./button-selection-group-fields/descope-button-selection-group/index.js":[7815,650,8164,9895,1033,2838,7824,4619,2141],"./descope-apps-list/index.js":[78706,650,8164,9895,6637,6418,3711,1414,4619,3057],"./descope-avatar/index.js":[23008,650,8164,9895,6637,6418,3711,1414,4619,2645],"./descope-badge/index.js":[58765,650,4619,9553],"./descope-button/index.js":[1058,650,8164,9895,1033,2838,4619,9984],"./descope-code-snippet/index.js":[52475,650,9878,4619,3521],"./descope-combo-box/index.js":[4480,650,8164,9895,3222,9167,3711,2566,9632,4619,7052],"./descope-container/index.js":[43713,650,4619,8689],"./descope-date-field/descope-calendar/index.js":[18562,650,8164,9895,3222,9167,1033,2838,3711,2566,9632,7607,4619,6028],"./descope-date-field/index.js":[66509,650,8164,9895,3222,9167,1033,6637,6418,2838,3711,2566,9632,7607,8980,4619,6028,9257],"./descope-divider/index.js":[53665,650,4619,8819],"./descope-email-field/index.js":[91046,650,8164,9895,3222,9167,4619,5695],"./descope-enriched-text/index.js":[39e3,650,1672,4619,5710],"./descope-grid/descope-grid-custom-column/index.js":[96969,8164,3607,9176],"./descope-grid/descope-grid-item-details-column/index.js":[85198,8164,9895,6637,6418,3607,2381],"./descope-grid/descope-grid-selection-column/index.js":[79120,650,8164,9895,3222,9167,1033,3607,5273,4619,3305],"./descope-grid/descope-grid-text-column/index.js":[36486,8164,3607,8108],"./descope-grid/index.js":[30954,650,8164,9895,3222,9167,1033,6637,6418,2566,3607,5273,9878,2919,4619,2200],"./descope-icon/index.js":[21471,650,2838,4619,7401],"./descope-image/index.js":[90313,650,4619,9175],"./descope-link/index.js":[31678,650,4619,7792],"./descope-list/index.js":[36911,650,4619,7640],"./descope-loader-linear/index.js":[22339,650,4619,8009],"./descope-loader-radial/index.js":[86715,650,4619,7163],"./descope-logo/index.js":[13959,650,4619,1239],"./descope-modal/index.js":[826,650,8164,3711,1437,4619,4139],"./descope-multi-select-combo-box/index.js":[10664,650,8164,9895,3222,9167,3711,2566,9632,6474,4619,1331],"./descope-new-password/descope-new-password-internal/index.js":[32039,650,4619,8603],"./descope-new-password/index.js":[26586,650,8164,9895,3222,9167,1033,6637,6418,351,4619,4364],"./descope-notification/descope-notification-card/index.js":[39749,650,8164,4834,4619,7326],"./descope-notification/index.js":[35592,650,8164,4834,4619,8019],"./descope-notp-image/index.js":[22529,650,4619,2251],"./descope-number-field/index.js":[37041,650,8164,9895,3222,9167,5412,4619,7944],"./descope-passcode/descope-passcode-internal/index.js":[81443,650,4619,3359],"./descope-passcode/index.js":[40868,650,8164,9895,3222,9167,6637,6418,8162,4619,8884],"./descope-password/index.js":[1279,650,8164,9895,3222,9167,1033,351,4619,6969],"./descope-policy-validation/index.js":[28184,650,4619,2996],"./descope-radio-group/index.js":[94702,650,8164,9895,3222,1033,5086,4619,9399],"./descope-recaptcha/index.js":[19552,650,4619,3847],"./descope-text-area/index.js":[641,650,8164,9895,3222,9167,286,4619,5686],"./descope-text-field/index.js":[89348,650,8164,9895,3222,9167,6637,6418,4619,5166],"./descope-text/index.js":[16429,650,4619,171],"./descope-totp-image/index.js":[89011,650,4619,6213],"./descope-upload-file/index.js":[82147,650,8164,9895,1033,2838,5443,4619,9636],"./descope-user-attribute/index.js":[91132,650,8164,9895,1033,6637,2838,5026,4619,1578],"./descope-user-auth-method/index.js":[56780,650,8164,9895,1033,6637,2838,7407,4619,9990],"./mapping-fields/descope-mappings-field/descope-mapping-item/index.js":[91491,650,4619,2230],"./mapping-fields/descope-mappings-field/descope-mappings-field-internal/index.js":[88858,650,4619,9522],"./mapping-fields/descope-mappings-field/index.js":[64551,650,8164,9895,3222,9167,1033,6637,6418,2838,3711,2566,9632,1053,4619,7095],"./mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/index.js":[71828,650,4619,9708],"./mapping-fields/descope-saml-group-mappings/index.js":[28511,650,8164,9895,3222,9167,1033,6637,6418,2838,3711,2566,9632,1053,4619,7095,6832],"./phone-fields/descope-phone-field/descope-phone-field-internal/index.js":[54930,650,8164,9895,3222,9167,6637,6418,3711,2566,9632,6726,4619,5459,2878],"./phone-fields/descope-phone-field/index.js":[18638,650,8164,9895,3222,9167,6637,6418,3711,2566,9632,6726,4619,5459,9894],"./phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js":[46633,650,8164,9895,3222,9167,6637,6418,4619,5459,8657],"./phone-fields/descope-phone-input-box-field/index.js":[65636,650,8164,9895,3222,9167,6637,6418,3711,2566,9632,7212,4619,5459,4043]};function n(e){if(!o.o(d,e))return Promise.resolve().then((()=>{var s=new Error("Cannot find module '"+e+"'");throw s.code="MODULE_NOT_FOUND",s}));var s=d[e],n=s[0];return Promise.all(s.slice(1).map(o.e)).then((()=>o(n)))}n.keys=()=>Object.keys(d),n.id=97301,e.exports=n},6461:(e,s,o)=>{"use strict";o.r(s),o.d(s,{componentsThemeManager:()=>d});const d=new class{static mountOnPropName="DescopeThemeManager";#e={};#s="light";#o=new Set;#d(){this.#o.forEach((e=>e?.()))}get currentThemeName(){return this.#s}set currentThemeName(e){this.#s=e,this.#d()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#o.add(e),()=>{this.#o.delete(e)}}set themes(e){this.#e=e,this.#d()}get hasThemes(){return!!Object.keys(this.#e).length}}},41216:(e,s,o)=>{const{componentsThemeManager:d}=o(6461),n=o(97301);e.exports=n.keys().reduce(((e,s)=>{const o=s.replace(/.*?([^\/]+)\/index\.js$/,"$1");return o.endsWith("-internal")||(e[o]=()=>n(s)),e}),{}),e.exports.componentsThemeManager=d}},n={};function i(e){var s=n[e];if(void 0!==s)return s.exports;var o=n[e]={exports:{}};return d[e].call(o.exports,o,o.exports,i),o.exports}i.m=d,e=[],i.O=(s,o,d,n)=>{if(!o){var t=1/0;for(a=0;a<e.length;a++){for(var[o,d,n]=e[a],p=!0,c=0;c<o.length;c++)(!1&n||t>=n)&&Object.keys(i.O).every((e=>i.O[e](o[c])))?o.splice(c--,1):(p=!1,n<t&&(t=n));if(p){e.splice(a--,1);var r=d();void 0!==r&&(s=r)}}return s}n=n||0;for(var a=e.length;a>0&&e[a-1][2]>n;a--)e[a]=e[a-1];e[a]=[o,d,n]},i.F={},i.E=e=>{Object.keys(i.F).map((s=>{i.F[s](e)}))},i.n=e=>{var s=e&&e.__esModule?()=>e.default:()=>e;return i.d(s,{a:s}),s},i.d=(e,s)=>{for(var o in s)i.o(s,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:s[o]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((s,o)=>(i.f[o](e,s),s)),[])),i.u=e=>(({171:"descope-text-index-js",1239:"descope-logo-index-js",1331:"descope-multi-select-combo-box-index-js",1448:"boolean-fields-descope-switch-toggle-index-js",1578:"descope-user-attribute-index-js",1837:"button-selection-group-fields-descope-button-selection-group-item-index-js",2141:"button-selection-group-fields-descope-button-selection-group-index-js",2200:"descope-grid-index-js",2230:"mapping-fields-descope-mappings-field-descope-mapping-item-index-js",2251:"descope-notp-image-index-js",2381:"descope-grid-descope-grid-item-details-column-index-js",2645:"descope-avatar-index-js",2878:"phone-fields-descope-phone-field-descope-phone-field-internal-index-js",2996:"descope-policy-validation-index-js",3057:"descope-apps-list-index-js",3305:"descope-grid-descope-grid-selection-column-index-js",3359:"descope-passcode-descope-passcode-internal-index-js",3521:"descope-code-snippet-index-js",3829:"button-selection-group-fields-descope-button-multi-selection-group-index-js",3847:"descope-recaptcha-index-js",4043:"phone-fields-descope-phone-input-box-field-index-js",4139:"descope-modal-index-js",4364:"descope-new-password-index-js",4838:"boolean-fields-descope-checkbox-index-js",5166:"descope-text-field-index-js",5686:"descope-text-area-index-js",5695:"descope-email-field-index-js",5710:"descope-enriched-text-index-js",6028:"descope-date-field-descope-calendar-index-js",6213:"descope-totp-image-index-js",6832:"mapping-fields-descope-saml-group-mappings-index-js",6969:"descope-password-index-js",7052:"descope-combo-box-index-js",7079:"button-selection-group-fields-descope-button-selection-group-internal-index-js",7095:"mapping-fields-descope-mappings-field-index-js",7163:"descope-loader-radial-index-js",7326:"descope-notification-descope-notification-card-index-js",7362:"boolean-fields-descope-boolean-field-internal-index-js",7401:"descope-icon-index-js",7640:"descope-list-index-js",7792:"descope-link-index-js",7944:"descope-number-field-index-js",8009:"descope-loader-linear-index-js",8019:"descope-notification-index-js",8108:"descope-grid-descope-grid-text-column-index-js",8399:"button-selection-group-fields-descope-button-multi-selection-group-internal-index-js",8603:"descope-new-password-descope-new-password-internal-index-js",8657:"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js",8689:"descope-container-index-js",8819:"descope-divider-index-js",8884:"descope-passcode-index-js",9175:"descope-image-index-js",9176:"descope-grid-descope-grid-custom-column-index-js",9257:"descope-date-field-index-js",9399:"descope-radio-group-index-js",9522:"mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js",9553:"descope-badge-index-js",9636:"descope-upload-file-index-js",9708:"mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js",9894:"phone-fields-descope-phone-field-index-js",9984:"descope-button-index-js",9990:"descope-user-auth-method-index-js"}[e]||e)+".js"),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,s)=>Object.prototype.hasOwnProperty.call(e,s),s={},o="@descope/web-components-ui:",i.l=(e,d,n,t)=>{if(s[e])s[e].push(d);else{var p,c;if(void 0!==n)for(var r=document.getElementsByTagName("script"),a=0;a<r.length;a++){var l=r[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+n){p=l;break}}p||(c=!0,(p=document.createElement("script")).charset="utf-8",p.timeout=120,i.nc&&p.setAttribute("nonce",i.nc),p.setAttribute("data-webpack",o+n),p.src=e),s[e]=[d];var u=(o,d)=>{p.onerror=p.onload=null,clearTimeout(x);var n=s[e];if(delete s[e],p.parentNode&&p.parentNode.removeChild(p),n&&n.forEach((e=>e(d))),o)return o(d)},x=setTimeout(u.bind(null,void 0,{type:"timeout",target:p}),12e4);p.onerror=u.bind(null,p.onerror),p.onload=u.bind(null,p.onload),c&&document.head.appendChild(p)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var s=i.g.document;if(!e&&s&&(s.currentScript&&"SCRIPT"===s.currentScript.tagName.toUpperCase()&&(e=s.currentScript.src),!e)){var o=s.getElementsByTagName("script");if(o.length)for(var d=o.length-1;d>-1&&(!e||!/^http(s?):/.test(e));)e=o[d--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={5536:0};i.f.j=(s,o)=>{var d=i.o(e,s)?e[s]:void 0;if(0!==d)if(d)o.push(d[2]);else{var n=new Promise(((o,n)=>d=e[s]=[o,n]));o.push(d[2]=n);var t=i.p+i.u(s),p=new Error;i.l(t,(o=>{if(i.o(e,s)&&(0!==(d=e[s])&&(e[s]=void 0),d)){var n=o&&("load"===o.type?"missing":o.type),t=o&&o.target&&o.target.src;p.message="Loading chunk "+s+" failed.\n("+n+": "+t+")",p.name="ChunkLoadError",p.type=n,p.request=t,d[1](p)}}),"chunk-"+s,s)}},i.F.j=s=>{if(!i.o(e,s)||void 0===e[s]){e[s]=null;var o=document.createElement("link");i.nc&&o.setAttribute("nonce",i.nc),o.rel="prefetch",o.as="script",o.href=i.p+i.u(s),document.head.appendChild(o)}},i.O.j=s=>0===e[s];var s=(s,o)=>{var d,n,[t,p,c]=o,r=0;if(t.some((s=>0!==e[s]))){for(d in p)i.o(p,d)&&(i.m[d]=p[d]);if(c)var a=c(i)}for(s&&s(o);r<t.length;r++)n=t[r],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(a)},o=self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[];o.forEach(s.bind(null,0)),o.push=s.bind(null,o.push.bind(o))})(),i.O(0,[5536],(()=>{[650,4619,7362,8164,9895,3222,9167,1033,5273,4838,1448,8399,2838,7824,3829,7079,1837,2141,6637,6418,3711,1414,3057,2645,9553,9984,9878,3521,2566,9632,7052,8689,7607,6028,8980,9257,8819,5695,1672,5710,3607,9176,2381,3305,8108,2919,2200,7401,9175,7792,7640,8009,7163,1239,1437,4139,6474,1331,8603,351,4364,4834,7326,8019,2251,5412,7944,3359,8162,8884,6969,2996,5086,9399,3847,286,5686,5166,171,6213,5443,9636,5026,1578,7407,9990,2230,9522,1053,7095,9708,6832,6726,5459,2878,9894,8657,7212,4043].map(i.E)}),5);var t=i(41216);return i.O(t)})()));
+!function(e,s){"object"==typeof exports&&"object"==typeof module?module.exports=s():"function"==typeof define&&define.amd?define([],s):"object"==typeof exports?exports.DescopeUI=s():e.DescopeUI=s()}(self,(()=>(()=>{var e,s,o,d={97301:(e,s,o)=>{var d={"./boolean-fields/descope-boolean-field-internal/index.js":[53716,650,4619,7362],"./boolean-fields/descope-checkbox/index.js":[12388,650,8164,9895,3222,9167,1033,5273,4619,4838],"./boolean-fields/descope-switch-toggle/index.js":[57836,650,8164,9895,3222,9167,1033,5273,4619,1448],"./button-selection-group-fields/descope-button-multi-selection-group-internal/index.js":[39173,650,4619,8399],"./button-selection-group-fields/descope-button-multi-selection-group/index.js":[82329,650,8164,9895,1033,2838,7824,4619,3829],"./button-selection-group-fields/descope-button-selection-group-internal/index.js":[19509,650,4619,7079],"./button-selection-group-fields/descope-button-selection-group-item/index.js":[42426,650,8164,9895,1033,2838,7824,4619,1837],"./button-selection-group-fields/descope-button-selection-group/index.js":[7815,650,8164,9895,1033,2838,7824,4619,2141],"./descope-apps-list/index.js":[94073,650,8164,9895,6637,6418,3711,1414,4619,3057],"./descope-avatar/index.js":[23008,650,8164,9895,6637,6418,3711,1414,4619,2645],"./descope-badge/index.js":[58765,650,4619,9553],"./descope-button/index.js":[1058,650,8164,9895,1033,2838,4619,9984],"./descope-code-snippet/index.js":[52475,650,9878,4619,3521],"./descope-combo-box/index.js":[4480,650,8164,9895,3222,9167,3711,2566,9632,4619,7052],"./descope-container/index.js":[43713,650,4619,8689],"./descope-date-field/descope-calendar/index.js":[18562,650,8164,9895,3222,9167,1033,2838,3711,2566,9632,7607,4619,6028],"./descope-date-field/index.js":[66509,650,8164,9895,3222,9167,1033,6637,6418,2838,3711,2566,9632,7607,8980,4619,6028,9257],"./descope-divider/index.js":[53665,650,4619,8819],"./descope-email-field/index.js":[91046,650,8164,9895,3222,9167,4619,5695],"./descope-enriched-text/index.js":[39e3,650,1672,4619,5710],"./descope-grid/descope-grid-custom-column/index.js":[96969,8164,3607,9176],"./descope-grid/descope-grid-item-details-column/index.js":[85198,8164,9895,6637,6418,3607,2381],"./descope-grid/descope-grid-selection-column/index.js":[79120,650,8164,9895,3222,9167,1033,3607,5273,4619,3305],"./descope-grid/descope-grid-text-column/index.js":[36486,8164,3607,8108],"./descope-grid/index.js":[30954,650,8164,9895,3222,9167,1033,6637,6418,2566,3607,5273,9878,2919,4619,2200],"./descope-icon/index.js":[21471,650,2838,4619,7401],"./descope-image/index.js":[90313,650,4619,9175],"./descope-link/index.js":[31678,650,4619,7792],"./descope-list/index.js":[36911,650,4619,7640],"./descope-loader-linear/index.js":[22339,650,4619,8009],"./descope-loader-radial/index.js":[86715,650,4619,7163],"./descope-logo/index.js":[13959,650,4619,1239],"./descope-modal/index.js":[826,650,8164,3711,1437,4619,4139],"./descope-multi-select-combo-box/index.js":[10664,650,8164,9895,3222,9167,3711,2566,9632,6474,4619,1331],"./descope-new-password/descope-new-password-internal/index.js":[32039,650,4619,8603],"./descope-new-password/index.js":[26586,650,8164,9895,3222,9167,1033,6637,6418,351,4619,4364],"./descope-notification/descope-notification-card/index.js":[39749,650,8164,4834,4619,7326],"./descope-notification/index.js":[35592,650,8164,4834,4619,8019],"./descope-notp-image/index.js":[22529,650,4619,2251],"./descope-number-field/index.js":[37041,650,8164,9895,3222,9167,5412,4619,7944],"./descope-passcode/descope-passcode-internal/index.js":[81443,650,4619,3359],"./descope-passcode/index.js":[40868,650,8164,9895,3222,9167,6637,6418,8162,4619,8884],"./descope-password/index.js":[1279,650,8164,9895,3222,9167,1033,351,4619,6969],"./descope-policy-validation/index.js":[28184,650,4619,2996],"./descope-radio-group/index.js":[94702,650,8164,9895,3222,1033,5086,4619,9399],"./descope-recaptcha/index.js":[19552,650,4619,3847],"./descope-scopes-list/index.js":[78538,650,8164,9895,3222,9167,1033,5273,4619,1674],"./descope-text-area/index.js":[641,650,8164,9895,3222,9167,286,4619,5686],"./descope-text-field/index.js":[89348,650,8164,9895,3222,9167,6637,6418,4619,5166],"./descope-text/index.js":[16429,650,4619,171],"./descope-totp-image/index.js":[89011,650,4619,6213],"./descope-upload-file/index.js":[82147,650,8164,9895,1033,2838,5443,4619,9636],"./descope-user-attribute/index.js":[91132,650,8164,9895,1033,6637,2838,5026,4619,1578],"./descope-user-auth-method/index.js":[56780,650,8164,9895,1033,6637,2838,7407,4619,9990],"./mapping-fields/descope-mappings-field/descope-mapping-item/index.js":[91491,650,4619,2230],"./mapping-fields/descope-mappings-field/descope-mappings-field-internal/index.js":[88858,650,4619,9522],"./mapping-fields/descope-mappings-field/index.js":[64551,650,8164,9895,3222,9167,1033,6637,6418,2838,3711,2566,9632,1053,4619,7095],"./mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/index.js":[71828,650,4619,9708],"./mapping-fields/descope-saml-group-mappings/index.js":[28511,650,8164,9895,3222,9167,1033,6637,6418,2838,3711,2566,9632,1053,4619,7095,6832],"./phone-fields/descope-phone-field/descope-phone-field-internal/index.js":[54930,650,8164,9895,3222,9167,6637,6418,3711,2566,9632,6726,4619,5459,2878],"./phone-fields/descope-phone-field/index.js":[18638,650,8164,9895,3222,9167,6637,6418,3711,2566,9632,6726,4619,5459,9894],"./phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js":[46633,650,8164,9895,3222,9167,6637,6418,4619,5459,8657],"./phone-fields/descope-phone-input-box-field/index.js":[65636,650,8164,9895,3222,9167,6637,6418,3711,2566,9632,7212,4619,5459,4043]};function i(e){if(!o.o(d,e))return Promise.resolve().then((()=>{var s=new Error("Cannot find module '"+e+"'");throw s.code="MODULE_NOT_FOUND",s}));var s=d[e],i=s[0];return Promise.all(s.slice(1).map(o.e)).then((()=>o(i)))}i.keys=()=>Object.keys(d),i.id=97301,e.exports=i},6461:(e,s,o)=>{"use strict";o.r(s),o.d(s,{componentsThemeManager:()=>d});const d=new class{static mountOnPropName="DescopeThemeManager";#e={};#s="light";#o=new Set;#d(){this.#o.forEach((e=>e?.()))}get currentThemeName(){return this.#s}set currentThemeName(e){this.#s=e,this.#d()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#o.add(e),()=>{this.#o.delete(e)}}set themes(e){this.#e=e,this.#d()}get hasThemes(){return!!Object.keys(this.#e).length}}},41216:(e,s,o)=>{const{componentsThemeManager:d}=o(6461),i=o(97301);e.exports=i.keys().reduce(((e,s)=>{const o=s.replace(/.*?([^\/]+)\/index\.js$/,"$1");return o.endsWith("-internal")||(e[o]=()=>i(s)),e}),{}),e.exports.componentsThemeManager=d}},i={};function n(e){var s=i[e];if(void 0!==s)return s.exports;var o=i[e]={exports:{}};return d[e].call(o.exports,o,o.exports,n),o.exports}n.m=d,e=[],n.O=(s,o,d,i)=>{if(!o){var t=1/0;for(a=0;a<e.length;a++){for(var[o,d,i]=e[a],p=!0,c=0;c<o.length;c++)(!1&i||t>=i)&&Object.keys(n.O).every((e=>n.O[e](o[c])))?o.splice(c--,1):(p=!1,i<t&&(t=i));if(p){e.splice(a--,1);var r=d();void 0!==r&&(s=r)}}return s}i=i||0;for(var a=e.length;a>0&&e[a-1][2]>i;a--)e[a]=e[a-1];e[a]=[o,d,i]},n.F={},n.E=e=>{Object.keys(n.F).map((s=>{n.F[s](e)}))},n.n=e=>{var s=e&&e.__esModule?()=>e.default:()=>e;return n.d(s,{a:s}),s},n.d=(e,s)=>{for(var o in s)n.o(s,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:s[o]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((s,o)=>(n.f[o](e,s),s)),[])),n.u=e=>(({171:"descope-text-index-js",1239:"descope-logo-index-js",1331:"descope-multi-select-combo-box-index-js",1448:"boolean-fields-descope-switch-toggle-index-js",1578:"descope-user-attribute-index-js",1674:"descope-scopes-list-index-js",1837:"button-selection-group-fields-descope-button-selection-group-item-index-js",2141:"button-selection-group-fields-descope-button-selection-group-index-js",2200:"descope-grid-index-js",2230:"mapping-fields-descope-mappings-field-descope-mapping-item-index-js",2251:"descope-notp-image-index-js",2381:"descope-grid-descope-grid-item-details-column-index-js",2645:"descope-avatar-index-js",2878:"phone-fields-descope-phone-field-descope-phone-field-internal-index-js",2996:"descope-policy-validation-index-js",3057:"descope-apps-list-index-js",3305:"descope-grid-descope-grid-selection-column-index-js",3359:"descope-passcode-descope-passcode-internal-index-js",3521:"descope-code-snippet-index-js",3829:"button-selection-group-fields-descope-button-multi-selection-group-index-js",3847:"descope-recaptcha-index-js",4043:"phone-fields-descope-phone-input-box-field-index-js",4139:"descope-modal-index-js",4364:"descope-new-password-index-js",4838:"boolean-fields-descope-checkbox-index-js",5166:"descope-text-field-index-js",5686:"descope-text-area-index-js",5695:"descope-email-field-index-js",5710:"descope-enriched-text-index-js",6028:"descope-date-field-descope-calendar-index-js",6213:"descope-totp-image-index-js",6832:"mapping-fields-descope-saml-group-mappings-index-js",6969:"descope-password-index-js",7052:"descope-combo-box-index-js",7079:"button-selection-group-fields-descope-button-selection-group-internal-index-js",7095:"mapping-fields-descope-mappings-field-index-js",7163:"descope-loader-radial-index-js",7326:"descope-notification-descope-notification-card-index-js",7362:"boolean-fields-descope-boolean-field-internal-index-js",7401:"descope-icon-index-js",7640:"descope-list-index-js",7792:"descope-link-index-js",7944:"descope-number-field-index-js",8009:"descope-loader-linear-index-js",8019:"descope-notification-index-js",8108:"descope-grid-descope-grid-text-column-index-js",8399:"button-selection-group-fields-descope-button-multi-selection-group-internal-index-js",8603:"descope-new-password-descope-new-password-internal-index-js",8657:"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js",8689:"descope-container-index-js",8819:"descope-divider-index-js",8884:"descope-passcode-index-js",9175:"descope-image-index-js",9176:"descope-grid-descope-grid-custom-column-index-js",9257:"descope-date-field-index-js",9399:"descope-radio-group-index-js",9522:"mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js",9553:"descope-badge-index-js",9636:"descope-upload-file-index-js",9708:"mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js",9894:"phone-fields-descope-phone-field-index-js",9984:"descope-button-index-js",9990:"descope-user-auth-method-index-js"}[e]||e)+".js"),n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,s)=>Object.prototype.hasOwnProperty.call(e,s),s={},o="@descope/web-components-ui:",n.l=(e,d,i,t)=>{if(s[e])s[e].push(d);else{var p,c;if(void 0!==i)for(var r=document.getElementsByTagName("script"),a=0;a<r.length;a++){var l=r[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+i){p=l;break}}p||(c=!0,(p=document.createElement("script")).charset="utf-8",p.timeout=120,n.nc&&p.setAttribute("nonce",n.nc),p.setAttribute("data-webpack",o+i),p.src=e),s[e]=[d];var u=(o,d)=>{p.onerror=p.onload=null,clearTimeout(x);var i=s[e];if(delete s[e],p.parentNode&&p.parentNode.removeChild(p),i&&i.forEach((e=>e(d))),o)return o(d)},x=setTimeout(u.bind(null,void 0,{type:"timeout",target:p}),12e4);p.onerror=u.bind(null,p.onerror),p.onload=u.bind(null,p.onload),c&&document.head.appendChild(p)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var s=n.g.document;if(!e&&s&&(s.currentScript&&"SCRIPT"===s.currentScript.tagName.toUpperCase()&&(e=s.currentScript.src),!e)){var o=s.getElementsByTagName("script");if(o.length)for(var d=o.length-1;d>-1&&(!e||!/^http(s?):/.test(e));)e=o[d--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={5536:0};n.f.j=(s,o)=>{var d=n.o(e,s)?e[s]:void 0;if(0!==d)if(d)o.push(d[2]);else{var i=new Promise(((o,i)=>d=e[s]=[o,i]));o.push(d[2]=i);var t=n.p+n.u(s),p=new Error;n.l(t,(o=>{if(n.o(e,s)&&(0!==(d=e[s])&&(e[s]=void 0),d)){var i=o&&("load"===o.type?"missing":o.type),t=o&&o.target&&o.target.src;p.message="Loading chunk "+s+" failed.\n("+i+": "+t+")",p.name="ChunkLoadError",p.type=i,p.request=t,d[1](p)}}),"chunk-"+s,s)}},n.F.j=s=>{if(!n.o(e,s)||void 0===e[s]){e[s]=null;var o=document.createElement("link");n.nc&&o.setAttribute("nonce",n.nc),o.rel="prefetch",o.as="script",o.href=n.p+n.u(s),document.head.appendChild(o)}},n.O.j=s=>0===e[s];var s=(s,o)=>{var d,i,[t,p,c]=o,r=0;if(t.some((s=>0!==e[s]))){for(d in p)n.o(p,d)&&(n.m[d]=p[d]);if(c)var a=c(n)}for(s&&s(o);r<t.length;r++)i=t[r],n.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return n.O(a)},o=self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[];o.forEach(s.bind(null,0)),o.push=s.bind(null,o.push.bind(o))})(),n.O(0,[5536],(()=>{[650,4619,7362,8164,9895,3222,9167,1033,5273,4838,1448,8399,2838,7824,3829,7079,1837,2141,6637,6418,3711,1414,3057,2645,9553,9984,9878,3521,2566,9632,7052,8689,7607,6028,8980,9257,8819,5695,1672,5710,3607,9176,2381,3305,8108,2919,2200,7401,9175,7792,7640,8009,7163,1239,1437,4139,6474,1331,8603,351,4364,4834,7326,8019,2251,5412,7944,3359,8162,8884,6969,2996,5086,9399,3847,1674,286,5686,5166,171,6213,5443,9636,5026,1578,7407,9990,2230,9522,1053,7095,9708,6832,6726,5459,2878,9894,8657,7212,4043].map(n.E)}),5);var t=n(41216);return n.O(t)})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.386",
+  "version": "1.0.388",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -98,7 +98,7 @@
     "@vaadin/notification": "24.3.4",
     "@vaadin/number-field": "24.3.4",
     "@vaadin/password-field": "24.3.4",
-    "@vaadin/popover": "24.5.0",
+    "@vaadin/popover": "24.5.3",
     "@vaadin/radio-group": "24.3.4",
     "@vaadin/text-area": "24.3.4",
     "@vaadin/text-field": "24.3.4",

package/src/components/boolean-fields/commonStyles.js

@@ -18,8 +18,7 @@ vaadin-text-field {
 	align-items: flex-start;
 }
 vaadin-text-field::before {
-	height: 0;
-	margin: 0;
+  content: unset;
 }
 vaadin-text-field::part(label) {
   position: absolute;

package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js

@@ -87,6 +87,7 @@ export const CheckboxClass = compose(
       :host {
 				display: inline-flex;
 				max-width: 100%;
+        margin: 1px;
       }
 
       :host ::part(error-message) {
@@ -110,6 +111,11 @@ export const CheckboxClass = compose(
       vaadin-checkbox::part(checkbox)::after {
         top: 0;
         left: 0;
+        -webkit-text-fill-color: initial;
+      }
+
+       vaadin-checkbox label {
+        -webkit-text-fill-color: initial;
       }
 
       vaadin-text-field::part(input-field)::after {

package/src/components/descope-date-field/DateFieldClass.js

@@ -29,7 +29,7 @@ export const componentName = getComponentName('date-field');
 const BASE_SELECTOR = 'vaadin-popover';
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: BASE_SELECTOR });
 
-const dateFieldAttrs = ['format', 'opened', 'initial-value'];
+const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
 
@@ -71,19 +71,16 @@ class RawDateFieldClass extends BaseInputClass {
         display: flex;
         align-self: center;
         z-index: 1;
+        height: 100%;
+        align-items: center;        
       }
 
-      descope-text-field .overlay-position-anchor {
-        position: absolute;
-        height: 100%;
-        width: 0;
-        z-index: 1;
+      :host([readonly="true"]) .toggle-calendar {
         pointer-events: none;
       }
     </style>
     <div>
       <descope-text-field>
-        <span slot="prefix" class="overlay-position-anchor"></span>
         <span slot="suffix" class="toggle-calendar">
           <descope-icon>${calendarIcon}</descope-icon>
         </span>
@@ -94,7 +91,6 @@ class RawDateFieldClass extends BaseInputClass {
 
     this.inputElement = this.shadowRoot.querySelector('descope-text-field');
     this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
-    this.overlayPositionAnchor = this.inputElement.querySelector('.overlay-position-anchor');
 
     this.oninvalid = () => {
       this.inputElement.setAttribute('invalid', 'true');
@@ -143,6 +139,17 @@ class RawDateFieldClass extends BaseInputClass {
     return this.overlay?.querySelector('descope-calendar');
   }
 
+  get isRTL() {
+    const computedStyleDirection = getComputedStyle(this.baseElement).getPropertyValue('direction');
+
+    if (computedStyleDirection) {
+      return computedStyleDirection === 'rtl';
+    }
+
+    // Fallback: If for some reason computed style was not calculated in time, fallback to check on attribute
+    return this.getAttribute('st-host-direction') === 'rtl';
+  }
+
   get value() {
     return this.timestamp;
   }
@@ -223,10 +230,8 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   initPopover() {
-    this.baseElement.target = this.overlayPositionAnchor;
     this.baseElement.trigger = ['click'];
     this.baseElement.withBackdrop = true;
-    this.baseElement.noCloseOnOutsideClick = true;
     this.baseElement.renderer = this.#popoverRenderer.bind(this);
 
     // block popover events from focusing/blurring the text-field
@@ -236,32 +241,64 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  #popoverPosStylesheet;
+
   #popoverRenderer(root) {
     // popoverRenderer should run only once, when the popover is first rendering.
     if (!root.firstChild) {
+      this.overlay.positionTarget = this.shadowRoot.querySelector('.toggle-calendar');
+
       root.appendChild(this.#getPopoverContent());
+
       // override vaadin's constructed stylesheet which hides the host element
       overrideConstructedStylesheet(this.baseElement);
 
-      // To prevent position flickering of the dialog we set opacity to 0
-      root.style.setProperty('opacity', '0');
+      this.backdrop.addEventListener('click', this.closePopover.bind(this));
+    }
+
+    // Hide overlay before adjusting position to prevent flickering
+    root.style.setProperty('visibility', 'hidden');
+
+    // Wait until overlay is ready
+    setTimeout(() => {
+      this.#adjustPopoverPosition(root);
+
+      // Show adjusted overlay
+      root.style.setProperty('visibility', 'visible');
+      this.updateCalendarView(root);
+    }, 100);
+  }
+
+  #adjustPopoverPosition() {
+    const popover = this.shadowRoot.querySelector('vaadin-popover').shadowRoot;
 
-      setTimeout(() => {
-        // on first render we adjust the a anchor element in the input
-        // so vaadin computes the popover position according to the anchor position
-        // (otherwise it will simply center the popover below the input).
-        this.#adjustOverlayPosition();
+    // Remove previously added stylesheets
+    this.#popoverPosStylesheet?.remove();
 
-        // remove opacity to show overlay
-        root.style.setProperty('opacity', '1');
+    const windowRect = document.body.getBoundingClientRect();
+    const inputRect = this.getBoundingClientRect();
+    const calendarRect = this.calendar.getBoundingClientRect();
 
-        // on outside click - close popover. this event runs once on popover first render
-        // and does not need to be cleared
-        this.backdrop.addEventListener('click', this.closePopover.bind(this));
-      });
+    const side = this.isRTL ? 'right' : 'left';
+    const offset = inputRect[side] - calendarRect[side];
+    const availableLeft = calendarRect.left;
+    const availableRight = windowRect.width - calendarRect.right;
+
+    let newOffset;
+    if (offset > 0) {
+      newOffset = Math.min(offset, availableRight);
+    } else {
+      newOffset = Math.min(Math.abs(offset), availableLeft) * -1;
     }
 
-    this.updateCalendarView();
+    this.#popoverPosStylesheet = document.createElement('style');
+    this.#popoverPosStylesheet.innerHTML = `
+      vaadin-popover-overlay::part(overlay) {
+        transform: translateX(${newOffset}px);
+      }
+    `;
+
+    popover.appendChild(this.#popoverPosStylesheet);
   }
 
   #getPopoverContent() {
@@ -277,17 +314,6 @@ class RawDateFieldClass extends BaseInputClass {
     return ele;
   }
 
-  #adjustOverlayPosition() {
-    const { width: inputEleWidth } = this.inputElement.getClientRects()[0];
-    const { width: calendarEleWidth } = this.calendar.getClientRects()[0];
-    const pos = inputEleWidth - calendarEleWidth / 2;
-    /* eslint-disable no-use-before-define */
-    this.overlayPositionAnchor.style.setProperty(
-      DateFieldClass.cssVarList.overlayAnchorPos,
-      `${pos}px`
-    );
-  }
-
   // the default vaadin behavior is to attach the overlay to the body when opened
   // we do not want that because it's difficult to style the overlay in this way
   // so we override it to open inside the shadow DOM
@@ -371,6 +397,10 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   onFocus() {
+    if (this.isReadOnly) {
+      return;
+    }
+
     if (!this.inputElement.value) {
       this.inputElement.value = this.format;
       this.setInputSelectionRange();
@@ -610,12 +640,10 @@ class RawDateFieldClass extends BaseInputClass {
   }
 }
 
-const { host, input, toggleButton, overlayAnchor, overlayAnchorRTL, overlay, backdrop } = {
+const { host, input, toggleButton, overlay, backdrop } = {
   host: { selector: () => ':host' },
   input: { selector: () => 'descope-text-field' },
   toggleButton: { selector: () => '.toggle-calendar' },
-  overlayAnchor: { selector: () => ':host .overlay-position-anchor' },
-  overlayAnchorRTL: { selector: ':host([st-host-direction="rtl"]) .overlay-position-anchor' },
   overlay: { selector: 'vaadin-popover-overlay::part(overlay)' },
   backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
 };
@@ -628,14 +656,9 @@ export const DateFieldClass = compose(
       hostWidth: { ...host, property: 'width' },
       hostDirection: { ...host, property: 'direction' },
       textAlign: { ...input, property: 'text-align' },
-      overlayAnchorPos: [
-        { ...overlayAnchor, property: 'right' },
-        { ...overlayAnchorRTL, property: 'left' },
-      ],
       overlayGap: {
         property: () => DateFieldClass.cssVarList.overlayGap,
       },
-
       overlayBackgroundColor: {
         property: () => DateFieldClass.cssVarList.overlayBackgroundColor,
       },
@@ -667,7 +690,6 @@ export const DateFieldClass = compose(
       outlineWidth: { ...overlay },
       outlineColor: { ...overlay },
       outlineStyle: { ...overlay },
-      direction: { ...overlay },
     },
   }),
   draggableMixin,

package/src/components/descope-date-field/descope-calendar/CalendarClass.js

@@ -536,8 +536,8 @@ const {
   weekday: { selector: () => '.weekday' },
   navPrev: { selector: () => '.nav-prev' },
   navNext: { selector: () => '.nav-next' },
-  navPrevRTL: { selector: () => ':host(:dir(rtl)) .nav-prev' },
-  navNextRTL: { selector: () => ':host(:dir(rtl)) .nav-next' },
+  navPrevRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-prev' },
+  navNextRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-next' },
   yearInput: { selector: () => '.year-input' },
   monthInput: { selector: () => '.month-input' },
 };