@descope/web-components-ui 1.32.0 → 1.33.0

package/dist/umd/9030.js

@@ -1,381 +1,339 @@
 /*! For license information please see 9030.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9030],{86688:(e,t,o)=>{o.d(t,{i:()=>r});var i=o(28186),s=o(49419);const l=document.createElement("div");let a;function r(e,t={}){const o=t.mode||"polite",r=void 0===t.timeout?150:t.timeout;"alert"===o?(l.removeAttribute("aria-live"),l.removeAttribute("role"),a=s.aq.debounce(a,i.G$,(()=>{l.setAttribute("role","alert")}))):(a&&a.cancel(),l.removeAttribute("role"),l.setAttribute("aria-live",o)),l.textContent="",setTimeout((()=>{l.textContent=e}),r)}l.style.position="fixed",l.style.clip="rect(0px, 0px, 0px, 0px)",l.setAttribute("aria-live","polite"),document.body.appendChild(l)},83196:(e,t,o)=>{o.d(t,{U:()=>l});var i=o(75035);const s=new ResizeObserver((e=>{setTimeout((()=>{e.forEach((e=>{e.target.resizables?e.target.resizables.forEach((t=>{t._onResize(e.contentRect)})):e.target._onResize(e.contentRect)}))}))})),l=(0,i.y)((e=>class extends e{get _observeParent(){return!1}connectedCallback(){if(super.connectedCallback(),s.observe(this),this._observeParent){const e=this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentNode;e.resizables||(e.resizables=new Set,s.observe(e)),e.resizables.add(this),this.__parent=e}}disconnectedCallback(){super.disconnectedCallback(),s.unobserve(this);const e=this.__parent;if(this._observeParent&&e){const t=e.resizables;t&&(t.delete(this),0===t.size&&s.unobserve(e)),this.__parent=null}}_onResize(e){}}))},36649:(e,t,o)=>{o(77347),o(44497),o(34123),o(19155),o(40999),o(52301);var i=o(90274),s=o(57224);const l=s.AH`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[6649,9030],{5745:(t,e,o)=>{o.d(e,{i:()=>r});const r=(0,o(98741).y)((t=>class extends t{static get properties(){return{disabled:{type:Boolean,value:!1,observer:"_disabledChanged",reflectToAttribute:!0}}}_disabledChanged(t){this._setAriaDisabled(t)}_setAriaDisabled(t){t?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}click(){this.disabled||super.click()}}))},7888:(t,e,o)=>{o.d(e,{f:()=>r});const r=(0,o(98741).y)((t=>class extends t{ready(){super.ready(),this.addEventListener("keydown",(t=>{this._onKeyDown(t)})),this.addEventListener("keyup",(t=>{this._onKeyUp(t)}))}_onKeyDown(t){switch(t.key){case"Enter":this._onEnter(t);break;case"Escape":this._onEscape(t)}}_onKeyUp(t){}_onEnter(t){}_onEscape(t){}}))},36176:(t,e,o)=>{o.d(e,{l:()=>a});var r=o(5745);const a=t=>class extends((0,r.i)(t)){static get properties(){return{tabindex:{type:Number,reflectToAttribute:!0,observer:"_tabindexChanged"},_lastTabIndex:{type:Number}}}_disabledChanged(t,e){super._disabledChanged(t,e),t?(void 0!==this.tabindex&&(this._lastTabIndex=this.tabindex),this.tabindex=-1):e&&(this.tabindex=this._lastTabIndex)}_tabindexChanged(t){this.disabled&&-1!==t&&(this._lastTabIndex=t,this.tabindex=-1)}}},89389:(t,e,o)=>{o.d(e,{$:()=>b});var r=o(13256),a=o(55774),i=o(82901),n=o(90676),s=o(81488),l=o(87550);const d=o(51450).AH`
   :host {
-    font-size: var(--lumo-font-size-xxs);
-    line-height: 1;
-    color: var(--lumo-body-text-color);
-    border-radius: var(--lumo-border-radius-s);
-    background-color: var(--lumo-contrast-20pct);
+    display: inline-block;
+    position: relative;
+    outline: none;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* Aligns the button with form fields when placed on the same line.
+  Note, to make it work, the form fields should have the same "::before" pseudo-element. */
+  .vaadin-button-container::before {
+    content: '\\2003';
+    display: inline-block;
+    width: 0;
+    max-height: 100%;
+  }
+
+  .vaadin-button-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    text-shadow: inherit;
+  }
+
+  [part='prefix'],
+  [part='suffix'] {
+    flex: none;
+  }
+
+  [part='label'] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([focused]) {
+      outline-width: 2px;
+    }
+
+    :host([disabled]) {
+      outline-color: GrayText;
+    }
+  }
+`;var c=o(84467),u=o(53149),h=o(36176);const m=t=>class extends((0,c.e)((0,h.l)((0,u.y)(t)))){static get properties(){return{tabindex:{type:Number,value:0,reflectToAttribute:!0}}}get _activeKeys(){return["Enter"," "]}ready(){super.ready(),this.hasAttribute("role")||this.setAttribute("role","button")}_onKeyDown(t){super._onKeyDown(t),t.altKey||t.shiftKey||t.ctrlKey||t.metaKey||this._activeKeys.includes(t.key)&&(t.preventDefault(),this.click())}};(0,l.SF)("vaadin-button",d,{moduleId:"vaadin-button-styles"});class b extends(m((0,n.q)((0,l.cp)((0,a.w)(r.Pu))))){static get is(){return"vaadin-button"}static get template(){return r.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,i.X)(b)},93555:(t,e,o)=>{o.d(e,{x:()=>a}),o(64511),o(42068),o(9433),o(3241),o(83315);var r=o(87550);const a=r.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));
   }
 
-  :host([focused]) [part='remove-button'] {
-    color: inherit;
+  /* 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);
   }
 
-  :host([slot='overflow']) {
-    position: relative;
-    min-width: var(--lumo-size-xxs);
-    margin-inline-start: var(--lumo-space-s);
+  [part='label'] {
+    padding: calc(var(--lumo-button-size) / 6) 0;
   }
 
-  :host([slot='overflow'])::before,
-  :host([slot='overflow'])::after {
-    position: absolute;
+  :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: '';
-    width: 100%;
-    height: 100%;
-    border-left: calc(var(--lumo-space-s) / 4) solid;
-    border-radius: var(--lumo-border-radius-s);
-    border-color: var(--lumo-contrast-30pct);
+    /* 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;
   }
 
-  :host([slot='overflow'])::before {
-    left: calc(-1 * var(--lumo-space-s) / 2);
+  /* Hover */
+
+  @media (any-hover: hover) {
+    :host(:hover)::before {
+      opacity: 0.02;
+    }
   }
 
-  :host([slot='overflow'])::after {
-    left: calc(-1 * var(--lumo-space-s));
+  /* Active */
+
+  :host::after {
+    transition: opacity 1.4s, transform 0.1s;
+    filter: blur(8px);
   }
 
-  :host([count='2']) {
-    margin-inline-start: calc(var(--lumo-space-s) / 2);
+  :host([active])::before {
+    opacity: 0.05;
+    transition-duration: 0s;
   }
 
-  :host([count='2'])::after {
-    display: none;
+  :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([count='1']) {
-    margin-inline-start: 0;
+  :host([theme~='primary'][focus-ring]) {
+    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
   }
 
-  :host([count='1'])::before,
-  :host([count='1'])::after {
+  /* 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;
   }
 
-  [part='label'] {
-    font-weight: 500;
-    line-height: 1.25;
+  :host([theme~='tertiary-inline']) {
+    margin: 0;
+    height: auto;
+    padding: 0;
+    line-height: inherit;
+    font-size: inherit;
   }
 
-  [part='remove-button'] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: -0.3125em;
-    margin-bottom: -0.3125em;
-    margin-inline-start: auto;
-    width: 1.25em;
-    height: 1.25em;
-    font-size: 1.5em;
-    transition: none;
+  :host([theme~='tertiary-inline']) [part='label'] {
+    padding: 0;
+    overflow: visible;
+    line-height: inherit;
   }
 
-  [part='remove-button']::before {
-    content: var(--lumo-icons-cross);
+  :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([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
-    pointer-events: none;
+  :host([theme~='primary'])::before {
+    background-color: black;
   }
-`;(0,s.SF)("vaadin-multi-select-combo-box-chip",[i.p,l],{moduleId:"lumo-multi-select-combo-box-chip"}),o(67239);var a=o(73593),r=o(97612),n=o(51935),d=o(80704),c=o(10890),h=o(49587),u=o(22401);const p=s.AH`
+
   @media (any-hover: hover) {
-    :host(:hover[readonly]) {
-      background-color: transparent;
-      cursor: default;
+    :host([theme~='primary']:hover)::before {
+      opacity: 0.05;
     }
   }
-`;(0,s.SF)("vaadin-multi-select-combo-box-item",[n.A,a.$,p],{moduleId:"lumo-multi-select-combo-box-item"}),(0,s.SF)("vaadin-multi-select-combo-box-overlay",[u.L,h.L,r.C,c.w,r.F,s.AH`
-      :host {
-        --_vaadin-multi-select-combo-box-items-container-border-width: var(--lumo-space-xs);
-        --_vaadin-multi-select-combo-box-items-container-border-style: solid;
-      }
-    `],{moduleId:"lumo-multi-select-combo-box-overlay"}),(0,s.SF)("vaadin-multi-select-combo-box-container",s.AH`
-    :host([auto-expand-vertically]) {
-      padding-block: var(--lumo-space-xs);
-    }
-  `,{moduleId:"lumo-multi-select-combo-box-container"});const m=s.AH`
-  :host([has-value]) {
-    padding-inline-start: 0;
+
+  :host([theme~='primary'][active])::before {
+    opacity: 0.1;
   }
 
-  :host([has-value]) ::slotted(input:placeholder-shown) {
-    caret-color: var(--lumo-body-text-color) !important;
+  :host([theme~='primary'][active])::after {
+    opacity: 0.2;
   }
 
-  [part='label'] {
-    flex-shrink: 0;
+  /* Colors (success, error, contrast) */
+
+  :host([theme~='success']) {
+    color: var(--lumo-success-text-color);
   }
 
-  /* Override input-container styles */
-  ::slotted([slot='chip']),
-  ::slotted([slot='overflow']) {
-    min-height: auto;
-    padding: 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
-    color: var(--lumo-body-text-color);
-    -webkit-mask-image: none;
-    mask-image: none;
+  :host([theme~='success'][theme~='primary']) {
+    background-color: var(--lumo-success-color);
+    color: var(--lumo-success-contrast-color);
   }
 
-  :host([auto-expand-vertically]) ::slotted([slot='chip']) {
-    margin-block: calc(var(--lumo-space-xs) / 2);
+  :host([theme~='error']) {
+    color: var(--lumo-error-text-color);
   }
 
-  ::slotted([slot='chip']:not([readonly]):not([disabled])) {
-    padding-inline-end: 0;
+  :host([theme~='error'][theme~='primary']) {
+    background-color: var(--lumo-error-color);
+    color: var(--lumo-error-contrast-color);
   }
 
-  :host([auto-expand-vertically]) ::slotted([slot='input']) {
-    min-height: calc(var(--lumo-text-field-size, var(--lumo-size-m)) - 2 * var(--lumo-space-xs));
+  :host([theme~='contrast']) {
+    color: var(--lumo-contrast);
   }
 
-  ::slotted([slot='chip']:not(:last-of-type)),
-  ::slotted([slot='overflow']:not(:last-of-type)) {
-    margin-inline-end: var(--lumo-space-xs);
+  :host([theme~='contrast'][theme~='primary']) {
+    background-color: var(--lumo-contrast);
+    color: var(--lumo-base-color);
   }
 
-  ::slotted([slot='chip'][focused]) {
-    background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
-    color: var(--lumo-primary-contrast-color);
+  /* Disabled state. Keep selectors after other color variants. */
+
+  :host([disabled]) {
+    pointer-events: none;
+    color: var(--lumo-disabled-text-color);
   }
 
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-30pct);
+    color: var(--lumo-base-color);
   }
 
-  :host([readonly][has-value]) [part='toggle-button'] {
-    color: var(--lumo-contrast-60pct);
-    cursor: var(--lumo-clickable-cursor);
+  :host([theme~='primary'][disabled]) [part] {
+    opacity: 0.7;
   }
-`;(0,s.SF)("vaadin-multi-select-combo-box",[d.k,m],{moduleId:"lumo-multi-select-combo-box"});var v=o(98633),b=o(65211);class _ extends((0,s.cp)(v.Pu)){static get is(){return"vaadin-multi-select-combo-box-chip"}static get properties(){return{disabled:{type:Boolean,reflectToAttribute:!0},readonly:{type:Boolean,reflectToAttribute:!0},label:{type:String},item:{type:Object}}}static get template(){return v.qy`
-      <style>
-        :host {
-          display: inline-flex;
-          align-items: center;
-          align-self: center;
-          white-space: nowrap;
-          box-sizing: border-box;
-        }
-
-        [part='label'] {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        :host([hidden]),
-        :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
-          display: none !important;
-        }
-
-        @media (forced-colors: active) {
-          :host {
-            outline: 1px solid;
-            outline-offset: -1px;
-          }
-        }
-      </style>
-      <div part="label">[[label]]</div>
-      <div part="remove-button" on-click="_onRemoveClick"></div>
-    `}_onRemoveClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("item-removed",{detail:{item:this.item},bubbles:!0,composed:!0}))}}(0,b.X)(_);var f=o(94009);let g;(0,s.SF)("vaadin-multi-select-combo-box-container",s.AH`
-    #wrapper {
-      display: flex;
-      width: 100%;
-      min-width: 0;
-    }
 
-    :host([auto-expand-vertically]) #wrapper {
-      flex-wrap: wrap;
-    }
-  `,{moduleId:"vaadin-multi-select-combo-box-container-styles"});class y extends f.A{static get is(){return"vaadin-multi-select-combo-box-container"}static get template(){if(!g){g=super.template.cloneNode(!0);const e=g.content,t=e.querySelectorAll("slot"),o=document.createElement("div");o.setAttribute("id","wrapper"),e.insertBefore(o,t[2]),o.appendChild(t[0]),o.appendChild(t[1])}return g}static get properties(){return{autoExpandVertically:{type:Boolean,reflectToAttribute:!0}}}}(0,b.X)(y);var x=o(14495),w=o(38785);class I extends((0,x.y)((0,s.cp)((0,w.v)(v.Pu)))){static get is(){return"vaadin-multi-select-combo-box-item"}static get template(){return v.qy`
-      <style>
-        :host {
-          display: block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
-      <span part="checkmark" aria-hidden="true"></span>
-      <div part="content">
-        <slot></slot>
-      </div>
-    `}}(0,b.X)(I);var C=o(31278),A=o(10535);let S;(0,s.SF)("vaadin-multi-select-combo-box-overlay",s.AH`
-    #overlay {
-      width: var(
-        --vaadin-multi-select-combo-box-overlay-width,
-        var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
-      );
-    }
+  /* Icons */
 
-    [part='content'] {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  `,{moduleId:"vaadin-multi-select-combo-box-overlay-styles"});class E extends((0,C.p)(A.h)){static get is(){return"vaadin-multi-select-combo-box-overlay"}static get template(){if(!S){S=super.template.cloneNode(!0);const e=S.content.querySelector('[part~="overlay"]');e.removeAttribute("tabindex");const t=document.createElement("div");t.setAttribute("part","loader"),e.insertBefore(t,e.firstElementChild)}return S}}(0,b.X)(E);var B=o(56687),k=o(82642);class P extends((0,k.N)(v.Pu)){static get is(){return"vaadin-multi-select-combo-box-scroller"}static get template(){return v.qy`
-      <style>
-        :host {
-          display: block;
-          min-height: 1px;
-          overflow: auto;
-
-          /* Fixes item background from getting on top of scrollbars on Safari */
-          transform: translate3d(0, 0, 0);
-
-          /* Enable momentum scrolling on iOS */
-          -webkit-overflow-scrolling: touch;
-
-          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-          box-shadow: 0 0 0 white;
-        }
-
-        #selector {
-          border-width: var(--_vaadin-multi-select-combo-box-items-container-border-width);
-          border-style: var(--_vaadin-multi-select-combo-box-items-container-border-style);
-          border-color: var(--_vaadin-multi-select-combo-box-items-container-border-color, transparent);
-          position: relative;
-        }
-      </style>
-      <div id="selector">
-        <slot></slot>
-      </div>
-    `}ready(){super.ready(),this.setAttribute("aria-multiselectable","true")}_isItemSelected(e,t,o){return!(e instanceof B.z)&&!this.owner.readonly&&this.owner._findIndex(e,this.owner.selectedItems,o)>-1}_updateElement(e,t){super._updateElement(e,t),e.toggleAttribute("readonly",this.owner.readonly)}}(0,b.X)(P);var z=o(79372),F=o(34060);class $ extends((0,z.K)((0,F.x)((0,s.cp)(v.Pu)))){static get is(){return"vaadin-multi-select-combo-box-internal"}static get template(){return v.qy`
-      <style>
-        :host([opened]) {
-          pointer-events: auto;
-        }
-      </style>
+  [part] ::slotted(vaadin-icon) {
+    display: inline-block;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
 
-      <slot></slot>
+  /* 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;
+  }
 
-      <vaadin-multi-select-combo-box-overlay
-        id="overlay"
-        opened="[[_overlayOpened]]"
-        loading$="[[loading]]"
-        theme$="[[_theme]]"
-        position-target="[[_target]]"
-        no-vertical-overlap
-        restore-focus-node="[[inputElement]]"
-      ></vaadin-multi-select-combo-box-overlay>
-    `}static get properties(){return{filteredItems:{type:Array,notify:!0},loading:{type:Boolean,notify:!0},size:{type:Number,notify:!0},selectedItems:{type:Array,value:()=>[]},selectedItemsOnTop:{type:Boolean,value:!1},lastFilter:{type:String,notify:!0},topGroup:{type:Array,observer:"_topGroupChanged"},_target:{type:Object}}}get clearElement(){return this.querySelector('[part="clear-button"]')}get _tagNamePrefix(){return"vaadin-multi-select-combo-box"}open(){this.disabled||this.readonly&&0===this.selectedItems.length||(this.opened=!0)}ready(){super.ready(),this._target=this,this._toggleElement=this.querySelector(".toggle-button")}_setDropdownItems(e){if(this.readonly)this._dropdownItems=this.selectedItems;else if(!this.filter&&this.selectedItemsOnTop)if(e&&e.length&&this.topGroup&&this.topGroup.length){const t=e.filter((e=>-1===this._comboBox._findIndex(e,this.topGroup,this.itemIdPath)));this._dropdownItems=this.topGroup.concat(t)}else this._dropdownItems=e;else this._dropdownItems=e}_topGroupChanged(e){e&&this._setDropdownItems(this.filteredItems)}_initScroller(){const e=this.getRootNode().host;this._comboBox=e,super._initScroller(e)}_onEnter(e){if(this.opened){if(e.preventDefault(),e.stopPropagation(),this.readonly)this.close();else if(this._hasValidInputValue()){const e=this._dropdownItems[this._focusedIndex];this._commitValue(),this._focusedIndex=this._dropdownItems.indexOf(e)}}else super._onEnter(e)}_onEscape(e){if(this.readonly)return e.stopPropagation(),void(this.opened&&this.close());super._onEscape(e)}_commitValue(){this.lastFilter=this.filter,super._commitValue()}_onArrowDown(){this.readonly?this.opened||this.open():super._onArrowDown()}_onArrowUp(){this.readonly?this.opened||this.open():super._onArrowUp()}_setFocused(e){e||(this._ignoreCommitValue=!0),super._setFocused(e),e||!this.readonly||this._closeOnBlurIsPrevented||this.close()}_detectAndDispatchChange(){if(this._ignoreCommitValue)return this._ignoreCommitValue=!1,this.selectedItem=null,void(this._inputElementValue="");super._detectAndDispatchChange()}_overlaySelectedItemChanged(e){e.stopPropagation(),this.readonly||e.detail.item instanceof B.z||this.opened&&this.dispatchEvent(new CustomEvent("combo-box-item-selected",{detail:{item:e.detail.item}}))}_shouldLoadPage(e){return!this.readonly&&super._shouldLoadPage(e)}clearCache(){this.readonly||super.clearCache()}}(0,b.X)($);var V=o(86688),L=o(27150),T=o(83196),O=o(95925),q=o(15685),R=o(83798),D=o(60354),G=o(21860),H=o(19074),N=o(9685);const W=s.AH`
-  :host {
-    --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
-    --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
+  [part='prefix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
   }
 
-  #chips {
-    display: flex;
-    align-items: center;
+  [part='suffix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
   }
 
-  ::slotted(input) {
-    box-sizing: border-box;
-    flex: 1 0 var(--input-min-width);
+  /* 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);
   }
 
-  ::slotted([slot='chip']),
-  ::slotted([slot='overflow']) {
-    flex: 0 1 auto;
+  :host([theme~='icon']) [part='prefix'],
+  :host([theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
   }
 
-  ::slotted([slot='chip']) {
-    overflow: hidden;
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='prefix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
   }
 
-  :host(:is([readonly], [disabled])) ::slotted(input) {
-    flex-grow: 0;
-    flex-basis: 0;
-    padding: 0;
+  :host([dir='rtl']) [part='suffix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
   }
 
-  :host([auto-expand-vertically]) #chips {
-    display: contents;
-  }
-
-  :host([auto-expand-horizontally]) [class$='container'] {
-    width: auto;
-  }
-`;(0,s.SF)("vaadin-multi-select-combo-box",[N.k,W],{moduleId:"vaadin-multi-select-combo-box-styles"});class X extends((0,T.U)((0,D.R)((0,s.cp)((0,L.q)(v.Pu))))){static get is(){return"vaadin-multi-select-combo-box"}static get template(){return v.qy`
-      <div class="vaadin-multi-select-combo-box-container">
-        <div part="label">
-          <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
-        </div>
-
-        <vaadin-multi-select-combo-box-internal
-          id="comboBox"
-          items="[[__effectiveItems]]"
-          item-id-path="[[itemIdPath]]"
-          item-label-path="[[itemLabelPath]]"
-          item-value-path="[[itemValuePath]]"
-          disabled="[[disabled]]"
-          readonly="[[readonly]]"
-          auto-open-disabled="[[autoOpenDisabled]]"
-          allow-custom-value="[[allowCustomValue]]"
-          overlay-class="[[overlayClass]]"
-          data-provider="[[dataProvider]]"
-          filter="{{filter}}"
-          last-filter="{{_lastFilter}}"
-          loading="{{loading}}"
-          size="{{size}}"
-          filtered-items="[[__effectiveFilteredItems]]"
-          selected-items="[[selectedItems]]"
-          selected-items-on-top="[[selectedItemsOnTop]]"
-          top-group="[[_topGroup]]"
-          opened="{{opened}}"
-          renderer="[[renderer]]"
-          theme$="[[_theme]]"
-          on-combo-box-item-selected="_onComboBoxItemSelected"
-          on-change="_onComboBoxChange"
-          on-custom-value-set="_onCustomValueSet"
-          on-filtered-items-changed="_onFilteredItemsChanged"
-        >
-          <vaadin-multi-select-combo-box-container
-            part="input-field"
-            auto-expand-vertically="[[autoExpandVertically]]"
-            readonly="[[readonly]]"
-            disabled="[[disabled]]"
-            invalid="[[invalid]]"
-            theme$="[[_theme]]"
-          >
-            <slot name="overflow" slot="prefix"></slot>
-            <div id="chips" part="chips" slot="prefix">
-              <slot name="chip"></slot>
-            </div>
-            <slot name="input"></slot>
-            <div
-              id="clearButton"
-              part="clear-button"
-              slot="suffix"
-              on-touchend="_onClearButtonTouchend"
-              aria-hidden="true"
-            ></div>
-            <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
-          </vaadin-multi-select-combo-box-container>
-        </vaadin-multi-select-combo-box-internal>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-
-      <slot name="tooltip"></slot>
-    `}static get properties(){return{autoExpandHorizontally:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_autoExpandHorizontallyChanged"},autoExpandVertically:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_autoExpandVerticallyChanged"},autoOpenDisabled:Boolean,clearButtonVisible:{type:Boolean,reflectToAttribute:!0,observer:"_clearButtonVisibleChanged",value:!1},items:{type:Array},itemLabelPath:{type:String,value:"label"},itemValuePath:{type:String,value:"value"},itemIdPath:{type:String},i18n:{type:Object,value:()=>({cleared:"Selection cleared",focused:"focused. Press Backspace to remove",selected:"added to selection",deselected:"removed from selection",total:"{count} items selected"})},loading:{type:Boolean,value:!1,reflectToAttribute:!0},overlayClass:{type:String},readonly:{type:Boolean,value:!1,observer:"_readonlyChanged",reflectToAttribute:!0},selectedItems:{type:Array,value:()=>[],notify:!0},opened:{type:Boolean,notify:!0,value:!1,reflectToAttribute:!0},size:{type:Number},pageSize:{type:Number,value:50,observer:"_pageSizeChanged"},dataProvider:{type:Object},allowCustomValue:{type:Boolean,value:!1},placeholder:{type:String,value:"",observer:"_placeholderChanged"},renderer:Function,filter:{type:String,value:"",notify:!0},filteredItems:Array,selectedItemsOnTop:{type:Boolean,value:!1},value:{type:String},__effectiveItems:{type:Array,computed:"__computeEffectiveItems(items, selectedItems, readonly)"},__effectiveFilteredItems:{type:Array,computed:"__computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly)"},_overflowItems:{type:Array,value:()=>[]},_focusedChipIndex:{type:Number,value:-1,observer:"_focusedChipIndexChanged"},_lastFilter:{type:String},_topGroup:{type:Array}}}static get observers(){return["_selectedItemsChanged(selectedItems, selectedItems.*)","__updateOverflowChip(_overflow, _overflowItems, disabled, readonly)","__updateTopGroup(selectedItemsOnTop, selectedItems, opened)"]}get slotStyles(){const e=this.localName;return[...super.slotStyles,`\n        ${e}[has-value] input::placeholder {\n          color: transparent !important;\n          forced-color-adjust: none;\n        }\n      `]}get clearElement(){return this.$.clearButton}get _chips(){return[...this.querySelectorAll('[slot="chip"]')]}get _hasValue(){return this.selectedItems&&this.selectedItems.length>0}ready(){super.ready(),this.addController(new G.f(this,(e=>{this._setInputElement(e),this._setFocusElement(e),this.stateTarget=e,this.ariaTarget=e}))),this.addController(new H.q(this.inputElement,this._labelController)),this._tooltipController=new R.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((e=>!e.opened)),this._inputField=this.shadowRoot.querySelector('[part="input-field"]'),this._overflowController=new O.r(this,"overflow","vaadin-multi-select-combo-box-chip",{initializer:e=>{e.addEventListener("mousedown",(e=>this._preventBlur(e))),this._overflow=e}}),this.addController(this._overflowController),this.__updateChips(),(0,q.h)(this)}checkValidity(){return!(this.required&&!this.readonly)||this._hasValue}clear(){this.__updateSelection([]),(0,V.i)(this.i18n.cleared)}clearCache(){this.$&&this.$.comboBox&&this.$.comboBox.clearCache()}requestContentUpdate(){this.$&&this.$.comboBox&&this.$.comboBox.requestContentUpdate()}_disabledChanged(e,t){super._disabledChanged(e,t),(e||t)&&this.__updateChips()}_inputElementChanged(e){super._inputElementChanged(e),e&&this.$.comboBox._setInputElement(e)}_setFocused(e){super._setFocused(e),!e&&document.hasFocus()&&(this._focusedChipIndex=-1,this.validate())}_onResize(){this.__updateChips()}_delegateAttribute(e,t){this.stateTarget&&("required"!==e?super._delegateAttribute(e,t):this._delegateAttribute("aria-required",!!t&&"true"))}_autoExpandHorizontallyChanged(e,t){(e||t)&&this.__updateChips()}_autoExpandVerticallyChanged(e,t){(e||t)&&this.__updateChips()}_clearButtonVisibleChanged(e,t){(e||t)&&this.__updateChips()}_onFilteredItemsChanged(e){const{value:t}=e.detail;(Array.isArray(t)||null==t)&&(this.filteredItems=t)}_readonlyChanged(e,t){(e||t)&&this.__updateChips(),this.dataProvider&&this.clearCache()}_pageSizeChanged(e,t){(Math.floor(e)!==e||e<=0)&&(this.pageSize=t,console.error('"pageSize" value must be an integer > 0')),this.$.comboBox.pageSize=this.pageSize}_placeholderChanged(e){const t=this.__tmpA11yPlaceholder;t!==e&&(this.__savedPlaceholder=e,t&&(this.placeholder=t))}_selectedItemsChanged(e){if(this._toggleHasValue(this._hasValue),this._hasValue){const t=this._mergeItemLabels(e);this.__tmpA11yPlaceholder=t,this.placeholder=t}else delete this.__tmpA11yPlaceholder,this.placeholder=this.__savedPlaceholder;this.__updateChips(),this.requestContentUpdate(),this.opened&&this.$.comboBox.$.overlay._updateOverlayWidth()}_getItemLabel(e){return this.$.comboBox._getItemLabel(e)}_mergeItemLabels(e){return e.map((e=>this._getItemLabel(e))).join(", ")}_findIndex(e,t,o){if(o&&e){for(let i=0;i<t.length;i++)if(t[i]&&t[i][o]===e[o])return i;return-1}return t.indexOf(e)}__clearFilter(){this.filter="",this.$.comboBox.clear()}__announceItem(e,t,o){const i=t?"selected":"deselected",s=this.i18n.total.replace("{count}",o||0);(0,V.i)(`${e} ${this.i18n[i]} ${s}`)}__removeItem(e){const t=[...this.selectedItems];t.splice(t.indexOf(e),1),this.__updateSelection(t);const o=this._getItemLabel(e);this.__announceItem(o,!1,t.length)}__selectItem(e){const t=[...this.selectedItems],o=this._findIndex(e,t,this.itemIdPath),i=this._getItemLabel(e);let s=!1;if(-1!==o){const e=this._lastFilter;if(e&&e.toLowerCase()===i.toLowerCase())return void this.__clearFilter();t.splice(o,1)}else t.push(e),s=!0;this.__updateSelection(t),this.__clearFilter(),this.__announceItem(i,s,t.length)}__updateSelection(e){this.selectedItems=e,this.validate(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}__updateTopGroup(e,t,o){e?o||(this._topGroup=[...t]):this._topGroup=[]}__createChip(e){const t=document.createElement("vaadin-multi-select-combo-box-chip");t.setAttribute("slot","chip"),t.item=e,t.disabled=this.disabled,t.readonly=this.readonly;const o=this._getItemLabel(e);return t.label=o,t.setAttribute("title",o),t.addEventListener("item-removed",(e=>this._onItemRemoved(e))),t.addEventListener("mousedown",(e=>this._preventBlur(e))),t}__getOverflowWidth(){const e=this._overflow;e.style.visibility="hidden",e.removeAttribute("hidden");const t=e.getAttribute("count");e.setAttribute("count","99");const o=getComputedStyle(e),i=e.clientWidth+parseInt(o.marginInlineStart);return e.setAttribute("count",t),e.setAttribute("hidden",""),e.style.visibility="",i}__updateChips(){if(!this._inputField||!this.inputElement)return;this._chips.forEach((e=>{e.remove()}));const e=[...this.selectedItems],t=this._inputField.$.wrapper.clientWidth,o=parseInt(getComputedStyle(this.inputElement).flexBasis);let i=t-o;e.length>1&&(i-=this.__getOverflowWidth());const s=parseInt(getComputedStyle(this).getPropertyValue("--_chip-min-width"));if(this.autoExpandHorizontally){const t=[];for(let o=e.length-1,i=null;o>=0;o--){const s=this.__createChip(e[o]);this.insertBefore(s,i),i=s,t.unshift(s)}const l=[],a=this._inputField.$.wrapper.clientWidth-this.$.chips.clientWidth;if(!this.autoExpandVertically&&a<o){for(;t.length>1;){t.pop().remove(),l.unshift(e.pop());const i=l.length>0?o+this.__getOverflowWidth():o;if(this._inputField.$.wrapper.clientWidth-this.$.chips.clientWidth>=i)break}1===t.length&&(t[0].style.maxWidth=`${Math.max(s,i)}px`)}this._overflowItems=l}else{for(let t=e.length-1,o=null;t>=0;t--){const l=this.__createChip(e[t]);if(this.insertBefore(l,o),!this.autoExpandVertically&&this.$.chips.clientWidth>i){if(null!==o){l.remove();break}l.style.maxWidth=`${Math.max(s,i)}px`}e.pop(),o=l}this._overflowItems=e}}__updateOverflowChip(e,t,o,i){if(e){const s=t.length;e.label=`${s}`,e.setAttribute("count",`${s}`),e.setAttribute("title",this._mergeItemLabels(t)),e.toggleAttribute("hidden",0===s),e.disabled=o,e.readonly=i}}_onClearButtonTouchend(e){e.preventDefault(),e.stopPropagation(),this.clear()}_onClearButtonClick(e){e.stopPropagation(),this.clear()}_onChange(e){e.stopPropagation()}_onEscape(e){this.clearButtonVisible&&this.selectedItems&&this.selectedItems.length&&(e.stopPropagation(),this.selectedItems=[])}_onKeyDown(e){super._onKeyDown(e);const t=this._chips;if(!this.readonly&&t.length>0)switch(e.key){case"Backspace":this._onBackSpace(t);break;case"ArrowLeft":this._onArrowLeft(t,e);break;case"ArrowRight":this._onArrowRight(t,e);break;default:this._focusedChipIndex=-1}}_onArrowLeft(e,t){if(0!==this.inputElement.selectionStart)return;const o=this._focusedChipIndex;let i;-1!==o&&t.preventDefault(),this.__isRTL?o===e.length-1?i=-1:o>-1&&(i=o+1):-1===o?i=e.length-1:o>0&&(i=o-1),void 0!==i&&(this._focusedChipIndex=i)}_onArrowRight(e,t){if(0!==this.inputElement.selectionStart)return;const o=this._focusedChipIndex;let i;-1!==o&&t.preventDefault(),this.__isRTL?-1===o?i=e.length-1:o>0&&(i=o-1):o===e.length-1?i=-1:o>-1&&(i=o+1),void 0!==i&&(this._focusedChipIndex=i)}_onBackSpace(e){if(0!==this.inputElement.selectionStart)return;const t=this._focusedChipIndex;-1===t?this._focusedChipIndex=e.length-1:(this.__removeItem(e[t].item),this._focusedChipIndex=-1)}_focusedChipIndexChanged(e,t){if(e>-1||t>-1){const t=this._chips;if(t.forEach(((t,o)=>{t.toggleAttribute("focused",o===e)})),e>-1){const o=t[e].item,i=this._getItemLabel(o);(0,V.i)(`${i} ${this.i18n.focused}`)}}}_onComboBoxChange(){const e=this.$.comboBox.selectedItem;e&&this.__selectItem(e)}_onComboBoxItemSelected(e){this.__selectItem(e.detail.item)}_onCustomValueSet(e){e.preventDefault(),e.stopPropagation(),this.__clearFilter(),this.dispatchEvent(new CustomEvent("custom-value-set",{detail:e.detail,composed:!0,bubbles:!0}))}_onItemRemoved(e){this.__removeItem(e.detail.item)}_preventBlur(e){e.preventDefault()}__computeEffectiveItems(e,t,o){return e&&o?t:e}__computeEffectiveFilteredItems(e,t,o,i){return!e&&i?o:t}}(0,b.X)(X)},10535:(e,t,o)=>{o.d(t,{h:()=>c});var i=o(98633),s=o(65211),l=o(38785),a=o(15685),r=o(57224),n=o(6019),d=o(31146);(0,r.SF)("vaadin-overlay",d.B,{moduleId:"vaadin-overlay-styles"});class c extends((0,n.c)((0,r.cp)((0,l.v)(i.Pu)))){static get template(){return i.qy`
-      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <div part="content" id="content">
-          <slot></slot>
-        </div>
-      </div>
-    `}static get is(){return"vaadin-overlay"}ready(){super.ready(),(0,a.h)(this)}}(0,s.X)(c)},77347:(e,t,o)=>{var i=o(22401);(0,o(57224).SF)("vaadin-overlay",i.L,{moduleId:"lumo-vaadin-overlay"}),o(10535)}}]);
+  :host([dir='rtl'][theme~='icon']) [part='prefix'],
+  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+`;(0,r.SF)("vaadin-button",a,{moduleId:"lumo-button"})},83799:(t,e,o)=>{o(93555),o(89389)}}]);
+//# sourceMappingURL=9030.js.map