@descope/web-components-ui 3.8.0 → 3.9.1

package/dist/umd/descope-anchored.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3267],{13094(t,e,n){n.r(e),n.d(e,{AnchoredClass:()=>a,componentName:()=>h});var o=n(88961),s=n(72270),r=n(25964),i=n(63200);const h=(0,r.xE)("anchored");class c extends((0,s.qu)({componentName:h,baseSelector:".anchored-root"})){#t=null;#e=null;#n=null;get#o(){return this.defaultSlot.assignedElements({flatten:!0})[0]}get#s(){return this.shadowRoot.querySelector('slot[name="anchored"]')?.assignedElements()[0]}get#r(){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,r.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.#i(),this.defaultSlot.addEventListener("slotchange",()=>this.#h()),this.#h()}#h(){this.#c(),this.#t=this.#a(this.#t,this.#r,"stretch"),this.#e=this.#a(this.#e,this.#s,"st-host-direction")}#i(){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.#n?this.#n.replaceSync(t):this.#r&&(this.#n=(0,r.fz)(t,this.#r))}#a(t,e,n){return t?.disconnect(),e?.removeAttribute(n),this.#o&&e?(0,r.EA)(this.#o,e,{includeAttrs:[n]}):null}disconnectedCallback(){super.disconnectedCallback?.(),this.#t?.disconnect(),this.#e?.disconnect()}#c(){this.toggleAttribute("has-anchor",!!this.#o)}}const a=(0,i.Zz)(o.tQ)(c);customElements.define(h,a)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3267],{13094(t,e,n){n.r(e),n.d(e,{AnchoredClass:()=>a,componentName:()=>h});var s=n(88961),o=n(72270),r=n(25964),i=n(63200);const h=(0,r.xE)("anchored");class c extends((0,o.qu)({componentName:h,baseSelector:".anchored-root"})){#t=null;#e=null;#n=null;get#s(){return this.defaultSlot.assignedElements({flatten:!0})[0]}get#o(){return this.shadowRoot.querySelector('slot[name="anchored"]')?.assignedElements()[0]}get#r(){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])"),this.#i()}init(){super.init?.(),(0,r.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.#h(),this.defaultSlot.addEventListener("slotchange",()=>this.#c()),this.#c()}#i(){const t=this.#s.classList.contains("hidden");this.classList.toggle("hidden",t)}#c(){this.#a(),this.#t=this.#l(this.#t,this.#r,"stretch"),this.#e=this.#l(this.#e,this.#o,"st-host-direction")}#h(){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.#n?this.#n.replaceSync(t):this.#r&&(this.#n=(0,r.fz)(t,this.#r))}#l(t,e,n){return t?.disconnect(),e?.removeAttribute(n),this.#s&&e?(0,r.EA)(this.#s,e,{includeAttrs:[n]}):null}disconnectedCallback(){super.disconnectedCallback?.(),this.#t?.disconnect(),this.#e?.disconnect()}#a(){this.toggleAttribute("has-anchor",!!this.#s)}}const a=(0,i.Zz)(s.tQ)(c);customElements.define(h,a)}}]);
 //# sourceMappingURL=descope-anchored.js.map

package/dist/umd/descope-anchored.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-anchored.js","mappings":"8OASO,MAAMA,GAAgB,QAAiB,YAE9C,MAAMC,WAAoB,QAAgB,CACxCD,gBACAE,aAAc,oBAEd,GAAmB,KAEnB,GAAqB,KAErB,GAAoB,KAEpB,KAAI,GACF,OAAOC,KAAKC,YAAYC,iBAAiB,CAAEC,SAAS,IAAQ,EAC9D,CAEA,KAAI,GACF,OAAOH,KAAKI,WACTC,cAAc,0BACbH,mBAAmB,EACzB,CAEA,KAAI,GACF,OAAOF,KAAKM,cAAcC,IAC5B,CAEA,WAAAC,GACEC,QAEAT,KAAKU,aAAa,CAAEC,KAAM,SAAUC,UAAY,2MAShDZ,KAAKC,YAAcD,KAAKI,WAAWC,cAAc,mBACnD,CAEA,IAAAQ,GACEJ,MAAMI,UAEN,QACE,0iCAsCAb,MAGFA,MAAK,IAELA,KAAKC,YAAYa,iBAAiB,aAAc,IAAMd,MAAK,KAE3DA,MAAK,GACP,CAEA,KACEA,MAAK,IAELA,MAAK,EAAmBA,MAAK,EAC3BA,MAAK,EACLA,MAAK,EACL,WAGFA,MAAK,EAAqBA,MAAK,EAC7BA,MAAK,EACLA,MAAK,EACL,oBAEJ,CAIA,KACE,MAAMe,EAAM,yvBAcRf,MAAK,EACPA,MAAK,EAAkBgB,YAAYD,GAC1Bf,MAAK,IACdA,MAAK,GAAoB,QAAYe,EAAKf,MAAK,GAEnD,CAKA,GAAaiB,EAAUC,EAAQC,GAG7B,OAFAF,GAAUG,aACVF,GAAQG,gBAAgBF,GACnBnB,MAAK,GAAYkB,GACf,QAAalB,MAAK,EAASkB,EAAQ,CAAEI,aAAc,CAACH,KADtB,IAEvC,CAGA,oBAAAI,GACEd,MAAMc,yBACNvB,MAAK,GAAkBoB,aACvBpB,MAAK,GAAoBoB,YAC3B,CAIA,KACEpB,KAAKwB,gBAAgB,eAAgBxB,MAAK,EAC5C,EAGK,MAAMyB,GAAgB,QAAQ,KAAR,CAAsC3B,GCpKnE4B,eAAeC,OAAO9B,EAAe4B,E","sources":["webpack://@descope/web-components-ui/../components/descope-anchored/src/component/AnchoredClass.js","webpack://@descope/web-components-ui/../components/descope-anchored/src/component/index.js"],"sourcesContent":["import { componentNameValidationMixin } from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport {\n  forwardAttrs,\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('anchored');\n\nclass RawAnchored extends createBaseClass({\n  componentName,\n  baseSelector: '.anchored-root',\n}) {\n  #stretchObserver = null;\n\n  #directionObserver = null;\n\n  #hostStretchSheet = null;\n\n  get #anchor() {\n    return this.defaultSlot.assignedElements({ flatten: true })[0];\n  }\n\n  get #anchored() {\n    return this.shadowRoot\n      .querySelector('slot[name=\"anchored\"]')\n      ?.assignedElements()[0];\n  }\n\n  get #outerHost() {\n    return this.getRootNode().host;\n  }\n\n  constructor() {\n    super();\n\n    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    `;\n\n    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');\n  }\n\n  init() {\n    super.init?.();\n\n    injectStyle(\n      `\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      `,\n      this,\n    );\n\n    this.#syncStretchCSS();\n\n    this.defaultSlot.addEventListener('slotchange', () => this.#syncAnchor());\n\n    this.#syncAnchor();\n  }\n\n  #syncAnchor() {\n    this.#onAnchorChanged();\n\n    this.#stretchObserver = this.#forwardAttr(\n      this.#stretchObserver,\n      this.#outerHost,\n      'stretch',\n    );\n\n    this.#directionObserver = this.#forwardAttr(\n      this.#directionObserver,\n      this.#anchored,\n      'st-host-direction',\n    );\n  }\n\n  // Injects [stretch] layout rules into the containing component's shadow root (e.g. descope-attachment)\n  // so it stretches when the anchor has [stretch]. Replaces the existing rules on subsequent calls.\n  #syncStretchCSS() {\n    const css = `\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    `;\n\n    if (this.#hostStretchSheet) {\n      this.#hostStretchSheet.replaceSync(css);\n    } else if (this.#outerHost) {\n      this.#hostStretchSheet = injectStyle(css, this.#outerHost);\n    }\n  }\n\n  // Reconnects forwarding to the current anchor. Disconnects the old observer and\n  // removes the stale attr from target first — forwardAttrs only sets attrs present\n  // on the source, so absent attrs won't be removed automatically.\n  #forwardAttr(observer, target, attr) {\n    observer?.disconnect();\n    target?.removeAttribute(attr);\n    if (!this.#anchor || !target) return null;\n    return forwardAttrs(this.#anchor, target, { includeAttrs: [attr] });\n  }\n\n  // Prevent stale callbacks from firing on a detached anchor after removal.\n  disconnectedCallback() {\n    super.disconnectedCallback?.();\n    this.#stretchObserver?.disconnect();\n    this.#directionObserver?.disconnect();\n  }\n\n  // Track whether anything is slotted, so the host display rule can hide an\n  // empty host rather than reserving its layout box.\n  #onAnchorChanged() {\n    this.toggleAttribute('has-anchor', !!this.#anchor);\n  }\n}\n\nexport const AnchoredClass = compose(componentNameValidationMixin)(RawAnchored);\n","import { componentName, AnchoredClass } from './AnchoredClass';\n\ncustomElements.define(componentName, AnchoredClass);\n\nexport { AnchoredClass, componentName };\n"],"names":["componentName","RawAnchored","baseSelector","this","defaultSlot","assignedElements","flatten","shadowRoot","querySelector","getRootNode","host","constructor","super","attachShadow","mode","innerHTML","init","addEventListener","css","replaceSync","observer","target","attr","disconnect","removeAttribute","includeAttrs","disconnectedCallback","toggleAttribute","AnchoredClass","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"descope-anchored.js","mappings":"8OASO,MAAMA,GAAgB,QAAiB,YAE9C,MAAMC,WAAoB,QAAgB,CACxCD,gBACAE,aAAc,oBAEd,GAAmB,KAEnB,GAAqB,KAErB,GAAoB,KAEpB,KAAI,GACF,OAAOC,KAAKC,YAAYC,iBAAiB,CAAEC,SAAS,IAAQ,EAC9D,CAEA,KAAI,GACF,OAAOH,KAAKI,WACTC,cAAc,0BACbH,mBAAmB,EACzB,CAEA,KAAI,GACF,OAAOF,KAAKM,cAAcC,IAC5B,CAEA,WAAAC,GACEC,QAEAT,KAAKU,aAAa,CAAEC,KAAM,SAAUC,UAAY,2MAShDZ,KAAKC,YAAcD,KAAKI,WAAWC,cAAc,oBAEjDL,MAAK,GACP,CAEA,IAAAa,GACEJ,MAAMI,UAEN,QACE,0iCAsCAb,MAGFA,MAAK,IAELA,KAAKC,YAAYa,iBAAiB,aAAc,IAAMd,MAAK,KAE3DA,MAAK,GACP,CAIA,KACE,MAAMe,EAAYf,MAAK,EAAQgB,UAAUC,SAAS,UAClDjB,KAAKgB,UAAUE,OAAO,SAAUH,EAClC,CAEA,KACEf,MAAK,IAELA,MAAK,EAAmBA,MAAK,EAC3BA,MAAK,EACLA,MAAK,EACL,WAGFA,MAAK,EAAqBA,MAAK,EAC7BA,MAAK,EACLA,MAAK,EACL,oBAEJ,CAIA,KACE,MAAMmB,EAAM,yvBAcRnB,MAAK,EACPA,MAAK,EAAkBoB,YAAYD,GAC1BnB,MAAK,IACdA,MAAK,GAAoB,QAAYmB,EAAKnB,MAAK,GAEnD,CAKA,GAAaqB,EAAUC,EAAQC,GAG7B,OAFAF,GAAUG,aACVF,GAAQG,gBAAgBF,GACnBvB,MAAK,GAAYsB,GACf,QAAatB,MAAK,EAASsB,EAAQ,CAAEI,aAAc,CAACH,KADtB,IAEvC,CAGA,oBAAAI,GACElB,MAAMkB,yBACN3B,MAAK,GAAkBwB,aACvBxB,MAAK,GAAoBwB,YAC3B,CAIA,KACExB,KAAK4B,gBAAgB,eAAgB5B,MAAK,EAC5C,EAGK,MAAM6B,GAAgB,QAAQ,KAAR,CAAsC/B,GC7KnEgC,eAAeC,OAAOlC,EAAegC,E","sources":["webpack://@descope/web-components-ui/../components/descope-anchored/src/component/AnchoredClass.js","webpack://@descope/web-components-ui/../components/descope-anchored/src/component/index.js"],"sourcesContent":["import { componentNameValidationMixin } from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport {\n  forwardAttrs,\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('anchored');\n\nclass RawAnchored extends createBaseClass({\n  componentName,\n  baseSelector: '.anchored-root',\n}) {\n  #stretchObserver = null;\n\n  #directionObserver = null;\n\n  #hostStretchSheet = null;\n\n  get #anchor() {\n    return this.defaultSlot.assignedElements({ flatten: true })[0];\n  }\n\n  get #anchored() {\n    return this.shadowRoot\n      .querySelector('slot[name=\"anchored\"]')\n      ?.assignedElements()[0];\n  }\n\n  get #outerHost() {\n    return this.getRootNode().host;\n  }\n\n  constructor() {\n    super();\n\n    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    `;\n\n    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');\n\n    this.#syncComponentState();\n  }\n\n  init() {\n    super.init?.();\n\n    injectStyle(\n      `\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      `,\n      this,\n    );\n\n    this.#syncStretchCSS();\n\n    this.defaultSlot.addEventListener('slotchange', () => this.#syncAnchor());\n\n    this.#syncAnchor();\n  }\n\n  // To support conditional components in flow, we need to sync the 'hidden' className to the root of the component.\n  // Ideally, this would happen in the SDK, but we resolved to this patch to fix the issue without forcing users to update SDKs.\n  #syncComponentState() {\n    const hasHidden = this.#anchor.classList.contains('hidden');\n    this.classList.toggle('hidden', hasHidden);\n  }\n\n  #syncAnchor() {\n    this.#onAnchorChanged();\n\n    this.#stretchObserver = this.#forwardAttr(\n      this.#stretchObserver,\n      this.#outerHost,\n      'stretch',\n    );\n\n    this.#directionObserver = this.#forwardAttr(\n      this.#directionObserver,\n      this.#anchored,\n      'st-host-direction',\n    );\n  }\n\n  // Injects [stretch] layout rules into the containing component's shadow root (e.g. descope-attachment)\n  // so it stretches when the anchor has [stretch]. Replaces the existing rules on subsequent calls.\n  #syncStretchCSS() {\n    const css = `\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    `;\n\n    if (this.#hostStretchSheet) {\n      this.#hostStretchSheet.replaceSync(css);\n    } else if (this.#outerHost) {\n      this.#hostStretchSheet = injectStyle(css, this.#outerHost);\n    }\n  }\n\n  // Reconnects forwarding to the current anchor. Disconnects the old observer and\n  // removes the stale attr from target first — forwardAttrs only sets attrs present\n  // on the source, so absent attrs won't be removed automatically.\n  #forwardAttr(observer, target, attr) {\n    observer?.disconnect();\n    target?.removeAttribute(attr);\n    if (!this.#anchor || !target) return null;\n    return forwardAttrs(this.#anchor, target, { includeAttrs: [attr] });\n  }\n\n  // Prevent stale callbacks from firing on a detached anchor after removal.\n  disconnectedCallback() {\n    super.disconnectedCallback?.();\n    this.#stretchObserver?.disconnect();\n    this.#directionObserver?.disconnect();\n  }\n\n  // Track whether anything is slotted, so the host display rule can hide an\n  // empty host rather than reserving its layout box.\n  #onAnchorChanged() {\n    this.toggleAttribute('has-anchor', !!this.#anchor);\n  }\n}\n\nexport const AnchoredClass = compose(componentNameValidationMixin)(RawAnchored);\n","import { componentName, AnchoredClass } from './AnchoredClass';\n\ncustomElements.define(componentName, AnchoredClass);\n\nexport { AnchoredClass, componentName };\n"],"names":["componentName","RawAnchored","baseSelector","this","defaultSlot","assignedElements","flatten","shadowRoot","querySelector","getRootNode","host","constructor","super","attachShadow","mode","innerHTML","init","addEventListener","hasHidden","classList","contains","toggle","css","replaceSync","observer","target","attr","disconnect","removeAttribute","includeAttrs","disconnectedCallback","toggleAttribute","AnchoredClass","customElements","define"],"sourceRoot":""}

package/dist/umd/descope-attachment.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3267,7164],{13094(t,e,n){n.r(e),n.d(e,{AnchoredClass:()=>c,componentName:()=>h});var s=n(88961),o=n(72270),i=n(25964),r=n(63200);const h=(0,i.xE)("anchored");class a extends((0,o.qu)({componentName:h,baseSelector:".anchored-root"})){#t=null;#e=null;#n=null;get#s(){return this.defaultSlot.assignedElements({flatten:!0})[0]}get#o(){return this.shadowRoot.querySelector('slot[name="anchored"]')?.assignedElements()[0]}get#i(){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.#h()),this.#h()}#h(){this.#a(),this.#t=this.#c(this.#t,this.#i,"stretch"),this.#e=this.#c(this.#e,this.#o,"st-host-direction")}#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.#n?this.#n.replaceSync(t):this.#i&&(this.#n=(0,i.fz)(t,this.#i))}#c(t,e,n){return t?.disconnect(),e?.removeAttribute(n),this.#s&&e?(0,i.EA)(this.#s,e,{includeAttrs:[n]}):null}disconnectedCallback(){super.disconnectedCallback?.(),this.#t?.disconnect(),this.#e?.disconnect()}#a(){this.toggleAttribute("has-anchor",!!this.#s)}}const c=(0,r.Zz)(s.tQ)(a);customElements.define(h,c)},44050(t,e,n){n.r(e),n.d(e,{AttachmentClass:()=>u,componentName:()=>h}),n(13094);var s=n(88961),o=n(72270),i=n(25964),r=n(63200);const h=(0,i.xE)("attachment"),a=["top-end","top-start","top-center","bottom-start","bottom-end","bottom-center"],c=a[0];class l extends((0,o.qu)({componentName:h,baseSelector:"descope-anchored"})){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"]')}get#l(){return this.attachmentSlot?.assignedElements()[0]}static get observedAttributes(){return[...super.observedAttributes||[],"position"]}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"position"===t&&e!==n&&this.#d()}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.#d();const t=this.shadowRoot.querySelector(".attachment-container");(0,i.mx)(t,()=>this.#u(),{includeAttrs:["st-host-direction"]}),this.attachmentSlot.addEventListener("slotchange",()=>this.#u()),this.defaultSlot.addEventListener("slotchange",()=>{this.#m(),window.requestAnimationFrame(()=>this.#f())}),window.requestAnimationFrame(()=>this.#m())}#f(){const t=this.defaultSlot?.assignedElements()?.[0],e=t?.getBoundingClientRect();if(e){const t=e.width;this.#l?.setAttribute("data-attachment-size",Number(t))}}#m(){const t=this.defaultSlot?.assignedElements()?.length>0;this.classList.toggle("hidden",!t)}#u(){const t=this.shadowRoot.querySelector(".attachment-container")?.getAttribute("st-host-direction");t&&this.#l?.setAttribute("st-host-direction",t)}get offsetX(){return this.getAttribute("offset-x")||"0px"}get offsetY(){return this.getAttribute("offset-y")||"0px"}#d(){const t=this.getAttribute("position");a.includes(t)||this.setAttribute("position",c)}}const d={selector:()=>".attachment-container"},u=(0,r.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)(l);customElements.define(h,u)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3267,7164],{13094(t,e,n){n.r(e),n.d(e,{AnchoredClass:()=>c,componentName:()=>h});var s=n(88961),o=n(72270),i=n(25964),r=n(63200);const h=(0,i.xE)("anchored");class a extends((0,o.qu)({componentName:h,baseSelector:".anchored-root"})){#t=null;#e=null;#n=null;get#s(){return this.defaultSlot.assignedElements({flatten:!0})[0]}get#o(){return this.shadowRoot.querySelector('slot[name="anchored"]')?.assignedElements()[0]}get#i(){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])"),this.#r()}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.#h(),this.defaultSlot.addEventListener("slotchange",()=>this.#a()),this.#a()}#r(){const t=this.#s.classList.contains("hidden");this.classList.toggle("hidden",t)}#a(){this.#c(),this.#t=this.#l(this.#t,this.#i,"stretch"),this.#e=this.#l(this.#e,this.#o,"st-host-direction")}#h(){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.#n?this.#n.replaceSync(t):this.#i&&(this.#n=(0,i.fz)(t,this.#i))}#l(t,e,n){return t?.disconnect(),e?.removeAttribute(n),this.#s&&e?(0,i.EA)(this.#s,e,{includeAttrs:[n]}):null}disconnectedCallback(){super.disconnectedCallback?.(),this.#t?.disconnect(),this.#e?.disconnect()}#c(){this.toggleAttribute("has-anchor",!!this.#s)}}const c=(0,r.Zz)(s.tQ)(a);customElements.define(h,c)},44050(t,e,n){n.r(e),n.d(e,{AttachmentClass:()=>u,componentName:()=>h}),n(13094);var s=n(88961),o=n(72270),i=n(25964),r=n(63200);const h=(0,i.xE)("attachment"),a=["top-end","top-start","top-center","bottom-start","bottom-end","bottom-center"],c=a[0];class l extends((0,o.qu)({componentName:h,baseSelector:"descope-anchored"})){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#d(){return this.attachmentSlot?.assignedElements()[0]}static get observedAttributes(){return[...super.observedAttributes||[],"position"]}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"position"===t&&e!==n&&this.#u()}init(){super.init?.(),this.#r(),(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.#u();const t=this.shadowRoot.querySelector(".attachment-container");(0,i.mx)(t,()=>this.#m(),{includeAttrs:["st-host-direction"]}),this.attachmentSlot.addEventListener("slotchange",()=>this.#m()),this.defaultSlot.addEventListener("slotchange",()=>{this.#p(),window.requestAnimationFrame(()=>this.#f())}),window.requestAnimationFrame(()=>this.#p())}#r(){const t=this.anchored?.classList?.contains("hidden");this.classList.toggle("hidden",t)}#f(){const t=this.defaultSlot?.assignedElements()?.[0],e=t?.getBoundingClientRect();if(e){const t=e.width;this.#d?.setAttribute("data-attachment-size",Number(t))}}#p(){const t=this.defaultSlot?.assignedElements()?.length>0;this.classList.toggle("hidden",!t)}#m(){const t=this.shadowRoot.querySelector(".attachment-container")?.getAttribute("st-host-direction");t&&this.#d?.setAttribute("st-host-direction",t)}get offsetX(){return this.getAttribute("offset-x")||"0px"}get offsetY(){return this.getAttribute("offset-y")||"0px"}#u(){const t=this.getAttribute("position");a.includes(t)||this.setAttribute("position",c)}}const d={selector:()=>".attachment-container"},u=(0,r.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)(l);customElements.define(h,u)}}]);
 //# sourceMappingURL=descope-attachment.js.map

package/dist/umd/descope-attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-attachment.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-anchored/src/component/AnchoredClass.js","webpack://@descope/web-components-ui/../components/descope-anchored/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-attachment/src/component/AttachmentClass.js","webpack://@descope/web-components-ui/../components/descope-attachment/src/component/index.js"],"sourcesContent":["import { componentNameValidationMixin } from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport {\n  forwardAttrs,\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('anchored');\n\nclass RawAnchored extends createBaseClass({\n  componentName,\n  baseSelector: '.anchored-root',\n}) {\n  #stretchObserver = null;\n\n  #directionObserver = null;\n\n  #hostStretchSheet = null;\n\n  get #anchor() {\n    return this.defaultSlot.assignedElements({ flatten: true })[0];\n  }\n\n  get #anchored() {\n    return this.shadowRoot\n      .querySelector('slot[name=\"anchored\"]')\n      ?.assignedElements()[0];\n  }\n\n  get #outerHost() {\n    return this.getRootNode().host;\n  }\n\n  constructor() {\n    super();\n\n    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    `;\n\n    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');\n  }\n\n  init() {\n    super.init?.();\n\n    injectStyle(\n      `\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      `,\n      this,\n    );\n\n    this.#syncStretchCSS();\n\n    this.defaultSlot.addEventListener('slotchange', () => this.#syncAnchor());\n\n    this.#syncAnchor();\n  }\n\n  #syncAnchor() {\n    this.#onAnchorChanged();\n\n    this.#stretchObserver = this.#forwardAttr(\n      this.#stretchObserver,\n      this.#outerHost,\n      'stretch',\n    );\n\n    this.#directionObserver = this.#forwardAttr(\n      this.#directionObserver,\n      this.#anchored,\n      'st-host-direction',\n    );\n  }\n\n  // Injects [stretch] layout rules into the containing component's shadow root (e.g. descope-attachment)\n  // so it stretches when the anchor has [stretch]. Replaces the existing rules on subsequent calls.\n  #syncStretchCSS() {\n    const css = `\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    `;\n\n    if (this.#hostStretchSheet) {\n      this.#hostStretchSheet.replaceSync(css);\n    } else if (this.#outerHost) {\n      this.#hostStretchSheet = injectStyle(css, this.#outerHost);\n    }\n  }\n\n  // Reconnects forwarding to the current anchor. Disconnects the old observer and\n  // removes the stale attr from target first — forwardAttrs only sets attrs present\n  // on the source, so absent attrs won't be removed automatically.\n  #forwardAttr(observer, target, attr) {\n    observer?.disconnect();\n    target?.removeAttribute(attr);\n    if (!this.#anchor || !target) return null;\n    return forwardAttrs(this.#anchor, target, { includeAttrs: [attr] });\n  }\n\n  // Prevent stale callbacks from firing on a detached anchor after removal.\n  disconnectedCallback() {\n    super.disconnectedCallback?.();\n    this.#stretchObserver?.disconnect();\n    this.#directionObserver?.disconnect();\n  }\n\n  // Track whether anything is slotted, so the host display rule can hide an\n  // empty host rather than reserving its layout box.\n  #onAnchorChanged() {\n    this.toggleAttribute('has-anchor', !!this.#anchor);\n  }\n}\n\nexport const AnchoredClass = compose(componentNameValidationMixin)(RawAnchored);\n","import { componentName, AnchoredClass } from './AnchoredClass';\n\ncustomElements.define(componentName, AnchoredClass);\n\nexport { AnchoredClass, componentName };\n","import {\n  componentNameValidationMixin,\n  createStyleMixin,\n  draggableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport {\n  getComponentName,\n  injectStyle,\n  observeAttributes,\n} from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('attachment');\n\nconst ATTACHMENT_POSITIONS = [\n  'top-end',\n  'top-start',\n  'top-center',\n  'bottom-start',\n  'bottom-end',\n  'bottom-center',\n];\n\nconst DEFAULT_POSITION = ATTACHMENT_POSITIONS[0];\n\nclass RawAttachment extends createBaseClass({\n  componentName,\n  baseSelector: 'descope-anchored',\n}) {\n  constructor() {\n    super();\n\n    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    `;\n\n    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');\n    this.attachmentSlot = this.shadowRoot.querySelector(\n      'slot[name=\"attachment\"]',\n    );\n  }\n\n  get #attachment() {\n    return this.attachmentSlot?.assignedElements()[0];\n  }\n\n  static get observedAttributes() {\n    return [...(super.observedAttributes || []), 'position'];\n  }\n\n  attributeChangedCallback(name, oldVal, newVal) {\n    super.attributeChangedCallback?.(name, oldVal, newVal);\n    if (name === 'position' && oldVal !== newVal) {\n      this.#handlePositionChange();\n    }\n  }\n\n  init() {\n    super.init?.();\n\n    injectStyle(\n      `\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`,\n      this,\n    );\n\n    this.#handlePositionChange();\n\n    // When descope-anchored forwards st-host-direction from the anchor to this container,\n    // propagate it to the attachment elements.\n    const container = this.shadowRoot.querySelector('.attachment-container');\n    observeAttributes(container, () => this.#syncDirection(), {\n      includeAttrs: ['st-host-direction'],\n    });\n\n    // Re-sync direction when new elements are slotted into the attachment slot.\n    this.attachmentSlot.addEventListener('slotchange', () =>\n      this.#syncDirection(),\n    );\n\n    this.defaultSlot.addEventListener('slotchange', () => {\n      this.#setVisibility();\n      window.requestAnimationFrame(() => this.#syncAvailableSizeAttr());\n    });\n\n    window.requestAnimationFrame(() => this.#setVisibility());\n  }\n\n  #syncAvailableSizeAttr() {\n    const anchor = this.defaultSlot?.assignedElements()?.[0];\n\n    const anchorRect = anchor?.getBoundingClientRect();\n    if (anchorRect) {\n      const availableWidth = anchorRect.width;\n      this.#attachment?.setAttribute(\n        'data-attachment-size',\n        Number(availableWidth),\n      );\n    }\n  }\n\n  #setVisibility() {\n    const hasAnchor = this.defaultSlot?.assignedElements()?.length > 0;\n    this.classList.toggle('hidden', !hasAnchor);\n  }\n\n  #syncDirection() {\n    const direction = this.shadowRoot\n      .querySelector('.attachment-container')\n      ?.getAttribute('st-host-direction');\n\n    if (!direction) return;\n    // currently we support direction sync only for web-components-ui\n    // elements, which support st-host-direction attribute.\n    this.#attachment?.setAttribute('st-host-direction', direction);\n  }\n\n  get offsetX() {\n    return this.getAttribute('offset-x') || '0px';\n  }\n\n  get offsetY() {\n    return this.getAttribute('offset-y') || '0px';\n  }\n\n  #handlePositionChange() {\n    const pos = this.getAttribute('position');\n    if (!ATTACHMENT_POSITIONS.includes(pos)) {\n      this.setAttribute('position', DEFAULT_POSITION);\n    }\n  }\n}\n\nconst attachmentContainer = { selector: () => '.attachment-container' };\n\nexport const AttachmentClass = compose(\n  createStyleMixin({\n    mappings: {\n      transform: { ...attachmentContainer },\n      justifyContent: { ...attachmentContainer },\n      maxWidth: { ...attachmentContainer },\n      top: { ...attachmentContainer },\n      bottom: { ...attachmentContainer },\n      left: { ...attachmentContainer },\n      right: { ...attachmentContainer },\n      offsetX: {},\n      offsetY: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawAttachment);\n","import '@descope-ui/descope-anchored';\nimport { componentName, AttachmentClass } from './AttachmentClass';\n\ncustomElements.define(componentName, AttachmentClass);\n\nexport { AttachmentClass, componentName };\n"],"names":["componentName","RawAnchored","baseSelector","this","defaultSlot","assignedElements","flatten","shadowRoot","querySelector","getRootNode","host","constructor","super","attachShadow","mode","innerHTML","init","addEventListener","css","replaceSync","observer","target","attr","disconnect","removeAttribute","includeAttrs","disconnectedCallback","toggleAttribute","AnchoredClass","customElements","define","ATTACHMENT_POSITIONS","DEFAULT_POSITION","RawAttachment","attachmentSlot","observedAttributes","attributeChangedCallback","name","oldVal","newVal","container","window","requestAnimationFrame","anchor","anchorRect","getBoundingClientRect","availableWidth","width","setAttribute","Number","hasAnchor","length","classList","toggle","direction","getAttribute","offsetX","offsetY","pos","includes","attachmentContainer","selector","AttachmentClass","mappings","transform","justifyContent","maxWidth","top","bottom","left","right"],"sourceRoot":""}
+{"version":3,"file":"descope-attachment.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-anchored/src/component/AnchoredClass.js","webpack://@descope/web-components-ui/../components/descope-anchored/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-attachment/src/component/AttachmentClass.js","webpack://@descope/web-components-ui/../components/descope-attachment/src/component/index.js"],"sourcesContent":["import { componentNameValidationMixin } from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport {\n  forwardAttrs,\n  getComponentName,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('anchored');\n\nclass RawAnchored extends createBaseClass({\n  componentName,\n  baseSelector: '.anchored-root',\n}) {\n  #stretchObserver = null;\n\n  #directionObserver = null;\n\n  #hostStretchSheet = null;\n\n  get #anchor() {\n    return this.defaultSlot.assignedElements({ flatten: true })[0];\n  }\n\n  get #anchored() {\n    return this.shadowRoot\n      .querySelector('slot[name=\"anchored\"]')\n      ?.assignedElements()[0];\n  }\n\n  get #outerHost() {\n    return this.getRootNode().host;\n  }\n\n  constructor() {\n    super();\n\n    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    `;\n\n    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');\n\n    this.#syncComponentState();\n  }\n\n  init() {\n    super.init?.();\n\n    injectStyle(\n      `\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      `,\n      this,\n    );\n\n    this.#syncStretchCSS();\n\n    this.defaultSlot.addEventListener('slotchange', () => this.#syncAnchor());\n\n    this.#syncAnchor();\n  }\n\n  // To support conditional components in flow, we need to sync the 'hidden' className to the root of the component.\n  // Ideally, this would happen in the SDK, but we resolved to this patch to fix the issue without forcing users to update SDKs.\n  #syncComponentState() {\n    const hasHidden = this.#anchor.classList.contains('hidden');\n    this.classList.toggle('hidden', hasHidden);\n  }\n\n  #syncAnchor() {\n    this.#onAnchorChanged();\n\n    this.#stretchObserver = this.#forwardAttr(\n      this.#stretchObserver,\n      this.#outerHost,\n      'stretch',\n    );\n\n    this.#directionObserver = this.#forwardAttr(\n      this.#directionObserver,\n      this.#anchored,\n      'st-host-direction',\n    );\n  }\n\n  // Injects [stretch] layout rules into the containing component's shadow root (e.g. descope-attachment)\n  // so it stretches when the anchor has [stretch]. Replaces the existing rules on subsequent calls.\n  #syncStretchCSS() {\n    const css = `\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    `;\n\n    if (this.#hostStretchSheet) {\n      this.#hostStretchSheet.replaceSync(css);\n    } else if (this.#outerHost) {\n      this.#hostStretchSheet = injectStyle(css, this.#outerHost);\n    }\n  }\n\n  // Reconnects forwarding to the current anchor. Disconnects the old observer and\n  // removes the stale attr from target first — forwardAttrs only sets attrs present\n  // on the source, so absent attrs won't be removed automatically.\n  #forwardAttr(observer, target, attr) {\n    observer?.disconnect();\n    target?.removeAttribute(attr);\n    if (!this.#anchor || !target) return null;\n    return forwardAttrs(this.#anchor, target, { includeAttrs: [attr] });\n  }\n\n  // Prevent stale callbacks from firing on a detached anchor after removal.\n  disconnectedCallback() {\n    super.disconnectedCallback?.();\n    this.#stretchObserver?.disconnect();\n    this.#directionObserver?.disconnect();\n  }\n\n  // Track whether anything is slotted, so the host display rule can hide an\n  // empty host rather than reserving its layout box.\n  #onAnchorChanged() {\n    this.toggleAttribute('has-anchor', !!this.#anchor);\n  }\n}\n\nexport const AnchoredClass = compose(componentNameValidationMixin)(RawAnchored);\n","import { componentName, AnchoredClass } from './AnchoredClass';\n\ncustomElements.define(componentName, AnchoredClass);\n\nexport { AnchoredClass, componentName };\n","import {\n  componentNameValidationMixin,\n  createStyleMixin,\n  draggableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport {\n  getComponentName,\n  injectStyle,\n  observeAttributes,\n} from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('attachment');\n\nconst ATTACHMENT_POSITIONS = [\n  'top-end',\n  'top-start',\n  'top-center',\n  'bottom-start',\n  'bottom-end',\n  'bottom-center',\n];\n\nconst DEFAULT_POSITION = ATTACHMENT_POSITIONS[0];\n\nclass RawAttachment extends createBaseClass({\n  componentName,\n  baseSelector: 'descope-anchored',\n}) {\n  constructor() {\n    super();\n\n    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    `;\n\n    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');\n    this.attachmentSlot = this.shadowRoot.querySelector(\n      'slot[name=\"attachment\"]',\n    );\n\n    this.anchored = this.shadowRoot.querySelector('descope-anchored');\n  }\n\n  get #attachment() {\n    return this.attachmentSlot?.assignedElements()[0];\n  }\n\n  static get observedAttributes() {\n    return [...(super.observedAttributes || []), 'position'];\n  }\n\n  attributeChangedCallback(name, oldVal, newVal) {\n    super.attributeChangedCallback?.(name, oldVal, newVal);\n    if (name === 'position' && oldVal !== newVal) {\n      this.#handlePositionChange();\n    }\n  }\n\n  init() {\n    super.init?.();\n\n    this.#syncComponentState();\n\n    injectStyle(\n      `\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`,\n      this,\n    );\n\n    this.#handlePositionChange();\n\n    // When descope-anchored forwards st-host-direction from the anchor to this container,\n    // propagate it to the attachment elements.\n    const container = this.shadowRoot.querySelector('.attachment-container');\n    observeAttributes(container, () => this.#syncDirection(), {\n      includeAttrs: ['st-host-direction'],\n    });\n\n    // Re-sync direction when new elements are slotted into the attachment slot.\n    this.attachmentSlot.addEventListener('slotchange', () =>\n      this.#syncDirection(),\n    );\n\n    this.defaultSlot.addEventListener('slotchange', () => {\n      this.#setVisibility();\n      window.requestAnimationFrame(() => this.#syncAvailableSizeAttr());\n    });\n\n    window.requestAnimationFrame(() => this.#setVisibility());\n  }\n\n  // To support conditional components in flow, we need to sync the 'hidden' className to the root of the component.\n  // Ideally, this would happen in the SDK, but we resolved to this patch to fix the issue without forcing users to update SDKs.\n  #syncComponentState() {\n    const hasHidden = this.anchored?.classList?.contains('hidden');\n    this.classList.toggle('hidden', hasHidden);\n  }\n\n  #syncAvailableSizeAttr() {\n    const anchor = this.defaultSlot?.assignedElements()?.[0];\n\n    const anchorRect = anchor?.getBoundingClientRect();\n    if (anchorRect) {\n      const availableWidth = anchorRect.width;\n      this.#attachment?.setAttribute(\n        'data-attachment-size',\n        Number(availableWidth),\n      );\n    }\n  }\n\n  #setVisibility() {\n    const hasAnchor = this.defaultSlot?.assignedElements()?.length > 0;\n    this.classList.toggle('hidden', !hasAnchor);\n  }\n\n  #syncDirection() {\n    const direction = this.shadowRoot\n      .querySelector('.attachment-container')\n      ?.getAttribute('st-host-direction');\n\n    if (!direction) return;\n    // currently we support direction sync only for web-components-ui\n    // elements, which support st-host-direction attribute.\n    this.#attachment?.setAttribute('st-host-direction', direction);\n  }\n\n  get offsetX() {\n    return this.getAttribute('offset-x') || '0px';\n  }\n\n  get offsetY() {\n    return this.getAttribute('offset-y') || '0px';\n  }\n\n  #handlePositionChange() {\n    const pos = this.getAttribute('position');\n    if (!ATTACHMENT_POSITIONS.includes(pos)) {\n      this.setAttribute('position', DEFAULT_POSITION);\n    }\n  }\n}\n\nconst attachmentContainer = { selector: () => '.attachment-container' };\n\nexport const AttachmentClass = compose(\n  createStyleMixin({\n    mappings: {\n      transform: { ...attachmentContainer },\n      justifyContent: { ...attachmentContainer },\n      maxWidth: { ...attachmentContainer },\n      top: { ...attachmentContainer },\n      bottom: { ...attachmentContainer },\n      left: { ...attachmentContainer },\n      right: { ...attachmentContainer },\n      offsetX: {},\n      offsetY: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawAttachment);\n","import '@descope-ui/descope-anchored';\nimport { componentName, AttachmentClass } from './AttachmentClass';\n\ncustomElements.define(componentName, AttachmentClass);\n\nexport { AttachmentClass, componentName };\n"],"names":["componentName","RawAnchored","baseSelector","this","defaultSlot","assignedElements","flatten","shadowRoot","querySelector","getRootNode","host","constructor","super","attachShadow","mode","innerHTML","init","addEventListener","hasHidden","classList","contains","toggle","css","replaceSync","observer","target","attr","disconnect","removeAttribute","includeAttrs","disconnectedCallback","toggleAttribute","AnchoredClass","customElements","define","ATTACHMENT_POSITIONS","DEFAULT_POSITION","RawAttachment","attachmentSlot","anchored","observedAttributes","attributeChangedCallback","name","oldVal","newVal","container","window","requestAnimationFrame","anchor","anchorRect","getBoundingClientRect","availableWidth","width","setAttribute","Number","hasAnchor","length","direction","getAttribute","offsetX","offsetY","pos","includes","attachmentContainer","selector","AttachmentClass","mappings","transform","justifyContent","maxWidth","top","bottom","left","right"],"sourceRoot":""}

package/dist/umd/descope-multi-line-mappings.js

@@ -0,0 +1,339 @@
+/*! For license information please see descope-multi-line-mappings.js.LICENSE.txt */
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5087,5375],{19624(t,e,r){r.d(e,{J:()=>m,T:()=>l});var o=r(63200),i=r(25964),n=r(88961),s=r(98538),a=r(10767);const l=(0,i.xE)("button"),{host:d,label:c,slottedIcon:u}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let h;const m=(0,o.Zz)((0,n.DM)({triggers:[{attr:"full-width",value:"true"}]}),(0,n.RF)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>"::slotted(*)",property:s.S.cssVarList.fill},labelTextDecoration:{...c,property:"text-decoration"},labelSpacing:{...c,property:"gap"},textAlign:{...c,property:"justify-content",fallback:"center"},iconSize:[{...u,property:"width"},{...u,property:"height"}]}}),a.G,n.VO,n.tQ)((0,n.tz)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${h}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${m.cssVarList.outlineWidth}) + var(${m.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${m.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${m.cssVarList.hostHeight}) - var(${m.cssVarList.outlineWidth}) - var(${m.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${m.cssVarList.hostWidth}) - var(${m.cssVarList.outlineWidth}) - var(${m.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex","class","style"],componentName:l})),{color:p,fontSize:b}=m.cssVarList;h=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"]) ::part(prefix),\n\t:host([loading="true"]) ::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},10767(t,e,r){r.d(e,{G:()=>o});const o=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},30576(t,e,r){r.r(e),r.d(e,{ButtonClass:()=>o.J,componentName:()=>o.T});var o=r(19624);r(83799),customElements.define(o.T,o.J)},98538(t,e,r){r.d(e,{S:()=>l,T:()=>a});var o=r(88961),i=r(25964),n=r(8512),s=r(63200);const a=(0,i.xE)("icon"),l=(0,s.Zz)((0,o.RF)({mappings:{fill:[{},{property:n.q.cssVarList.fill}]}}),o.VO,o.tQ)((0,o.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n        max-height: 100%;\n      }\n      ",excludeAttrsSync:["tabindex","class","style"],componentName:a}))},8512(t,e,r){r.d(e,{T:()=>l,q:()=>u});var o=r(88961),i=r(72270),n=r(63200),s=r(25964),a=r(18782);const l=(0,s.xE)("image"),d=["src","src-dark"];class c extends((0,i.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return d}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,s.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.getSrc)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get getSrc(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach(t=>{t.setAttribute("fill",`var(${u.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)})}renderImage(){this.toggleVisibility(this.getSrc),(0,a.m)(this.getSrc,this.altText).then(t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))})}shouldRender(t){const e=this.getAttribute(t);return this.getSrc===e}attributeChangedCallback(t,e,r){super.attributeChangedCallback?.(t,e,r),e!==r&&this.shouldRender(t)&&this.renderImage()}}const u=(0,n.Zz)((0,o.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),o.VO,o.tQ)(c)},18782(t,e,r){r.d(e,{m:()=>n});var o=r(25414);const i=t=>{const e=o.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},n=async(t,e)=>{try{let r;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));r=i(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),o=await e.text();r=i(o)}else r=((t,e)=>{const r=document.createElement("img");return r.setAttribute("src",t),r.setAttribute("alt",e),r})(t,e);return r.style.setProperty("max-width","100%"),r.style.setProperty("max-height","100%"),r}catch{return null}}},22931(t,e,r){r.r(e),r.d(e,{MultiLineMappingsClass:()=>y,componentName:()=>d}),r(30576),r(70067);var o=r(63200),i=r(25964),n=r(88961),s=r(72270),a=r(94681),l=r(19624);const d=(0,i.xE)("multi-line-mappings"),c=(0,s.qu)({componentName:d}),u=t=>null==t?"":String("object"==typeof t?t.value??t.id??t.label??"":t),h=t=>[...new Set(t.map(u).filter(Boolean))],m=t=>{const e=u(t);return"object"==typeof t&&null!==t?{...t,value:e,label:String(t.label??t.displayName??e)}:{value:e,label:e}},p=t=>{if(!Array.isArray(t))return[];const e=new Set;return t.map(m).filter(t=>!(!t.value||e.has(t.value)||(e.add(t.value),0)))},b=(t=[],e=[])=>t.length===e.length&&t.every((t,r)=>t===e[r]),g={selector:()=>":host"},f={selector:".row"},v={selector:".add-action"},y=(0,o.Zz)((0,n.RF)({mappings:{hostWidth:{...g,property:"width"},hostDirection:[{...g,property:"direction"},{selector:a.t.componentName,property:a.t.cssVarList.hostDirection},{selector:l.J.componentName,property:l.J.cssVarList.hostDirection}],rowsGap:{selector:".rows",property:"gap"},rowGap:{...f,property:"gap"},rowAlignItems:{...f,property:"align-items"},rowWrap:{...f,property:"flex-wrap"},addActionJustifyContent:{...v,property:"justify-content"},addActionMarginTop:{...v,property:"margin-top"}}}),n.VO)(class extends c{static get observedAttributes(){return["data","max-rows","size","disabled","readonly","first-value-key","second-value-key","first-label","second-label","first-placeholder","second-placeholder","full-width","merge-rows"]}#t=[{firstValues:[],secondValues:[]}];#e=null;#r=[];#o={};constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n      <div class="wrapper">\n        <div class="rows"></div>\n        <div class="add-action">\n          <descope-button\n            class="add-button"\n            variant="link"\n            mode="primary"\n          >\n            <slot name="add-button-content">Add line</slot>\n          </descope-button>\n        </div>\n      </div>\n    ',(0,i.fz)("\n      :host {\n        display: inline-flex;\n        box-sizing: border-box;\n        max-width: 100%;\n      }\n\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n      }\n\n      .rows {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n      }\n\n      .rows > .row {\n        display: flex;\n        width: 100%;\n        min-width: 0;\n        box-sizing: border-box;\n        align-items: flex-end;\n      }\n\n      .row descope-multi-select-combo-box {\n        flex: 1 1 0;\n        box-sizing: border-box;\n      }\n\n      .row .remove-button {\n        flex: 0 0 auto;\n        align-self: flex-end;\n      }\n\n      .row:only-child .remove-button {\n        display: none;\n        pointer-events: none;\n      }\n\n      .add-action {\n        display: flex;\n      }\n      ",this),this.rowsElement=this.shadowRoot.querySelector(".rows"),this.addButtonElement=this.shadowRoot.querySelector(".add-button")}get size(){return this.getAttribute("size")||"md"}get firstValueKey(){return this.getAttribute("first-value-key")||"firstValues"}get secondValueKey(){return this.getAttribute("second-value-key")||"secondValues"}get firstLabel(){return this.getAttribute("first-label")||""}get secondLabel(){return this.getAttribute("second-label")||""}get firstPlaceholder(){return this.getAttribute("first-placeholder")||""}get secondPlaceholder(){return this.getAttribute("second-placeholder")||""}get disabled(){return"true"===this.getAttribute("disabled")}get readonly(){return"true"===this.getAttribute("readonly")}get mergeRows(){return"true"===this.getAttribute("merge-rows")}get maxRows(){const t=Number(this.getAttribute("max-rows"));return Number.isFinite(t)&&t>0?t:void 0}get data(){return this.#o}get value(){return this.#t.filter(t=>t.firstValues.length>0||t.secondValues.length>0).flatMap(t=>(t.firstValues.length?t.firstValues:[""]).map(e=>({[this.firstValueKey]:e,[this.secondValueKey]:[...t.secondValues]})))}set value(t){this.#e=t,this.#t=this.#i(t),this.#n(),this.#s()}#a(t){const e=((t,e,r="unknown")=>{if("string"!=typeof t||!t?.trim())return e;try{return JSON.parse(t)}catch(t){return console.error(`[descope-multi-line-mappings] Failed to parse JSON from "${r}"`,t),e}})(t,{},"data attribute"),r=e&&"object"==typeof e&&!Array.isArray(e)?e:{};this.#r=Object.entries(r).map(([t,e])=>{const r=String(t),o=null!=e&&"object"==typeof e&&!Array.isArray(e),i=o?e.options??[]:e;return{value:r,label:o&&null!=e.label?String(e.label):r,options:p(i)}}),this.#o=Object.fromEntries(this.#r.map(({value:t,options:e})=>[t,e]))}init(){super.init?.(),this.#l(),this.addButtonElement.addEventListener("click",()=>this.#d()),this.#s()}attributeChangedCallback(t,e,r){if(super.attributeChangedCallback?.(t,e,r),e!==r){if("data"===t)return this.#a(r),this.#n(),void this.#s();if("size"===t)return[...this.#c(),...this.#u()].forEach(t=>t.setAttribute("size",this.size)),this.#l(),void this.#h();if(["disabled","readonly"].includes(t))return this.#c().forEach(t=>{t[this.disabled?"setAttribute":"removeAttribute"]("disabled","true"),t[this.readonly?"setAttribute":"removeAttribute"]("readonly","true")}),this.#u().forEach(t=>t[this.disabled||this.readonly?"setAttribute":"removeAttribute"]("disabled","true")),void this.#h();if(["first-label","second-label"].includes(t)){const e="first-label"===t?"first":"second";return void Array.from(this.rowsElement.children).forEach(t=>{const o=t.querySelector(`.${e}-combo`);r?o?.setAttribute("label",r):o?.removeAttribute("label")})}if(["first-placeholder","second-placeholder"].includes(t)){const e="first-placeholder"===t?"first":"second";return void Array.from(this.rowsElement.children).forEach(t=>{const o=t.querySelector(`.${e}-combo`);r?o?.setAttribute("placeholder",r):o?.removeAttribute("placeholder")})}"max-rows"===t&&this.#h(),"merge-rows"===t&&null!==this.#e&&(this.#t=this.#i(this.#e),this.#n(),this.#s())}}#c(){return Array.from(this.rowsElement.querySelectorAll("descope-multi-select-combo-box"))}#u(){return Array.from(this.rowsElement.querySelectorAll(".remove-button"))}#d(){if(this.disabled||this.readonly||this.#m())return;const t={firstValues:[],secondValues:[]};this.#t=[...this.#t,t],this.rowsElement.append(this.#p(t)),this.#h()}#i(t){if(!Array.isArray(t)||!t.length)return[{firstValues:[],secondValues:[]}];let e=t.map(t=>{const e=t?.[this.firstValueKey];return{firstValues:null!=e&&""!==String(e)?[String(e)]:[],secondValues:h(t?.[this.secondValueKey]??[])}});if(this.mergeRows){const t=new Map;for(const r of e){const e=[...r.secondValues].sort().join("\0");t.has(e)?t.get(e).firstValues.push(...r.firstValues):t.set(e,{firstValues:[...r.firstValues],secondValues:r.secondValues})}e=[...t.values()]}return e}#n(){const t=new Set(this.#r.map(t=>t.value));this.#t=this.#t.map(e=>{const r=e.firstValues.filter(e=>t.has(e)),o=this.#b(r),i=new Set(o.map(t=>t.value));return{firstValues:r,secondValues:e.secondValues.filter(t=>i.has(t))}})}#b(t){const e=t.length?t.map(t=>this.#o[t]||[]).filter(t=>t.length):Object.values(this.#o).filter(t=>t.length);if(!e.length||t.length&&e.length!==t.length)return[];if(1===e.length)return e[0];const[r,...o]=e,i=new Set(r.map(t=>t.value));for(const t of o){const e=new Set(t.map(t=>t.value));for(const t of i)e.has(t)||i.delete(t)}return r.filter(t=>i.has(t.value))}#g({getRowIndex:t,type:e,label:r,placeholder:o,options:i,selectedValues:n}){const s=document.createElement("descope-multi-select-combo-box");return s.className=`combo ${e}-combo`,s.setAttribute("size",this.size),s.setAttribute("bordered","true"),s.setAttribute("item-label-path","data-name"),s.setAttribute("item-value-path","data-id"),r&&s.setAttribute("label",r),o&&s.setAttribute("placeholder",o),this.disabled&&s.setAttribute("disabled","true"),this.readonly&&s.setAttribute("readonly","true"),s.data=i,this.#f(s,n),s.addEventListener("input",()=>{if(s.__descopeSyncingSelection)return;const r=t();-1!==r&&this.#v({rowIndex:r,type:e,selectedValues:h(s.value||[])})}),s}#f(t,e){t.__descopeSyncingSelection=!0,Promise.resolve().then(()=>{const r=new Set(e||[]);t.selectedItems=(t.items||[]).filter(t=>r.has(t["data-id"]||t.getAttribute?.("data-id"))),t.__descopeSyncingSelection=!1})}#y(t){const e=document.createElement("descope-button");return e.className="remove-button",e.setAttribute("variant","link"),e.setAttribute("mode","primary"),e.setAttribute("size",this.size),e.setAttribute("aria-label","Remove row"),e.innerHTML='<vaadin-icon icon="vaadin:minus"></vaadin-icon>',(this.disabled||this.readonly)&&e.setAttribute("disabled","true"),e.addEventListener("click",()=>{const e=t();-1!==e&&this.#w(e)}),e}#s(){this.rowsElement.innerHTML="",this.#t.forEach(t=>{this.rowsElement.append(this.#p(t))}),this.#h()}#p(t){const e=document.createElement("div");e.className="row";const r=()=>Array.from(this.rowsElement.children).indexOf(e),o=this.#g({getRowIndex:r,type:"first",label:this.firstLabel,placeholder:this.firstPlaceholder,options:this.#r.map(({value:t,label:e})=>({value:t,label:e})),selectedValues:t.firstValues}),i=this.#b(t.firstValues),n=this.#g({getRowIndex:r,type:"second",label:this.secondLabel,placeholder:this.secondPlaceholder,options:i,selectedValues:t.secondValues});return e.append(o,n,this.#y(r)),e}#x(t){const e=this.#t[t];if(!e)return;const r=this.rowsElement.children[t],o=r?.querySelector(".second-combo");if(!o)return void this.#s();const i=this.#b(e.firstValues);o.data=i,this.#f(o,e.secondValues)}#l(){this.addButtonElement.setAttribute("size",this.size)}#h(){this.disabled||this.readonly||this.#m()?this.addButtonElement.setAttribute("disabled","true"):this.addButtonElement.removeAttribute("disabled")}#m(){return Number.isFinite(this.maxRows)&&this.#t.length>=this.maxRows}#A(t){this.rowsElement.children[t]?.remove()}#v({rowIndex:t,type:e,selectedValues:r}){if(this.disabled||this.readonly)return;const o=this.#t[t];if(o){if("first"===e){const e=this.#b(r),i=new Set(e.map(t=>t.value)),n=o.secondValues.filter(t=>i.has(t));if(b(o.firstValues,r)&&b(o.secondValues,n))return;return this.#t[t]={firstValues:r,secondValues:n},this.#x(t),void this.#V()}b(o.secondValues,r)||(this.#t[t]={...o,secondValues:r},this.#V())}}#w(t){if(this.disabled||this.readonly||this.#t.length<=1)return;const e=this.#t[t];this.#t=this.#t.filter((e,r)=>r!==t),this.#A(t),this.#h(),(e.firstValues.length>0||e.secondValues.length>0)&&this.#V()}#V(){this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}});customElements.define(d,y)},89389(t,e,r){r.d(e,{$:()=>p});var o=r(13256),i=r(55774),n=r(82901),s=r(72562),a=r(81488),l=r(87550);const d=r(51450).AH`
+  :host {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* Aligns the button with form fields when placed on the same line.
+  Note, to make it work, the form fields should have the same "::before" pseudo-element. */
+  .vaadin-button-container::before {
+    content: '\\2003';
+    display: inline-block;
+    width: 0;
+    max-height: 100%;
+  }
+
+  .vaadin-button-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    text-shadow: inherit;
+  }
+
+  [part='prefix'],
+  [part='suffix'] {
+    flex: none;
+  }
+
+  [part='label'] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([focused]) {
+      outline-width: 2px;
+    }
+
+    :host([disabled]) {
+      outline-color: GrayText;
+    }
+  }
+`;var c=r(84467),u=r(53149),h=r(36176);const m=t=>class extends((0,c.e)((0,h.l)((0,u.y)(t)))){static get properties(){return{tabindex:{type:Number,value:0,reflectToAttribute:!0}}}get _activeKeys(){return["Enter"," "]}ready(){super.ready(),this.hasAttribute("role")||this.setAttribute("role","button")}_onKeyDown(t){super._onKeyDown(t),t.altKey||t.shiftKey||t.ctrlKey||t.metaKey||this._activeKeys.includes(t.key)&&(t.preventDefault(),this.click())}};(0,l.SF)("vaadin-button",d,{moduleId:"vaadin-button-styles"});class p extends(m((0,s.q)((0,l.cp)((0,i.w)(o.Pu))))){static get is(){return"vaadin-button"}static get template(){return o.qy`
+  <div class="vaadin-button-container">
+    <span part="prefix" aria-hidden="true">
+      <slot name="prefix"></slot>
+    </span>
+    <span part="label">
+      <slot></slot>
+    </span>
+    <span part="suffix" aria-hidden="true">
+      <slot name="suffix"></slot>
+    </span>
+  </div>
+  <slot name="tooltip"></slot>
+`}ready(){super.ready(),this._tooltipController=new a.I(this),this.addController(this._tooltipController)}}(0,n.X)(p)},93555(t,e,r){r.d(e,{x:()=>i}),r(64511),r(42068),r(9433),r(3241),r(83315);var o=r(87550);const i=o.AH`
+  :host {
+    /* Sizing */
+    --lumo-button-size: var(--lumo-size-m);
+    min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2));
+    height: var(--_button-size);
+    padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
+    margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0);
+    box-sizing: border-box;
+    /* Style */
+    font-family: var(--lumo-font-family);
+    font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
+    font-weight: var(--vaadin-button-font-weight, 500);
+    color: var(--_lumo-button-text-color);
+    background: var(--_lumo-button-background);
+    border: var(--vaadin-button-border, none);
+    border-radius: var(--vaadin-button-border-radius, var(--lumo-border-radius-m));
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    flex-shrink: 0;
+    --_button-size: var(--vaadin-button-height, var(--lumo-button-size));
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    /* Used by notification */
+    --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
+    --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
+    --_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color));
+    --_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color));
+  }
+
+  /* Set only for the internal parts so we don't affect the host vertical alignment */
+  [part='label'],
+  [part='prefix'],
+  [part='suffix'] {
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  [part='label'] {
+    padding: calc(var(--lumo-button-size) / 6) 0;
+  }
+
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-button-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='large']) {
+    font-size: var(--lumo-font-size-l);
+    --lumo-button-size: var(--lumo-size-l);
+  }
+
+  /* For interaction states */
+  :host::before,
+  :host::after {
+    content: '';
+    /* We rely on the host always being relative */
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+    background-color: currentColor;
+    border-radius: inherit;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+
+  @media (any-hover: hover) {
+    :host(:hover)::before {
+      opacity: 0.02;
+    }
+  }
+
+  /* Active */
+
+  :host::after {
+    transition: opacity 1.4s, transform 0.1s;
+    filter: blur(8px);
+  }
+
+  :host([active])::before {
+    opacity: 0.05;
+    transition-duration: 0s;
+  }
+
+  :host([active])::after {
+    opacity: 0.1;
+    transition-duration: 0s, 0s;
+    transform: scale(0);
+  }
+
+  /* Keyboard focus */
+
+  :host([focus-ring]) {
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  :host([theme~='primary'][focus-ring]) {
+    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+  }
+
+  /* Types (primary, tertiary, tertiary-inline */
+
+  :host([theme~='tertiary']),
+  :host([theme~='tertiary-inline']) {
+    --_background: transparent !important;
+    background: var(--vaadin-button-tertiary-background, var(--_background));
+    min-width: 0;
+  }
+
+  :host([theme~='tertiary']) {
+    border: var(--vaadin-button-tertiary-border, none);
+    color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
+    font-weight: var(--vaadin-button-tertiary-font-weight, 500);
+    padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6));
+  }
+
+  :host([theme~='tertiary-inline'])::before {
+    display: none;
+  }
+
+  :host([theme~='tertiary-inline']) {
+    margin: 0;
+    height: auto;
+    padding: 0;
+    line-height: inherit;
+    font-size: inherit;
+  }
+
+  :host([theme~='tertiary-inline']) [part='label'] {
+    padding: 0;
+    overflow: visible;
+    line-height: inherit;
+  }
+
+  :host([theme~='primary']) {
+    background: var(--_lumo-button-primary-background);
+    border: var(--vaadin-button-primary-border, none);
+    color: var(--_lumo-button-primary-text-color);
+    font-weight: var(--vaadin-button-primary-font-weight, 600);
+    min-width: calc(var(--lumo-button-size) * 2.5);
+  }
+
+  :host([theme~='primary'])::before {
+    background-color: black;
+  }
+
+  @media (any-hover: hover) {
+    :host([theme~='primary']:hover)::before {
+      opacity: 0.05;
+    }
+  }
+
+  :host([theme~='primary'][active])::before {
+    opacity: 0.1;
+  }
+
+  :host([theme~='primary'][active])::after {
+    opacity: 0.2;
+  }
+
+  /* Colors (success, error, contrast) */
+
+  :host([theme~='success']) {
+    color: var(--lumo-success-text-color);
+  }
+
+  :host([theme~='success'][theme~='primary']) {
+    background-color: var(--lumo-success-color);
+    color: var(--lumo-success-contrast-color);
+  }
+
+  :host([theme~='error']) {
+    color: var(--lumo-error-text-color);
+  }
+
+  :host([theme~='error'][theme~='primary']) {
+    background-color: var(--lumo-error-color);
+    color: var(--lumo-error-contrast-color);
+  }
+
+  :host([theme~='contrast']) {
+    color: var(--lumo-contrast);
+  }
+
+  :host([theme~='contrast'][theme~='primary']) {
+    background-color: var(--lumo-contrast);
+    color: var(--lumo-base-color);
+  }
+
+  /* Disabled state. Keep selectors after other color variants. */
+
+  :host([disabled]) {
+    pointer-events: none;
+    color: var(--lumo-disabled-text-color);
+  }
+
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-30pct);
+    color: var(--lumo-base-color);
+  }
+
+  :host([theme~='primary'][disabled]) [part] {
+    opacity: 0.7;
+  }
+
+  /* Icons */
+
+  [part] ::slotted(vaadin-icon) {
+    display: inline-block;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+
+  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
+  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: 0.25em;
+    box-sizing: border-box !important;
+  }
+
+  [part='prefix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  [part='suffix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
+
+  /* Icon-only */
+
+  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
+    min-width: var(--lumo-button-size);
+    padding-left: calc(var(--lumo-button-size) / 4);
+    padding-right: calc(var(--lumo-button-size) / 4);
+  }
+
+  :host([theme~='icon']) [part='prefix'],
+  :host([theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='prefix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
+
+  :host([dir='rtl']) [part='suffix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  :host([dir='rtl'][theme~='icon']) [part='prefix'],
+  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+`;(0,o.SF)("vaadin-button",i,{moduleId:"lumo-button"})},83799(t,e,r){r(93555),r(89389)}}]);
+//# sourceMappingURL=descope-multi-line-mappings.js.map

package/dist/umd/descope-multi-line-mappings.js.LICENSE.txt

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