@descope/web-components-ui 1.0.425 → 1.0.426

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.425",
+  "version": "1.0.426",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -25,6 +25,7 @@
     "@jest/globals": "^29.7.0",
     "@playwright/test": "1.38.1",
     "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-virtual": "3.0.2",
     "@storybook/addon-actions": "^8.4.7",
     "@storybook/addon-controls": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
@@ -55,20 +56,21 @@
     "webpack": "^5.79.0",
     "webpack-cli": "^6.0.0",
     "webpack-dev-server": "^5.0.0",
-    "@rollup/plugin-virtual": "3.0.2",
     "rollup-replace-plugin": "0.0.1",
+    "test-drivers": "0.0.1",
     "webpack-replace-plugin": "0.0.1"
   },
   "bundledDependencies": [
     "common",
     "theme-globals",
+    "theme-input-wrapper",
     "descope-text",
-    "descope-avatar"
+    "descope-avatar",
+    "descope-combo-box"
   ],
   "dependencies": {
     "@vaadin/button": "24.3.4",
     "@vaadin/checkbox": "24.3.4",
-    "@vaadin/combo-box": "24.3.4",
     "@vaadin/custom-field": "24.3.4",
     "@vaadin/dialog": "24.3.4",
     "@vaadin/email-field": "24.3.4",
@@ -92,9 +94,11 @@
     "lodash.merge": "4.6.2",
     "markdown-it": "14.1.0",
     "common": "0.0.1",
-    "descope-text": "0.0.1",
     "descope-avatar": "0.0.1",
-    "theme-globals": "0.0.1"
+    "descope-combo-box": "0.0.1",
+    "descope-text": "0.0.1",
+    "theme-globals": "0.0.1",
+    "theme-input-wrapper": "0.0.1"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-date-field/descope-calendar/index.js

@@ -1,4 +1,4 @@
-import '../../descope-combo-box';
+import 'descope-combo-box';
 import '../../descope-icon';
 import '../../descope-button';
 

package/src/components/descope-security-questions-setup/SecurityQuestionsSetupClass.js

@@ -2,7 +2,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName, observeAttributes } from '../../helpers/componentHelpers';
 import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
-import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
+import { ComboBoxClass } from 'descope-combo-box/class';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 
 export const componentName = getComponentName('security-questions-setup');

package/src/components/descope-security-questions-setup/index.js

@@ -1,6 +1,6 @@
 import { componentName, SecurityQuestionsSetupClass } from './SecurityQuestionsSetupClass';
 import '../descope-text-field';
-import '../descope-combo-box';
+import 'descope-combo-box';
 
 customElements.define(componentName, SecurityQuestionsSetupClass);
 

package/src/components/mapping-fields/descope-mappings-field/index.js

@@ -5,7 +5,7 @@ import { componentName, MappingsFieldClass } from './MappingsFieldClass';
 import 'descope-text';
 import '../../descope-button';
 import '../../descope-text-field';
-import '../../descope-combo-box';
+import 'descope-combo-box';
 import './descope-mappings-field-internal';
 import './descope-mapping-item';
 

package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js

@@ -3,7 +3,7 @@ import { forwardAttrs, getComponentName } from '../../../helpers/componentHelper
 import { compose } from '../../../helpers';
 import { createProxy, createStyleMixin, draggableMixin, proxyInputMixin } from '../../../mixins';
 import { TextFieldClass } from '../../descope-text-field/TextFieldClass';
