@descope/web-components-ui 3.9.2 → 3.10.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 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)}}]);
+"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])")}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()}#c(){const t=this.#s?.classList?.contains("hidden");this.classList.toggle("hidden",t)}#h(){this.#a(),this.#t=this.#l(this.#t,this.#r,"stretch"),this.#e=this.#l(this.#e,this.#o,"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))}#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),this.#c()}}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,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":""}
+{"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,CAIA,KACE,MAAMe,EAAYf,MAAK,GAASgB,WAAWC,SAAS,UACpDjB,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,GAC1CA,MAAK,GACP,EAGK,MAAM6B,GAAgB,QAAQ,KAAR,CAAsC/B,GC5KnEgC,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\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    this.#syncComponentState();\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])"),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)}}]);
+"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()}#a(){const t=this.#s?.classList?.contains("hidden");this.classList.toggle("hidden",t)}#h(){this.#c(),this.#t=this.#l(this.#t,this.#i,"stretch"),this.#e=this.#l(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))}#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),this.#a()}}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.#a(),(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())}#a(){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    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":""}
+{"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  // 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    this.#syncComponentState();\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-new-password-descope-new-password-internal-index-js.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8603],{3393(t,e,i){i.d(e,{y:()=>o});var r=i(9696),s=i(79365),n=i(81365);const o=(...t)=>(0,r.Zz)(s.XX,s._$,s.yF,s.jd)((0,n.q)(...t))},87455(t,e,i){i.d(e,{M:()=>v,T:()=>d});var r=i(97810),s=i(9696),n=i(79365),o=i(8877),a=i(5810),l=i(73551),p=i(10777);const d=(0,r.xE)("new-password"),c=p.w.cssVarList,{host:h,label:u,internalInputsWrapper:g,errorMessage:b,helperText:y,passwordInput:w,policyPreview:m}={host:{selector:()=>":host"},label:{selector:"::part(label)"},internalInputsWrapper:{selector:"descope-new-password-internal .wrapper"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},passwordInput:{selector:"descope-password"},policyPreview:{selector:"descope-policy-validation"}},v=(0,s.Zz)((0,n.RF)({mappings:{fontSize:[h,{},{selector:a.M.componentName,property:a.M.cssVarList.fontSize}],fontFamily:[u,b,y],labelFontSize:{...u,property:"font-size"},labelFontWeight:{...u,property:"font-weight"},inputValueFontWeight:{...w,property:a.M.cssVarList.inputValueFontWeight},inputPlaceholderFontWeight:{...w,property:a.M.cssVarList.inputPlaceholderFontWeight},helperTextFontWeight:{...y,property:"font-weight"},errorMessageFontWeight:{...b,property:"font-weight"},labelTextColor:{...u,property:"color"},errorMessageTextColor:{...b,property:"color"},errorMessageIcon:{...b,property:"background-image"},errorMessageIconSize:{...b,property:"background-size"},errorMessageIconPadding:{...b,property:"padding-inline-start"},errorMessageIconRepeat:{...b,property:"background-repeat"},errorMessageIconPosition:{...b,property:"background-position"},errorMessageFontSize:{...b,property:"font-size"},hostWidth:{...h,property:"width"},hostMinWidth:{...h,property:"min-width"},hostDirection:[{...h,property:"direction"},{...w,property:a.M.cssVarList.hostDirection}],inputsRequiredIndicator:{...h,property:"content"},spaceBetweenInputs:{...g,property:"gap"},policyPreviewBackgroundColor:{...m,property:c.backgroundColor},policyPreviewPadding:{...m,property:c.padding},valueInputHeight:{...w,property:a.M.cssVarList.valueInputHeight},valueInputMarginBottom:{...w,property:a.M.cssVarList.valueInputMarginBottom}}}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"]}),t=>class extends t{init(){super.init?.();const t=document.createElement("template"),e=this.getAttribute("external-input");t.innerHTML=`\n\t\t\t<${o.T}\n\t\t\t\tname="new-password"\n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n        external-input="${e}"\n\t\t\t>\n      </${o.T}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),"true"===this.getAttribute("external-input")&&this.initExternalInput(),(0,r.EA)(this,this.inputElement,{includeAttrs:["password-label","password-placeholder","confirm-label","confirm-placeholder","full-width","size","bordered","label","has-confirm","invalid","readonly","disabled","draggable","has-validation","policy-label","active-policies","available-policies","data-password-policy-value-minlength","data-password-policy-value-passwordstrength","label-type","manual-visibility-toggle"]})}createSlottedExternalInput(t,e){const i=t.querySelector("input"),r=document.createElement("slot"),s=i.getAttribute("slot");r.setAttribute("name",e),r.setAttribute("slot",s),t.appendChild(r),i.setAttribute("slot",e),i.setAttribute("name",this.getAttribute("name")),i.setAttribute("data-hidden-input","true"),this.appendChild(i)}initExternalInput(){this.passwordInput=this.inputElement.querySelector('[data-id="password"]'),this.confirmInput=this.inputElement.querySelector('[data-id="confirm"]'),this.createSlottedExternalInput(this.passwordInput,"external-password-input"),this.createSlottedExternalInput(this.confirmInput,"external-confirm-input")}})((0,n.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: 100%;\n\t\t\tbox-sizing: border-box;\n\t\t}\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n\t\t${(0,l.cy)(a.M.cssVarList)}\n\t\tvaadin-text-field {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t\tvaadin-text-field::part(input-field) {\n\t\t\tmin-height: 0;\n\t\t\tbackground: transparent;\n\t\t\tbox-shadow: none;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-text-field::part(input-field)::after {\n\t\t\tbackground: transparent;\n\t\t\topacity: 0;\n\t\t}\n\t\tdescope-new-password-internal {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\twidth: 100%;\n\t\t\tpadding: 0;\n\t\t}\n\t\tdescope-new-password-internal > .wrapper {\n      -webkit-mask-image: none;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\tdescope-password {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\t\tdescope-new-password-internal vaadin-password-field::before {\n\t\t\theight: initial;\n\t\t}\n    descope-policy-validation {\n      margin-top: 8px;\n      display: flex;\n    }\n    .hidden {\n      display: none;\n    }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:d}))},8877(t,e,i){i.d(e,{T:()=>r});const r=(0,i(97810).xE)("new-password-internal")},78844(t,e,i){var r=i(25964),s=i(3393),n=i(97810),o=i(87455),a=i(8877);const l=/^password-/,p=/^confirm-/,d=(t,e)=>t.replace(e,""),c=["password-label","password-placeholder"],h=["confirm-label","confirm-placeholder"],u=["has-validation","policy-label","available-policies","active-policies","data-password-policy-value-minlength","data-password-policy-value-passwordstrength","manual-visibility-toggle"],g=["has-confirm","disabled","bordered","size","full-width","maxlength","invalid","readonly","draggable","autocomplete","label-type","manual-visibility-toggle"],b=[].concat(g,c,h,u),y=(0,s.y)({componentName:a.T,baseSelector:"div"});customElements.define(a.T,class extends y{static get observedAttributes(){return[].concat(y.observedAttributes||[],b)}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper"></div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper")}get value(){return this.passwordInput?.value||""}set value(t){t!==this.value&&(this.passwordInput.value=t)}get hasConfirm(){return"true"===this.getAttribute("has-confirm")}onHasConfirmChange(t){this.confirmInput.classList.toggle("hidden",!t)}onHasValidationChange(t){this.policyPanel.classList.toggle("hidden",!t)}get hasValidation(){return"true"===this.getAttribute("has-validation")}getValidity(){if(this.isRequired&&!this.value)return{valueMissing:!0};if(this.value&&!this.policyPanel.isValid)return{typeMismatch:!0};if(this.hasConfirm&&this.confirmInput&&this.value!==this.confirmInput.value)return{patternMismatch:!0};const t=this.getAttribute("minlength"),e=parseInt(t,10)||0;return this.value.length>=e?{}:{tooShort:!0}}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.passwordInput.focus()}),super.init?.(),this.renderInputs(this.hasConfirm,this.hasValidation)}renderInputs(){const t="true"===this.getAttribute("external-input"),e=`\n      <div class="password-input-container">\n        <descope-password\n          autocomplete="new-password"\n          manual-visibility-toggle="true"\n          data-id="password"\n          external-input="${t}"\n        ></descope-password>\n        <descope-policy-validation></descope-policy-validation>\n      </div>\n      <descope-password\n        autocomplete="new-password"\n        manual-visibility-toggle="true"\n        external-input="${t}"\n        data-id="confirm"\n      ></descope-password>\n    `;this.wrapperEle.innerHTML=e,this.passwordInput=this.querySelector('[data-id="password"]'),this.confirmInput=this.querySelector('[data-id="confirm"]'),this.policyPanel=this.querySelector("descope-policy-validation"),this.passwordStrength=this.querySelector("descope-password-strength"),this.inputs=[this.passwordInput,this.confirmInput],this.initInputs(),this.passwordInput.addEventListener("input",t=>{this.passwordStrength?.addEventListener("score-changed",({detail:t})=>{this.policyPanel.setAttribute("data-password-policy-actual-passwordstrength",t)},{once:!0}),this.passwordStrength?.setAttribute("value",t.target.value),this.policyPanel.setAttribute("value",t.target.value)}),(0,n.EA)(this,this.policyPanel,{includeAttrs:u,mapAttrs:{"policy-label":"label","available-policies":"data"}})}handleIndicatorStyle(){this.inputs.forEach(t=>{(0,r.fz)(`\n\t\t\t\t:host ::part(required-indicator)::after {\n\t\t\t\t\tcontent: var(${o.M.cssVarList.inputsRequiredIndicator});\n          width: 1em;\n          text-align: center;\n\t\t\t\t}\n        :host ::part(required-indicator) {\n          display: inline-flex;\n        }\n\t\t\t\t`,t)})}get isInvalid(){return this.hasAttribute("invalid")&&"false"!==this.getAttribute("invalid")}handleInputsInvalidAttribute(){this.inputs.forEach(t=>{t&&(0,n.mx)(t,e=>{if(e.includes("invalid")){const e=t.getAttribute("invalid"),i=this.getAttribute("invalid");this.isInvalid&&i!==e&&t.setAttribute("invalid","true")}},{})})}initInputs(){this.handleIndicatorStyle(),this.handleInputsInvalidAttribute(),this.handleFocusEventsDispatching(this.inputs)}async togglePasswordStrength(){this.activePolicies.includes("passwordstrength")?this.passwordStrength||(await Promise.all([i.e(8961),i.e(3241)]).then(i.bind(i,13241)),this.passwordStrength=document.createElement("descope-password-strength"),this.passwordStrength.setAttribute("options","Very weak,Weak,Average,Strong,Very strong"),this.passwordStrength.setAttribute("value",this.passwordInput.value||""),this.passwordStrength.setAttribute("st-host-direction",this.getAttribute("st-host-direction")),this.passwordStrength.setAttribute("full-width","true"),this.querySelector(".password-input-container").insertBefore(this.passwordStrength,this.policyPanel)):this.passwordStrength&&(this.passwordStrength.remove(),this.passwordStrength=null)}get activePolicies(){return(this.getAttribute("active-policies")||"").split(",")}toggleBooleanAttribute(t,e,i){null===i?t?.removeAttribute(e):t?.setAttribute(e,i)}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&("has-validation"===t?this.onHasValidationChange("true"===i):"has-confirm"===t?this.onHasConfirmChange("true"===i):g.includes(t)?this.inputs.forEach(e=>this.toggleBooleanAttribute(e,t,i)):c.includes(t)?this.toggleBooleanAttribute(this.passwordInput,d(t,l),i):h.includes(t)&&this.toggleBooleanAttribute(this.confirmInput,d(t,p),i),"active-policies"===t&&this.togglePasswordStrength())}})},5810(t,e,i){i.d(e,{M:()=>v,T:()=>l});var r=i(79365),s=i(9696),n=i(97810),o=i(16616),a=i(73551);const l=(0,n.xE)("password"),{host:p,inputField:d,inputElement:c,inputElementPlaceholder:h,revealButtonContainer:u,revealButtonIcon:g,label:b,requiredIndicator:y,errorMessage:w,helperText:m}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:()=>":host input:placeholder-shown"},revealButtonContainer:{selector:"::part(reveal-button)"},revealButtonIcon:{selector:"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,s.Zz)((0,r.RF)({mappings:{hostWidth:{...p,property:"width"},hostMinWidth:{...p,property:"min-width"},hostDirection:{...p,property:"direction"},fontSize:[{},p],fontFamily:[b,d,w,m],inputHeight:{...d,property:"height"},inputHorizontalPadding:[{...c,property:"padding-left"},{...c,property:"padding-right"}],inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},inputValueFontWeight:[{...c,property:"font-weight"},{selector:()=>":host ::slotted(input)",property:"font-weight"}],inputPlaceholderFontWeight:[{...h,property:"font-weight"},{selector:()=>":host ::slotted(input:placeholder-shown)",property:"font-weight"}],helperTextFontWeight:{...m,property:"font-weight"},errorMessageFontWeight:{...w,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...b,property:"-webkit-text-fill-color"},{...y,property:"color"},{...y,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputPlaceholderTextColor:[{...h,property:"color"},{selector:()=>":host ::slotted(input:placeholder-shown)",property:"color"}],inputValueTextColor:[{...c,property:"color"},{selector:()=>":host ::slotted(input)",property:"color"}],revealButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],revealButtonSize:{...u,property:"font-size"},revealButtonColor:{...g,property:"color"},labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...c,property:"opacity"}],inputVerticalAlignment:{...d,property:"align-items"},valueInputHeight:{...c,property:"height"}}}),r.VO,(0,r.RV)({inputType:"password",inputName:"password",includeAttrs:["disabled","readonly","pattern","type","autocomplete"],noBlurDispatch:!0}),(0,r.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),r.tQ,o.A,t=>class extends t{static get observedAttributes(){return["manual-visibility-toggle"]}get manualToggleVisibility(){return"true"===this.getAttribute("manual-visibility-toggle")}init(){super.init?.(),this.handleCaretOnVisibilityChange(),this.origSetPasswordVisible=this.baseElement._setPasswordVisible,this.origSetFocused=this.baseElement._setFocused,this.baseElement._setFocused=this.setFocus.bind(this),this.initExternalInput()}initExternalInput(){const t=this.createExternalInput();t&&this.handlePasswordVisibility(t)}get caretPosition(){return this.value?.length||0}handleCaretOnVisibilityChange(){const t=this.baseElement._togglePasswordVisibility.bind(this.baseElement);this.baseElement._togglePasswordVisibility=()=>{setTimeout(()=>(t(),this.inputElement.setSelectionRange(this.caretPosition,this.caretPosition),!1))}}setFocus(t){this.manualToggleVisibility&&(this.baseElement._setPasswordVisible=()=>{}),this.origSetFocused.call(this.baseElement,t),this.baseElement._setPasswordVisible=this.origSetPasswordVisible.bind(this.baseElement)}resetPasswordVisibilityToggle(){this.baseElement._setPasswordVisible=this.origSetPasswordVisible,this.baseElement._setFocused=this.origSetFocus}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i)}handlePasswordVisibility(t){const e=this.baseElement.__boundRevealButtonMouseDown;this.baseElement.querySelector("vaadin-password-field-button").removeEventListener("mousedown",e),this.baseElement._passwordVisibleChanged=()=>{},this.baseElement._togglePasswordVisibility=()=>{"password"===t.getAttribute("type")?this.showPasswordVisibility(t):this.hidePasswordVisibility(t)}}showPasswordVisibility(t){t.setAttribute("type","text"),this.setAttribute("password-visible","true")}hidePasswordVisibility(t){t.setAttribute("type","password"),this.setAttribute("password-visible","false")}})((0,r.tz)({slots:["","suffix"],wrappedEleName:"vaadin-password-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 10em;\n        box-sizing: border-box;\n        position: relative;\n\t\t\t}\n\t\t\t${(0,a.cy)(v.cssVarList)}\n\t\t\t${(0,a.I4)("vaadin-password-field")}\n      ${(0,a.$J)("vaadin-password-field")}\n\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n        -webkit-mask-image: none;\n\t\t\t\tbox-sizing: border-box;\n        opacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n      :host ::slotted(input) {\n\t\t\t\tmin-height: 0;\n      }\n      :host([readonly]) ::slotted(input:placeholder-shown) {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t:host([readonly]) vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${v.cssVarList.inputOutlineColor});\n\t\t\t}\n\n      ${(0,a.Kl)()}\n\n      ::part(reveal-button) {\n        align-self: center;\n      }\n\n      vaadin-password-field[external-input="true"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},16616(t,e,i){i.d(e,{A:()=>r});const r=t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){super.init?.();const t=this.querySelector("input");t?.addEventListener("mousedown",e=>{if(this.isDraggable&&this.isReadOnly){t.setAttribute("inert","true");const i=e.target,r=i.getAttribute("type");i.setAttribute("type","text"),setTimeout(()=>{i.focus()});const s=e=>{i.setAttribute("type",r),t.removeAttribute("inert"),this.removeEventListener("mouseup",s),this.removeEventListener("dragend",s)};this.addEventListener("dragend",s,{once:!0}),this.addEventListener("mouseup",s,{once:!0})}})}}},10777(t,e,i){i.d(e,{T:()=>p,w:()=>m});var r=i(25964),s=i(79365),n=i(81365),o=i(9696),a=i(97810),l=i(88191);const p=(0,a.xE)("policy-validation"),d=["data","active-policies","overrides","data-password-policy-value-minlength","data-password-policy-value-passwordstrength","data-password-policy-actual-passwordstrength"],c=["label","value",...d];class h extends((0,n.q)({componentName:p,baseSelector:":host > div"})){#t;#e=[];#i;static get observedAttributes(){return c}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <div>\n      <div class="label"></div>\n      <ul></ul>\n    </div>\n\t\t',(0,r.fz)("\n      :host > div {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        box-sizing: border-box;\n      }\n      .label {\n        max-width: 100%;\n        text-wrap: wrap;\n        overflow-wrap: break-word;\n      }\n      .hide-label .label {\n        display: none;\n      }\n      ul {\n        display: flex;\n        flex-direction: column;\n        padding: 0;\n        margin: 0;\n      }\n      ul, li {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n      li::before {\n        display: inline-block;\n        width: 1em;\n        text-align: center;\n      }\n        ",this),this.panel=this.shadowRoot.querySelector(":host > div"),this.label=this.shadowRoot.querySelector(".label"),this.list=this.shadowRoot.querySelector("ul")}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback?.(t,e,i),e!==i){if("label"===t&&this.updateLabel(i),d.includes(t)){if("data"===t)try{this.availablePolicies=JSON.parse(i)}catch{console.error("Failed to set available policies")}if("active-policies"===t&&(this.#e=(i||"").split(",")),"data-password-policy-value-minlength"===t){const t=Number(i);!Number.isNaN(t)&&t>0&&(this.#i={...this.#i,minlength:{value:`${t}`}})}if("data-password-policy-value-passwordstrength"===t){const t=parseInt(i);!Number.isNaN(t)&&t>=0&&(this.#i={...this.#i,passwordstrength:{...this.#i?.passwordstrength,expected:t}})}if("data-password-policy-actual-passwordstrength"===t){const t=Number(i);!Number.isNaN(t)&&t>=0&&(this.#i={...this.#i,passwordstrength:{...this.#i?.passwordstrength,actual:t}})}}this.renderItems(this.#t,this.#e,this.#i)}}get availablePolicies(){return this.#t||[]}set availablePolicies(t){this.#t=t}get value(){return this.getAttribute("value")||""}getStrengthScore(){return this.value.length}compareValues(t,e,i){switch(t.toUpperCase()){case"GTE":return i>=e;case"GT":return i>e;case"LTE":return i<=e;case"LT":return i<e;case"EQ":return i===e;case"NEQ":return i!==e;default:throw new Error(`Invalid comparison type: ${t}`)}}validate(){let t=this.#t;return this.#i&&(t=this.#t.map(t=>{const e=this.#i[t.id];return e?{...t,data:e}:t})),this.#e.reduce((e,i)=>{const r=t.find(t=>t.id===i);if(!r)return e;const{pattern:s,message:n,data:o,compare:a}=r;if(!s&&!a||!n)return e;const p={message:(0,l.z)(n,o),id:i};if(s){const t=new RegExp((0,l.z)(s,o));p.valid=t.test(this.value)}else a&&(p.valid=this.compareValues(a,o?.expected??-1,o?.actual??-1));return e.push(p),e},[])}get isValid(){return!this.validate().some(({valid:t})=>!1===t)}getValidationItemTemplate({valid:t,message:e}){return`\n      <li class="item" data-valid="${this.value?t:"none"}">\n        <span class="message">${e}</span>\n      </li>\n    `}renderItems(t,e){t&&e.length&&(this.list.innerHTML=this.validate().map(this.getValidationItemTemplate.bind(this)).join(""))}updateLabel(t){t?(this.label.textContent=t,this.classList.remove("hide-label")):(this.classList.add("hide-label"),this.label.textContent="")}}const{host:u,item:g,symbolDefault:b,symbolSuccess:y,symbolError:w}={host:{selector:()=>":host > div"},item:{selector:()=>".item"},symbolDefault:{selector:()=>'.item[data-valid="none"]::before'},symbolSuccess:{selector:()=>'.item[data-valid="true"]::before'},symbolError:{selector:()=>'.item[data-valid="false"]::before'}},m=(0,o.Zz)((0,s.RF)({componentNameOverride:(0,a.xE)("input-wrapper")}),(0,s.RF)({mappings:{hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},padding:{},borderWidth:{...u,property:"border-width"},borderStyle:{...u,property:"border-style"},borderColor:{...u,property:"border-color"},borderRadius:{...u,property:"border-radius"},backgroundColor:{...u,property:"background-color"},textColor:{property:"color"},labelMargin:{...u,property:"gap"},itemsSpacing:{...g,property:"line-height"},itemSymbolSuccessColor:{...y,property:"color"},itemSymbolErrorColor:{...w,property:"color"},itemSymbolDefault:{...b,property:"content"},itemSymbolSuccess:{...y,property:"content"},itemSymbolError:{...w,property:"content"}}}),s.VO,s.tQ)(h)},88191(t,e,i){i.d(e,{z:()=>r});const r=(t,e)=>t.replace(/{{(\w+)+}}/g,(t,i)=>e?.[i]||t)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8603],{3393(t,e,i){i.d(e,{y:()=>n});var r=i(9696),s=i(79365),o=i(81365);const n=(...t)=>(0,r.Zz)(s.XX,s._$,s.yF,s.jd)((0,o.q)(...t))},87455(t,e,i){i.d(e,{M:()=>m,T:()=>d});var r=i(97810),s=i(9696),o=i(79365),n=i(8877),a=i(5810),l=i(73551),p=i(10777);const d=(0,r.xE)("new-password"),c=p.w.cssVarList,{host:h,label:u,internalInputsWrapper:g,errorMessage:b,helperText:y,passwordInput:w,policyPreview:v}={host:{selector:()=>":host"},label:{selector:"::part(label)"},internalInputsWrapper:{selector:"descope-new-password-internal .wrapper"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},passwordInput:{selector:"descope-password"},policyPreview:{selector:"descope-policy-validation"}},m=(0,s.Zz)((0,o.RF)({mappings:{fontSize:[h,{},{selector:a.M.componentName,property:a.M.cssVarList.fontSize}],fontFamily:[u,b,y],labelFontSize:{...u,property:"font-size"},labelFontWeight:{...u,property:"font-weight"},inputValueFontWeight:{...w,property:a.M.cssVarList.inputValueFontWeight},inputPlaceholderFontWeight:{...w,property:a.M.cssVarList.inputPlaceholderFontWeight},helperTextFontWeight:{...y,property:"font-weight"},errorMessageFontWeight:{...b,property:"font-weight"},labelTextColor:{...u,property:"color"},errorMessageTextColor:{...b,property:"color"},errorMessageIcon:{...b,property:"background-image"},errorMessageIconSize:{...b,property:"background-size"},errorMessageIconPadding:{...b,property:"padding-inline-start"},errorMessageIconRepeat:{...b,property:"background-repeat"},errorMessageIconPosition:{...b,property:"background-position"},errorMessageFontSize:{...b,property:"font-size"},hostWidth:{...h,property:"width"},hostMinWidth:{...h,property:"min-width"},hostDirection:[{...h,property:"direction"},{...w,property:a.M.cssVarList.hostDirection}],inputsRequiredIndicator:{...h,property:"content"},spaceBetweenInputs:{...g,property:"gap"},policyPreviewBackgroundColor:{...v,property:c.backgroundColor},policyPreviewPadding:{...v,property:c.padding},valueInputHeight:{...w,property:a.M.cssVarList.valueInputHeight},valueInputMarginBottom:{...w,property:a.M.cssVarList.valueInputMarginBottom}}}),o.VO,(0,o.OZ)({proxyProps:["value","selectionStart"]}),t=>class extends t{init(){super.init?.();const t=document.createElement("template"),e=this.getAttribute("external-input");t.innerHTML=`\n\t\t\t<${n.T}\n\t\t\t\tname="new-password"\n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n        external-input="${e}"\n\t\t\t>\n      </${n.T}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.T),"true"===this.getAttribute("external-input")&&this.initExternalInput(),(0,r.EA)(this,this.inputElement,{includeAttrs:["password-label","password-placeholder","confirm-label","confirm-placeholder","full-width","size","bordered","label","has-confirm","invalid","readonly","disabled","draggable","has-validation","policy-label","active-policies","available-policies","data-password-policy-value-minlength","data-password-policy-value-passwordstrength","data-password-policy-value-disallowedchars","data-password-policy-value-email","label-type","manual-visibility-toggle"]})}createSlottedExternalInput(t,e){const i=t.querySelector("input"),r=document.createElement("slot"),s=i.getAttribute("slot");r.setAttribute("name",e),r.setAttribute("slot",s),t.appendChild(r),i.setAttribute("slot",e),i.setAttribute("name",this.getAttribute("name")),i.setAttribute("data-hidden-input","true"),this.appendChild(i)}initExternalInput(){this.passwordInput=this.inputElement.querySelector('[data-id="password"]'),this.confirmInput=this.inputElement.querySelector('[data-id="confirm"]'),this.createSlottedExternalInput(this.passwordInput,"external-password-input"),this.createSlottedExternalInput(this.confirmInput,"external-confirm-input")}})((0,o.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: 100%;\n\t\t\tbox-sizing: border-box;\n\t\t}\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n\t\t${(0,l.cy)(a.M.cssVarList)}\n\t\tvaadin-text-field {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t\tvaadin-text-field::part(input-field) {\n\t\t\tmin-height: 0;\n\t\t\tbackground: transparent;\n\t\t\tbox-shadow: none;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-text-field::part(input-field)::after {\n\t\t\tbackground: transparent;\n\t\t\topacity: 0;\n\t\t}\n\t\tdescope-new-password-internal {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\twidth: 100%;\n\t\t\tpadding: 0;\n\t\t}\n\t\tdescope-new-password-internal > .wrapper {\n      -webkit-mask-image: none;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\tdescope-password {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\t\tdescope-new-password-internal vaadin-password-field::before {\n\t\t\theight: initial;\n\t\t}\n    descope-policy-validation {\n      margin-top: 8px;\n      display: flex;\n    }\n    .hidden {\n      display: none;\n    }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:d}))},8877(t,e,i){i.d(e,{T:()=>r});const r=(0,i(97810).xE)("new-password-internal")},78844(t,e,i){var r=i(25964),s=i(3393),o=i(97810),n=i(87455),a=i(8877);const l=/^password-/,p=/^confirm-/,d=(t,e)=>t.replace(e,""),c=["password-label","password-placeholder"],h=["confirm-label","confirm-placeholder"],u=["has-validation","policy-label","available-policies","active-policies","data-password-policy-value-minlength","data-password-policy-value-passwordstrength","data-password-policy-value-disallowedchars","data-password-policy-value-email","manual-visibility-toggle"],g=["has-confirm","disabled","bordered","size","full-width","maxlength","invalid","readonly","draggable","autocomplete","label-type","manual-visibility-toggle"],b=[].concat(g,c,h,u),y=(0,s.y)({componentName:a.T,baseSelector:"div"});customElements.define(a.T,class extends y{static get observedAttributes(){return[].concat(y.observedAttributes||[],b)}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper"></div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper")}get value(){return this.passwordInput?.value||""}set value(t){t!==this.value&&(this.passwordInput.value=t)}get hasConfirm(){return"true"===this.getAttribute("has-confirm")}onHasConfirmChange(t){this.confirmInput.classList.toggle("hidden",!t)}onHasValidationChange(t){this.policyPanel.classList.toggle("hidden",!t)}get hasValidation(){return"true"===this.getAttribute("has-validation")}getValidity(){if(this.isRequired&&!this.value)return{valueMissing:!0};if(this.value&&!this.policyPanel.isValid)return{typeMismatch:!0};if(this.hasConfirm&&this.confirmInput&&this.value!==this.confirmInput.value)return{patternMismatch:!0};const t=this.getAttribute("minlength"),e=parseInt(t,10)||0;return this.value.length>=e?{}:{tooShort:!0}}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.passwordInput.focus()}),super.init?.(),this.renderInputs(this.hasConfirm,this.hasValidation)}renderInputs(){const t="true"===this.getAttribute("external-input"),e=`\n      <div class="password-input-container">\n        <descope-password\n          autocomplete="new-password"\n          manual-visibility-toggle="true"\n          data-id="password"\n          external-input="${t}"\n        ></descope-password>\n        <descope-policy-validation></descope-policy-validation>\n      </div>\n      <descope-password\n        autocomplete="new-password"\n        manual-visibility-toggle="true"\n        external-input="${t}"\n        data-id="confirm"\n      ></descope-password>\n    `;this.wrapperEle.innerHTML=e,this.passwordInput=this.querySelector('[data-id="password"]'),this.confirmInput=this.querySelector('[data-id="confirm"]'),this.policyPanel=this.querySelector("descope-policy-validation"),this.passwordStrength=this.querySelector("descope-password-strength"),this.inputs=[this.passwordInput,this.confirmInput],this.initInputs(),this.passwordInput.addEventListener("input",t=>{this.passwordStrength?.addEventListener("score-changed",({detail:t})=>{this.policyPanel.setAttribute("data-password-policy-actual-passwordstrength",t)},{once:!0}),this.passwordStrength?.setAttribute("value",t.target.value),this.policyPanel.setAttribute("value",t.target.value)}),(0,o.EA)(this,this.policyPanel,{includeAttrs:u,mapAttrs:{"policy-label":"label","available-policies":"data"}})}handleIndicatorStyle(){this.inputs.forEach(t=>{(0,r.fz)(`\n\t\t\t\t:host ::part(required-indicator)::after {\n\t\t\t\t\tcontent: var(${n.M.cssVarList.inputsRequiredIndicator});\n          width: 1em;\n          text-align: center;\n\t\t\t\t}\n        :host ::part(required-indicator) {\n          display: inline-flex;\n        }\n\t\t\t\t`,t)})}get isInvalid(){return this.hasAttribute("invalid")&&"false"!==this.getAttribute("invalid")}handleInputsInvalidAttribute(){this.inputs.forEach(t=>{t&&(0,o.mx)(t,e=>{if(e.includes("invalid")){const e=t.getAttribute("invalid"),i=this.getAttribute("invalid");this.isInvalid&&i!==e&&t.setAttribute("invalid","true")}},{})})}initInputs(){this.handleIndicatorStyle(),this.handleInputsInvalidAttribute(),this.handleFocusEventsDispatching(this.inputs)}async togglePasswordStrength(){this.activePolicies.includes("passwordstrength")?this.passwordStrength||(await Promise.all([i.e(8961),i.e(3241)]).then(i.bind(i,13241)),this.passwordStrength=document.createElement("descope-password-strength"),this.passwordStrength.setAttribute("options","Very weak,Weak,Average,Strong,Very strong"),this.passwordStrength.setAttribute("value",this.passwordInput.value||""),this.passwordStrength.setAttribute("st-host-direction",this.getAttribute("st-host-direction")),this.passwordStrength.setAttribute("full-width","true"),this.querySelector(".password-input-container").insertBefore(this.passwordStrength,this.policyPanel)):this.passwordStrength&&(this.passwordStrength.remove(),this.passwordStrength=null)}get activePolicies(){return(this.getAttribute("active-policies")||"").split(",")}toggleBooleanAttribute(t,e,i){null===i?t?.removeAttribute(e):t?.setAttribute(e,i)}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&("has-validation"===t?this.onHasValidationChange("true"===i):"has-confirm"===t?this.onHasConfirmChange("true"===i):g.includes(t)?this.inputs.forEach(e=>this.toggleBooleanAttribute(e,t,i)):c.includes(t)?this.toggleBooleanAttribute(this.passwordInput,d(t,l),i):h.includes(t)&&this.toggleBooleanAttribute(this.confirmInput,d(t,p),i),"active-policies"===t&&this.togglePasswordStrength())}})},5810(t,e,i){i.d(e,{M:()=>m,T:()=>l});var r=i(79365),s=i(9696),o=i(97810),n=i(16616),a=i(73551);const l=(0,o.xE)("password"),{host:p,inputField:d,inputElement:c,inputElementPlaceholder:h,revealButtonContainer:u,revealButtonIcon:g,label:b,requiredIndicator:y,errorMessage:w,helperText:v}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:()=>":host input:placeholder-shown"},revealButtonContainer:{selector:"::part(reveal-button)"},revealButtonIcon:{selector:"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},m=(0,s.Zz)((0,r.RF)({mappings:{hostWidth:{...p,property:"width"},hostMinWidth:{...p,property:"min-width"},hostDirection:{...p,property:"direction"},fontSize:[{},p],fontFamily:[b,d,w,v],inputHeight:{...d,property:"height"},inputHorizontalPadding:[{...c,property:"padding-left"},{...c,property:"padding-right"}],inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},inputValueFontWeight:[{...c,property:"font-weight"},{selector:()=>":host ::slotted(input)",property:"font-weight"}],inputPlaceholderFontWeight:[{...h,property:"font-weight"},{selector:()=>":host ::slotted(input:placeholder-shown)",property:"font-weight"}],helperTextFontWeight:{...v,property:"font-weight"},errorMessageFontWeight:{...w,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...b,property:"-webkit-text-fill-color"},{...y,property:"color"},{...y,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputPlaceholderTextColor:[{...h,property:"color"},{selector:()=>":host ::slotted(input:placeholder-shown)",property:"color"}],inputValueTextColor:[{...c,property:"color"},{selector:()=>":host ::slotted(input)",property:"color"}],revealButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],revealButtonSize:{...u,property:"font-size"},revealButtonColor:{...g,property:"color"},labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...c,property:"opacity"}],inputVerticalAlignment:{...d,property:"align-items"},valueInputHeight:{...c,property:"height"}}}),r.VO,(0,r.RV)({inputType:"password",inputName:"password",includeAttrs:["disabled","readonly","pattern","type","autocomplete"],noBlurDispatch:!0}),(0,r.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),r.tQ,n.A,t=>class extends t{static get observedAttributes(){return["manual-visibility-toggle"]}get manualToggleVisibility(){return"true"===this.getAttribute("manual-visibility-toggle")}init(){super.init?.(),this.handleCaretOnVisibilityChange(),this.origSetPasswordVisible=this.baseElement._setPasswordVisible,this.origSetFocused=this.baseElement._setFocused,this.baseElement._setFocused=this.setFocus.bind(this),this.initExternalInput()}initExternalInput(){const t=this.createExternalInput();t&&this.handlePasswordVisibility(t)}get caretPosition(){return this.value?.length||0}handleCaretOnVisibilityChange(){const t=this.baseElement._togglePasswordVisibility.bind(this.baseElement);this.baseElement._togglePasswordVisibility=()=>{setTimeout(()=>(t(),this.inputElement.setSelectionRange(this.caretPosition,this.caretPosition),!1))}}setFocus(t){this.manualToggleVisibility&&(this.baseElement._setPasswordVisible=()=>{}),this.origSetFocused.call(this.baseElement,t),this.baseElement._setPasswordVisible=this.origSetPasswordVisible.bind(this.baseElement)}resetPasswordVisibilityToggle(){this.baseElement._setPasswordVisible=this.origSetPasswordVisible,this.baseElement._setFocused=this.origSetFocus}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i)}handlePasswordVisibility(t){const e=this.baseElement.__boundRevealButtonMouseDown;this.baseElement.querySelector("vaadin-password-field-button").removeEventListener("mousedown",e),this.baseElement._passwordVisibleChanged=()=>{},this.baseElement._togglePasswordVisibility=()=>{"password"===t.getAttribute("type")?this.showPasswordVisibility(t):this.hidePasswordVisibility(t)}}showPasswordVisibility(t){t.setAttribute("type","text"),this.setAttribute("password-visible","true")}hidePasswordVisibility(t){t.setAttribute("type","password"),this.setAttribute("password-visible","false")}})((0,r.tz)({slots:["","suffix"],wrappedEleName:"vaadin-password-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 10em;\n        box-sizing: border-box;\n        position: relative;\n\t\t\t}\n\t\t\t${(0,a.cy)(m.cssVarList)}\n\t\t\t${(0,a.I4)("vaadin-password-field")}\n      ${(0,a.$J)("vaadin-password-field")}\n\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n        -webkit-mask-image: none;\n\t\t\t\tbox-sizing: border-box;\n        opacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n      :host ::slotted(input) {\n\t\t\t\tmin-height: 0;\n      }\n      :host([readonly]) ::slotted(input:placeholder-shown) {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t:host([readonly]) vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${m.cssVarList.inputOutlineColor});\n\t\t\t}\n\n      ${(0,a.Kl)()}\n\n      ::part(reveal-button) {\n        align-self: center;\n      }\n\n      vaadin-password-field[external-input="true"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},16616(t,e,i){i.d(e,{A:()=>r});const r=t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){super.init?.();const t=this.querySelector("input");t?.addEventListener("mousedown",e=>{if(this.isDraggable&&this.isReadOnly){t.setAttribute("inert","true");const i=e.target,r=i.getAttribute("type");i.setAttribute("type","text"),setTimeout(()=>{i.focus()});const s=e=>{i.setAttribute("type",r),t.removeAttribute("inert"),this.removeEventListener("mouseup",s),this.removeEventListener("dragend",s)};this.addEventListener("dragend",s,{once:!0}),this.addEventListener("mouseup",s,{once:!0})}})}}},10777(t,e,i){i.d(e,{T:()=>p,w:()=>v});var r=i(25964),s=i(79365),o=i(81365),n=i(9696),a=i(97810),l=i(88191);const p=(0,a.xE)("policy-validation"),d=["data","active-policies","overrides","data-password-policy-value-minlength","data-password-policy-value-passwordstrength","data-password-policy-actual-passwordstrength","data-password-policy-value-disallowedchars","data-password-policy-value-email"],c=["label","value",...d];class h extends((0,o.q)({componentName:p,baseSelector:":host > div"})){#t;#e=[];#i;static get observedAttributes(){return c}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <div>\n      <div class="label"></div>\n      <ul></ul>\n    </div>\n\t\t',(0,r.fz)("\n      :host > div {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        box-sizing: border-box;\n      }\n      .label {\n        max-width: 100%;\n        text-wrap: wrap;\n        overflow-wrap: break-word;\n      }\n      .hide-label .label {\n        display: none;\n      }\n      ul {\n        display: flex;\n        flex-direction: column;\n        padding: 0;\n        margin: 0;\n      }\n      ul, li {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n      li::before {\n        display: inline-block;\n        width: 1em;\n        text-align: center;\n      }\n        ",this),this.panel=this.shadowRoot.querySelector(":host > div"),this.label=this.shadowRoot.querySelector(".label"),this.list=this.shadowRoot.querySelector("ul")}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback?.(t,e,i),e!==i){if("label"===t&&this.updateLabel(i),d.includes(t)){if("data"===t)try{this.availablePolicies=JSON.parse(i)}catch{console.error("Failed to set available policies")}if("active-policies"===t&&(this.#e=(i||"").split(",")),"data-password-policy-value-minlength"===t){const t=Number(i);!Number.isNaN(t)&&t>0&&(this.#i={...this.#i,minlength:{value:`${t}`}})}if("data-password-policy-value-passwordstrength"===t){const t=parseInt(i);!Number.isNaN(t)&&t>=0&&(this.#i={...this.#i,passwordstrength:{...this.#i?.passwordstrength,expected:t}})}if("data-password-policy-actual-passwordstrength"===t){const t=Number(i);!Number.isNaN(t)&&t>=0&&(this.#i={...this.#i,passwordstrength:{...this.#i?.passwordstrength,actual:t}})}if("data-password-policy-value-disallowedchars"===t)if(i)this.#i={...this.#i,disallowedchars:{...this.#i?.disallowedchars,value:i}};else if(this.#i?.disallowedchars){const{disallowedchars:t,...e}=this.#i;this.#i=e}if("data-password-policy-value-email"===t)if(i)this.#i={...this.#i,disallowemail:{...this.#i?.disallowemail,expected:i}};else if(this.#i?.disallowemail){const{disallowemail:t,...e}=this.#i;this.#i=e}}this.renderItems(this.#t,this.#e,this.#i)}}get availablePolicies(){return this.#t||[]}set availablePolicies(t){this.#t=t}get value(){return this.getAttribute("value")||""}getStrengthScore(){return this.value.length}compareValues(t,e,i){switch(t.toUpperCase()){case"GTE":return i>=e;case"GT":return i>e;case"LTE":return i<=e;case"LT":return i<e;case"EQ":return i===e;case"NEQ":return i!==e;default:throw new Error(`Invalid comparison type: ${t}`)}}validate(){let t=this.#t;return this.#i&&(t=this.#t.map(t=>{const e=this.#i[t.id];return e?{...t,data:e}:t})),this.#e.reduce((e,i)=>{const r=t.find(t=>t.id===i);if(!r)return e;const{pattern:s,message:o,data:n,compare:a}=r,p="string"==typeof a?a.toUpperCase():a;if(!s&&!a||!o)return e;const d={message:(0,l.z)(o,n),id:i};if(s){const t=new RegExp((0,l.z)(s,n));d.valid=t.test(this.value)}else if("STR_NEQ_CI"===p){const t=(n?.expected??"").toLowerCase(),e=(this.value??"").toLowerCase();if(t&&e){const i=t.indexOf("@"),r=i>0?t.slice(0,i):t;d.valid=e!==t&&e!==r}else d.valid=!0}else a&&(d.valid=this.compareValues(p,n?.expected??-1,n?.actual??-1));return e.push(d),e},[])}get isValid(){return!this.validate().some(({valid:t})=>!1===t)}buildValidationItem({valid:t,message:e}){const i=this.value?t:"none",r=document.createElement("li");r.className="item",r.dataset.valid=i;const s=document.createElement("span");return s.className="message",s.textContent=e??"",r.appendChild(s),r}renderItems(t,e){t&&e.length&&this.list.replaceChildren(...this.validate().map(this.buildValidationItem.bind(this)))}updateLabel(t){t?(this.label.textContent=t,this.classList.remove("hide-label")):(this.classList.add("hide-label"),this.label.textContent="")}}const{host:u,item:g,symbolDefault:b,symbolSuccess:y,symbolError:w}={host:{selector:()=>":host > div"},item:{selector:()=>".item"},symbolDefault:{selector:()=>'.item[data-valid="none"]::before'},symbolSuccess:{selector:()=>'.item[data-valid="true"]::before'},symbolError:{selector:()=>'.item[data-valid="false"]::before'}},v=(0,n.Zz)((0,s.RF)({componentNameOverride:(0,a.xE)("input-wrapper")}),(0,s.RF)({mappings:{hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},padding:{},borderWidth:{...u,property:"border-width"},borderStyle:{...u,property:"border-style"},borderColor:{...u,property:"border-color"},borderRadius:{...u,property:"border-radius"},backgroundColor:{...u,property:"background-color"},textColor:{property:"color"},labelMargin:{...u,property:"gap"},itemsSpacing:{...g,property:"line-height"},itemSymbolSuccessColor:{...y,property:"color"},itemSymbolErrorColor:{...w,property:"color"},itemSymbolDefault:{...b,property:"content"},itemSymbolSuccess:{...y,property:"content"},itemSymbolError:{...w,property:"content"}}}),s.VO,s.tQ)(h)},88191(t,e,i){i.d(e,{z:()=>r});const r=(t,e)=>t.replace(/{{(\w+)+}}/g,(t,i)=>e?.[i]||t)}}]);
 //# sourceMappingURL=descope-new-password-descope-new-password-internal-index-js.js.map