@descope/web-components-ui 3.20.3 → 3.21.0

package/dist/umd/descope-user-auth-method-index-js.js

@@ -1,339 +1,2 @@
-/*! For license information please see descope-user-auth-method-index-js.js.LICENSE.txt */
-(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,4188,5087,9990],{9427(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4gPC9zdmc+IA=="},77888(t,e,i){"use strict";i.d(e,{T:()=>s,e:()=>d});var n=i(88961),o=i(72270),r=i(25964),a=i(63200);const s=(0,r.xE)("badge");class l extends((0,o.qu)({componentName:s,baseSelector:":host > div"})){static get observedAttributes(){return["data-attachment-size","shrink-to-indicator-threshold"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n      <slot></slot>\n\t\t</div>\n\t\t",(0,r.fz)("\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        position: relative;\n        width: 100%;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      ",this)}get shrinkToIndicatorThreshold(){return this.getAttribute("shrink-to-indicator-threshold")||65}#t(t){this.toggleAttribute("shrink-to-indicator",parseFloat(t)<this.shrinkToIndicatorThreshold)}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"data-attachment-size"===t&&e!==i&&this.#t(i)}}const d=(0,a.Zz)((0,n.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostHeight:[{selector:()=>":host",property:"height"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},lineHeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{},boxShadow:{},textIndent:{}}}),n.VO,n.tQ)(l)},11065(t,e,i){"use strict";i.r(e),i.d(e,{BadgeClass:()=>n.e,componentName:()=>n.T});var n=i(77888);customElements.define(n.T,n.e)},19624(t,e,i){"use strict";i.d(e,{J:()=>p,T:()=>l});var n=i(63200),o=i(25964),r=i(88961),a=i(98538),s=i(10767);const l=(0,o.xE)("button"),{host:d,label:h,slottedIcon:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const p=(0,n.Zz)((0,r.DM)({triggers:[{attr:"full-width",value:"true"}]}),(0,r.RF)({mappings:{hostWidth:{property:"width"},hostMaxWidth:{...d,property:"max-width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>"::slotted(*)",property:a.S.cssVarList.fill},labelTextDecoration:{...h,property:"text-decoration"},labelSpacing:{...h,property:"gap"},textAlign:{...h,property:"justify-content",fallback:"center"},iconSize:[{...c,property:"width"},{...c,property:"height"}]}}),s.G,r.VO,r.tQ)((0,r.tz)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex","class","style"],componentName:l})),{color:b,fontSize:m}=p.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${b});\n\t\ttop: calc(50% - (var(${m}) / 2));\n\t\tleft: calc(50% - (var(${m}) / 2));\n\t\tborder-width: calc(var(${m}) / 10);\n\t\twidth: var(${m});\n\t\theight: var(${m});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"]) ::part(prefix),\n\t:host([loading="true"]) ::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},10767(t,e,i){"use strict";i.d(e,{G:()=>n});const n=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},30576(t,e,i){"use strict";i.r(e),i.d(e,{ButtonClass:()=>n.J,componentName:()=>n.T});var n=i(19624);i(83799),customElements.define(n.T,n.J)},98538(t,e,i){"use strict";i.d(e,{S:()=>l,T:()=>s});var n=i(88961),o=i(25964),r=i(8512),a=i(63200);const s=(0,o.xE)("icon"),l=(0,a.Zz)((0,n.RF)({mappings:{fill:[{},{property:r.q.cssVarList.fill}],height:{selector:()=>":host"},width:{selector:()=>":host"}}}),n.VO,n.tQ)((0,n.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        max-height: 100%;\n      }\n      ",excludeAttrsSync:["tabindex","class","style","st-height","st-width"],componentName:s}))},8512(t,e,i){"use strict";i.d(e,{T:()=>l,q:()=>c});var n=i(88961),o=i(72270),r=i(63200),a=i(25964),s=i(18782);const l=(0,a.xE)("image"),d=["src","src-dark"];class h extends((0,o.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return d}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,a.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.getSrc)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get getSrc(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach(t=>{t.setAttribute("fill",`var(${c.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)})}renderImage(){this.toggleVisibility(this.getSrc),(0,s.m)(this.getSrc,this.altText).then(t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))})}shouldRender(t){const e=this.getAttribute(t);return this.getSrc===e}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&this.shouldRender(t)&&this.renderImage()}}const c=(0,r.Zz)((0,n.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),n.VO,n.tQ)(h)},18782(t,e,i){"use strict";i.d(e,{m:()=>r});var n=i(25414);const o=t=>{const e=n.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},r=async(t,e)=>{try{let i;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));i=o(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),n=await e.text();i=o(n)}else i=((t,e)=>{const i=document.createElement("img");return i.setAttribute("src",t),i.setAttribute("alt",e),i})(t,e);return i.style.setProperty("max-width","100%"),i.style.setProperty("max-height","100%"),i}catch{return null}}},66434(t,e,i){"use strict";i.d(e,{T:()=>s,s:()=>h});var n=i(88961),o=i(63200),r=i(25964),a=i(72270);const s=(0,r.xE)("text");class l extends((0,a.qu)({componentName:s,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,r.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,r.Ge)(this,()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""})}}const{host:d}={host:{selector:()=>":host"}},h=(0,o.Zz)((0,n.RF)({mappings:{hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),(0,n.DM)({triggers:[{attr:"full-width",value:"true"}]}),n.VO,n.tQ)(l)},63595(t,e,i){"use strict";i.r(e),i.d(e,{TextClass:()=>n.s,componentName:()=>n.T});var n=i(66434);customElements.define(n.T,n.s)},67760(t,e,i){"use strict";i.r(e),i.d(e,{UserAuthMethodClass:()=>k,componentName:()=>b});var n=i(66434),o=i(19624),r=i(98538),a=i(77888),s=i(25964),l=i(79365),d=i(81365),h=i(9696),c=i(97810),u=i(9427),p=i.n(u);const b=(0,c.xE)("user-auth-method");class m extends((0,d.q)({componentName:b,baseSelector:":host > .root"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="root">\n        <div class="text-wrapper">\n          <slot name="method-icon"></slot>\n          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>\n        </div>\n\n        <div class="btn-wrapper">\n          <descope-button class="btn unfulfilled hidden" size="sm" variant="link" mode="primary">\n            <slot name="button-icon"></slot>\n          </descope-button>\n          <descope-button class="btn fulfilled hidden" size="sm" variant="link" mode="primary">\n            <slot name="fulfilled-button-icon"></slot>\n          </descope-button>\n          <div class="status-indicator hidden">\n            <vaadin-icon src=${p()}></vaadin-icon>\n          </div>\n          <descope-button class="hidden-btn" size="sm" variant="link" mode="primary"></descope-button>\n        </div>\n      </div>\n\t\t`,(0,s.fz)('\n      :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\n        vaadin-icon {\n          color: currentcolor;\n        }\n\n        .root {\n          display: flex;\n          width: 100%;\n          height: 100%;\n          align-items: center;\n        }\n\n        .btn-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          flex-grow: 0;\n        }\n\n        .text-wrapper {\n          display: flex;\n          align-items: center;\n          flex-grow: 1;\n          min-width: 0;\n        }\n\n        descope-text::part(text-wrapper) {\n          text-overflow: ellipsis;\n          overflow: hidden;\n          white-space: nowrap;\n          width: initial;\n        }\n\n        descope-text {\n          display: inline-flex;\n          min-width: 0;\n        }\n\n        .status-indicator {\n          width: 1em;\n          height: 1em;\n          display: flex;\n          align-items: center;\n          padding-inline-end: 1em;\n        }\n\n        .hidden {\n          display: none;\n        }\n\n        .hidden-btn {\n          width: 0;\n          overflow: hidden;\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        slot[name="method-icon"]:not(:empty) {\n          display: inline-flex;\n          align-items: center;\n        }\n          ',this),this.unfulfilledButton=this.shadowRoot.querySelector(".btn.unfulfilled"),this.fulfilledButton=this.shadowRoot.querySelector(".btn.fulfilled"),this.statusIndicator=this.shadowRoot.querySelector(".status-indicator"),this.labelText=this.shadowRoot.querySelector('descope-text[data-id="label-text"]')}onLabelChange(){this.labelText.innerText=this.label,this.labelText.setAttribute("title",this.label)}updateButtonLabel(t,e){let i=t.querySelector("span");e?(i||(i=document.createElement("span"),t.appendChild(i)),i.innerText=e):i&&t.removeChild(i)}onFulfilledChange(){this.isFulfilled?(this.unfulfilledButton.classList.add("hidden"),this.handleFulfilled()):(this.fulfilledButton.classList.add("hidden"),this.handleUnfulfilled())}handleFulfilled(){this.fulfilledButton.classList.toggle("hidden",!this.isFulfilledEditable),this.statusIndicator.classList.toggle("hidden",this.isFulfilledEditable)}handleUnfulfilled(){this.unfulfilledButton.classList.toggle("hidden",!this.isUnfulfilledEditable),this.statusIndicator.classList.toggle("hidden",this.isUnfulfilledEditable)}get label(){return this.getAttribute("label")||""}get unfulfilledButtonLabel(){return this.getAttribute("button-label")||""}get fulfilledButtonLabel(){return this.getAttribute("fulfilled-button-label")||""}get isFulfilled(){return"true"===this.getAttribute("fulfilled")}get isFulfilledEditable(){return"true"===this.getAttribute("fulfilled-editable")}get isUnfulfilledEditable(){return"false"!==this.getAttribute("unfulfilled-editable")}init(){this.onLabelChange(),this.updateButtonLabel(this.fulfilledButton,this.fulfilledButtonLabel),this.updateButtonLabel(this.unfulfilledButton,this.unfulfilledButtonLabel),this.onFulfilledChange(),this.unfulfilledButton.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("button-clicked",{bubbles:!0,composed:!0}))),this.fulfilledButton.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("fulfilled-button-clicked",{bubbles:!0,composed:!0}))})}static get observedAttributes(){return["label","fulfilled","button-label","fulfilled-button-label","fulfilled-editable","unfulfilled-editable"].concat(super.observedAttributes)}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&("label"===t?this.onLabelChange():"fulfilled"===t?this.onFulfilledChange():"button-label"===t?this.updateButtonLabel(this.unfulfilledButton,this.unfulfilledButtonLabel):"fulfilled-button-label"===t?this.updateButtonLabel(this.fulfilledButton,this.fulfilledButtonLabel):"fulfilled-editable"===t&&this.isFulfilled?this.handleFulfilled():"unfulfilled-editable"!==t||this.isFulfilled||this.handleUnfulfilled())}}const{host:g,textField:f,buttons:v,badge:y,textWrapper:x,methodIconSlot:w}={host:{selector:()=>":host"},textField:{selector:"descope-text"},buttons:{selector:"descope-button"},badge:{selector:"descope-badge"},textWrapper:{selector:" .text-wrapper"},methodIconSlot:{selector:'slot[name="method-icon"]:not(:empty)'}},k=(0,h.Zz)((0,l.RF)({mappings:{hostWidth:{...g,property:"width"},hostMinWidth:{...g,property:"min-width"},hostMaxWidth:{...g,property:"max-width"},hostDirection:[{...g,property:"direction"},{...f,property:n.s.cssVarList.hostDirection},{...v,property:o.J.cssVarList.hostDirection},{...y,property:a.e.cssVarList.hostDirection}],itemsGap:[{property:"gap"},{...x,property:"gap"}],iconSize:[{...w,property:"width"},{...w,property:"height"}],iconColor:[{selector:()=>"::slotted(*)",property:r.S.cssVarList.fill}]}}),l.VO,l.tQ)(m);i(63595),i(30576),i(11065),i(95260),customElements.define(b,k)},89389(t,e,i){"use strict";i.d(e,{$:()=>b});var n=i(13256),o=i(55774),r=i(82901),a=i(72562),s=i(81488),l=i(87550);const d=i(51450).AH`
-  :host {
-    display: inline-block;
-    position: relative;
-    outline: none;
-    white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  /* Aligns the button with form fields when placed on the same line.
-  Note, to make it work, the form fields should have the same "::before" pseudo-element. */
-  .vaadin-button-container::before {
-    content: '\\2003';
-    display: inline-block;
-    width: 0;
-    max-height: 100%;
-  }
-
-  .vaadin-button-container {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    min-height: inherit;
-    text-shadow: inherit;
-  }
-
-  [part='prefix'],
-  [part='suffix'] {
-    flex: none;
-  }
-
-  [part='label'] {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-
-    :host([focused]) {
-      outline-width: 2px;
-    }
-
-    :host([disabled]) {
-      outline-color: GrayText;
-    }
-  }
-`;var h=i(84467),c=i(53149),u=i(36176);const p=t=>class extends((0,h.e)((0,u.l)((0,c.y)(t)))){static get properties(){return{tabindex:{type:Number,value:0,reflectToAttribute:!0}}}get _activeKeys(){return["Enter"," "]}ready(){super.ready(),this.hasAttribute("role")||this.setAttribute("role","button")}_onKeyDown(t){super._onKeyDown(t),t.altKey||t.shiftKey||t.ctrlKey||t.metaKey||this._activeKeys.includes(t.key)&&(t.preventDefault(),this.click())}};(0,l.SF)("vaadin-button",d,{moduleId:"vaadin-button-styles"});class b extends(p((0,a.q)((0,l.cp)((0,o.w)(n.Pu))))){static get is(){return"vaadin-button"}static get template(){return n.qy`
-  <div class="vaadin-button-container">
-    <span part="prefix" aria-hidden="true">
-      <slot name="prefix"></slot>
-    </span>
-    <span part="label">
-      <slot></slot>
-    </span>
-    <span part="suffix" aria-hidden="true">
-      <slot name="suffix"></slot>
-    </span>
-  </div>
-  <slot name="tooltip"></slot>
-`}ready(){super.ready(),this._tooltipController=new s.I(this),this.addController(this._tooltipController)}}(0,r.X)(b)},93555(t,e,i){"use strict";i.d(e,{x:()=>o}),i(64511),i(42068),i(9433),i(3241),i(83315);var n=i(87550);const o=n.AH`
-  :host {
-    /* Sizing */
-    --lumo-button-size: var(--lumo-size-m);
-    min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2));
-    height: var(--_button-size);
-    padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
-    margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0);
-    box-sizing: border-box;
-    /* Style */
-    font-family: var(--lumo-font-family);
-    font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
-    font-weight: var(--vaadin-button-font-weight, 500);
-    color: var(--_lumo-button-text-color);
-    background: var(--_lumo-button-background);
-    border: var(--vaadin-button-border, none);
-    border-radius: var(--vaadin-button-border-radius, var(--lumo-border-radius-m));
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    flex-shrink: 0;
-    --_button-size: var(--vaadin-button-height, var(--lumo-button-size));
-    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-    /* Used by notification */
-    --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
-    --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
-    --_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color));
-    --_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color));
-  }
-
-  /* Set only for the internal parts so we don't affect the host vertical alignment */
-  [part='label'],
-  [part='prefix'],
-  [part='suffix'] {
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  [part='label'] {
-    padding: calc(var(--lumo-button-size) / 6) 0;
-  }
-
-  :host([theme~='small']) {
-    font-size: var(--lumo-font-size-s);
-    --lumo-button-size: var(--lumo-size-s);
-  }
-
-  :host([theme~='large']) {
-    font-size: var(--lumo-font-size-l);
-    --lumo-button-size: var(--lumo-size-l);
-  }
-
-  /* For interaction states */
-  :host::before,
-  :host::after {
-    content: '';
-    /* We rely on the host always being relative */
-    position: absolute;
-    z-index: 1;
-    inset: 0;
-    background-color: currentColor;
-    border-radius: inherit;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-
-  @media (any-hover: hover) {
-    :host(:hover)::before {
-      opacity: 0.02;
-    }
-  }
-
-  /* Active */
-
-  :host::after {
-    transition: opacity 1.4s, transform 0.1s;
-    filter: blur(8px);
-  }
-
-  :host([active])::before {
-    opacity: 0.05;
-    transition-duration: 0s;
-  }
-
-  :host([active])::after {
-    opacity: 0.1;
-    transition-duration: 0s, 0s;
-    transform: scale(0);
-  }
-
-  /* Keyboard focus */
-
-  :host([focus-ring]) {
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
-  }
-
-  :host([theme~='primary'][focus-ring]) {
-    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
-  }
-
-  /* Types (primary, tertiary, tertiary-inline */
-
-  :host([theme~='tertiary']),
-  :host([theme~='tertiary-inline']) {
-    --_background: transparent !important;
-    background: var(--vaadin-button-tertiary-background, var(--_background));
-    min-width: 0;
-  }
-
-  :host([theme~='tertiary']) {
-    border: var(--vaadin-button-tertiary-border, none);
-    color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
-    font-weight: var(--vaadin-button-tertiary-font-weight, 500);
-    padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6));
-  }
-
-  :host([theme~='tertiary-inline'])::before {
-    display: none;
-  }
-
-  :host([theme~='tertiary-inline']) {
-    margin: 0;
-    height: auto;
-    padding: 0;
-    line-height: inherit;
-    font-size: inherit;
-  }
-
-  :host([theme~='tertiary-inline']) [part='label'] {
-    padding: 0;
-    overflow: visible;
-    line-height: inherit;
-  }
-
-  :host([theme~='primary']) {
-    background: var(--_lumo-button-primary-background);
-    border: var(--vaadin-button-primary-border, none);
-    color: var(--_lumo-button-primary-text-color);
-    font-weight: var(--vaadin-button-primary-font-weight, 600);
-    min-width: calc(var(--lumo-button-size) * 2.5);
-  }
-
-  :host([theme~='primary'])::before {
-    background-color: black;
-  }
-
-  @media (any-hover: hover) {
-    :host([theme~='primary']:hover)::before {
-      opacity: 0.05;
-    }
-  }
-
-  :host([theme~='primary'][active])::before {
-    opacity: 0.1;
-  }
-
-  :host([theme~='primary'][active])::after {
-    opacity: 0.2;
-  }
-
-  /* Colors (success, error, contrast) */
-
-  :host([theme~='success']) {
-    color: var(--lumo-success-text-color);
-  }
-
-  :host([theme~='success'][theme~='primary']) {
-    background-color: var(--lumo-success-color);
-    color: var(--lumo-success-contrast-color);
-  }
-
-  :host([theme~='error']) {
-    color: var(--lumo-error-text-color);
-  }
-
-  :host([theme~='error'][theme~='primary']) {
-    background-color: var(--lumo-error-color);
-    color: var(--lumo-error-contrast-color);
-  }
-
-  :host([theme~='contrast']) {
-    color: var(--lumo-contrast);
-  }
-
-  :host([theme~='contrast'][theme~='primary']) {
-    background-color: var(--lumo-contrast);
-    color: var(--lumo-base-color);
-  }
-
-  /* Disabled state. Keep selectors after other color variants. */
-
-  :host([disabled]) {
-    pointer-events: none;
-    color: var(--lumo-disabled-text-color);
-  }
-
-  :host([theme~='primary'][disabled]) {
-    background-color: var(--lumo-contrast-30pct);
-    color: var(--lumo-base-color);
-  }
-
-  :host([theme~='primary'][disabled]) [part] {
-    opacity: 0.7;
-  }
-
-  /* Icons */
-
-  [part] ::slotted(vaadin-icon) {
-    display: inline-block;
-    width: var(--lumo-icon-size-m);
-    height: var(--lumo-icon-size-m);
-  }
-
-  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
-  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
-    padding: 0.25em;
-    box-sizing: border-box !important;
-  }
-
-  [part='prefix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
-  }
-
-  [part='suffix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  /* Icon-only */
-
-  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
-    min-width: var(--lumo-button-size);
-    padding-left: calc(var(--lumo-button-size) / 4);
-    padding-right: calc(var(--lumo-button-size) / 4);
-  }
-
-  :host([theme~='icon']) [part='prefix'],
-  :host([theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  /* RTL specific styles */
-
-  :host([dir='rtl']) [part='prefix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  :host([dir='rtl']) [part='suffix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
-  }
-
-  :host([dir='rtl'][theme~='icon']) [part='prefix'],
-  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-`;(0,n.SF)("vaadin-button",o,{moduleId:"lumo-button"})},83799(t,e,i){"use strict";i(93555),i(89389)},4080(t,e,i){"use strict";i.d(e,{CI:()=>c,H8:()=>a,gm:()=>s,m0:()=>r,nr:()=>h,un:()=>d});const n=t=>t.test(navigator.userAgent),o=t=>t.test(navigator.platform),r=n(/Android/u),a=n(/Chrome/u)&&/Google Inc/u.test(navigator.vendor),s=n(/Firefox/u),l=o(/^iPad/u)||o(/^Mac/u)&&navigator.maxTouchPoints>1,d=o(/^iPhone/u)||l,h=n(/^((?!chrome|android).)*safari/iu),c=(()=>{try{return document.createEvent("TouchEvent"),!0}catch(t){return!1}})()},21961(t,e,i){"use strict";i.d(e,{C:()=>r});var n=i(98741);const o=new WeakMap,r=(0,n.y)(t=>class extends t{get slotStyles(){return{}}connectedCallback(){super.connectedCallback(),this.__applySlotStyles()}__applySlotStyles(){const t=this.getRootNode(),e=function(t){return o.has(t)||o.set(t,new Set),o.get(t)}(t);this.slotStyles.forEach(i=>{e.has(i)||(function(t,e){const i=document.createElement("style");window.DESCOPE_NONCE&&i.setAttribute("nonce",window.DESCOPE_NONCE),i.textContent=t,e===document?document.head.appendChild(i):e.insertBefore(i,e.firstChild)}(i,t),e.add(i))})}})}}]);
+(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,4188,9990],{9427(t){t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4gPC9zdmc+IA=="},77888(t,e,n){"use strict";n.d(e,{T:()=>r,e:()=>d});var i=n(88961),s=n(72270),l=n(25964),o=n(63200);const r=(0,l.xE)("badge");class a extends((0,s.qu)({componentName:r,baseSelector:":host > div"})){static get observedAttributes(){return["data-attachment-size","shrink-to-indicator-threshold"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n      <slot></slot>\n\t\t</div>\n\t\t",(0,l.fz)("\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        position: relative;\n        width: 100%;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      ",this)}get shrinkToIndicatorThreshold(){return this.getAttribute("shrink-to-indicator-threshold")||65}#t(t){this.toggleAttribute("shrink-to-indicator",parseFloat(t)<this.shrinkToIndicatorThreshold)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"data-attachment-size"===t&&e!==n&&this.#t(n)}}const d=(0,o.Zz)((0,i.RF)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostHeight:[{selector:()=>":host",property:"height"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},lineHeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{},boxShadow:{},textIndent:{}}}),i.VO,i.tQ)(a)},11065(t,e,n){"use strict";n.r(e),n.d(e,{BadgeClass:()=>i.e,componentName:()=>i.T});var i=n(77888);customElements.define(i.T,i.e)},19624(t,e,n){"use strict";n.d(e,{J:()=>p,T:()=>a});var i=n(63200),s=n(25964),l=n(88961),o=n(98538),r=n(10767);const a=(0,s.xE)("button"),{host:d,label:h,slottedIcon:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const p=(0,i.Zz)((0,l.DM)({triggers:[{attr:"full-width",value:"true"}]}),(0,l.RF)({mappings:{hostWidth:{property:"width"},hostMaxWidth:{...d,property:"max-width"},hostHeight:{property:"height"},hostDirection:{...d,property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>"::slotted(*)",property:o.S.cssVarList.fill},labelTextDecoration:{...h,property:"text-decoration"},labelSpacing:{...h,property:"gap"},textAlign:{...h,property:"justify-content",fallback:"center"},iconSize:[{...c,property:"width"},{...c,property:"height"}]}}),r.G,l.VO,l.tQ)((0,l.tz)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex","class","style"],componentName:a})),{color:b,fontSize:g}=p.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${b});\n\t\ttop: calc(50% - (var(${g}) / 2));\n\t\tleft: calc(50% - (var(${g}) / 2));\n\t\tborder-width: calc(var(${g}) / 10);\n\t\twidth: var(${g});\n\t\theight: var(${g});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"]) ::part(prefix),\n\t:host([loading="true"]) ::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},10767(t,e,n){"use strict";n.d(e,{G:()=>i});const i=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},30576(t,e,n){"use strict";n.r(e),n.d(e,{ButtonClass:()=>i.J,componentName:()=>i.T});var i=n(19624);n(83799),customElements.define(i.T,i.J)},98538(t,e,n){"use strict";n.d(e,{S:()=>a,T:()=>r});var i=n(88961),s=n(25964),l=n(8512),o=n(63200);const r=(0,s.xE)("icon"),a=(0,o.Zz)((0,i.RF)({mappings:{fill:[{},{property:l.q.cssVarList.fill}],height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)((0,i.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        max-height: 100%;\n      }\n      ",excludeAttrsSync:["tabindex","class","style","st-height","st-width"],componentName:r}))},8512(t,e,n){"use strict";n.d(e,{T:()=>a,q:()=>c});var i=n(88961),s=n(72270),l=n(63200),o=n(25964),r=n(18782);const a=(0,o.xE)("image"),d=["src","src-dark"];class h extends((0,s.qu)({componentName:a,baseSelector:"slot"})){static get observedAttributes(){return d}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,o.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.getSrc)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get getSrc(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach(t=>{t.setAttribute("fill",`var(${c.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)})}renderImage(){this.toggleVisibility(this.getSrc),(0,r.m)(this.getSrc,this.altText).then(t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))})}shouldRender(t){const e=this.getAttribute(t);return this.getSrc===e}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&this.shouldRender(t)&&this.renderImage()}}const c=(0,l.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(h)},18782(t,e,n){"use strict";n.d(e,{m:()=>l});var i=n(25414);const s=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},l=async(t,e)=>{try{let n;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));n=s(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();n=s(i)}else n=((t,e)=>{const n=document.createElement("img");return n.setAttribute("src",t),n.setAttribute("alt",e),n})(t,e);return n.style.setProperty("max-width","100%"),n.style.setProperty("max-height","100%"),n}catch{return null}}},66434(t,e,n){"use strict";n.d(e,{T:()=>r,s:()=>h});var i=n(88961),s=n(63200),l=n(25964),o=n(72270);const r=(0,l.xE)("text");class a extends((0,o.qu)({componentName:r,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,l.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,l.Ge)(this,()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""})}}const{host:d}={host:{selector:()=>":host"}},h=(0,s.Zz)((0,i.RF)({mappings:{hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),(0,i.DM)({triggers:[{attr:"full-width",value:"true"}]}),i.VO,i.tQ)(a)},63595(t,e,n){"use strict";n.r(e),n.d(e,{TextClass:()=>i.s,componentName:()=>i.T});var i=n(66434);customElements.define(i.T,i.s)},67760(t,e,n){"use strict";n.r(e),n.d(e,{UserAuthMethodClass:()=>L,componentName:()=>b});var i=n(66434),s=n(19624),l=n(98538),o=n(77888),r=n(25964),a=n(79365),d=n(81365),h=n(9696),c=n(97810),u=n(9427),p=n.n(u);const b=(0,c.xE)("user-auth-method");class g extends((0,d.q)({componentName:b,baseSelector:":host > .root"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <div class="root">\n        <div class="text-wrapper">\n          <slot name="method-icon"></slot>\n          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>\n        </div>\n\n        <div class="btn-wrapper">\n          <descope-button class="btn unfulfilled hidden" size="sm" variant="link" mode="primary">\n            <slot name="button-icon"></slot>\n          </descope-button>\n          <descope-button class="btn fulfilled hidden" size="sm" variant="link" mode="primary">\n            <slot name="fulfilled-button-icon"></slot>\n          </descope-button>\n          <div class="status-indicator hidden">\n            <vaadin-icon src=${p()}></vaadin-icon>\n          </div>\n          <descope-button class="hidden-btn" size="sm" variant="link" mode="primary"></descope-button>\n        </div>\n      </div>\n\t\t`,(0,r.fz)('\n      :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\n        vaadin-icon {\n          color: currentcolor;\n        }\n\n        .root {\n          display: flex;\n          width: 100%;\n          height: 100%;\n          align-items: center;\n        }\n\n        .btn-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          flex-grow: 0;\n        }\n\n        .text-wrapper {\n          display: flex;\n          align-items: center;\n          flex-grow: 1;\n          min-width: 0;\n        }\n\n        descope-text::part(text-wrapper) {\n          text-overflow: ellipsis;\n          overflow: hidden;\n          white-space: nowrap;\n          width: initial;\n        }\n\n        descope-text {\n          display: inline-flex;\n          min-width: 0;\n        }\n\n        .status-indicator {\n          width: 1em;\n          height: 1em;\n          display: flex;\n          align-items: center;\n          padding-inline-end: 1em;\n        }\n\n        .hidden {\n          display: none;\n        }\n\n        .hidden-btn {\n          width: 0;\n          overflow: hidden;\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        slot[name="method-icon"]:not(:empty) {\n          display: inline-flex;\n          align-items: center;\n        }\n          ',this),this.unfulfilledButton=this.shadowRoot.querySelector(".btn.unfulfilled"),this.fulfilledButton=this.shadowRoot.querySelector(".btn.fulfilled"),this.statusIndicator=this.shadowRoot.querySelector(".status-indicator"),this.labelText=this.shadowRoot.querySelector('descope-text[data-id="label-text"]')}onLabelChange(){this.labelText.innerText=this.label,this.labelText.setAttribute("title",this.label)}updateButtonLabel(t,e){let n=t.querySelector("span");e?(n||(n=document.createElement("span"),t.appendChild(n)),n.innerText=e):n&&t.removeChild(n)}onFulfilledChange(){this.isFulfilled?(this.unfulfilledButton.classList.add("hidden"),this.handleFulfilled()):(this.fulfilledButton.classList.add("hidden"),this.handleUnfulfilled())}handleFulfilled(){this.fulfilledButton.classList.toggle("hidden",!this.isFulfilledEditable),this.statusIndicator.classList.toggle("hidden",this.isFulfilledEditable)}handleUnfulfilled(){this.unfulfilledButton.classList.toggle("hidden",!this.isUnfulfilledEditable),this.statusIndicator.classList.toggle("hidden",this.isUnfulfilledEditable)}get label(){return this.getAttribute("label")||""}get unfulfilledButtonLabel(){return this.getAttribute("button-label")||""}get fulfilledButtonLabel(){return this.getAttribute("fulfilled-button-label")||""}get isFulfilled(){return"true"===this.getAttribute("fulfilled")}get isFulfilledEditable(){return"true"===this.getAttribute("fulfilled-editable")}get isUnfulfilledEditable(){return"false"!==this.getAttribute("unfulfilled-editable")}init(){this.onLabelChange(),this.updateButtonLabel(this.fulfilledButton,this.fulfilledButtonLabel),this.updateButtonLabel(this.unfulfilledButton,this.unfulfilledButtonLabel),this.onFulfilledChange(),this.unfulfilledButton.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("button-clicked",{bubbles:!0,composed:!0}))),this.fulfilledButton.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("fulfilled-button-clicked",{bubbles:!0,composed:!0}))})}static get observedAttributes(){return["label","fulfilled","button-label","fulfilled-button-label","fulfilled-editable","unfulfilled-editable"].concat(super.observedAttributes)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&("label"===t?this.onLabelChange():"fulfilled"===t?this.onFulfilledChange():"button-label"===t?this.updateButtonLabel(this.unfulfilledButton,this.unfulfilledButtonLabel):"fulfilled-button-label"===t?this.updateButtonLabel(this.fulfilledButton,this.fulfilledButtonLabel):"fulfilled-editable"===t&&this.isFulfilled?this.handleFulfilled():"unfulfilled-editable"!==t||this.isFulfilled||this.handleUnfulfilled())}}const{host:f,textField:m,buttons:y,badge:x,textWrapper:v,methodIconSlot:w}={host:{selector:()=>":host"},textField:{selector:"descope-text"},buttons:{selector:"descope-button"},badge:{selector:"descope-badge"},textWrapper:{selector:" .text-wrapper"},methodIconSlot:{selector:'slot[name="method-icon"]:not(:empty)'}},L=(0,h.Zz)((0,a.RF)({mappings:{hostWidth:{...f,property:"width"},hostMinWidth:{...f,property:"min-width"},hostMaxWidth:{...f,property:"max-width"},hostDirection:[{...f,property:"direction"},{...m,property:i.s.cssVarList.hostDirection},{...y,property:s.J.cssVarList.hostDirection},{...x,property:o.e.cssVarList.hostDirection}],itemsGap:[{property:"gap"},{...v,property:"gap"}],iconSize:[{...w,property:"width"},{...w,property:"height"}],iconColor:[{selector:()=>"::slotted(*)",property:l.S.cssVarList.fill}]}}),a.VO,a.tQ)(g);n(63595),n(30576),n(11065),n(95260),customElements.define(b,L)}}]);
 //# sourceMappingURL=descope-user-auth-method-index-js.js.map