-import { ComboBoxClass } from '../../descope-combo-box/ComboBoxClass';
+import { ComboBoxClass } from 'descope-combo-box/class';
 import CountryCodes from '../CountryCodes';
 import {
   resetInputCursor,

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js

@@ -1,4 +1,4 @@
-import '../../../descope-combo-box';
+import 'descope-combo-box';
 import '../../../descope-text-field';
 
 import PhoneFieldInternal, { componentName } from './PhoneFieldInternal';

package/src/components/phone-fields/descope-phone-field/index.js

@@ -1,5 +1,5 @@
 import './descope-phone-field-internal';
-import '../../descope-combo-box';
+import 'descope-combo-box';
 import '../../descope-text-field';
 
 import { componentName, PhoneFieldClass } from './PhoneFieldClass';

package/src/components/phone-fields/descope-phone-input-box-field/index.js

@@ -1,5 +1,5 @@
 import './descope-phone-input-box-internal';
-import '../../descope-combo-box';
+import 'descope-combo-box';
 import '../../descope-text-field';
 
 import { componentName, PhoneFieldInputBoxClass } from './PhoneFieldInputBoxClass';

package/src/index.js

@@ -27,7 +27,6 @@ export * from './components/descope-upload-file';
 export * from './components/button-selection-group-fields/descope-button-selection-group';
 export * from './components/button-selection-group-fields/descope-button-multi-selection-group';
 export * from './components/descope-grid';
-export * from './components/descope-combo-box';
 export * from './components/descope-multi-select-combo-box';
 export * from './components/descope-badge';
 export * from './components/descope-modal';

package/src/theme/components/index.js

@@ -16,7 +16,7 @@ import * as link from './link';
 import * as divider from './divider';
 import * as passcode from './passcode';
 import { loaderRadial, loaderLinear } from './loader';
-import * as comboBox from './comboBox';
+import * as comboBox from 'descope-combo-box/theme';
 import * as image from './image';
 import * as phoneField from './phoneField';
 import * as phoneInputBoxField from './phoneInputBoxField';

package/dist/umd/4480.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4480],{78313:(e,t,r)=>{r.d(t,{C:()=>v,T:()=>l});var o=r(7138),n=r(14944),a=r(33177),i=r(94619);const l=(0,n.xE)("combo-box"),{host:s,inputField:d,inputElement:p,placeholder:c,toggle:u,clearButton:b,label:h,requiredIndicator:m,helperText:y,errorMessage:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,o.Zz)((0,i.RF)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[h,c,d,y,g],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...g,property:"color"},errorMessageIcon:{...g,property:"background-image"},errorMessageIconSize:{...g,property:"background-size"},errorMessageIconPadding:{...g,property:"padding-inline-start"},errorMessageIconRepeat:{...g,property:"background-repeat"},errorMessageIconPosition:{...g,property:"background-position"},inputHeight:{...d,property:"height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:[{...u,property:"cursor"},{...b,property:"cursor"}],inputDropdownButtonColor:[{...u,property:"color"},{...b,property:"color"}],inputDropdownButtonSize:[{...u,property:"font-size"},{...b,property:"font-size"}],inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},placeholderOpacity:{...c,property:"opacity"},inputVerticalAlignment:{...d,property:"align-items"},valueInputHeight:{...p,property:"height"},valueInputMarginBottom:{...p,property:"margin-bottom"},overlayBackground:{property:()=>v.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>v.cssVarList.overlay.textColor},overlayBorder:{property:()=>v.cssVarList.overlay.border},overlayFontSize:{property:()=>v.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>v.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>v.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>v.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>v.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>v.cssVarList.overlay.itemPaddingInlineEnd}}}),i.VO,(0,i.mA)({name:"overlay",selector:"",mappings:{backgroundColor:[{selector:"vaadin-combo-box-scroller"},{selector:"vaadin-combo-box-overlay::part(overlay)"}],minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"},loaderTop:{selector:"vaadin-combo-box-overlay::part(loader)",property:"top"},loaderLeft:{selector:"vaadin-combo-box-overlay::part(loader)",property:"left"},loaderRight:{selector:"vaadin-combo-box-overlay::part(loader)",property:"right"},loaderMargin:{selector:"vaadin-combo-box-overlay::part(loader)",property:"margin"},loaderWidth:{selector:"vaadin-combo-box-overlay::part(loader)",property:"width"},loaderHeight:{selector:"vaadin-combo-box-overlay::part(loader)",property:"height"},loaderBorder:{selector:"vaadin-combo-box-overlay::part(loader)",property:"border"},loaderBorderColor:{selector:"vaadin-combo-box-overlay::part(loader)",property:"border-color"},loaderBorderRadius:{selector:"vaadin-combo-box-overlay::part(loader)",property:"border-radius"},contentHeight:{selector:"vaadin-combo-box-overlay::part(content)",property:"height"},contentOpacity:{selector:"vaadin-combo-box-overlay::part(content)",property:"opacity"}},forward:{include:!1,attributes:["size"]}}),(0,i.OZ)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),i.tQ,(e=>class extends e{static get observedAttributes(){return["label-type"]}#e=({displayName:e,value:t,label:r})=>`<span data-name="${r}" data-id="${t}">${e||r}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}set renderer(e){this.baseElement.renderer=e}get loading(){return"true"===this.getAttribute("loading")}set loading(e){e?this.setAttribute("loading","true"):this.removeAttribute("loading")}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){if(this.#t||this.getAttribute("data")){const e=this.getItemsTemplate();this.innerHTML=e}}handleSelectedItem(){const{selectedItem:e}=this.baseElement,t=e?.["data-id"];e&&Array.from(this.children).includes(e)||(t&&(this.value=t),this.value||this.setDefaultValue())}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(r){if(!t.baseElement.items?.length&&!t.allowCustomValue)return;const o=t.customValueTransformFn(r)||"";o!==this.value&&e.set.call(this,o)}}})}#r(){const e=Array.from(this.children);e.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),this.baseElement.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)}#o(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}#n(){this.baseElement.renderer=(e,t,r)=>{e.innerHTML=r.item.outerHTML}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.#n(),(0,n.mx)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.Ge)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),t!==r&&"label-type"===e&&("floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}setDefaultValue(){this.defaultValue&&(this.value=this.defaultValue)}#a(e){return this.baseElement.items?.find((t=>t["data-id"]===e))}#i(e,t){e===this.value&&t!==this.baseElement.selectedItem&&this.baseElement.addEventListener("selected-item-changed",(e=>{e.stopImmediatePropagation()}),{once:!0,capture:!0})}set value(e){const t=this.#a(e);this.#i(e,t),e&&t?this.baseElement.selectedItem=t:!t&&this.allowCustomValue?this.baseElement.value=e:this.baseElement.selectedItem=void 0}get value(){return(this.baseElement.selectedItem?.["data-id"]||this.allowCustomValue)&&this.baseElement.__data.value||""}get allowCustomValue(){return"true"===this.getAttribute("allow-custom-value")}}))((0,i.tz)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,a.cy)(v.cssVarList)}\n\t\t${(0,a.fu)("vaadin-combo-box")}\n\t\t${(0,a.lS)("vaadin-combo-box")}\n\t\t${(0,a.I4)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[hide-toggle-button="true"]::part(toggle-button) {\n      display: none;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,a.$J)("vaadin-combo-box")}\n    ${(0,a.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data","loading"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},4480:(e,t,r)=>{r.r(t),r.d(t,{ComboBoxClass:()=>o.C}),r(91011);var o=r(78313);customElements.define(o.T,o.C)},33177:(e,t,r)=>{r.d(t,{$J:()=>u,I4:()=>i,Kl:()=>b,LJ:()=>c,Qv:()=>a,X6:()=>s,cy:()=>o,fu:()=>d,kG:()=>p,lS:()=>l,zm:()=>n});const o=e=>`\n    :host {\n        padding: calc(var(${e.inputOutlineWidth}) + var(${e.inputOutlineOffset}))\n    }\n`,n=e=>`\n    ${e} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,a=e=>`\n    ${e}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,i=e=>`\n    ${e} > label,\n    ${e}::part(label),\n    ${e}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,l=(e,t="input")=>`\n    ${e}[disabled] > ${t}:placeholder-shown,\n\t${e}[readonly] > ${t}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",d=e=>`\n    ${e}::part(input-field)::after {\n        opacity: 0;\n    }\n`,p=e=>`\n    ${e}::part(input-field)::after {\n        background: none;\n    }\n`,c=(e,t)=>`\n    ${n(e)}\n    ${i(e)}\n    ${l(e)}\n    ${a(e)}\n    ${((e,t)=>`\n    ${e} input:-webkit-autofill,\n    ${e} input:-webkit-autofill::first-line,\n    ${e} input:-webkit-autofill:hover,\n    ${e} input:-webkit-autofill:active,\n    ${e} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${t.inputValueTextColor});\n        box-shadow: 0 0 0 var(${t.inputHeight}) var(${t.inputBackgroundColor}) inset;\n    }\n`)(e,t)}\n    ${p(e)}\n    ${(e=>`\n    ${e}::before {\n\t\theight: unset;\n\t}\n`)(e)}\n    ${(e=>`\n    ${e} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(e)}\n    ${(e=>`\n    ${e}::part(input-field)::after {\n        border: none;\n    }\n`)(e)}\n`,u=e=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${e} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,b=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '}}]);

package/dist/umd/descope-combo-box-index-js.js

@@ -1,113 +0,0 @@
-/*! For license information please see descope-combo-box-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[7052],{91011:(t,e,o)=>{o(73593),o(97612),o(67239),o(34123);var a=o(80704),i=o(57224);const r=i.AH`
-  :host {
-    outline: none;
-  }
-
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
-  }
-`;(0,i.SF)("vaadin-combo-box",[a.k,r],{moduleId:"lumo-combo-box"}),o(94009);var n=o(98633),s=o(65211),l=o(38785),d=o(14495);class c extends((0,d.y)((0,i.cp)((0,l.v)(n.Pu)))){static get template(){return n.qy`
-      <style>
-        :host {
-          display: block;
-        }
-
-        :host([hidden]) {
-          display: none;
-        }
-      </style>
-      <span part="checkmark" aria-hidden="true"></span>
-      <div part="content">
-        <slot></slot>
-      </div>
-    `}static get is(){return"vaadin-combo-box-item"}}(0,s.X)(c);var p=o(6019),v=o(31146),u=o(31278);const b=i.AH`
-  #overlay {
-    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
-  }
-
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-`;(0,i.SF)("vaadin-combo-box-overlay",[v.B,b],{moduleId:"vaadin-combo-box-overlay-styles"});class h extends((0,u.p)((0,p.c)((0,l.v)((0,i.cp)(n.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return n.qy`
-      <div id="backdrop" part="backdrop" hidden></div>
-      <div part="overlay" id="overlay">
-        <div part="loader"></div>
-        <div part="content" id="content"><slot></slot></div>
-      </div>
-    `}}(0,s.X)(h);var m=o(82642);class g extends((0,m.N)(n.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return n.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-combo-box-items-container-border-width);
-          border-style: var(--_vaadin-combo-box-items-container-border-style);
-          border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
-          position: relative;
-        }
-      </style>
-      <div id="selector">
-        <slot></slot>
-      </div>
-    `}}(0,s.X)(g);var y=o(27150),x=o(83798),_=o(60354),f=o(21860),w=o(19074),k=o(45446);const C=t=>class extends((0,k.U)(t)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}};var S=o(9685),q=o(79372),E=o(34060);(0,i.SF)("vaadin-combo-box",S.k,{moduleId:"vaadin-combo-box-styles"});class B extends((0,q.K)((0,E.x)(C((0,_.R)((0,i.cp)((0,y.q)(n.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return n.qy`
-      <style>
-        :host([opened]) {
-          pointer-events: auto;
-        }
-      </style>
-
-      <div class="vaadin-combo-box-container">
-        <div part="label">
-          <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
-        </div>
-
-        <vaadin-input-container
-          part="input-field"
-          readonly="[[readonly]]"
-          disabled="[[disabled]]"
-          invalid="[[invalid]]"
-          theme$="[[_theme]]"
-        >
-          <slot name="prefix" slot="prefix"></slot>
-          <slot name="input"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
-        </vaadin-input-container>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-
-      <vaadin-combo-box-overlay
-        id="overlay"
-        opened="[[_overlayOpened]]"
-        loading$="[[loading]]"
-        theme$="[[_theme]]"
-        position-target="[[_positionTarget]]"
-        no-vertical-overlap
-        restore-focus-node="[[inputElement]]"
-      ></vaadin-combo-box-overlay>
-
-      <slot name="tooltip"></slot>
-    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new f.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new w.q(this.inputElement,this._labelController)),this._tooltipController=new x.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}(0,s.X)(B)}}]);