@descope/web-components-ui 1.0.178 → 1.0.180

package/src/components/descope-button-selection-group/descope-button-selection-group-internal/index.js

@@ -0,0 +1,9 @@
+import {
+  componentName,
+  ButtonSelectionGroupInternalClass,
+} from './ButtonSelectionGroupInternalClass';
+import '../../descope-button';
+
+customElements.define(componentName, ButtonSelectionGroupInternalClass);
+
+export { ButtonSelectionGroupInternalClass };

package/src/components/{descope-single-select/descope-select-item/SelectItemClass.js → descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js}

@@ -4,7 +4,7 @@ import { compose } from '../../../helpers';
 import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
 import { ButtonClass } from '../../descope-button/ButtonClass';
 
-export const componentName = getComponentName('select-item');
+export const componentName = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
   componentName,
@@ -72,7 +72,7 @@ class RawSelectItem extends createBaseClass({
   }
 }
 
-export const SelectItemClass = compose(
+export const ButtonSelectionGroupItemClass = compose(
   createStyleMixin({
     mappings: {
       backgroundColor: {

package/src/components/descope-button-selection-group/descope-button-selection-group-item/index.js

@@ -0,0 +1,6 @@
+import { componentName, ButtonSelectionGroupItemClass } from './ButtonSelectionGroupItemClass';
+import '../../descope-button';
+
+customElements.define(componentName, ButtonSelectionGroupItemClass);
+
+export { ButtonSelectionGroupItemClass };

package/src/components/descope-button-selection-group/index.js

@@ -0,0 +1,6 @@
+import { componentName, ButtonSelectionGroupClass } from './ButtonSelectionGroupClass';
+import './descope-button-selection-group-internal';
+
+customElements.define(componentName, ButtonSelectionGroupClass);
+
+export { ButtonSelectionGroupClass };

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -64,6 +64,16 @@ const ComboBoxMixin = (superclass) =>
       this.#overrideOverlaySettings();
       observeChildren(this, this.#onChildrenChange.bind(this));
     }
+
+    set value(val) {
+      this.baseElement.selectedItem = this.baseElement.items.find(
+        (item) => item['data-id'] === val
+      );
+    }
+
+    get value() {
+      return this.baseElement.selectedItem?.['data-id'] || '';
+    }
   };
 
 const {
@@ -88,11 +98,6 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-// const { slotted, selected } = {
-// 	slotted: { selector: () => '::slotted(*)' },
-// 	selected: { selector: () => '::slotted([selected])' }
-// }
-
 export const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
@@ -136,6 +141,9 @@ export const ComboBoxClass = compose(
       // at this time.
       overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
       overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
+      overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
+      overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
+      overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
     },
   }),
   draggableMixin,
@@ -144,17 +152,18 @@ export const ComboBoxClass = compose(
     selector: '',
     mappings: {
       backgroundColor: { selector: 'vaadin-combo-box-scroller' },
-      cursor: { selector: 'vaadin-combo-box-item' }, // TODO: this mapping doesn't work, needs fixing.
       minHeight: { selector: 'vaadin-combo-box-overlay' },
       margin: { selector: 'vaadin-combo-box-overlay' },
+      cursor: { selector: 'vaadin-combo-box-item' },
       fontFamily: { selector: 'vaadin-combo-box-item' },
+      fontSize: { selector: 'vaadin-combo-box-item' },
     },
     forward: {
       include: false,
       attributes: ['size'],
     },
   }),
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['selectionStart'] }),
   componentNameValidationMixin,
   ComboBoxMixin
 )(

package/src/components/descope-email-field/EmailFieldClass.js

@@ -27,7 +27,7 @@ export const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin
 )(

package/src/components/descope-new-password/NewPasswordClass.js

@@ -73,7 +73,7 @@ export const NewPasswordClass = compose(
     },
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin
 )(
   createProxy({

package/src/components/descope-number-field/NumberFieldClass.js

@@ -20,7 +20,7 @@ export const NumberFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin
 )(
   createProxy({

package/src/components/descope-passcode/PasscodeClass.js

@@ -108,7 +108,7 @@ export const PasscodeClass = compose(
     },
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin
 )(

package/src/components/descope-password/PasswordClass.js

@@ -81,7 +81,7 @@ export const PasswordClass = compose(
     },
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   passwordDraggableMixin
 )(

package/src/components/descope-text-area/TextAreaClass.js

@@ -66,7 +66,7 @@ export const TextAreaClass = compose(
     },
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin
 )(
   createProxy({

package/src/components/descope-text-field/TextFieldClass.js

@@ -42,7 +42,7 @@ export const TextFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin
 )(

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

@@ -155,7 +155,7 @@ export const PhoneFieldClass = compose(
     },
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin
 )(
   createProxy({

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

@@ -33,9 +33,9 @@ class PhoneFieldInternal extends BaseInputClass {
         >
         ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
         </descope-combo-box>
-      <div class="separator"></div>
+        <div class="separator"></div>
         <descope-text-field type="tel"></descope-text-field>
-     </div>
+    </div>
     `;
 
     this.countryCodeInput = this.querySelector('descope-combo-box');
@@ -107,12 +107,14 @@ class PhoneFieldInternal extends BaseInputClass {
 
   getCountryByDialCode(countryDialCode) {
     return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-dial-code') === countryDialCode
+      (c) => c.getAttribute('data-country-code') === countryDialCode
     );
   }
 
   getCountryByCodeId(countryCode) {
-    return this.countryCodeInput.items?.find((c) => c['data-id'] === countryCode)?.['data-name'];
+    return this.countryCodeInput.items?.find(
+      (c) => c.getAttribute('data-country-code') === countryCode
+    );
   }
 
   updateCountryCodeItems(restrictCountries) {

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

@@ -6,9 +6,9 @@ export const getCountryFlag = (code) =>
 export const comboBoxItem = ({ code, dialCode, name: country }) => `
 	<div
 		style="display:flex; flex-direction: column;"
-		data-id="${code}"
+		data-id="${dialCode}"
 		data-name="${code} ${dialCode} ${country}"
-		data-dial-code="${dialCode}"
+		data-country-code="${code}"
 	>
 		<div>
 			<span>

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

@@ -100,7 +100,7 @@ export const PhoneFieldInputBoxClass = compose(
     },
   }),
   draggableMixin,
-  proxyInputMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin
 )(
   createProxy({

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

@@ -116,7 +116,7 @@ class PhoneFieldInternal extends BaseInputClass {
 
   getCountryByDialCode(countryDialCode) {
     return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-dial-code') === countryDialCode
+      (c) => c.getAttribute('data-country-code') === countryDialCode
     );
   }
 

package/src/index.cjs.js

@@ -27,5 +27,5 @@ export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone
 export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
 export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';
 export { UploadFileClass } from './components/descope-upload-file/UploadFileClass';
-export { SingleSelectClass } from './components/descope-single-select/SingleSelectClass';
-export { SelectItemClass } from './components/descope-single-select/descope-select-item/SelectItemClass';
+export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
+export { ButtonSelectionGroupItemClass } from './components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';

package/src/index.d.ts

@@ -32,6 +32,7 @@ export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone
 export { NewPasswordClass } from './components/descope-new-password';
 export { RecaptchaClass } from './components/descope-recaptcha';
 export { UploadFileClass } from './components/descope-upload-file';
+export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
 
 export type Theme = {
   globals: {

package/src/index.js

@@ -22,8 +22,8 @@ export * from './components/phone-fields/descope-phone-input-box-field';
 export * from './components/descope-new-password';
 export * from './components/descope-recaptcha';
 export * from './components/descope-upload-file';
-export * from './components/descope-single-select';
-export * from './components/descope-single-select/descope-select-item';
+export * from './components/descope-button-selection-group';
+export * from './components/descope-button-selection-group/descope-button-selection-group-item';
 
 export {
   globalsThemeToStyle,

package/src/mixins/createStyleMixin/index.js

@@ -37,6 +37,8 @@ export const createStyleMixin =
 
       #styleAttributes;
 
+      #getRootElement;
+
       // we are using this mixin also for portalMixin
       // so we should be able to inject styles to other DOM elements
       // this is why we need to support these overrides
@@ -49,16 +51,12 @@ export const createStyleMixin =
         super();
         this.#componentNameSuffix = componentNameSuffix;
         this.#themeSection = themeSection;
-        this.#rootElement = getRootElement?.(this) || this.shadowRoot;
         this.#baseSelector = baseSelector ?? this.baseSelector;
+        this.#getRootElement = getRootElement;
 
         this.#styleAttributes = Object.keys(mappings).map((key) =>
           kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
         );
-
-        this.#createMappingStyle();
-        this.#createComponentTheme();
-        this.#createOverridesStyle();
       }
 
       // eslint-disable-next-line class-methods-use-this
@@ -147,8 +145,14 @@ export const createStyleMixin =
       init() {
         super.init?.();
         if (this.shadowRoot.isConnected) {
+          this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
+
           this.#addClassName(componentName);
 
+          this.#createMappingStyle();
+          this.#createComponentTheme();
+          this.#createOverridesStyle();
+
           // this is instead attributeChangedCallback because we cannot use static methods in this case
           observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
         }

package/src/mixins/proxyInputMixin.js

@@ -34,123 +34,128 @@ const getNestedInput = (ele) => {
   return undefined;
 };
 
-const proxyInputMixin = (superclass) =>
-  class ProxyInputMixinClass extends inputValidationMixin(superclass) {
-    static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...errorAttrs];
-    }
-
-    #inputElement;
+const proxyInputMixin =
+  ({ proxyProps = [] }) =>
+  (superclass) =>
+    class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), ...errorAttrs];
+      }
 
-    #dispatchChange = createDispatchEvent.bind(this, 'change');
+      #inputElement;
 
-    constructor() {
-      super();
+      #dispatchChange = createDispatchEvent.bind(this, 'change');
 
-      this.#inputElement = super.inputElement;
-    }
+      constructor() {
+        super();
 
-    // the web-component does not loaded immediately, so we want to defer the warning
-    // and show it only if the input element was not found after the component is loaded
-    warnIfInputElementIsMissing() {
-      clearTimeout(this.inputElementTimerId);
+        this.#inputElement = super.inputElement;
+      }
 
-      this.inputElementTimerId = setTimeout(() => {
-        // eslint-disable-next-line no-console
-        !this.#inputElement && console.warn(this.localName, 'no input was found');
-      }, 0);
-    }
+      // the web-component does not loaded immediately, so we want to defer the warning
+      // and show it only if the input element was not found after the component is loaded
+      warnIfInputElementIsMissing() {
+        clearTimeout(this.inputElementTimerId);
 
-    get inputElement() {
-      if (this.#inputElement) return this.#inputElement;
+        this.inputElementTimerId = setTimeout(() => {
+          // eslint-disable-next-line no-console
+          !this.#inputElement && console.warn(this.localName, 'no input was found');
+        }, 0);
+      }
 
-      this.warnIfInputElementIsMissing();
+      get inputElement() {
+        if (this.#inputElement) return this.#inputElement;
 
-      const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
-      const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+        this.warnIfInputElementIsMissing();
 
-      this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+        const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+        const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
 
-      return this.#inputElement;
-    }
+        this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
 
-    set inputElement(ele) {
-      this.#inputElement = ele;
-    }
+        return this.#inputElement;
+      }
 
-    getValidity() {
-      return this.inputElement?.validity || {};
-    }
+      set inputElement(ele) {
+        this.#inputElement = ele;
+      }
 
-    handleInternalInputErrorMessage() {
-      if (!this.inputElement.checkValidity()) {
-        this.inputElement.setCustomValidity(this.validationMessage);
+      getValidity() {
+        return this.inputElement?.validity || {};
       }
-    }
-
-    #handleErrorMessage() {
-      this.handleInternalInputErrorMessage();
-      this.setAttribute('error-message', this.validationMessage);
-    }
-
-    init() {
-      super.init?.();
-
-      // on some cases the base element is not ready so the inputElement is empty
-      // we are deferring this section to make sure the base element is ready
-      setTimeout(() => {
-        this.inputElement?.addEventListener('input', (e) => {
-          if (!this.inputElement.checkValidity()) {
-            this.inputElement.setCustomValidity('');
-            // after updating the input validity we want to trigger set validity on the wrapping element
-            // so we will get the updated validity
-            this.setCustomValidity('');
-
-            // Vaadin is getting the input event before us,
-            // so in order to make sure they use the updated validity
-            // we calling their fn after updating the input validity
-            this.baseElement.__onInput(e);
 
-            this.#handleErrorMessage();
-          }
-        });
+      handleInternalInputErrorMessage() {
+        if (!this.inputElement.checkValidity()) {
+          this.inputElement.setCustomValidity(this.validationMessage);
+        }
+      }
 
-        this.baseElement.addEventListener('change', () => {
-          this.#dispatchChange();
-        });
+      #handleErrorMessage() {
+        this.handleInternalInputErrorMessage();
+        this.setAttribute('error-message', this.validationMessage);
+      }
 
-        this.#inputElement.addEventListener('blur', () => {
-          if (!this.checkValidity()) {
-            this.setAttribute('invalid', 'true');
+      init() {
+        super.init?.();
+
+        // on some cases the base element is not ready so the inputElement is empty
+        // we are deferring this section to make sure the base element is ready
+        setTimeout(() => {
+          this.inputElement?.addEventListener('input', (e) => {
+            if (!this.inputElement.checkValidity()) {
+              this.inputElement.setCustomValidity('');
+              // after updating the input validity we want to trigger set validity on the wrapping element
+              // so we will get the updated validity
+              this.setCustomValidity('');
+
+              // Vaadin is getting the input event before us,
+              // so in order to make sure they use the updated validity
+              // we calling their fn after updating the input validity
+              this.baseElement.__onInput(e);
+
+              this.#handleErrorMessage();
+            }
+          });
+
+          this.baseElement.addEventListener('change', () => {
+            this.#dispatchChange();
+          });
+
+          this.#inputElement.addEventListener('blur', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+              this.#handleErrorMessage();
+            }
+          });
+
+          this.addEventListener('invalid', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+            }
             this.#handleErrorMessage();
-          }
-        });
+          });
 
-        this.addEventListener('invalid', () => {
-          if (!this.checkValidity()) {
-            this.setAttribute('invalid', 'true');
-          }
-          this.#handleErrorMessage();
-        });
+          this.handleInternalInputErrorMessage();
 
-        this.handleInternalInputErrorMessage();
+          // sync properties
+          proxyProps.forEach((prop) => {
+            propertyObserver(this, this.inputElement, prop);
+          });
+
+          this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-        // sync properties
-        propertyObserver(this, this.inputElement, 'value');
-        propertyObserver(this, this.inputElement, 'selectionStart');
-        this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
-
-        forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
-      });
-    }
-  };
-
-const composedProxyInputMixin = compose(
-  proxyInputMixin,
-  // in order to use input-wrapper across all our input components, we need to inject its theme
-  // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
-  // in the proxy input component
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
-);
+          forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        });
+      }
+    };
+
+const composedProxyInputMixin = (proxyInputMixinConfig) =>
+  compose(
+    proxyInputMixin(proxyInputMixinConfig),
+    // in order to use input-wrapper across all our input components, we need to inject its theme
+    // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
+    // in the proxy input component
+    createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
+  );
 
 export { composedProxyInputMixin as proxyInputMixin };

