@descope/web-components-ui 1.0.362 → 1.0.363

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([[9461,769,8807],{73878:(e,t,r)=>{r.d(t,{P:()=>i});var o=r(2061),n=r(94978),l=r(33346);const i=(...e)=>(0,o.qC)(n.wX,n.li,n.QT,n.mE)((0,l.s)(...e))},40818:(e,t,r)=>{r.d(t,{h:()=>l});var o=r(54567),n=r(51250);const l=e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${n.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.f}>\n\t\t\t`,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,o.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,o.Db)(this.inputElement,this,["checked"]),(0,o.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},46882:(e,t,r)=>{r.d(t,{Z:()=>o});const o=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,r(54201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n  position: absolute;\n  top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n  background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n  align-self: flex-start;\n  padding: 0;\n}\n[required] vaadin-checkbox [slot="label"]:not(:empty) {\n\tpadding-inline-end: 1em;\n}\ndescope-boolean-field-internal {\n  -webkit-mask-image: none;\n  min-height: initial;\n}\n`},51250:(e,t,r)=>{r.d(t,{Z:()=>a,f:()=>l});var o=r(73878),n=r(54567);const l=(0,n.iY)("boolean-field-internal"),i=["disabled","label","invalid","readonly"],s=(0,o.P)({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.oP)(this,this.checkbox,{includeAttrs:i}),(0,n.tg)(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}:{}}}},86676:(e,t,r)=>{r.r(t);var o=r(51250);customElements.define(o.f,o.Z)},63483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>x});var o=r(54567),n=r(2061),l=r(94978),i=r(40818),s=r(46882),a=r(54201);const d=(0,o.iY)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:g,requiredIndicator:m,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.qC)((0,l.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,h,g],fontFamily:[g,b,y],labelTextColor:{...g,property:"color"},labelSpacing:{...g,property:"padding-inline-start"},labelLineHeight:{...g,property:"line-height"},labelFontWeight:{...g,property:"font-weight"},labelRequiredIndicator:{...m,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.e4,(0,l.dj)({proxyProps:["value","selectionStart"]}),l.Ae,i.h)((0,l.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${s.Z}\n      ${(0,a.bi)(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(43092),r(79789),r(86676),customElements.define(d,x)},423:(e,t,r)=>{r.r(t),r.d(t,{CodeSnippetClass:()=>oe});var o=r(20637),n=r(94978),l=r(2061),i=r(54567),s=r(33346);const a=(0,i.iY)("code-snippet");class d extends((0,s.s)({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.P$)(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.Z.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:g,templateVariable:m,type:b,variableLanguage:y,title:x,titleClass:C,titleClassInherited:f,titleFunction:v,attr:w,attribute:k,literal:T,meta:j,number:_,operator:$,variable:E,selectorAttr:R,selectorClass:S,selectorId:A,regexp:I,string:P,metaString:D,builtIn:q,symbol:H,comment:L,code:O,formula:B,name:z,quote:N,selectorTag:M,selectorPseudo:F,subst:Y,section:V,bullet:W,emphasis:Z,strong:G,addition:K,deletion:J,charEscape:X,link:Q,params:U,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.qC)((0,n.yk)({mappings:{rootBgColor:{...c,property:"background-color"},rootTextColor:{...c,property:"color"},docTagTextColor:{...p,property:"color"},keywordTextColor:{...h,property:"color"},metaKeywordTextColor:{...u,property:"color"},templateTagTextColor:{...g,property:"color"},templateVariableTextColor:{...m,property:"color"},typeTextColor:{...b,property:"color"},variableLanguageTextColor:{...y,property:"color"},titleTextColor:{...x,property:"color"},titleClassTextColor:{...C,property:"color"},titleClassInheritedTextColor:{...f,property:"color"},titleFunctionTextColor:{...v,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:{...S,property:"color"},selectorIdTextColor:{...A,property:"color"},regexpTextColor:{...I,property:"color"},stringTextColor:{...P,property:"color"},metaStringTextColor:{...D,property:"color"},builtInTextColor:{...q,property:"color"},symbolTextColor:{...H,property:"color"},commentTextColor:{...L,property:"color"},codeTextColor:{...O,property:"color"},formulaTextColor:{...B,property:"color"},nameTextColor:{...z,property:"color"},quoteTextColor:{...N,property:"color"},selectorTagTextColor:{...M,property:"color"},selectorPseudoTextColor:{...F,property:"color"},substTextColor:{...Y,property:"color"},sectionTextColor:{...V,property:"color"},bulletTextColor:{...W,property:"color"},emphasisTextColor:{...Z,property:"color"},strongTextColor:{...G,property:"color"},additionTextColor:{...K,property:"color"},additionBgColor:{...K,property:"background-color"},deletionTextColor:{...J,property:"color"},deletionBgColor:{...J,property:"background-color"},charEscapeTextColor:{...X,property:"color"},linkTextColor:{...Q,property:"color"},paramsTextColor:{...U,property:"color"},propertyTextColor:{...ee,property:"color"},punctuationTextColor:{...te,property:"color"},tagTextColor:{...re,property:"color"}}}),n.e4,n.Ae)(d);customElements.define(a,oe)},19278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(54567),n=r(57044);class l extends n.C{_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.iY)("grid-custom-column");customElements.define(i,l)},79178:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(54567),n=r(30322);class l extends n.n{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(57911),r(56594);const i=(0,o.iY)("grid-item-details-column");customElements.define(i,l)},52238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>a}),r(63483);var o=r(54567),n=r(28623);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.w{_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.iY)("grid-selection-column");customElements.define(a,s)},57044:(e,t,r)=>{r.d(t,{C:()=>n});var o=r(30322);class n extends o.n{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))}}},42356:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l});var o=r(54567),n=r(57044);const l=(0,o.iY)("grid-text-column");customElements.define(l,n.C)},19950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>E}),r(94595),r(42356),r(19278),r(52238),r(79178),r(423);var o=r(2061),n=r(54567),l=r(94978);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":"text",a=e=>`<descope-code-snippet lang="json" class="row-details__value json">${JSON.stringify(e,null,2)}</descope-code-snippet>`,d=e=>`<div class="row-details__value text" title="${e}">${e}</div>`,c=(0,n.iY)("grid"),{host:p,headerRow:h,headerRowCell:u,contentRow:g,firstRow:m,sortIndicators:b,activeSortIndicator:y,selectedRow:x,rowSeparator:C,resizeHandle:f,toggleDetailsPanelButton:v,toggleDetailsPanelButtonOpened:w,toggleDetailsPanelButtonClosed:k,detailsPanel:T,detailsPanelLabels:j,selectedRowCell:_,detailsPanelContent:$}={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"}},E=(0,o.qC)((0,l.yk)({componentNameOverride:(0,n.iY)("input-wrapper")}),(0,l.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...h},{...g}],fontSize:[{...h},{...g}],fontWeight:{...g},valueTextColor:{...g,property:"color"},backgroundColor:[{...p,property:"background-color"},{...g,property:"background-color"}],sortIndicatorsColor:{...b,property:"color"},activeSortIndicator:{...y,property:"color"},borderColor:{...p,property:"border-color"},borderWidth:{...p,property:"border-width"},borderStyle:{...p,property:"border-style"},borderRadius:{...p,property:"border-radius"},selectedBackgroundColor:[{...x,property:"background-color"},{..._,property:"background-color"}],headerRowTextColor:{...u,property:"color"},separatorColor:[{...m,property:"border-bottom-color"},{...C,property:"border-top-color"}],resizeHandleColor:{...f,property:"background-color"},hostDirection:{...p,property:"direction",fallback:"ltr"},toggleDetailsPanelButtonSize:[{...v,property:"width"},{...v,property:"height"}],toggleDetailsPanelButtonOpenedColor:{...w,property:"color"},toggleDetailsPanelButtonClosedColor:{...k,property:"color"},toggleDetailsPanelButtonCursor:{...v,property:"cursor"},detailsPanelBackgroundColor:{...T,property:"background-color"},detailsPanelBorderTopColor:{...T,property:"border-top-color"},detailsPanelLabelsColor:{...j,property:"color"},detailsPanelLabelsFontSize:{...j,property:"font-size"},detailsPanelItemsGap:{...$,property:"grid-gap"},detailsPanelPadding:{...$,property:"padding"}}}),l.e4,l.Ae,(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)??((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._k)(e)}</div>\n          ${(e=>{const t=s(e);return"object"===t?a(e):"array"===t?e.some((e=>"object"===s(e)))?a(e):d(e.join(",\n")):d(e)})(r)}\n        </div>`)).join("\n")}\n</div>\n  `)(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.DM)({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(${E.cssVarList.detailsPanelItemsGap}))), 1fr));\n        width: 100%;\n      }\n      vaadin-grid .row-details__item:has(.row-details__value.json) {\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.json {\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:c}));customElements.define(c,E)},54201:(e,t,r)=>{r.d(t,{B:()=>c,DY:()=>a,PH:()=>d,Pd:()=>i,TX:()=>n,Wf:()=>h,bi:()=>o,bz:()=>u,jI:()=>s,jl:()=>l,wm:()=>p});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([[9461,769,8807],{73878:(e,t,r)=>{r.d(t,{P:()=>i});var o=r(2061),n=r(94978),l=r(33346);const i=(...e)=>(0,o.qC)(n.wX,n.li,n.QT,n.mE)((0,l.s)(...e))},40818:(e,t,r)=>{r.d(t,{h:()=>l});var o=r(54567),n=r(51250);const l=e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${n.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.f}>\n\t\t\t`,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,o.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,o.Db)(this.inputElement,this,["checked"]),(0,o.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},46882:(e,t,r)=>{r.d(t,{Z:()=>o});const o=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,r(54201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n  position: absolute;\n  top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n  background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n  align-self: flex-start;\n  padding: 0;\n}\n[required] vaadin-checkbox [slot="label"]:not(:empty) {\n\tpadding-inline-end: 1em;\n}\ndescope-boolean-field-internal {\n  -webkit-mask-image: none;\n  min-height: initial;\n}\n`},51250:(e,t,r)=>{r.d(t,{Z:()=>a,f:()=>l});var o=r(73878),n=r(54567);const l=(0,n.iY)("boolean-field-internal"),i=["disabled","label","invalid","readonly"],s=(0,o.P)({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.oP)(this,this.checkbox,{includeAttrs:i}),(0,n.tg)(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}:{}}}},86676:(e,t,r)=>{r.r(t);var o=r(51250);customElements.define(o.f,o.Z)},63483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>x});var o=r(54567),n=r(2061),l=r(94978),i=r(40818),s=r(46882),a=r(54201);const d=(0,o.iY)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:m,requiredIndicator:g,helperText:b,errorMessage:y}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},x=(0,n.qC)((0,l.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,h,m],fontFamily:[m,b,y],labelTextColor:{...m,property:"color"},labelSpacing:{...m,property:"padding-inline-start"},labelLineHeight:{...m,property:"line-height"},labelFontWeight:{...m,property:"font-weight"},labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...y,property:"color"},inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...h,property:"background-color"},inputBorderRadius:{...h,property:"border-radius"},inputBorderWidth:{...h,property:"border-width"},inputBorderOffset:{...h,property:"border-offset"},inputBorderColor:{...h,property:"border-color"},inputBorderStyle:{...h,property:"border-style"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"},inputSize:[{...h,property:"width"},{...h,property:"height"},{...u,property:"font-size"},{...p,property:"font-size"}]}}),l.e4,(0,l.dj)({proxyProps:["value","selectionStart"]}),l.Ae,i.h)((0,l.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${s.Z}\n      ${(0,a.bi)(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(43092),r(79789),r(86676),customElements.define(d,x)},423:(e,t,r)=>{r.r(t),r.d(t,{CodeSnippetClass:()=>oe});var o=r(20637),n=r(94978),l=r(2061),i=r(54567),s=r(33346);const a=(0,i.iY)("code-snippet");class d extends((0,s.s)({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.P$)(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.Z.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:f,titleFunction:v,attr:w,attribute:k,literal:T,meta:j,number:_,operator:$,variable:E,selectorAttr:R,selectorClass:S,selectorId:A,regexp:I,string:P,metaString:D,builtIn:q,symbol:H,comment:L,code:O,formula:B,name:z,quote:N,selectorTag:M,selectorPseudo:F,subst:Y,section:V,bullet:W,emphasis:Z,strong:G,addition:K,deletion:J,charEscape:X,link:Q,params:U,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.qC)((0,n.yk)({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:{...f,property:"color"},titleFunctionTextColor:{...v,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:{...S,property:"color"},selectorIdTextColor:{...A,property:"color"},regexpTextColor:{...I,property:"color"},stringTextColor:{...P,property:"color"},metaStringTextColor:{...D,property:"color"},builtInTextColor:{...q,property:"color"},symbolTextColor:{...H,property:"color"},commentTextColor:{...L,property:"color"},codeTextColor:{...O,property:"color"},formulaTextColor:{...B,property:"color"},nameTextColor:{...z,property:"color"},quoteTextColor:{...N,property:"color"},selectorTagTextColor:{...M,property:"color"},selectorPseudoTextColor:{...F,property:"color"},substTextColor:{...Y,property:"color"},sectionTextColor:{...V,property:"color"},bulletTextColor:{...W,property:"color"},emphasisTextColor:{...Z,property:"color"},strongTextColor:{...G,property:"color"},additionTextColor:{...K,property:"color"},additionBgColor:{...K,property:"background-color"},deletionTextColor:{...J,property:"color"},deletionBgColor:{...J,property:"background-color"},charEscapeTextColor:{...X,property:"color"},linkTextColor:{...Q,property:"color"},paramsTextColor:{...U,property:"color"},propertyTextColor:{...ee,property:"color"},punctuationTextColor:{...te,property:"color"},tagTextColor:{...re,property:"color"}}}),n.e4,n.Ae)(d);customElements.define(a,oe)},19278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(54567),n=r(57044);class l extends n.C{_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.iY)("grid-custom-column");customElements.define(i,l)},79178:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(54567),n=r(30322);class l extends n.n{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(57911),r(56594);const i=(0,o.iY)("grid-item-details-column");customElements.define(i,l)},52238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>a}),r(63483);var o=r(54567),n=r(28623);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.w{_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.iY)("grid-selection-column");customElements.define(a,s)},57044:(e,t,r)=>{r.d(t,{C:()=>n});var o=r(30322);class n extends o.n{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))}}},42356:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l});var o=r(54567),n=r(57044);const l=(0,o.iY)("grid-text-column");customElements.define(l,n.C)},19950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>S}),r(94595),r(42356),r(19278),r(52238),r(79178),r(423);var o=r(2061),n=r(54567),l=r(94978);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._k)(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.iY)("grid"),{host:u,headerRow:m,headerRowCell:g,contentRow:b,firstRow:y,sortIndicators:x,activeSortIndicator:C,selectedRow:f,rowSeparator:v,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"}},S=(0,o.qC)((0,l.yk)({componentNameOverride:(0,n.iY)("input-wrapper")}),(0,l.yk)({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:[{...f,property:"background-color"},{...E,property:"background-color"}],headerRowTextColor:{...g,property:"color"},separatorColor:[{...y,property:"border-bottom-color"},{...v,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.e4,l.Ae,(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.DM)({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(${S.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,S)},54201:(e,t,r)=>{r.d(t,{B:()=>c,DY:()=>a,PH:()=>d,Pd:()=>i,TX:()=>n,Wf:()=>h,bi:()=>o,bz:()=>u,jI:()=>s,jl:()=>l,wm:()=>p});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/package.json

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

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

@@ -342,7 +342,7 @@ export const GridClass = compose(
         grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${GridClass.cssVarList.detailsPanelItemsGap}))), 1fr));
         width: 100%;
       }
-      vaadin-grid .row-details__item:has(.row-details__value.json) {
+      vaadin-grid .row-details__item:has(.row-details__value.code) {
         grid-column: 1 / -1;
         order: 2;
       }
@@ -351,7 +351,7 @@ export const GridClass = compose(
         text-overflow: ellipsis;
         white-space: pre;
       }
-      vaadin-grid .row-details__value.json {
+      vaadin-grid .row-details__value.code {
         margin-top: 5px;
         max-height: 120px;
         overflow: scroll;

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

@@ -12,33 +12,44 @@ export const isValidDataType = (data) => {
 
 export const isPlainObject = (value) => value?.constructor === Object;
 
+const isXml = (str) => /^\s*<[\s\S]*>/.test(str);
+
+const escapeXML = (s) => {
+  const dom = document.createElement('div');
+  dom.textContent = s;
+  return dom.innerHTML;
+};
+
 export const getValueType = (value) => {
   if (isPlainObject(value)) return 'object';
   if (Array.isArray(value)) return 'array';
+  if (isXml(value)) return 'xml';
 
   return 'text';
 };
 
-export const renderCodeSnippet = (value) =>
-  `<descope-code-snippet lang="json" class="row-details__value json">${JSON.stringify(
-    value,
-    null,
-    2
-  )}</descope-code-snippet>`;
+export const renderCodeSnippet = (value, lang) =>
+  `<descope-code-snippet lang="${lang}" class="row-details__value code">${value}</descope-code-snippet>`;
 
 export const renderText = (text) =>
   `<div class="row-details__value text" title="${text}">${text}</div>`;
+const renderJson = (value) => renderCodeSnippet(JSON.stringify(value, null, 2), 'json');
+const renderXml = (value) => renderCodeSnippet(escapeXML(value), 'xml');
 
 const defaultRowDetailsValueRenderer = (value) => {
   const valueType = getValueType(value);
 
   if (valueType === 'object') {
-    return renderCodeSnippet(value);
+    return renderJson(value);
+  }
+
+  if (valueType === 'xml') {
+    return renderXml(value);
   }
 
   if (valueType === 'array') {
     if (value.some((v) => getValueType(v) === 'object')) {
-      return renderCodeSnippet(value);
+      return renderJson(value);
     }
     return renderText(value.join(',\n'));
   }