@descope/web-components-ui 3.18.1 → 3.18.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +8 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +8 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/DescopeDev.js.map +1 -1
- package/dist/umd/descope-filter.js +1 -1
- package/dist/umd/descope-filter.js.map +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +42 -42
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3267,4188,5673,7164],{8074(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4="},13094(t,e,o){"use strict";o.r(e),o.d(e,{AnchoredClass:()=>c,componentName:()=>r});var s=o(88961),n=o(72270),i=o(25964),a=o(63200);const r=(0,i.xE)("anchored");class l extends((0,n.qu)({componentName:r,baseSelector:".anchored-root"})){#t=null;#e=null;#o=null;#s=null;get#n(){return this.defaultSlot.assignedElements({flatten:!0})[0]}get#i(){return this.shadowRoot.querySelector('slot[name="anchored"]')?.assignedElements()[0]}get#a(){return this.getRootNode().host}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <div class="anchored-root" part="root">\n <slot></slot>\n <div class="anchored-host" part="anchored">\n <slot name="anchored"></slot>\n </div>\n </div>\n ',this.defaultSlot=this.shadowRoot.querySelector("slot:not([name])")}init(){super.init?.(),(0,i.fz)("\n :host {\n display: inline-flex;\n position: relative;\n box-sizing: border-box;\n }\n\n :host(:not([has-anchor])) {\n display: none;\n }\n\n .anchored-root {\n position: relative;\n display: flex;\n width: 100%;\n min-width: 0;\n }\n\n /* Make anchor fill the flex row and allow it to shrink. */\n ::slotted(*:not([slot])) {\n flex-grow: 1; /* fill the flex row */\n flex-shrink: 1; /* compress when constrained */\n flex-basis: auto; /* start from the anchor's natural size */\n min-width: 0; /* flex items won't shrink below content size without this */\n }\n\n /* Anchored container covers the anchor but is invisible to pointer events. */\n .anchored-host {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n /* Restore interactivity for actual anchored content. */\n ::slotted([slot=\"anchored\"]) {\n pointer-events: auto;\n }\n ",this),this.#r(),this.defaultSlot.addEventListener("slotchange",()=>this.#l()),this.#l()}#c(){const t=this.#n?.classList?.contains("hidden");this.classList.toggle("hidden",t)}#l(){this.#h(),this.#t=this.#d(this.#t,this.#a,"stretch"),this.#e=this.#d(this.#e,this.#i,"st-host-direction"),this.#u()}#u(){this.#s?.disconnect(),this.#n&&(this.#s=(0,i.mx)(this.#n,()=>this.#c(),{includeAttrs:["class"]}))}connectedCallback(){super.connectedCallback?.(),this.#u(),this.#c()}#r(){const t="\n descope-anchored {\n width: 100%; /* fill the outer host so the anchored element spans the full anchor width */\n }\n :host([stretch]) {\n display: inline-flex; /* switch from inline-block so internal children are flex items */\n width: 100%; /* fill non-flex parents */\n flex-grow: 1; /* absorb extra space in flex parents */\n flex-shrink: 0; /* hold full width — shrink:1 would let siblings squeeze it below 100% */\n flex-basis: auto; /* defer to width:100% on the main axis; avoids forcing 100% height in column-flex parents */\n min-width: 0; /* prevent overflow when the outer host is itself inside a constrained flex row */\n }\n ";this.#o?this.#o.replaceSync(t):this.#a&&(this.#o=(0,i.fz)(t,this.#a))}#d(t,e,o){return t?.disconnect(),e?.removeAttribute(o),this.#n&&e?(0,i.EA)(this.#n,e,{includeAttrs:[o]}):null}disconnectedCallback(){super.disconnectedCallback?.(),this.#t?.disconnect(),this.#e?.disconnect(),this.#s?.disconnect()}#h(){this.toggleAttribute("has-anchor",!!this.#n),this.#c()}}const c=(0,a.Zz)(s.tQ)(l);customElements.define(r,c)},11298(t,e,o){"use strict";o.d(e,{T:()=>r,q:()=>u});var s=o(88961),n=o(72270),i=o(25964),a=o(63200);const r=(0,i.xE)("attachment"),l=["top-end","top-start","top-center","bottom-start","bottom-end","bottom-center"],c=l[0];class h extends((0,n.qu)({componentName:r,baseSelector:"descope-anchored"})){#p=null;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <descope-anchored>\n <slot></slot>\n <div slot="anchored" class="attachment-container">\n <slot name="attachment"></slot>\n </div>\n </descope-anchored>\n ',this.defaultSlot=this.shadowRoot.querySelector("slot:not([name])"),this.attachmentSlot=this.shadowRoot.querySelector('slot[name="attachment"]'),this.anchored=this.shadowRoot.querySelector("descope-anchored")}get#m(){return this.attachmentSlot?.assignedElements()[0]}static get observedAttributes(){return[...super.observedAttributes||[],"position"]}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),"position"===t&&e!==o&&this.#b()}init(){super.init?.(),(0,i.fz)("\n :host {\n display: inline-block;\n }\n :host(.hidden) {\n display: none;\n }\n .attachment-container {\n position: absolute;\n z-index: 1;\n pointer-events: none;\n width: 100%;\n display: flex;\n align-items: center;\n container-type: inline-size;\n }\n",this),this.#b();const t=this.shadowRoot.querySelector(".attachment-container");(0,i.mx)(t,()=>this.#g(),{includeAttrs:["st-host-direction"]}),this.attachmentSlot.addEventListener("slotchange",()=>this.#g()),this.defaultSlot.addEventListener("slotchange",()=>{this.#y(),window.requestAnimationFrame(()=>this.#w())}),window.requestAnimationFrame(()=>this.#y())}#c(){const t=this.anchored?.classList?.contains("hidden");this.classList.toggle("hidden",t)}#v(){this.#p?.disconnect(),this.anchored&&(this.#p=(0,i.mx)(this.anchored,()=>this.#c(),{includeAttrs:["class"]}))}connectedCallback(){super.connectedCallback?.(),this.#c(),this.#v()}disconnectedCallback(){super.disconnectedCallback?.(),this.#p?.disconnect()}#w(){const t=this.defaultSlot?.assignedElements()?.[0],e=t?.getBoundingClientRect();if(e){const t=e.width;this.#m?.setAttribute("data-attachment-size",Number(t))}}#y(){const t=this.defaultSlot?.assignedElements()?.length>0;this.classList.toggle("hidden",!t)}#g(){const t=this.shadowRoot.querySelector(".attachment-container")?.getAttribute("st-host-direction");t&&this.#m?.setAttribute("st-host-direction",t)}get offsetX(){return this.getAttribute("offset-x")||"0px"}get offsetY(){return this.getAttribute("offset-y")||"0px"}#b(){const t=this.getAttribute("position");l.includes(t)||this.setAttribute("position",c)}}const d={selector:()=>".attachment-container"},u=(0,a.Zz)((0,s.RF)({mappings:{transform:{...d},justifyContent:{...d},maxWidth:{...d},top:{...d},bottom:{...d},left:{...d},right:{...d},offsetX:{},offsetY:{}}}),s.VO,s.tQ)(h)},28313(t,e,o){"use strict";o.r(e),o.d(e,{AttachmentClass:()=>s.q,componentName:()=>s.T}),o(13094);var s=o(11298);customElements.define(s.T,s.q)},77888(t,e,o){"use strict";o.d(e,{T:()=>r,e:()=>c});var s=o(88961),n=o(72270),i=o(25964),a=o(63200);const r=(0,i.xE)("badge");class l extends((0,n.qu)({componentName:r,baseSelector:":host > div"})){static get observedAttributes(){return["data-attachment-size","shrink-to-indicator-threshold"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n <slot></slot>\n\t\t</div>\n\t\t",(0,i.fz)("\n :host {\n display: inline-flex;\n }\n :host > div {\n position: relative;\n width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n ",this)}get shrinkToIndicatorThreshold(){return this.getAttribute("shrink-to-indicator-threshold")||65}#f(t){this.toggleAttribute("shrink-to-indicator",parseFloat(t)<this.shrinkToIndicatorThreshold)}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),"data-attachment-size"===t&&e!==o&&this.#f(o)}}const c=(0,a.Zz)((0,s.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostHeight:[{selector:()=>":host",property:"height"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},lineHeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{},boxShadow:{},textIndent:{}}}),s.VO,s.tQ)(l)},11065(t,e,o){"use strict";o.r(e),o.d(e,{BadgeClass:()=>s.e,componentName:()=>s.T});var s=o(77888);customElements.define(s.T,s.e)},92320(t,e,o){"use strict";o.r(e),o.d(e,{FilterClass:()=>j,componentName:()=>P}),o(20428),o(64014),o(27092),o(70067),o(30576),o(56737);var s=o(88961),n=o(63200),i=o(25964),a=o(72270),r=o(19624),l=o(86365),c=o(94681),h=o(28027);const d={equal:{label:"Equal"},"not-equal":{label:"Not Equal"},contains:{label:"Contains"},"not-contains":{label:"Excludes"},"starts-with":{label:"Starts with"},"ends-with":{label:"Ends with"},gt:{label:"Greater Than"},lt:{label:"Less Than"},gte:{label:"Not Less Than"},lte:{label:"Not Greater Than"},"is-any-of":{label:"Is any of"},"not-any-of":{label:"Not any of"},"is-empty":{label:"Is empty",noValue:!0},"is-not-empty":{label:"Is not empty",noValue:!0}},u=Object.keys(d).map(t=>`data-operator-label-${t}`),p={text:["contains","not-contains","equal","not-equal","starts-with","ends-with","is-empty","is-not-empty"],number:["equal","not-equal","gt","lte","lt","gte","is-empty","is-not-empty"],email:["equal","not-equal","contains","not-contains","is-empty","is-not-empty"],boolean:["equal","not-equal","is-empty","is-not-empty"],singleselect:["equal","not-equal","is-empty","is-not-empty"],multiselect:["is-any-of","not-any-of","is-empty","is-not-empty"]},m=(t,e)=>({id:t,...e[t]||{}}),b=(t,e,o,s=d)=>{const n=((o||p)[t]||[]).map(t=>m(t,s));return Array.isArray(e)&&0!==e.length?e.every(t=>"string"==typeof t)?n.filter(t=>e.includes(t.id)):e.map(t=>{const e="string"==typeof t?t:t.id,o="string"==typeof t?{}:t;return{...n.find(t=>t.id===e)||m(e,s),...o}}):n},g=t=>{if(!t||!t.column||!t.operator)return!1;if(t.noValue||(e=t.operator,d[e]?.noValue))return!0;var e;const{value:o}=t;return null!=o&&(Array.isArray(o)?o.length>0:String(o).length>0)},y=(t,e,o)=>{o.forEach(o=>((t,e,o)=>{Array.from(e.querySelectorAll(`:scope > [data-slot-copy="${o}"]`)).forEach(t=>t.remove()),Array.from(t.children).filter(t=>t.getAttribute?.("slot")===o).forEach(t=>{const s=t.cloneNode(!0);s.setAttribute("data-slot-copy",o),e.appendChild(s)})})(t,e,o))},w=t=>{let e=t;if("string"==typeof e)try{e=JSON.parse(e)}catch{return[]}return Array.isArray(e)?e.filter(t=>t&&"object"==typeof t&&"string"==typeof t.column&&"string"==typeof t.operator):[]},v=(t,e)=>{const o=t.getAttribute(e);if(!o)return null;try{return JSON.parse(o)}catch{return null}};var f=o(8074),A=o.n(f);const S=(0,i.xE)("filter-row"),C=["text","number","email"],R=["boolean","singleselect"],x=t=>!t||C.includes(t),V=t=>R.includes(t),L=t=>"multiselect"===t,E=()=>new Promise(t=>setTimeout(t)),{host:N}={host:{selector:()=>":host"}},T=(0,n.Zz)((0,s.RF)({mappings:{hostWidth:{...N,property:"width"},hostMinWidth:{selector:()=>":host",property:"min-width"},hostDirection:[{...N,property:"direction"},{selector:()=>r.J.componentName,property:r.J.cssVarList.hostDirection},{selector:()=>l.C.componentName,property:l.C.cssVarList.hostDirection},{selector:()=>c.t.componentName,property:c.t.cssVarList.hostDirection}],rowGap:{selector:()=>".row",property:"gap"},inputWidth:[{selector:()=>l.C.componentName,property:l.C.cssVarList.hostWidth},{selector:()=>h.w.componentName,property:h.w.cssVarList.hostWidth},{selector:()=>c.t.componentName,property:c.t.cssVarList.hostWidth}],deleteDisabledIconColor:{selector:()=>`${r.J.componentName}.delete-btn[disabled="true"]`,property:r.J.cssVarList.iconColor}}}),s.tQ,t=>class extends t{#A=[];#S=null;#C=!1;#R;#x;#V;#L;#E;#N;#T=null;#I=(t=>{let e;const o=(...o)=>{clearTimeout(e),e=setTimeout(()=>t(...o),350)};return o.cancel=()=>clearTimeout(e),o})(()=>this.#k());static get observedAttributes(){return[...t.observedAttributes||[],"data","value","disable-delete","label-type","operators-catalog","data-value-label-true","data-value-label-false",...u]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n <div class="row">\n <descope-combo-box class="col-select" placeholder="Column" bordered="true" item-label-path="data-name" item-value-path="data-id"></descope-combo-box>\n <descope-combo-box class="op-select" placeholder="Operator" bordered="true" item-label-path="data-name" item-value-path="data-id"></descope-combo-box>\n <div class="value-wrapper">\n <descope-text-field class="text-value" placeholder="Value" bordered="true"></descope-text-field>\n <descope-combo-box class="combo-value hidden" placeholder="Value" bordered="true" item-label-path="data-name" item-value-path="data-id"></descope-combo-box>\n <descope-multi-select-combo-box class="multi-value hidden" placeholder="Value" bordered="true" item-label-path="data-name" item-value-path="data-id"></descope-multi-select-combo-box>\n </div>\n <descope-button class="delete-btn" variant="link" mode="primary" size="md" square="true">\n <slot name="delete-row-icon">\n <descope-icon src="${A()}" src-dark="${A()}"></descope-icon>\n </slot>\n </descope-button>\n </div>\n `,(0,i.fz)("\n :host {\n display: block;\n }\n .row {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;\n align-items: center;\n }\n .col-select,\n .op-select,\n .value-wrapper {\n min-width: 0;\n overflow: hidden;\n }\n /* Let value inputs shrink to the cell instead of growing to fit their\n content (e.g. the multi-select's chip area). */\n .text-value,\n .combo-value,\n .multi-value {\n min-width: 0;\n }\n .hidden {\n display: none;\n }\n .value-wrapper.no-value {\n visibility: hidden;\n }\n ",this),this.#R=this.shadowRoot.querySelector(".col-select"),this.#x=this.shadowRoot.querySelector(".op-select"),this.#V=this.shadowRoot.querySelector(".text-value"),this.#L=this.shadowRoot.querySelector(".combo-value"),this.#E=this.shadowRoot.querySelector(".multi-value"),this.#N=this.shadowRoot.querySelector(".delete-btn")}init(){super.init?.(),this.#O(),this.#N.addEventListener("click",()=>this.#q("delete")),this.#D()}#D(){const t=[this.#R,this.#x,this.#V,this.#L,this.#E];[...t,this.#N].forEach(t=>(0,i.EA)(this,t,{includeAttrs:["size","disabled"]})),this.#z(),t.forEach(t=>(0,i.EA)(this,t,{includeAttrs:["label-type"]}))}#z(){const t=t=>({includeAttrs:[t],mapAttrs:{[t]:"placeholder"}});(0,i.EA)(this,this.#R,t("data-column-placeholder")),(0,i.EA)(this,this.#x,t("data-operator-placeholder")),[this.#V,this.#L,this.#E].forEach(e=>(0,i.EA)(this,e,t("data-value-placeholder")))}#M(t,e){const o=this.#C;this.#C=!0,t.value=e,this.#C=o}#O(){this.shadowRoot.querySelector(".row").addEventListener("input",t=>{this.#C||(t.target===this.#R?this.#B():t.target===this.#x?this.#W():this.#P()?this.#I():this.#k())})}#P(){return!this.#V.classList.contains("hidden")}#F(t){return this.#A.find(e=>e.id===t)}get trueLabel(){return this.getAttribute("data-value-label-true")||"True"}get falseLabel(){return this.getAttribute("data-value-label-false")||"False"}#J(){return[{value:"true",label:this.trueLabel},{value:"false",label:this.falseLabel}]}#H(t){return t?b(t.inputType,t.operators,v(this,"operators-catalog")).map(t=>{const e=this.getAttribute(`data-operator-label-${t.id}`);return e?{...t,label:e}:t}):[]}#B(){const t=this.#F(this.#R.value);if(!t)return;this.#I.cancel();const e=this.#H(t);this.#x.data=e.map(t=>({value:t.id,label:t.label}));const o=e.find(t=>t.id===this.#x.value)||e[0];o&&this.#M(this.#x,o.id);const s=this.#T,n=t.inputType,i=s!==n;this.#T=n,this.#G(t,o,{resetValue:i}),this.#k()}#W(){const t=this.#F(this.#R.value),e=this.#H(t).find(t=>t.id===this.#x.value);this.#G(t,e),this.#k()}#G(t,e,o={}){const s=t?.inputType,n=o.resetValue??!1;this.shadowRoot.querySelector(".value-wrapper").classList.toggle("no-value",!!e?.noValue),this.#Z(s),x(s)?this.#j(s,n):V(s)?this.#$(t,n):L(s)&&this.#_(t,n)}#Z(t){this.#V.classList.toggle("hidden",!x(t)),this.#L.classList.toggle("hidden",!V(t)),this.#E.classList.toggle("hidden",!L(t))}#j(t,e){"number"===t?this.#V.setAttribute("type","number"):"email"===t?this.#V.setAttribute("type","email"):this.#V.removeAttribute("type"),e&&this.#M(this.#V,"")}#$(t,e){const o="boolean"===t.inputType?this.#J():t.options||[];this.#L.data=o.map(t=>({value:t.value,label:t.label})),e&&this.#M(this.#L,"")}#_(t,e){this.#E.data=(t.options||[]).map(t=>({value:t.value,label:t.label})),e&&this.#M(this.#E,[])}#Q(t){return L(t)?this.#E:V(t)?this.#L:x(t)?this.#V:null}#Y(t){const e=this.#Q(t.inputType);return e?e.value??(L(t.inputType)?[]:""):null}#U(){const t=this.#R?.value||"",e=this.#x?.value||"",o=this.#F(t),s=this.#H(o).find(t=>t.id===e),n=!!s?.noValue,i=s&&!n&&o?this.#Y(o):null;return{id:this.#S,column:t,operator:e,value:i,noValue:n}}#q(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}#k(){this.#q("change",{value:this.#U()})}async#X(t){if(this.#S=t.id??null,t.column){this.#C=!0;try{const e=this.#F(t.column);if(!e)return;await E(),this.#R.value=t.column;const o=this.#H(e);if(this.#x.data=o.map(t=>({value:t.id,label:t.label})),t.operator){await E(),this.#x.value=t.operator;const s=o.find(e=>e.id===t.operator);this.#G(e,s)}null!==t.value&&void 0!==t.value&&(await E(),this.#K(e,t.value))}finally{this.#C=!1}}}#K(t,e){const o=t.inputType,s=this.#Q(o);s&&(L(o)?this.#M(s,Array.isArray(e)?e:[]):V(o)?this.#M(s,String(e)):this.#M(s,e??""))}#tt(t){const e="floating"===t;[this.#R,this.#x,this.#V,this.#L,this.#E].forEach(t=>{if(t)if(e){const e=t.getAttribute("placeholder");e&&t.setAttribute("label",e)}else t.removeAttribute("label")})}get value(){return JSON.stringify(this.#U())}set value(t){this.setAttribute("value","string"==typeof t?t:JSON.stringify(t))}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&("data"===t&&this.#et(o),"value"===t&&this.#ot(o),"label-type"===t&&this.#tt(o),"disable-delete"===t&&this.#st(o),("operators-catalog"===t||t.startsWith("data-operator-label-"))&&this.#nt(),"data-value-label-true"!==t&&"data-value-label-false"!==t||this.#it())}#et(t){if(t)try{this.#A=JSON.parse(t),this.#R.data=this.#A.map(t=>({value:t.id,label:t.label}))}catch{}}#ot(t){if(t)try{this.#X(JSON.parse(t))}catch{}}#st(t){null!==t&&"false"!==t?this.#N.setAttribute("disabled","true"):this.#N.removeAttribute("disabled")}#it(){const t=this.#F(this.#R?.value);t&&"boolean"===t.inputType&&this.#L&&(this.#L.data=this.#J())}#nt(){const t=this.#F(this.#R?.value);if(!t||!this.#x)return;const e=this.#H(t);this.#x.data=e.map(t=>({value:t.id,label:t.label}))}})((0,a.qu)({componentName:S,baseSelector:".row"}));customElements.define(S,T);const I=(0,i.xE)("filter-rows"),{host:k,container:O,rowsList:q,actions:D,addRowIcon:z}={host:{selector:()=>":host"},container:{selector:()=>".container"},rowsList:{selector:()=>".rows-list"},actions:{selector:()=>".actions"},addRowIcon:{selector:()=>'::slotted([slot="add-row-icon"])'}},M=(0,n.Zz)((0,s.RF)({mappings:{hostWidth:{...k,property:"width"},hostMinWidth:{...k,property:"min-width"},hostDirection:[{...k,property:"direction"},{selector:()=>r.J.componentName,property:r.J.cssVarList.hostDirection},{selector:()=>T.componentName,property:T.cssVarList.hostDirection}],containerWidth:{...O,property:"width"},containerPadding:{...O,property:"padding"},containerGap:{...O,property:"gap"},listGap:{...q,property:"gap"},listMaxHeight:{...q,property:"max-height"},actionsGap:{...D,property:"gap"},addRowIconSize:[{...z,property:"width"},{...z,property:"height"}]}}),s.tQ,t=>class extends t{#at=[];#rt=0;#lt(){return this.#rt+=1,`row-${this.#rt}`}#ct(){return{id:this.#lt(),column:"",operator:"",value:null}}#ht(t){const e=t.value,o=null!=e&&""!==e&&!(Array.isArray(e)&&0===e.length);return!t.column&&!t.operator&&!o}#dt=[];#ut;#pt;#mt;#bt;static get observedAttributes(){return[...t.observedAttributes||[],"data","value","clear-all-button-label","add-button-label","max-rows"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <div class="container">\n <div class="rows-list"></div>\n <div class="actions">\n <descope-button class="add-row" variant="link" mode="primary">\n <slot name="add-row-icon" slot="prefix"></slot>\n <span class="add-button-label">Add filter</span>\n </descope-button>\n <descope-button class="clear-all" variant="link" mode="error">Clear all</descope-button>\n </div>\n </div>\n ',(0,i.fz)('\n :host {\n display: block;\n box-sizing: border-box;\n }\n .container {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n }\n .rows-list {\n display: flex;\n flex-direction: column;\n overflow: hidden auto;\n }\n .rows-list:empty {\n display: none;\n }\n .actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n .add-row {\n margin-inline-end: auto;\n }\n .hidden {\n display: none;\n }\n ::slotted([slot="add-row-icon"]) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n ',this),this.#ut=this.shadowRoot.querySelector(".rows-list"),this.#pt=this.shadowRoot.querySelector(".add-row"),this.#mt=this.shadowRoot.querySelector(".add-button-label"),this.#bt=this.shadowRoot.querySelector(".clear-all")}init(){super.init?.(),(0,i.Ge)(this,this.#gt.bind(this)),this.#pt.addEventListener("click",this.#yt.bind(this)),this.#bt.addEventListener("click",this.#wt.bind(this)),this.#ut.addEventListener("change",this.#vt.bind(this)),this.#ut.addEventListener("delete",this.#ft.bind(this)),[this.#pt,this.#bt].forEach(t=>(0,i.EA)(this,t,{includeAttrs:["size"]})),this.#At(),this.#gt(),this.#St(),this.#Ct(),setTimeout(()=>this.#Rt())}#At(){const t=v(this,"data");this.#dt=Array.isArray(t)?t:[]}#gt(){this.#ut.querySelectorAll(S).forEach(t=>{t.querySelectorAll(':scope > [slot="delete-row-icon"]').forEach(t=>t.remove()),this.#xt(t)})}#Vt(){const t=new Set(this.#at.map(t=>t.id));this.#ut.querySelectorAll(S).forEach(e=>{t.has(e.dataset.rowId)||e.remove()})}#Lt(t){return this.#ut.querySelector(`${S}[data-row-id="${t}"]`)}#Ct(){this.#Vt(),this.#at.forEach(t=>{(this.#Lt(t.id)||this.#Et(t.id)).setAttribute("value",JSON.stringify(t))}),this.#Rt(),this.#Nt()}#Et(t){const e=document.createElement(S);return e.dataset.rowId=t,this.#ut.appendChild(e),(0,i.EA)(this,e,{includeAttrs:["data","size","label-type","operators-catalog","data-value-label-true","data-value-label-false","data-column-placeholder","data-operator-placeholder","data-value-placeholder",...u]}),this.#xt(e),e}#xt(t){Array.from(this.children).filter(t=>"delete-row-icon"===t.getAttribute?.("slot")).forEach(e=>{const o=e.cloneNode(!0);o.setAttribute("slot","delete-row-icon"),t.appendChild(o)})}#Rt(){const t=1===this.#at.length&&this.#ht(this.#at[0]);this.#ut.querySelectorAll(S).forEach(e=>{t?e.setAttribute("disable-delete",""):e.removeAttribute("disable-delete")}),t?this.#bt.setAttribute("disabled","true"):this.#bt.removeAttribute("disabled")}#St(){0===this.#at.length&&(this.#at=[this.#ct()])}#Nt(){const t=parseInt(this.getAttribute("max-rows"),10),e=!Number.isNaN(t)&&this.#at.length>=t;this.#pt.classList.toggle("hidden",e)}#yt(){this.#at=[...this.#at,this.#ct()],this.#Ct(),this.#k()}#wt(){this.#at=[this.#ct()],this.#Ct(),this.#q("clear")}#vt(t){const e=t.target.closest(S);if(!e)return;t.stopPropagation();const o=e.dataset.rowId;this.#at=this.#at.map(e=>e.id===o?t.detail.value:e),this.#Rt(),this.#k()}#ft(t){const e=t.target.closest(S);if(!e)return;const o=e.dataset.rowId;this.#at=this.#at.filter(t=>t.id!==o),this.#St(),this.#Ct(),this.#k()}#q(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}#Tt({column:t,operator:e}){const o=this.#dt.find(e=>e.id===t);return o&&b(o.inputType,o.operators,v(this,"operators-catalog")).find(t=>t.id===e)||null}#It(t){const e=this.#Tt(t);return e?{...null!=e.prefix&&{prefix:e.prefix},...null!=e.suffix&&{suffix:e.suffix}}:{}}#k(){const t=t=>({column:t.column,operator:t.operator,value:t.value,...this.#It(t)}),e=this.#at.filter(g).map(t),o=this.#at.map(e=>({...t(e),...null!=e.noValue&&{noValue:e.noValue}}));this.#q("change",{value:e,rows:o})}get value(){return JSON.stringify(this.#at)}set value(t){this.setAttribute("value","string"==typeof t?t:JSON.stringify(t))}get addButtonLabel(){return this.getAttribute("add-button-label")||"Add filter"}get clearAllButtonLabel(){return this.getAttribute("clear-all-button-label")||"Clear all"}#kt(){this.#mt.textContent=this.addButtonLabel}#Ot(){this.#bt.textContent=this.clearAllButtonLabel}#qt(t){if(t)try{const e=JSON.parse(t);this.#at=(Array.isArray(e)?e:[]).map(t=>{const e=this.#Tt(t);return{...t,id:t.id||this.#lt(),...e&&{noValue:!!e.noValue}}}),this.#St(),this.#Ct()}catch{}}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&("data"===t&&(this.#At(),this.#Ct()),"value"===t&&this.#qt(o),"add-button-label"===t&&this.#kt(),"clear-all-button-label"===t&&this.#Ot(),"max-rows"===t&&this.#Nt())}})((0,a.qu)({componentName:I,baseSelector:".container"}));customElements.define(I,M),o(11065),o(28313);var B=o(77888),W=o(11298);const P=(0,i.xE)("filter"),F=(0,a.qu)({componentName:P,baseSelector:"vaadin-popover"}),J=["add-row-icon","delete-row-icon"],{host:H,overlay:G,backdrop:Z}={host:{selector:()=>":host"},overlay:{selector:"vaadin-popover-overlay::part(overlay)"},backdrop:{selector:"vaadin-popover-overlay::part(backdrop)"}},j=(0,n.Zz)((0,s.RF)({mappings:{hostWidth:{...H,property:"width"},hostDirection:[{...H,property:"direction"},{selector:()=>r.J.componentName,property:r.J.cssVarList.hostDirection},{selector:()=>M.componentName,property:M.cssVarList.hostDirection}],counterBorderRadius:{selector:()=>B.e.componentName,property:B.e.cssVarList.borderRadius},counterWidth:{selector:()=>B.e.componentName,property:B.e.cssVarList.hostWidth},counterHeight:{selector:()=>B.e.componentName,property:B.e.cssVarList.hostHeight},counterFontSize:{selector:()=>B.e.componentName,property:B.e.cssVarList.fontSize},counterLineHeight:{selector:()=>B.e.componentName,property:B.e.cssVarList.lineHeight},counterBackgroundColor:{selector:()=>B.e.componentName,property:B.e.cssVarList.backgroundColor},counterTextColor:{selector:()=>B.e.componentName,property:B.e.cssVarList.textColor},counterBorderColor:{selector:()=>B.e.componentName,property:B.e.cssVarList.borderColor},counterOffsetX:{selector:()=>W.q.componentName,property:W.q.cssVarList.offsetX},counterOffsetY:{selector:()=>W.q.componentName,property:W.q.cssVarList.offsetY},rowsHostWidth:{selector:()=>M.componentName,property:M.cssVarList.hostWidth},rowsContainerWidth:{selector:()=>M.componentName,property:M.cssVarList.containerWidth},rowsContainerPadding:{selector:()=>M.componentName,property:M.cssVarList.containerPadding},rowsContainerGap:{selector:()=>M.componentName,property:M.cssVarList.containerGap},rowsListGap:{selector:()=>M.componentName,property:M.cssVarList.listGap},rowsListMaxHeight:{selector:()=>M.componentName,property:M.cssVarList.listMaxHeight},rowsActionsGap:{selector:()=>M.componentName,property:M.cssVarList.actionsGap},rowsAddRowIconSize:{selector:()=>M.componentName,property:M.cssVarList.addRowIconSize},rowWidth:{...H,property:T.cssVarList.hostWidth},rowMinWidth:{...H,property:T.cssVarList.hostMinWidth},rowValueWidth:{...H,property:T.cssVarList.inputWidth},rowGap:{...H,property:T.cssVarList.rowGap},rowDisabledDeleteColor:{...H,property:T.cssVarList.deleteDisabledIconColor}}}),(0,s.mA)({name:"overlay",selector:"",mappings:{marginTop:{...G,property:"margin-top"},width:{...G},backgroundColor:{...G},backdropBackgroundColor:{...Z,property:"background-color"},backdropPointerEvents:{...Z,property:"pointer-events"},padding:{...G},boxShadow:{...G},borderRadius:{...G},outlineWidth:{...G},outlineColor:{...G},outlineStyle:{...G}}}),s.VO,s.tQ)(class extends F{#Dt=[];#zt=!1;#Mt;#Bt=null;#Wt=null;#Pt=null;static get observedAttributes(){return[...F.observedAttributes||[],"label","disable-indicator","data","value"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <div>\n <descope-attachment class="attachment" position="top-end" st-offset-x="0px">\n <descope-button class="trigger-btn">\n <slot name="button-icon"></slot>\n <span class="trigger-label"></span>\n </descope-button>\n <descope-badge slot="attachment" class="counter hidden" mode="primary" variant="contained" bordered="true" size="xs">\n <span class="counter-text">0</span>\n </descope-badge>\n </descope-attachment>\n <vaadin-popover></vaadin-popover>\n <slot name="add-row-icon" class="hidden"></slot>\n <slot name="delete-row-icon" class="hidden"></slot>\n </div>\n ',(0,i.fz)('\n :host {\n display: inline-block;\n box-sizing: border-box;\n user-select: none;\n max-width: 100%;\n }\n\n :host([full-width="true"]) {\n display: block;\n }\n\n \n .hidden {\n display: none;\n }\n\n :host([read-only="true"]) .trigger-btn {\n pointer-events: none;\n }\n ',this),this.triggerBtn=this.shadowRoot.querySelector(".trigger-btn"),this.triggerLabel=this.shadowRoot.querySelector(".trigger-label"),this.counter=this.shadowRoot.querySelector(".counter"),this.counterText=this.shadowRoot.querySelector(".counter-text")}get opened(){return"true"===this.getAttribute("opened")}get isIndicatorVisible(){return"true"!==this.getAttribute("disable-indicator")}get isFullWidth(){return"true"===this.getAttribute("full-width")}get overlay(){return this.#Pt??=this.baseElement.shadowRoot?.querySelector("vaadin-popover-overlay")||null,this.#Pt}get backdrop(){return this.overlay?.shadowRoot?.querySelector("#backdrop")}get filterRowsElement(){return this.overlay?.querySelector(I)||null}init(){super.init?.(),this.#Ft(),this.#Jt(),this.#Ht(),(0,i.EA)(this,this.triggerBtn,{includeAttrs:["button-mode","button-variant","size","full-width"],mapAttrs:{"button-mode":"mode","button-variant":"variant"}}),this.#Gt(),setTimeout(()=>{this.#Zt()})}#Gt(){J.forEach(t=>{const e=this.shadowRoot.querySelector(`slot[name="${t}"]`);e?.addEventListener("slotchange",()=>{this.#Wt?.isConnected&&y(this,this.#Wt,[t])})})}#Ft(){this.baseElement.trigger=[],this.baseElement.withBackdrop=!0,this.baseElement.renderer=this.#jt.bind(this),this.baseElement.addEventListener("click",t=>{t.stopPropagation()}),this.triggerBtn.addEventListener("click",()=>this.onPopoverToggle())}#jt(t){if(!t.firstChild){this.overlay.positionTarget=this.triggerBtn;const e=document.createElement(I);(0,i.EA)(this,e,{includeAttrs:["operators","size","max-rows","clear-all-button-label","add-button-label","label-type","data-value-label-true","data-value-label-false","data-column-placeholder","data-operator-placeholder","data-value-placeholder",...u],mapAttrs:{operators:"operators-catalog"}}),this.#$t(e),t.appendChild(e),this.#Wt=e,e.setAttribute("value",JSON.stringify(this.#Dt)),e.addEventListener("change",this.#_t.bind(this)),e.addEventListener("clear",this.#Qt.bind(this));const o=new CSSStyleSheet;o.insertRule(":host{display:block!important;}"),this.baseElement?.shadowRoot?.adoptedStyleSheets?.push(o),this.backdrop?.addEventListener("click",()=>this.closePopover())}this.#Wt&&y(this,this.#Wt,J),t.style.setProperty("visibility","hidden"),setTimeout(()=>{this.#Yt(),t.style.setProperty("visibility","visible")},50)}#Yt(){if(!this.overlay)return;const t=this.shadowRoot.querySelector("vaadin-popover")?.shadowRoot;if(!t)return;this.#Mt&&(t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>t!==this.#Mt));const e=document.body.getBoundingClientRect(),o=this.triggerBtn.getBoundingClientRect(),s=this.overlay.getBoundingClientRect(),n=o.left-s.left,a=s.left,r=e.width-s.right;let l;l=n>0?Math.min(n,r):-1*Math.min(Math.abs(n),a);const c=Math.round(this.getBoundingClientRect().width);this.#Mt=(0,i.fz)(`\n vaadin-popover-overlay::part(overlay) {\n margin-left: ${l}px;\n ${this.isFullWidth?`width: ${c}px; max-width: ${c}px;`:""}\n }\n `,t)}#q(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}#Ut(t){this.#zt=!0,this.setAttribute("value",JSON.stringify(w(t))),this.#zt=!1}#_t(t){const e=w(t.detail.value||[]);JSON.stringify(e)!==JSON.stringify(this.#Dt)&&(this.#Ut(e),this.#q("filter-apply",{value:this.#Dt,action:"apply"}))}#Qt(){this.#Ut([]),this.#q("filter-clear",{value:this.#Dt,action:"clear-all"})}#Jt(){if(!this.counter)return;const t=this.#Dt.length;this.counterText.textContent=String(t),this.counter.classList.toggle("hidden",t<1||!this.isIndicatorVisible)}#Ht(){if(!this.triggerLabel)return;const t=this.getAttribute("label")||"";this.triggerLabel.textContent=t,this.triggerLabel.classList.toggle("hidden",!t)}#$t(t){t&&this.#Bt&&t.setAttribute("data",JSON.stringify(this.#Bt))}get value(){return JSON.stringify(this.#Dt)}set value(t){this.#Ut(t)}set data(t){this.#Bt=Array.isArray(t)?t:null,this.filterRowsElement&&this.#Bt&&this.filterRowsElement.setAttribute("data",JSON.stringify(this.#Bt))}get data(){return this.#Bt}#Zt(){this.overlay&&(this.overlay._attachOverlay=()=>this.overlay.bringToFront(),this.overlay._detachOverlay=()=>{})}get readOnly(){return"true"===this.getAttribute("read-only")}onPopoverToggle(){this.readOnly||(this.opened?this.closePopover():this.openPopover())}openPopover(){this.setAttribute("opened","true"),this.baseElement.opened=!0}closePopover(){this.removeAttribute("opened"),this.baseElement.opened=!1}#Xt(t){t&&(this.#Dt=w(t),this.#Jt(),this.#zt||this.filterRowsElement?.setAttribute("value",JSON.stringify(this.#Dt)))}#Kt(t){if(t)try{this.#Bt=JSON.parse(t),this.filterRowsElement?.setAttribute("data",JSON.stringify(this.#Bt))}catch{}}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&("value"===t&&this.#Xt(o),"data"===t&&this.#Kt(o),"label"===t&&this.#Ht(),"disable-indicator"===t&&this.#Jt())}});customElements.define(P,j)},56737(t,e,o){"use strict";o.r(e),o.d(e,{IconClass:()=>s.S,componentName:()=>s.T}),o(53455);var s=o(98538);customElements.define(s.T,s.S)},53455(t,e,o){"use strict";o.r(e),o.d(e,{ImageClass:()=>s.q,componentName:()=>s.T});var s=o(8512);customElements.define(s.T,s.q)}}]);
|
|
1
|
+
(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3267,4188,5673,7164],{8074(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPiA8L3N2Zz4="},13094(t,e,o){"use strict";o.r(e),o.d(e,{AnchoredClass:()=>c,componentName:()=>r});var s=o(88961),n=o(72270),i=o(25964),a=o(63200);const r=(0,i.xE)("anchored");class l extends((0,n.qu)({componentName:r,baseSelector:".anchored-root"})){#t=null;#e=null;#o=null;#s=null;get#n(){return this.defaultSlot.assignedElements({flatten:!0})[0]}get#i(){return this.shadowRoot.querySelector('slot[name="anchored"]')?.assignedElements()[0]}get#a(){return this.getRootNode().host}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <div class="anchored-root" part="root">\n <slot></slot>\n <div class="anchored-host" part="anchored">\n <slot name="anchored"></slot>\n </div>\n </div>\n ',this.defaultSlot=this.shadowRoot.querySelector("slot:not([name])")}init(){super.init?.(),(0,i.fz)("\n :host {\n display: inline-flex;\n position: relative;\n box-sizing: border-box;\n }\n\n :host(:not([has-anchor])) {\n display: none;\n }\n\n .anchored-root {\n position: relative;\n display: flex;\n width: 100%;\n min-width: 0;\n }\n\n /* Make anchor fill the flex row and allow it to shrink. */\n ::slotted(*:not([slot])) {\n flex-grow: 1; /* fill the flex row */\n flex-shrink: 1; /* compress when constrained */\n flex-basis: auto; /* start from the anchor's natural size */\n min-width: 0; /* flex items won't shrink below content size without this */\n }\n\n /* Anchored container covers the anchor but is invisible to pointer events. */\n .anchored-host {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n /* Restore interactivity for actual anchored content. */\n ::slotted([slot=\"anchored\"]) {\n pointer-events: auto;\n }\n ",this),this.#r(),this.defaultSlot.addEventListener("slotchange",()=>this.#l()),this.#l()}#c(){const t=this.#n?.classList?.contains("hidden");this.classList.toggle("hidden",t)}#l(){this.#h(),this.#t=this.#d(this.#t,this.#a,"stretch"),this.#e=this.#d(this.#e,this.#i,"st-host-direction"),this.#u()}#u(){this.#s?.disconnect(),this.#n&&(this.#s=(0,i.mx)(this.#n,()=>this.#c(),{includeAttrs:["class"]}))}connectedCallback(){super.connectedCallback?.(),this.#u(),this.#c()}#r(){const t="\n descope-anchored {\n width: 100%; /* fill the outer host so the anchored element spans the full anchor width */\n }\n :host([stretch]) {\n display: inline-flex; /* switch from inline-block so internal children are flex items */\n width: 100%; /* fill non-flex parents */\n flex-grow: 1; /* absorb extra space in flex parents */\n flex-shrink: 0; /* hold full width — shrink:1 would let siblings squeeze it below 100% */\n flex-basis: auto; /* defer to width:100% on the main axis; avoids forcing 100% height in column-flex parents */\n min-width: 0; /* prevent overflow when the outer host is itself inside a constrained flex row */\n }\n ";this.#o?this.#o.replaceSync(t):this.#a&&(this.#o=(0,i.fz)(t,this.#a))}#d(t,e,o){return t?.disconnect(),e?.removeAttribute(o),this.#n&&e?(0,i.EA)(this.#n,e,{includeAttrs:[o]}):null}disconnectedCallback(){super.disconnectedCallback?.(),this.#t?.disconnect(),this.#e?.disconnect(),this.#s?.disconnect()}#h(){this.toggleAttribute("has-anchor",!!this.#n),this.#c()}}const c=(0,a.Zz)(s.tQ)(l);customElements.define(r,c)},11298(t,e,o){"use strict";o.d(e,{T:()=>r,q:()=>u});var s=o(88961),n=o(72270),i=o(25964),a=o(63200);const r=(0,i.xE)("attachment"),l=["top-end","top-start","top-center","bottom-start","bottom-end","bottom-center"],c=l[0];class h extends((0,n.qu)({componentName:r,baseSelector:"descope-anchored"})){#p=null;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <descope-anchored>\n <slot></slot>\n <div slot="anchored" class="attachment-container">\n <slot name="attachment"></slot>\n </div>\n </descope-anchored>\n ',this.defaultSlot=this.shadowRoot.querySelector("slot:not([name])"),this.attachmentSlot=this.shadowRoot.querySelector('slot[name="attachment"]'),this.anchored=this.shadowRoot.querySelector("descope-anchored")}get#m(){return this.attachmentSlot?.assignedElements()[0]}static get observedAttributes(){return[...super.observedAttributes||[],"position"]}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),"position"===t&&e!==o&&this.#b()}init(){super.init?.(),(0,i.fz)("\n :host {\n display: inline-block;\n }\n :host(.hidden) {\n display: none;\n }\n .attachment-container {\n position: absolute;\n z-index: 1;\n pointer-events: none;\n width: 100%;\n display: flex;\n align-items: center;\n container-type: inline-size;\n }\n",this),this.#b();const t=this.shadowRoot.querySelector(".attachment-container");(0,i.mx)(t,()=>this.#g(),{includeAttrs:["st-host-direction"]}),this.attachmentSlot.addEventListener("slotchange",()=>this.#g()),this.defaultSlot.addEventListener("slotchange",()=>{this.#y(),window.requestAnimationFrame(()=>this.#w())}),window.requestAnimationFrame(()=>this.#y())}#c(){const t=this.anchored?.classList?.contains("hidden");this.classList.toggle("hidden",t)}#v(){this.#p?.disconnect(),this.anchored&&(this.#p=(0,i.mx)(this.anchored,()=>this.#c(),{includeAttrs:["class"]}))}connectedCallback(){super.connectedCallback?.(),this.#c(),this.#v()}disconnectedCallback(){super.disconnectedCallback?.(),this.#p?.disconnect()}#w(){const t=this.defaultSlot?.assignedElements()?.[0],e=t?.getBoundingClientRect();if(e){const t=e.width;this.#m?.setAttribute("data-attachment-size",Number(t))}}#y(){const t=this.defaultSlot?.assignedElements()?.length>0;this.classList.toggle("hidden",!t)}#g(){const t=this.shadowRoot.querySelector(".attachment-container")?.getAttribute("st-host-direction");t&&this.#m?.setAttribute("st-host-direction",t)}get offsetX(){return this.getAttribute("offset-x")||"0px"}get offsetY(){return this.getAttribute("offset-y")||"0px"}#b(){const t=this.getAttribute("position");l.includes(t)||this.setAttribute("position",c)}}const d={selector:()=>".attachment-container"},u=(0,a.Zz)((0,s.RF)({mappings:{transform:{...d},justifyContent:{...d},maxWidth:{...d},top:{...d},bottom:{...d},left:{...d},right:{...d},offsetX:{},offsetY:{}}}),s.VO,s.tQ)(h)},28313(t,e,o){"use strict";o.r(e),o.d(e,{AttachmentClass:()=>s.q,componentName:()=>s.T}),o(13094);var s=o(11298);customElements.define(s.T,s.q)},77888(t,e,o){"use strict";o.d(e,{T:()=>r,e:()=>c});var s=o(88961),n=o(72270),i=o(25964),a=o(63200);const r=(0,i.xE)("badge");class l extends((0,n.qu)({componentName:r,baseSelector:":host > div"})){static get observedAttributes(){return["data-attachment-size","shrink-to-indicator-threshold"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n <slot></slot>\n\t\t</div>\n\t\t",(0,i.fz)("\n :host {\n display: inline-flex;\n }\n :host > div {\n position: relative;\n width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n ",this)}get shrinkToIndicatorThreshold(){return this.getAttribute("shrink-to-indicator-threshold")||65}#f(t){this.toggleAttribute("shrink-to-indicator",parseFloat(t)<this.shrinkToIndicatorThreshold)}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),"data-attachment-size"===t&&e!==o&&this.#f(o)}}const c=(0,a.Zz)((0,s.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostHeight:[{selector:()=>":host",property:"height"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},lineHeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{},boxShadow:{},textIndent:{}}}),s.VO,s.tQ)(l)},11065(t,e,o){"use strict";o.r(e),o.d(e,{BadgeClass:()=>s.e,componentName:()=>s.T});var s=o(77888);customElements.define(s.T,s.e)},92320(t,e,o){"use strict";o.r(e),o.d(e,{FilterClass:()=>j,componentName:()=>P}),o(20428),o(64014),o(27092),o(70067),o(30576),o(56737);var s=o(88961),n=o(63200),i=o(25964),a=o(72270),r=o(19624),l=o(86365),c=o(94681),h=o(28027);const d={equal:{label:"Equal"},"not-equal":{label:"Not Equal"},contains:{label:"Contains"},"not-contains":{label:"Excludes"},"starts-with":{label:"Starts with"},"ends-with":{label:"Ends with"},gt:{label:"Greater Than"},lt:{label:"Less Than"},gte:{label:"Not Less Than"},lte:{label:"Not Greater Than"},"is-any-of":{label:"Is any of"},"not-any-of":{label:"Not any of"},"is-empty":{label:"Is empty",noValue:!0},"is-not-empty":{label:"Is not empty",noValue:!0}},u=Object.keys(d).map(t=>`data-operator-label-${t}`),p={text:["contains","not-contains","equal","not-equal","starts-with","ends-with","is-empty","is-not-empty"],number:["equal","not-equal","gt","lte","lt","gte","is-empty","is-not-empty"],email:["equal","not-equal","contains","not-contains","is-empty","is-not-empty"],boolean:["equal","not-equal","is-empty","is-not-empty"],singleselect:["equal","not-equal","is-empty","is-not-empty"],multiselect:["is-any-of","not-any-of","is-empty","is-not-empty"]},m=(t,e)=>({id:t,...e[t]||{}}),b=(t,e,o,s=d)=>{const n=((o||p)[t]||[]).map(t=>m(t,s));return Array.isArray(e)&&0!==e.length?e.every(t=>"string"==typeof t)?n.filter(t=>e.includes(t.id)):e.map(t=>{const e="string"==typeof t?t:t.id,o="string"==typeof t?{}:t;return{...n.find(t=>t.id===e)||m(e,s),...o}}):n},g=t=>{if(!t||!t.column||!t.operator)return!1;if(t.noValue||(e=t.operator,d[e]?.noValue))return!0;var e;const{value:o}=t;return null!=o&&(Array.isArray(o)?o.length>0:String(o).length>0)},y=(t,e,o)=>{o.forEach(o=>((t,e,o)=>{Array.from(e.querySelectorAll(`:scope > [data-slot-copy="${o}"]`)).forEach(t=>t.remove()),Array.from(t.children).filter(t=>t.getAttribute?.("slot")===o).forEach(t=>{const s=t.cloneNode(!0);s.setAttribute("data-slot-copy",o),e.appendChild(s)})})(t,e,o))},w=t=>{let e=t;if("string"==typeof e)try{e=JSON.parse(e)}catch{return[]}return Array.isArray(e)?e.filter(t=>t&&"object"==typeof t&&"string"==typeof t.column&&"string"==typeof t.operator):[]},v=(t,e)=>{const o=t.getAttribute(e);if(!o)return null;try{return JSON.parse(o)}catch{return null}};var f=o(8074),A=o.n(f);const S=(0,i.xE)("filter-row"),C=["text","number","email"],R=["boolean","singleselect"],x=t=>!t||C.includes(t),V=t=>R.includes(t),L=t=>"multiselect"===t,E=()=>new Promise(t=>setTimeout(t)),{host:N}={host:{selector:()=>":host"}},T=(0,n.Zz)((0,s.RF)({mappings:{hostWidth:{...N,property:"width"},hostMinWidth:{selector:()=>":host",property:"min-width"},hostDirection:[{...N,property:"direction"},{selector:()=>r.J.componentName,property:r.J.cssVarList.hostDirection},{selector:()=>l.C.componentName,property:l.C.cssVarList.hostDirection},{selector:()=>c.t.componentName,property:c.t.cssVarList.hostDirection}],rowGap:{selector:()=>".row",property:"gap"},inputWidth:[{selector:()=>l.C.componentName,property:l.C.cssVarList.hostWidth},{selector:()=>h.w.componentName,property:h.w.cssVarList.hostWidth},{selector:()=>c.t.componentName,property:c.t.cssVarList.hostWidth}],deleteDisabledIconColor:{selector:()=>`${r.J.componentName}.delete-btn[disabled="true"]`,property:r.J.cssVarList.iconColor}}}),s.tQ,t=>class extends t{#A=[];#S=null;#C=!1;#R;#x;#V;#L;#E;#N;#T=null;#k=(t=>{let e;const o=(...o)=>{clearTimeout(e),e=setTimeout(()=>t(...o),350)};return o.cancel=()=>clearTimeout(e),o})(()=>this.#I());static get observedAttributes(){return[...t.observedAttributes||[],"data","value","disable-delete","label-type","operators-catalog","data-value-label-true","data-value-label-false",...u]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n <div class="row">\n <descope-combo-box class="col-select" placeholder="Column" bordered="true" item-label-path="data-name" item-value-path="data-id"></descope-combo-box>\n <descope-combo-box class="op-select" placeholder="Operator" bordered="true" item-label-path="data-name" item-value-path="data-id"></descope-combo-box>\n <div class="value-wrapper">\n <descope-text-field class="text-value" placeholder="Value" bordered="true"></descope-text-field>\n <descope-combo-box class="combo-value hidden" placeholder="Value" bordered="true" item-label-path="data-name" item-value-path="data-id"></descope-combo-box>\n <descope-multi-select-combo-box class="multi-value hidden" placeholder="Value" bordered="true" item-label-path="data-name" item-value-path="data-id"></descope-multi-select-combo-box>\n </div>\n <descope-button class="delete-btn" variant="link" mode="primary" size="md" square="true">\n <slot name="delete-row-icon">\n <descope-icon src="${A()}" src-dark="${A()}"></descope-icon>\n </slot>\n </descope-button>\n </div>\n `,(0,i.fz)("\n :host {\n display: block;\n }\n .row {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;\n align-items: center;\n }\n .col-select,\n .op-select,\n .value-wrapper {\n min-width: 0;\n overflow: hidden;\n }\n /* Let value inputs shrink to the cell instead of growing to fit their\n content (e.g. the multi-select's chip area). */\n .text-value,\n .combo-value,\n .multi-value {\n min-width: 0;\n }\n .hidden {\n display: none;\n }\n .value-wrapper.no-value {\n visibility: hidden;\n }\n ",this),this.#R=this.shadowRoot.querySelector(".col-select"),this.#x=this.shadowRoot.querySelector(".op-select"),this.#V=this.shadowRoot.querySelector(".text-value"),this.#L=this.shadowRoot.querySelector(".combo-value"),this.#E=this.shadowRoot.querySelector(".multi-value"),this.#N=this.shadowRoot.querySelector(".delete-btn")}init(){super.init?.(),this.#O(),this.#N.addEventListener("click",()=>this.#q("delete")),this.#D()}#D(){const t=[this.#R,this.#x,this.#V,this.#L,this.#E];[...t,this.#N].forEach(t=>(0,i.EA)(this,t,{includeAttrs:["size","disabled"]})),this.#z(),t.forEach(t=>(0,i.EA)(this,t,{includeAttrs:["label-type"]}))}#z(){const t=t=>({includeAttrs:[t],mapAttrs:{[t]:"placeholder"}});(0,i.EA)(this,this.#R,t("data-column-placeholder")),(0,i.EA)(this,this.#x,t("data-operator-placeholder")),[this.#V,this.#L,this.#E].forEach(e=>(0,i.EA)(this,e,t("data-value-placeholder")))}#B(t,e){const o=this.#C;this.#C=!0,t.value=e,this.#C=o}#O(){this.shadowRoot.querySelector(".row").addEventListener("input",t=>{this.#C||(t.target===this.#R?this.#M():t.target===this.#x?this.#W():this.#P()?this.#k():this.#I())})}#P(){return!this.#V.classList.contains("hidden")}#F(t){return this.#A.find(e=>e.id===t)}get trueLabel(){return this.getAttribute("data-value-label-true")||"True"}get falseLabel(){return this.getAttribute("data-value-label-false")||"False"}#J(){return[{value:"true",label:this.trueLabel},{value:"false",label:this.falseLabel}]}#H(t){return t?b(t.inputType,t.operators,v(this,"operators-catalog")).map(t=>{const e=this.getAttribute(`data-operator-label-${t.id}`);return e?{...t,label:e}:t}):[]}#M(){const t=this.#F(this.#R.value);if(!t)return;this.#k.cancel();const e=this.#H(t);this.#x.data=e.map(t=>({value:t.id,label:t.label}));const o=e.find(t=>t.id===this.#x.value)||e[0];o&&this.#B(this.#x,o.id);const s=this.#T,n=t.inputType,i=s!==n;this.#T=n,this.#G(t,o,{resetValue:i}),this.#I()}#W(){const t=this.#F(this.#R.value),e=this.#H(t).find(t=>t.id===this.#x.value);this.#G(t,e),this.#I()}#G(t,e,o={}){const s=t?.inputType,n=o.resetValue??!1;this.shadowRoot.querySelector(".value-wrapper").classList.toggle("no-value",!!e?.noValue),this.#Z(s),x(s)?this.#j(s,n):V(s)?this.#$(t,n):L(s)&&this.#_(t,n)}#Z(t){this.#V.classList.toggle("hidden",!x(t)),this.#L.classList.toggle("hidden",!V(t)),this.#E.classList.toggle("hidden",!L(t))}#j(t,e){"number"===t?this.#V.setAttribute("type","number"):"email"===t?this.#V.setAttribute("type","email"):this.#V.removeAttribute("type"),e&&this.#B(this.#V,"")}#$(t,e){const o="boolean"===t.inputType?this.#J():t.options||[];this.#L.data=o.map(t=>({value:t.value,label:t.label})),e&&this.#B(this.#L,"")}#_(t,e){this.#E.data=(t.options||[]).map(t=>({value:t.value,label:t.label})),e&&this.#B(this.#E,[])}#Q(t){return L(t)?this.#E:V(t)?this.#L:x(t)?this.#V:null}#Y(t){const e=this.#Q(t.inputType);return e?e.value??(L(t.inputType)?[]:""):null}#U(){const t=this.#R?.value||"",e=this.#x?.value||"",o=this.#F(t),s=this.#H(o).find(t=>t.id===e),n=!!s?.noValue,i=s&&!n&&o?this.#Y(o):null;return{id:this.#S,column:t,operator:e,value:i,noValue:n}}#q(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}#I(){this.#q("change",{value:this.#U()})}async#X(t){if(this.#S=t.id??null,t.column){this.#C=!0;try{const e=this.#F(t.column);if(!e)return;await E(),this.#R.value=t.column;const o=this.#H(e);if(this.#x.data=o.map(t=>({value:t.id,label:t.label})),t.operator){await E(),this.#x.value=t.operator;const s=o.find(e=>e.id===t.operator);this.#G(e,s)}null!==t.value&&void 0!==t.value&&(await E(),this.#K(e,t.value))}finally{this.#C=!1}}}#K(t,e){const o=t.inputType,s=this.#Q(o);s&&(L(o)?this.#B(s,Array.isArray(e)?e:[]):V(o)?this.#B(s,String(e)):this.#B(s,e??""))}#tt(t){const e="floating"===t;[this.#R,this.#x,this.#V,this.#L,this.#E].forEach(t=>{if(t)if(e){const e=t.getAttribute("placeholder");e&&t.setAttribute("label",e)}else t.removeAttribute("label")})}get value(){return JSON.stringify(this.#U())}set value(t){this.setAttribute("value","string"==typeof t?t:JSON.stringify(t))}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&("data"===t&&this.#et(o),"value"===t&&this.#ot(o),"label-type"===t&&this.#tt(o),"disable-delete"===t&&this.#st(o),("operators-catalog"===t||t.startsWith("data-operator-label-"))&&this.#nt(),"data-value-label-true"!==t&&"data-value-label-false"!==t||this.#it())}#et(t){if(t)try{this.#A=JSON.parse(t),this.#R.data=this.#A.map(t=>({value:t.id,label:t.label}))}catch{}}#ot(t){if(t)try{this.#X(JSON.parse(t))}catch{}}#st(t){null!==t&&"false"!==t?this.#N.setAttribute("disabled","true"):this.#N.removeAttribute("disabled")}#it(){const t=this.#F(this.#R?.value);t&&"boolean"===t.inputType&&this.#L&&(this.#L.data=this.#J())}#nt(){const t=this.#F(this.#R?.value);if(!t||!this.#x)return;const e=this.#H(t);this.#x.data=e.map(t=>({value:t.id,label:t.label}))}})((0,a.qu)({componentName:S,baseSelector:".row"}));customElements.define(S,T);const k=(0,i.xE)("filter-rows"),{host:I,container:O,rowsList:q,actions:D,addRowIcon:z}={host:{selector:()=>":host"},container:{selector:()=>".container"},rowsList:{selector:()=>".rows-list"},actions:{selector:()=>".actions"},addRowIcon:{selector:()=>'::slotted([slot="add-row-icon"])'}},B=(0,n.Zz)((0,s.RF)({mappings:{hostWidth:{...I,property:"width"},hostMinWidth:{...I,property:"min-width"},hostDirection:[{...I,property:"direction"},{selector:()=>r.J.componentName,property:r.J.cssVarList.hostDirection},{selector:()=>T.componentName,property:T.cssVarList.hostDirection}],containerWidth:{...O,property:"width"},containerPadding:{...O,property:"padding"},containerGap:{...O,property:"gap"},listGap:{...q,property:"gap"},listMaxHeight:{...q,property:"max-height"},actionsGap:{...D,property:"gap"},addRowIconSize:[{...z,property:"width"},{...z,property:"height"}]}}),s.tQ,t=>class extends t{#at=[];#rt=0;#lt(){return this.#rt+=1,`row-${this.#rt}`}#ct(){return{id:this.#lt(),column:"",operator:"",value:null}}#ht(t){const e=t.value,o=null!=e&&""!==e&&!(Array.isArray(e)&&0===e.length);return!t.column&&!t.operator&&!o}#dt=[];#ut;#pt;#mt;#bt;static get observedAttributes(){return[...t.observedAttributes||[],"data","value","clear-all-button-label","add-button-label","max-rows"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <div class="container">\n <div class="rows-list"></div>\n <div class="actions">\n <descope-button class="add-row" variant="link" mode="primary">\n <slot name="add-row-icon" slot="prefix"></slot>\n <span class="add-button-label">Add filter</span>\n </descope-button>\n <descope-button class="clear-all" variant="link" mode="error">Clear all</descope-button>\n </div>\n </div>\n ',(0,i.fz)('\n :host {\n display: block;\n box-sizing: border-box;\n }\n .container {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n }\n .rows-list {\n display: flex;\n flex-direction: column;\n overflow: hidden auto;\n }\n .rows-list:empty {\n display: none;\n }\n .actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n .add-row {\n margin-inline-end: auto;\n }\n .hidden {\n display: none;\n }\n ::slotted([slot="add-row-icon"]) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n ',this),this.#ut=this.shadowRoot.querySelector(".rows-list"),this.#pt=this.shadowRoot.querySelector(".add-row"),this.#mt=this.shadowRoot.querySelector(".add-button-label"),this.#bt=this.shadowRoot.querySelector(".clear-all")}init(){super.init?.(),(0,i.Ge)(this,this.#gt.bind(this)),this.#pt.addEventListener("click",this.#yt.bind(this)),this.#bt.addEventListener("click",this.#wt.bind(this)),this.#ut.addEventListener("change",this.#vt.bind(this)),this.#ut.addEventListener("delete",this.#ft.bind(this)),[this.#pt,this.#bt].forEach(t=>(0,i.EA)(this,t,{includeAttrs:["size"]})),this.#At(),this.#gt(),this.#St(),this.#Ct(),setTimeout(()=>this.#Rt())}#At(){const t=v(this,"data");this.#dt=Array.isArray(t)?t:[]}#gt(){this.#ut.querySelectorAll(S).forEach(t=>{t.querySelectorAll(':scope > [slot="delete-row-icon"]').forEach(t=>t.remove()),this.#xt(t)})}#Vt(){const t=new Set(this.#at.map(t=>t.id));this.#ut.querySelectorAll(S).forEach(e=>{t.has(e.dataset.rowId)||e.remove()})}#Lt(t){return this.#ut.querySelector(`${S}[data-row-id="${t}"]`)}#Ct(){this.#Vt(),this.#at.forEach(t=>{(this.#Lt(t.id)||this.#Et(t.id)).setAttribute("value",JSON.stringify(t))}),this.#Rt(),this.#Nt()}#Et(t){const e=document.createElement(S);return e.dataset.rowId=t,this.#ut.appendChild(e),(0,i.EA)(this,e,{includeAttrs:["data","size","label-type","operators-catalog","data-value-label-true","data-value-label-false","data-column-placeholder","data-operator-placeholder","data-value-placeholder",...u]}),this.#xt(e),e}#xt(t){Array.from(this.children).filter(t=>"delete-row-icon"===t.getAttribute?.("slot")).forEach(e=>{const o=e.cloneNode(!0);o.setAttribute("slot","delete-row-icon"),t.appendChild(o)})}#Rt(){const t=1===this.#at.length&&this.#ht(this.#at[0]);this.#ut.querySelectorAll(S).forEach(e=>{t?e.setAttribute("disable-delete",""):e.removeAttribute("disable-delete")}),t?this.#bt.setAttribute("disabled","true"):this.#bt.removeAttribute("disabled")}#St(){0===this.#at.length&&(this.#at=[this.#ct()])}#Nt(){const t=parseInt(this.getAttribute("max-rows"),10),e=!Number.isNaN(t)&&this.#at.length>=t;this.#pt.classList.toggle("hidden",e)}#yt(){this.#at=[...this.#at,this.#ct()],this.#Ct(),this.#I()}#wt(){this.#at=[this.#ct()],this.#Ct(),this.#q("clear")}#vt(t){const e=t.target.closest(S);if(!e)return;t.stopPropagation();const o=e.dataset.rowId;this.#at=this.#at.map(e=>e.id===o?t.detail.value:e),this.#Rt(),this.#I()}#ft(t){const e=t.target.closest(S);if(!e)return;const o=e.dataset.rowId;this.#at=this.#at.filter(t=>t.id!==o),this.#St(),this.#Ct(),this.#I()}#q(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}#Tt({column:t,operator:e}){const o=this.#dt.find(e=>e.id===t);return o&&b(o.inputType,o.operators,v(this,"operators-catalog")).find(t=>t.id===e)||null}#kt(t){const e=this.#Tt(t);return e?{...null!=e.prefix&&{prefix:e.prefix},...null!=e.suffix&&{suffix:e.suffix}}:{}}#I(){const t=t=>({column:t.column,operator:t.operator,value:t.value,...this.#kt(t)}),e=this.#at.filter(g).map(t),o=this.#at.map(e=>({...t(e),...null!=e.noValue&&{noValue:e.noValue}}));this.#q("change",{value:e,rows:o})}get value(){return JSON.stringify(this.#at)}set value(t){this.setAttribute("value","string"==typeof t?t:JSON.stringify(t))}get addButtonLabel(){return this.getAttribute("add-button-label")||"Add filter"}get clearAllButtonLabel(){return this.getAttribute("clear-all-button-label")||"Clear all"}#It(){this.#mt.textContent=this.addButtonLabel}#Ot(){this.#bt.textContent=this.clearAllButtonLabel}#qt(t){if(t)try{const e=JSON.parse(t);this.#at=(Array.isArray(e)?e:[]).map(t=>{const e=this.#Tt(t);return{...t,id:t.id||this.#lt(),...e&&{noValue:!!e.noValue}}}),this.#St(),this.#Ct()}catch{}}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&("data"===t&&(this.#At(),this.#Ct()),"value"===t&&this.#qt(o),"add-button-label"===t&&this.#It(),"clear-all-button-label"===t&&this.#Ot(),"max-rows"===t&&this.#Nt())}})((0,a.qu)({componentName:k,baseSelector:".container"}));customElements.define(k,B),o(11065),o(28313);var M=o(77888),W=o(11298);const P=(0,i.xE)("filter"),F=(0,a.qu)({componentName:P,baseSelector:"vaadin-popover"}),J=["add-row-icon","delete-row-icon"],{host:H,overlay:G,backdrop:Z}={host:{selector:()=>":host"},overlay:{selector:"vaadin-popover-overlay::part(overlay)"},backdrop:{selector:"vaadin-popover-overlay::part(backdrop)"}},j=(0,n.Zz)((0,s.RF)({mappings:{hostWidth:{...H,property:"width"},hostDirection:[{...H,property:"direction"},{selector:()=>r.J.componentName,property:r.J.cssVarList.hostDirection},{selector:()=>B.componentName,property:B.cssVarList.hostDirection}],counterBorderRadius:{selector:()=>M.e.componentName,property:M.e.cssVarList.borderRadius},counterWidth:{selector:()=>M.e.componentName,property:M.e.cssVarList.hostWidth},counterHeight:{selector:()=>M.e.componentName,property:M.e.cssVarList.hostHeight},counterFontSize:{selector:()=>M.e.componentName,property:M.e.cssVarList.fontSize},counterLineHeight:{selector:()=>M.e.componentName,property:M.e.cssVarList.lineHeight},counterBackgroundColor:{selector:()=>M.e.componentName,property:M.e.cssVarList.backgroundColor},counterTextColor:{selector:()=>M.e.componentName,property:M.e.cssVarList.textColor},counterBorderColor:{selector:()=>M.e.componentName,property:M.e.cssVarList.borderColor},counterOffsetX:{selector:()=>W.q.componentName,property:W.q.cssVarList.offsetX},counterOffsetY:{selector:()=>W.q.componentName,property:W.q.cssVarList.offsetY},rowsHostWidth:{selector:()=>B.componentName,property:B.cssVarList.hostWidth},rowsContainerWidth:{selector:()=>B.componentName,property:B.cssVarList.containerWidth},rowsContainerPadding:{selector:()=>B.componentName,property:B.cssVarList.containerPadding},rowsContainerGap:{selector:()=>B.componentName,property:B.cssVarList.containerGap},rowsListGap:{selector:()=>B.componentName,property:B.cssVarList.listGap},rowsListMaxHeight:{selector:()=>B.componentName,property:B.cssVarList.listMaxHeight},rowsActionsGap:{selector:()=>B.componentName,property:B.cssVarList.actionsGap},rowsAddRowIconSize:{selector:()=>B.componentName,property:B.cssVarList.addRowIconSize},rowWidth:{...H,property:T.cssVarList.hostWidth},rowMinWidth:{...H,property:T.cssVarList.hostMinWidth},rowValueWidth:{...H,property:T.cssVarList.inputWidth},rowGap:{...H,property:T.cssVarList.rowGap},rowDisabledDeleteColor:{...H,property:T.cssVarList.deleteDisabledIconColor}}}),(0,s.mA)({name:"overlay",selector:"",mappings:{marginTop:{...G,property:"margin-top"},width:{...G},backgroundColor:{...G},backdropBackgroundColor:{...Z,property:"background-color"},backdropPointerEvents:{...Z,property:"pointer-events"},padding:{...G},boxShadow:{...G},borderRadius:{...G},outlineWidth:{...G},outlineColor:{...G},outlineStyle:{...G}}}),s.VO,s.tQ)(class extends F{#Dt=[];#zt=!1;#Bt;#Mt=null;#Wt=null;#Pt=null;static get observedAttributes(){return[...F.observedAttributes||[],"label","disable-indicator","data","value"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <div>\n <descope-attachment class="attachment" position="top-end" st-offset-x="0px">\n <descope-button class="trigger-btn">\n <slot name="button-icon"></slot>\n <span class="trigger-label"></span>\n </descope-button>\n <descope-badge slot="attachment" class="counter hidden" mode="primary" variant="contained" bordered="true" size="xs">\n <span class="counter-text">0</span>\n </descope-badge>\n </descope-attachment>\n <vaadin-popover></vaadin-popover>\n <slot name="add-row-icon" class="hidden"></slot>\n <slot name="delete-row-icon" class="hidden"></slot>\n </div>\n ',(0,i.fz)('\n :host {\n display: inline-block;\n box-sizing: border-box;\n user-select: none;\n max-width: 100%;\n }\n\n :host([full-width="true"]) {\n display: block;\n }\n\n /* Block (not the attachment\'s own inline-block) so host width set from\n outside (e.g. container items-grow) flows down to the trigger button;\n anchored\'s flex-grow on the anchor carries it the rest of the way. */\n .attachment {\n display: block;\n }\n\n\n .hidden {\n display: none;\n }\n\n :host([read-only="true"]) .trigger-btn {\n pointer-events: none;\n }\n ',this),this.triggerBtn=this.shadowRoot.querySelector(".trigger-btn"),this.triggerLabel=this.shadowRoot.querySelector(".trigger-label"),this.counter=this.shadowRoot.querySelector(".counter"),this.counterText=this.shadowRoot.querySelector(".counter-text")}get opened(){return"true"===this.getAttribute("opened")}get isIndicatorVisible(){return"true"!==this.getAttribute("disable-indicator")}get isFullWidth(){return"true"===this.getAttribute("full-width")}get overlay(){return this.#Pt??=this.baseElement.shadowRoot?.querySelector("vaadin-popover-overlay")||null,this.#Pt}get backdrop(){return this.overlay?.shadowRoot?.querySelector("#backdrop")}get filterRowsElement(){return this.overlay?.querySelector(k)||null}init(){super.init?.(),this.#Ft(),this.#Jt(),this.#Ht(),(0,i.EA)(this,this.triggerBtn,{includeAttrs:["button-mode","button-variant","size","full-width"],mapAttrs:{"button-mode":"mode","button-variant":"variant"}}),this.#Gt(),setTimeout(()=>{this.#Zt()})}#Gt(){J.forEach(t=>{const e=this.shadowRoot.querySelector(`slot[name="${t}"]`);e?.addEventListener("slotchange",()=>{this.#Wt?.isConnected&&y(this,this.#Wt,[t])})})}#Ft(){this.baseElement.trigger=[],this.baseElement.withBackdrop=!0,this.baseElement.renderer=this.#jt.bind(this),this.baseElement.addEventListener("click",t=>{t.stopPropagation()}),this.triggerBtn.addEventListener("click",()=>this.onPopoverToggle())}#jt(t){if(!t.firstChild){this.overlay.positionTarget=this.triggerBtn;const e=document.createElement(k);(0,i.EA)(this,e,{includeAttrs:["operators","size","max-rows","clear-all-button-label","add-button-label","label-type","data-value-label-true","data-value-label-false","data-column-placeholder","data-operator-placeholder","data-value-placeholder",...u],mapAttrs:{operators:"operators-catalog"}}),this.#$t(e),t.appendChild(e),this.#Wt=e,e.setAttribute("value",JSON.stringify(this.#Dt)),e.addEventListener("change",this.#_t.bind(this)),e.addEventListener("clear",this.#Qt.bind(this));const o=new CSSStyleSheet;o.insertRule(":host{display:block!important;}"),this.baseElement?.shadowRoot?.adoptedStyleSheets?.push(o),this.backdrop?.addEventListener("click",()=>this.closePopover())}this.#Wt&&y(this,this.#Wt,J),t.style.setProperty("visibility","hidden"),setTimeout(()=>{this.#Yt(),t.style.setProperty("visibility","visible")},50)}#Yt(){if(!this.overlay)return;const t=this.shadowRoot.querySelector("vaadin-popover")?.shadowRoot;if(!t)return;this.#Bt&&(t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>t!==this.#Bt));const e=document.body.getBoundingClientRect(),o=this.triggerBtn.getBoundingClientRect(),s=this.overlay.getBoundingClientRect(),n=o.left-s.left,a=s.left,r=e.width-s.right;let l;l=n>0?Math.min(n,r):-1*Math.min(Math.abs(n),a);const c=Math.round(this.getBoundingClientRect().width);this.#Bt=(0,i.fz)(`\n vaadin-popover-overlay::part(overlay) {\n margin-left: ${l}px;\n ${this.isFullWidth?`width: ${c}px; max-width: ${c}px;`:""}\n }\n `,t)}#q(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}#Ut(t){this.#zt=!0,this.setAttribute("value",JSON.stringify(w(t))),this.#zt=!1}#_t(t){const e=w(t.detail.value||[]);JSON.stringify(e)!==JSON.stringify(this.#Dt)&&(this.#Ut(e),this.#q("filter-apply",{value:this.#Dt,action:"apply"}))}#Qt(){this.#Ut([]),this.#q("filter-clear",{value:this.#Dt,action:"clear-all"})}#Jt(){if(!this.counter)return;const t=this.#Dt.length;this.counterText.textContent=String(t),this.counter.classList.toggle("hidden",t<1||!this.isIndicatorVisible)}#Ht(){if(!this.triggerLabel)return;const t=this.getAttribute("label")||"";this.triggerLabel.textContent=t,this.triggerLabel.classList.toggle("hidden",!t)}#$t(t){t&&this.#Mt&&t.setAttribute("data",JSON.stringify(this.#Mt))}get value(){return JSON.stringify(this.#Dt)}set value(t){this.#Ut(t)}set data(t){this.#Mt=Array.isArray(t)?t:null,this.filterRowsElement&&this.#Mt&&this.filterRowsElement.setAttribute("data",JSON.stringify(this.#Mt))}get data(){return this.#Mt}#Zt(){this.overlay&&(this.overlay._attachOverlay=()=>this.overlay.bringToFront(),this.overlay._detachOverlay=()=>{})}get readOnly(){return"true"===this.getAttribute("read-only")}onPopoverToggle(){this.readOnly||(this.opened?this.closePopover():this.openPopover())}openPopover(){this.setAttribute("opened","true"),this.baseElement.opened=!0}closePopover(){this.removeAttribute("opened"),this.baseElement.opened=!1}#Xt(t){t&&(this.#Dt=w(t),this.#Jt(),this.#zt||this.filterRowsElement?.setAttribute("value",JSON.stringify(this.#Dt)))}#Kt(t){if(t)try{this.#Mt=JSON.parse(t),this.filterRowsElement?.setAttribute("data",JSON.stringify(this.#Mt))}catch{}}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&("value"===t&&this.#Xt(o),"data"===t&&this.#Kt(o),"label"===t&&this.#Ht(),"disable-indicator"===t&&this.#Jt())}});customElements.define(P,j)},56737(t,e,o){"use strict";o.r(e),o.d(e,{IconClass:()=>s.S,componentName:()=>s.T}),o(53455);var s=o(98538);customElements.define(s.T,s.S)},53455(t,e,o){"use strict";o.r(e),o.d(e,{ImageClass:()=>s.q,componentName:()=>s.T});var s=o(8512);customElements.define(s.T,s.q)}}]);
|
|
2
2
|
//# sourceMappingURL=descope-filter.js.map
|