package/src/theme/components/{single-select/singleSelect.js → buttonSelectionGroup/buttonSelectionGroup.js}

@@ -1,12 +1,12 @@
-import { SingleSelectClass } from '../../../components/descope-single-select/SingleSelectClass';
+import { ButtonSelectionGroupClass } from '../../../components/descope-button-selection-group/ButtonSelectionGroupClass';
 import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 import { refs } from '../inputWrapper';
 
 const globalRefs = getThemeRefs(globals);
-const vars = SingleSelectClass.cssVarList;
+const vars = ButtonSelectionGroupClass.cssVarList;
 
-const singleSelect = {
+const buttonSelectionGroup = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
@@ -15,5 +15,5 @@ const singleSelect = {
   [vars.hostWidth]: refs.width,
 };
 
-export default singleSelect;
+export default buttonSelectionGroup;
 export { vars };

package/src/theme/components/{single-select/selectItem.js → buttonSelectionGroup/buttonSelectionGroupItem.js}

@@ -1,12 +1,12 @@
-import { SelectItemClass } from '../../../components/descope-single-select/descope-select-item/SelectItemClass';
+import { ButtonSelectionGroupItemClass } from '../../../components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
 import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 
 const globalRefs = getThemeRefs(globals);
 
-export const vars = SelectItemClass.cssVarList;
+export const vars = ButtonSelectionGroupItemClass.cssVarList;
 
-const selectItem = {
+const buttonSelectionGroupItem = {
   [vars.backgroundColor]: globalRefs.colors.surface.light,
   [vars.labelTextColor]: globalRefs.colors.surface.contrast,
   [vars.borderColor]: globalRefs.colors.surface.main,
@@ -24,4 +24,4 @@ const selectItem = {
   },
 };
 
-export default selectItem;
+export default buttonSelectionGroupItem;

package/src/theme/components/comboBox.js

@@ -35,12 +35,14 @@ export const comboBox = {
     [vars.inputDropdownButtonCursor]: 'default',
   },
 
-  [vars.overlay.minHeight]: '400px',
-  [vars.overlay.margin]: '0 auto',
+  // Overlay theme exposed via the component:
+  [vars.overlayFontSize]: refs.fontSize,
+  [vars.overlayFontFamily]: refs.fontFamily,
+  [vars.overlayCursor]: 'pointer',
 
-  // [vars.overlayCursor]: 'pointer',
-  // [vars.overlayBackground]: globalRefs.colors.surface.light,
-  // [vars.overlayBorder]: `2px solid red`,
+  // Overlay direct theme:
+  [vars.overlay.minHeight]: '400px',
+  [vars.overlay.margin]: '0',
 };
 
 export default comboBox;

package/src/theme/components/index.js

@@ -21,8 +21,8 @@ import * as phoneInputBoxField from './phoneInputBoxField';
 import * as newPassword from './newPassword';
 import * as inputWrapper from './inputWrapper';
 import * as uploadFile from './uploadFile';
-import * as selectItem from './single-select/selectItem';
-import * as singleSelect from './single-select/singleSelect';
+import * as buttonSelectionGroupItem from './buttonSelectionGroup/buttonSelectionGroupItem';
+import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGroup';
 
 const components = {
   button,
@@ -49,8 +49,8 @@ const components = {
   newPassword,
   inputWrapper,
   uploadFile,
-  selectItem,
-  singleSelect,
+  buttonSelectionGroupItem,
+  buttonSelectionGroup,
 };
 
 const theme = Object.keys(components).reduce(

package/dist/umd/descope-single-select-descope-select-item-index-js.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[8798],{6982:(t,e,s)=>{s.r(e),s.d(e,{SelectItemClass:()=>d});var o=s(1e3),n=s(3874),r=s(2061),i=s(4567),a=s(9690);const c=(0,i.iY)("select-item");class l extends((0,n.s)({componentName:c,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n      descope-button {\n        max-width: 100%;\n      }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n        text-overflow: ellipsis;\n        display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n        max-width: 100%\n\t\t\t}\n\t\t</style>\n    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n      <slot></slot>\n    </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const d=(0,r.qC)((0,o.yk)({mappings:{backgroundColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.labelTextColor},borderColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderColor},borderStyle:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderStyle},borderRadius:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderRadius}}}),o.e4,o.Ae)(l);s(2018),customElements.define(c,d)}}]);