\n \n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n \n \n
\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n if (!newValue) {\n this.inputs.forEach((input) => input.removeAttribute(attr));\n } else {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n }\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t>\n \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\n ],\n },\n }),\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { PhoneFieldClass } from '../../components/phone-fields/descope-phone-field/PhoneFieldClass';\nimport { refs } from './inputWrapper';\n\nconst vars = PhoneFieldClass.cssVarList;\n\nconst phoneField = {\n [vars.hostWidth]: refs.width,\n [vars.hostDirection]: refs.direction,\n [vars.fontSize]: refs.fontSize,\n [vars.fontFamily]: refs.fontFamily,\n [vars.labelTextColor]: refs.labelTextColor,\n [vars.labelRequiredIndicator]: refs.requiredIndicator,\n [vars.errorMessageTextColor]: refs.errorMessageTextColor,\n [vars.inputValueTextColor]: refs.valueTextColor,\n [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,\n [vars.inputBorderStyle]: refs.borderStyle,\n [vars.inputBorderWidth]: refs.borderWidth,\n [vars.inputBorderColor]: refs.borderColor,\n [vars.inputBorderRadius]: refs.borderRadius,\n [vars.inputOutlineStyle]: refs.outlineStyle,\n [vars.inputOutlineWidth]: refs.outlineWidth,\n [vars.inputOutlineColor]: refs.outlineColor,\n [vars.inputOutlineOffset]: refs.outlineOffset,\n [vars.phoneInputWidth]: refs.minWidth,\n [vars.countryCodeInputWidth]: '5em',\n [vars.countryCodeDropdownWidth]: '20em',\n [vars.marginInlineStart]: '-0.25em',\n [vars.valueInputHeight]: refs.valueInputHeight,\n [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,\n\n // error message icon\n [vars.errorMessageIcon]: refs.errorMessageIcon,\n [vars.errorMessageIconSize]: refs.errorMessageIconSize,\n [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,\n [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,\n [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,\n [vars.errorMessageFontSize]: refs.errorMessageFontSize,\n\n // '@overlay': {\n // \toverlayItemBackgroundColor: 'red'\n // }\n};\n\nexport default phoneField;\nexport { vars };\n","import { forwardAttrs } from '@descope-ui/common/components-helpers';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { getComponentName } from '../../../../helpers/componentHelpers';\nimport { getCountryByCodeId, matchingParenthesis } from '../../helpers';\nimport parsePhoneNumberFromString, { AsYouType } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal-input-box');\n\nconst observedAttributes = [\n 'disabled',\n 'size',\n 'readonly',\n 'phone-input-placeholder',\n 'name',\n 'maxlength',\n 'autocomplete',\n 'label-type',\n];\nconst mapAttrs = {\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], observedAttributes);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n \n
\n `;\n\n this.textField = this.querySelector('descope-text-field');\n }\n\n // notice: this function is exposed in parent component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get defaultDialCode() {\n return getCountryByCodeId(this.getAttribute('default-code'));\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get maxLength() {\n return parseInt(this.getAttribute('maxlength'), 10) || 50;\n }\n\n get restrictCountries() {\n return this.getAttribute('restrict-countries')?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.textField.value) return '';\n\n if (!this.isStrictValidation) {\n return this.#nonParsedValue();\n }\n\n const parsedVal = this.#parseWithCountryCode();\n\n if (parsedVal?.country && parsedVal?.countryCallingCode && parsedVal?.nationalNumber) {\n return `+${[parsedVal?.countryCallingCode, parsedVal?.nationalNumber].join('-')}`;\n }\n\n // if failed to parse or to find country code return text field value\n return this.textField.value;\n }\n\n set value(val) {\n this.textField.value = val;\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // We want to ignore focus events we are dispatching\n if (e.isTrusted) this.textField.focus();\n });\n\n super.init?.();\n\n this.textField.addEventListener('input', this.#onInput.bind(this));\n this.handleFocusEventsDispatching([this.textField]);\n\n forwardAttrs(this.textField, this, { includeAttrs: ['has-value'] });\n }\n\n getValidity() {\n const validPhonePattern = /^\\+?\\d{1,4}-?(?:\\d-?){1,15}$/;\n const stripValue = this.#sanitizeVal(this.textField.value || '');\n\n if (this.isRequired && !this.textField.value) {\n return { valueMissing: true };\n }\n\n if (this.textField.value) {\n if (stripValue.length < this.minLength) {\n return { tooShort: true };\n }\n\n if (\n // has `strict-validation` and not properly parsed\n (this.isStrictValidation && this.textField.value && !this.#isValidParsedValue()) ||\n // if no `strict-validation` then conform with naive pattern\n (!this.isStrictValidation && this.textField.value && !validPhonePattern.test(this.value))\n ) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue && observedAttributes.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n #onInput(e) {\n let sanitizedInput = this.#sanitizeInput(e.target.value);\n\n if (this.isFormatValue && this.#canFormat(sanitizedInput)) {\n sanitizedInput = this.#formatPhoneNumber(sanitizedInput);\n }\n\n e.target.value = sanitizedInput;\n }\n\n #nonParsedValue() {\n if (!this.defaultDialCode) {\n return this.textField.value;\n }\n\n const nationalNumber = this.#trimDuplicateCountryCode(this.textField.value);\n const sanitizedVal = this.#sanitizeVal(nationalNumber);\n\n return [this.defaultDialCode, sanitizedVal].join('-');\n }\n\n #parseWithCountryCode() {\n if (this.defaultDialCode) {\n return parsePhoneNumberFromString(\n [this.defaultDialCode, this.#sanitizeVal(this.textField.value)].filter(Boolean).join('')\n );\n }\n\n // if default-code or not parsed - try to extract country code from value\n return parsePhoneNumberFromString(this.textField.value);\n }\n\n #sanitizeVal(val) {\n return val.replace(/\\D/g, '');\n }\n\n #trimDuplicateCountryCode(val) {\n if (this.textField.value?.[0] === '+') {\n const dialCodePrefixPattern = new RegExp(`^\\\\${this.defaultDialCode}`);\n const trimmed = val.replace(dialCodePrefixPattern, '');\n return trimmed;\n }\n return val;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n return (\n !!parsed && // parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) && // Parsed with allowed country code\n (this.defaultCode ? this.defaultCode === parsed.country : true) // In case default country code is set validate parsed country matches it\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n #sanitizeInput(val) {\n val = val\n .replace(/^-+/, '') // dash as first char\n .replace(/(?!^)\\+/g, '') // multiple plus symbols\n .replace('--', '-') // consecutive dashes\n .replace('+-', '+'); // dash following plus symbol\n\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^[+\\d-\\(\\)]+$/;\n val = val\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n }\n\n return val;\n }\n\n #formatPhoneNumber(phoneNumber = '') {\n // Get country code from `default-code or` from phone number\n const countryCode = this.defaultCode || this.#getCountryCodeFromValue(phoneNumber);\n\n // Skip formatting if no country code is available\n if (!countryCode) {\n return phoneNumber;\n }\n\n // Update AsYouType country code if needed\n if (!this.#ayt || this.#ayt.country !== countryCode) {\n this.#ayt = new AsYouType(countryCode);\n }\n\n // We need to reset AsYouType instance before setting new input\n this.#ayt.reset();\n\n // Set AsYouType input\n const formattedVal = this.#ayt.input(phoneNumber) || phoneNumber;\n\n return formattedVal;\n }\n\n #getCountryCodeFromValue(val) {\n const parsed = parsePhoneNumberFromString(val);\n return parsed?.country || '';\n }\n\n #canFormat(val) {\n if (!matchingParenthesis(val)) return false;\n return true;\n }\n}\n\nexport default PhoneFieldInternal;\n","import { componentName as descopeInternalComponentName } from './descope-phone-input-box-internal/PhoneFieldInternalInputBox';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputLabelPosition,\n resetInputCursor,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n inputFloatingLabelStyle,\n} from '../../../helpers/themeHelpers/resetHelpers';\nimport { syncAttrs } from '@descope-ui/common/components-helpers';\n\nconst textVars = TextFieldClass.cssVarList;\n\nexport const componentName = getComponentName('phone-input-box-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldInputBoxMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t>\n `;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n syncAttrs(this, this.inputElement, { includeAttrs: ['has-value'] });\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'disabled',\n 'phone-input-placeholder',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'restrict-countries',\n 'format-value',\n 'strict-validation',\n 'data-errormessage-type-mismatch',\n ],\n });\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n };\n\nconst {\n host,\n label,\n inputElement,\n requiredIndicator,\n inputField,\n internalComponent,\n internalComponentAfter,\n phoneInput,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n placeholder: { selector: '> input:placeholder-shown' },\n inputElement: { selector: 'input' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: () => 'vaadin-text-field::part(input-field)' },\n internalComponent: {\n selector: 'descope-phone-field-internal-input-box',\n },\n internalComponentAfter: {\n selector: 'descope-phone-field-internal-input-box::after',\n },\n phoneInput: { selector: () => 'descope-text-field' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldInputBoxClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [label, errorMessage, helperText],\n hostWidth: { ...host, property: 'width' },\n hostMinWidth: { ...host, property: 'min-width' },\n hostDirection: { ...host, property: 'direction' },\n\n inputHorizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n ],\n\n labelFontSize: { ...label, property: 'font-size' },\n labelFontWeight: { ...label, property: 'font-weight' },\n labelTextColor: [\n { ...label, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n inputBorderStyle: { ...internalComponentAfter, property: 'border-style' },\n inputBorderWidth: { ...internalComponentAfter, property: 'border-width' },\n inputBorderColor: { ...internalComponentAfter, property: 'border-color' },\n inputBorderRadius: [\n { ...internalComponent, property: 'border-radius' },\n { ...internalComponentAfter, property: 'border-radius' },\n ],\n\n inputOutlineStyle: { ...internalComponent, property: 'outline-style' },\n inputOutlineColor: { ...internalComponent, property: 'outline-color' },\n inputOutlineWidth: { ...internalComponent, property: 'outline-width' },\n inputOutlineOffset: { ...internalComponent, property: 'outline-offset' },\n\n labelPosition: { ...label, property: 'position' },\n labelTopPosition: { ...label, property: 'top' },\n labelHorizontalPosition: [\n { ...label, property: 'left' },\n { ...label, property: 'right' },\n ],\n inputTransformY: { ...label, property: 'transform' },\n inputTransition: { ...label, property: 'transition' },\n marginInlineStart: { ...label, property: 'margin-inline-start' },\n valueInputHeight: { ...inputElement, property: 'height' },\n valueInputMarginBottom: {\n selector: TextFieldClass.componentName,\n property: textVars.valueInputMarginBottom,\n },\n },\n }),\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n :host {\n display: inline-flex;\n max-width: 100%;\n box-sizing: border-box;\n }\n ${useHostExternalPadding(PhoneFieldInputBoxClass.cssVarList)}\n ${resetInputCursor('vaadin-text-field')}\n ${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n ${resetInputFieldDefaultWidth()}\n\n vaadin-text-field {\n width: 100%;\n box-sizing: border-box;\n padding: 0;\n }\n vaadin-text-field[focus-ring]::part(input-field) {\n box-shadow: none;\n }\n vaadin-text-field::before {\n height: 0;\n }\n vaadin-text-field::part(input-field) {\n padding: 0;\n background: transparent;\n -webkit-mask-image: none;\n }\n descope-phone-field-internal-input-box {\n -webkit-mask-image: none;\n padding: 0;\n width: 100%;\n }\n descope-phone-field-internal-input-box > div {\n width: 100%;\n }\n descope-phone-field-internal-input-box descope-text-field {\n ${textVars.inputOutlineWidth}: 0;\n ${textVars.inputOutlineOffset}: 0;\n }\n descope-phone-field-internal-input-box::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n pointer-events: none;\n }\n descope-text-field {\n flex-grow: 1;\n width: 100%;\n direction: ltr;\n }\n vaadin-text-field[readonly] > input:placeholder-shown {\n opacity: 1;\n }\n vaadin-text-field::part(input-field)::after {\n border: none;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] input:placeholder-shown {\n opacity: 0;\n }\n\n ${resetInputLabelPosition('vaadin-text-field')}\n ${inputFloatingLabelStyle()}\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n\nexport default PhoneFieldInputBoxClass;\n","import { PhoneFieldInputBoxClass } from '../../components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';\nimport { refs } from './inputWrapper';\n\nconst vars = PhoneFieldInputBoxClass.cssVarList;\n\nconst phoneInputBoxField = {\n [vars.hostWidth]: '16em',\n [vars.hostMinWidth]: refs.minWidth,\n [vars.hostDirection]: refs.direction,\n [vars.fontSize]: refs.fontSize,\n [vars.fontFamily]: refs.fontFamily,\n [vars.labelFontSize]: refs.labelFontSize,\n [vars.labelFontWeight]: refs.labelFontWeight,\n [vars.labelTextColor]: refs.labelTextColor,\n [vars.labelRequiredIndicator]: refs.requiredIndicator,\n [vars.errorMessageTextColor]: refs.errorMessageTextColor,\n [vars.inputValueTextColor]: refs.valueTextColor,\n [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,\n [vars.inputBorderStyle]: refs.borderStyle,\n [vars.inputBorderWidth]: refs.borderWidth,\n [vars.inputBorderColor]: refs.borderColor,\n [vars.inputBorderRadius]: refs.borderRadius,\n [vars.inputOutlineStyle]: refs.outlineStyle,\n [vars.inputOutlineWidth]: refs.outlineWidth,\n [vars.inputOutlineColor]: refs.outlineColor,\n [vars.inputOutlineOffset]: refs.outlineOffset,\n [vars.labelPosition]: refs.labelPosition,\n [vars.labelTopPosition]: refs.labelTopPosition,\n [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,\n [vars.inputTransformY]: refs.inputTransformY,\n [vars.inputTransition]: refs.inputTransition,\n [vars.marginInlineStart]: refs.marginInlineStart,\n [vars.valueInputHeight]: refs.valueInputHeight,\n [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,\n [vars.inputHorizontalPadding]: '0',\n\n // error message icon\n [vars.errorMessageIcon]: refs.errorMessageIcon,\n [vars.errorMessageIconSize]: refs.errorMessageIconSize,\n [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,\n [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,\n [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,\n [vars.errorMessageFontSize]: refs.errorMessageFontSize,\n\n _fullWidth: {\n [vars.hostWidth]: refs.width,\n },\n};\n\nexport default phoneInputBoxField;\nexport { vars };\n","import { getComponentName } from '../../../helpers/componentHelpers';\n\nexport const componentName = getComponentName('new-password-internal');\n","export const interpolateString = (template, values) =>\n template.replace(/{{(\\w+)+}}/g, (match, key) => values?.[key] || match);\n","// eslint-disable-next-line max-classes-per-file\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { interpolateString } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('policy-validation');\n\nconst overrideAttrs = [\n 'data-password-policy-value-minlength',\n 'data-password-policy-value-passwordstrength',\n 'data-password-policy-actual-passwordstrength',\n];\nconst dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];\nconst policyAttrs = ['label', 'value', ...dataAttrs];\n\nclass RawPolicyValidation extends createBaseClass({ componentName, baseSelector: ':host > div' }) {\n #availablePolicies;\n\n #activePolicies = [];\n\n #overrides;\n\n static get observedAttributes() {\n return policyAttrs;\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n \n
\n\t\t`;\n\n injectStyle(\n `\n :host > div {\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n }\n .label {\n max-width: 100%;\n text-wrap: wrap;\n overflow-wrap: break-word;\n }\n .hide-label .label {\n display: none;\n }\n ul {\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n }\n ul, li {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n li::before {\n display: inline-block;\n width: 1em;\n text-align: center;\n }\n `,\n this\n );\n\n this.panel = this.shadowRoot.querySelector(':host > div');\n this.label = this.shadowRoot.querySelector('.label');\n this.list = this.shadowRoot.querySelector('ul');\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n if (oldValue !== newValue) {\n if (attrName === 'label') {\n this.updateLabel(newValue);\n }\n\n // we're don't know the order in which the attributes are forwarded, so we're trying to render every time\n // once `data` and `active-policies` are populated, the render will be executed.\n // once the `overrides` object is updated, we want to re-render the panel.\n if (dataAttrs.includes(attrName)) {\n if (attrName === 'data') {\n try {\n this.availablePolicies = JSON.parse(newValue);\n } catch {\n // eslint-disable-next-line no-console\n console.error('Failed to set available policies');\n }\n }\n if (attrName === 'active-policies') {\n this.#activePolicies = (newValue || '').split(',');\n }\n\n if (attrName === 'data-password-policy-value-minlength') {\n const ln = Number(newValue);\n if (!Number.isNaN(ln) && ln > 0) {\n this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };\n }\n }\n\n if (attrName === 'data-password-policy-value-passwordstrength') {\n const passwordStrength = parseInt(newValue);\n if (!Number.isNaN(passwordStrength) && passwordStrength >= 0) {\n this.#overrides = {\n ...this.#overrides,\n passwordstrength: {\n ...this.#overrides?.passwordstrength,\n expected: passwordStrength,\n },\n };\n }\n }\n\n if (attrName === 'data-password-policy-actual-passwordstrength') {\n const ln = Number(newValue);\n if (!Number.isNaN(ln) && ln >= 0) {\n this.#overrides = {\n ...this.#overrides,\n passwordstrength: { ...this.#overrides?.passwordstrength, actual: ln },\n };\n }\n }\n }\n\n this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);\n }\n }\n\n get availablePolicies() {\n return this.#availablePolicies || [];\n }\n\n set availablePolicies(val) {\n this.#availablePolicies = val;\n }\n\n get value() {\n return this.getAttribute('value') || '';\n }\n\n getStrengthScore() {\n return this.value.length;\n }\n\n compareValues(comparison, expected, actual) {\n switch (comparison.toUpperCase()) {\n case 'GTE': // Greater than or equal to\n return actual >= expected;\n case 'GT': // Greater than\n return actual > expected;\n case 'LTE': // Less than or equal to\n return actual <= expected;\n case 'LT': // Less than\n return actual < expected;\n case 'EQ': // Equal to\n return actual === expected;\n case 'NEQ': // Not equal to\n return actual !== expected;\n default:\n throw new Error(`Invalid comparison type: ${comparison}`);\n }\n }\n\n validate() {\n let policies = this.#availablePolicies;\n\n if (this.#overrides) {\n policies = this.#availablePolicies.map((policy) => {\n const data = this.#overrides[policy.id];\n\n if (!data) return policy;\n\n const res = { ...policy, data };\n\n return res;\n });\n }\n\n return this.#activePolicies.reduce((results, id) => {\n const policy = policies.find((p) => p.id === id);\n\n if (!policy) {\n return results;\n }\n\n const { pattern, message, data, compare } = policy;\n\n if ((!pattern && !compare) || !message) {\n return results;\n }\n\n const validationResult = {\n message: interpolateString(message, data),\n id,\n };\n\n if (pattern) {\n const exp = new RegExp(interpolateString(pattern, data));\n validationResult.valid = exp.test(this.value);\n } else if (compare) {\n validationResult.valid = this.compareValues(\n compare,\n data?.expected ?? -1,\n data?.actual ?? -1\n );\n }\n\n results.push(validationResult);\n\n return results;\n }, []);\n }\n\n get isValid() {\n return !this.validate().some(({ valid }) => valid === false);\n }\n\n getValidationItemTemplate({ valid, message }) {\n const status = !this.value ? 'none' : valid;\n return `\n \n
\n\t\t`;\n\n injectStyle(\n `\n :host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n `,\n this\n );\n\n this.wrapperEle = this.shadowRoot.querySelector('.wrapper');\n this.inputElement = this.shadowRoot.querySelector('input');\n\n this.button.onclick = () => this.inputElement.click();\n\n this.inputElement.onchange = async (e) => {\n const receivedFileList = e.target.files;\n\n if (!receivedFileList.length) {\n return;\n }\n\n this.value = await getFileBase64(receivedFileList[0]);\n\n this.updateDescription(getFilename(receivedFileList[0]));\n };\n\n this.oninvalid = () => {\n this.setAttribute('invalid', 'true');\n };\n }\n\n // this is a temp solution,\n // we should show the input error message like we have in all other inputs\n /*\n reportValidity() {\n this.defaultReportValidity();\n }\n */\n\n getValidity() {\n if (this.isRequired && !this.input.value) {\n return { valueMissing: true };\n }\n this.removeAttribute('invalid');\n return {};\n }\n\n initInputs() {\n const button = this.rootElement.querySelector('descope-button');\n button.onclick = () => this.inputElement.click();\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'title') {\n this.updateTitle(newValue);\n } else if (attrName === 'description') {\n this.updateDescription(newValue);\n } else if (attrName === 'button-label') {\n this.updateButtonLabel(newValue);\n } else if (attrName === 'button-mode') {\n this.updateButtonMode(newValue);\n } else if (attrName === 'button-variant') {\n this.updateButtonVariant(newValue);\n } else if (attrName === 'size') {\n this.updateButtonSize(newValue);\n } else if (attrName === 'accept') {\n this.updateInputAccept(newValue);\n } else if (attrName === 'readonly') {\n this.updateReadOnly(newValue);\n }\n }\n }\n\n get button() {\n return this.shadowRoot.querySelector('descope-button');\n }\n\n get input() {\n return this.shadowRoot.querySelector('input');\n }\n\n get title() {\n return this.shadowRoot.querySelector('.title-text');\n }\n\n get description() {\n return this.shadowRoot.querySelector('.description');\n }\n\n get icon() {\n return this.shadowRoot.querySelector('.icon');\n }\n\n updateTitle(val) {\n this.title.textContent = val;\n }\n\n updateDescription(val) {\n this.description.textContent = val;\n }\n\n updateButtonLabel(val) {\n this.button.textContent = val;\n }\n\n updateButtonSize(val) {\n this.button.setAttribute('size', val);\n }\n\n updateButtonMode(val) {\n this.button.setAttribute('mode', val);\n }\n\n updateButtonVariant(val) {\n this.button.setAttribute('variant', val);\n }\n\n updateInputAccept(val) {\n this.input.setAttribute('accept', val);\n }\n\n updateReadOnly(val) {\n if (val === 'true') {\n this.input.setAttribute('disabled', 'true');\n } else {\n this.input.removeAttribute('disabled');\n }\n }\n}\n\nconst buttonVars = ButtonClass.cssVarList;\nconst { host, wrapper, icon, title, description, requiredIndicator } = {\n host: { selector: () => ':host' },\n wrapper: { selector: () => ':host > div' },\n icon: { selector: () => '::slotted(*)' },\n title: { selector: () => '.title' },\n description: { selector: () => '.description' },\n requiredIndicator: { selector: () => '.title::after' },\n};\n\nexport const UploadFileClass = compose(\n createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n createStyleMixin({\n mappings: {\n fontSize: {},\n fontFamily: {},\n borderColor: {},\n borderWidth: {},\n borderStyle: {},\n borderRadius: {},\n hostHeight: { ...host, property: 'height' },\n hostWidth: { ...host, property: 'width' },\n hostPadding: { property: 'padding' },\n hostDirection: [\n { ...host, property: 'direction' },\n { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },\n ],\n gap: { ...wrapper },\n lineHeight: { ...wrapper, property: 'line-height' },\n titleFontSize: { ...title, property: 'font-size' },\n titleFontWeight: { ...title, property: 'font-weight' },\n descriptionFontSize: { ...description, property: 'font-size' },\n labelTextColor: [\n { ...title, property: 'color' },\n { ...description, property: 'color' },\n ],\n iconSize: { ...icon, property: 'width' },\n requiredIndicator: { ...requiredIndicator, property: 'content' },\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawUploadFile);\n","import { UploadFileClass } from '../../components/descope-upload-file/UploadFileClass';\nimport { refs } from './inputWrapper';\n\nconst vars = UploadFileClass.cssVarList;\n\nconst uploadFile = {\n [vars.hostDirection]: refs.direction,\n [vars.labelTextColor]: refs.labelTextColor,\n [vars.fontFamily]: refs.fontFamily,\n\n [vars.iconSize]: '2em',\n\n [vars.hostPadding]: '0.75em',\n [vars.gap]: '0.5em',\n\n [vars.fontSize]: '16px',\n [vars.titleFontWeight]: '500',\n [vars.lineHeight]: '1em',\n\n [vars.borderWidth]: refs.borderWidth,\n [vars.borderColor]: refs.borderColor,\n [vars.borderRadius]: refs.borderRadius,\n [vars.borderStyle]: 'dashed',\n\n _required: {\n [vars.requiredIndicator]: refs.requiredIndicator,\n },\n\n size: {\n xs: {\n [vars.hostHeight]: '196px',\n [vars.hostWidth]: '200px',\n [vars.titleFontSize]: '0.875em',\n [vars.descriptionFontSize]: '0.875em',\n [vars.lineHeight]: '1.25em',\n },\n sm: {\n [vars.hostHeight]: '216px',\n [vars.hostWidth]: '230px',\n [vars.titleFontSize]: '1em',\n [vars.descriptionFontSize]: '0.875em',\n [vars.lineHeight]: '1.25em',\n },\n md: {\n [vars.hostHeight]: '256px',\n [vars.hostWidth]: '312px',\n [vars.titleFontSize]: '1.125em',\n [vars.descriptionFontSize]: '1em',\n [vars.lineHeight]: '1.5em',\n },\n lg: {\n [vars.hostHeight]: '280px',\n [vars.hostWidth]: '336px',\n [vars.titleFontSize]: '1.125em',\n [vars.descriptionFontSize]: '1.125em',\n [vars.lineHeight]: '1.75em',\n },\n },\n\n _fullWidth: {\n [vars.hostWidth]: refs.width,\n },\n};\n\nexport default uploadFile;\nexport { vars };\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../../mixins';\nimport { createBaseClass } from '../../../baseClasses/createBaseClass';\nimport { compose } from '../../../helpers';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { ButtonClass } from '@descope-ui/descope-button/class';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('button-selection-group-item');\n\nclass RawSelectItem extends createBaseClass({\n componentName,\n baseSelector: ':host > descope-button',\n}) {\n get size() {\n return this.getAttribute('size') || 'md';\n }\n\n get variant() {\n return this.getAttribute('variant') || 'contained';\n }\n\n get value() {\n return this.getAttribute('value') || '';\n }\n\n set value(value) {\n this.setAttribute('value', value);\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t${escapeXML(text)}
`;\nconst renderJson = (value) => renderCodeSnippet(JSON.stringify(value, null, 2), 'json');\nconst renderXml = (value) => renderCodeSnippet(value, 'xml');\n\nconst defaultRowDetailsValueRenderer = (value) => {\n const valueType = getValueType(value);\n\n if (valueType === 'object') {\n return renderJson(value);\n }\n\n if (valueType === 'xml') {\n return renderXml(value);\n }\n\n if (valueType === 'array') {\n if (value.some((v) => getValueType(v) === 'object')) {\n return renderJson(value);\n }\n return renderText(value.join(',\\n'));\n }\n\n return renderText(value);\n};\n\nexport const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {\n return `\n \n ${Object.entries(item)\n .map(\n ([key, value]) =>\n `
\n `;\n};\n","import { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n componentNameValidationMixin,\n createProxy,\n createStyleMixin,\n draggableMixin,\n} from '../../mixins';\n\nimport { defaultRowDetailsRenderer, isValidDataType } from './helpers';\n\nexport const componentName = getComponentName('grid');\n\nconst GridMixin = (superclass) =>\n class GridMixinClass extends superclass {\n #columns;\n\n init() {\n super.init?.();\n this.handleColumns();\n this.forwardSelectedItemsChange();\n\n // disable the grid sort\n this.baseElement._mapSorters = () => {};\n\n // there is an issue in vaadin that on some cases when trying to render the details panel, the row is null and this fn throwing\n // so we override it to prevent the error\n const origUpdateDetailsCellHeight = this.baseElement._updateDetailsCellHeight;\n this.baseElement._updateDetailsCellHeight = (row) => {\n if (!row) return;\n origUpdateDetailsCellHeight.call(this.baseElement, row);\n };\n\n this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);\n }\n\n // this renders the details panel content\n // in order to open it, the descope-grid-item-details-column should be used\n #rowDetailsRenderer = async (cell, _col, model) => {\n // prevent details panel from being scrolled into view when clicked\n cell.addEventListener('mousedown', (e) => e.stopImmediatePropagation(), true);\n\n const template = this.getRowDetailsTemplate(model.item);\n\n // eslint-disable-next-line no-param-reassign\n cell.innerHTML = '';\n cell.append(template.content.cloneNode(true));\n };\n\n getRowDetailsTemplate(item) {\n const itemLabelsMapping = this.#columns.reduce(\n (acc, { path, header }) => (!path || !header ? acc : { ...acc, [path]: header }),\n {}\n );\n const template =\n this.rowDetailsRenderer?.(item, itemLabelsMapping) ??\n defaultRowDetailsRenderer(item, itemLabelsMapping);\n\n switch (true) {\n case template instanceof HTMLTemplateElement:\n return template;\n case typeof template === 'string':\n return Object.assign(document.createElement('template'), { innerHTML: template });\n default:\n throw new Error('rowDetailsRenderer should return a string or a template');\n }\n }\n\n forwardSelectedItemsChange() {\n this.baseElement.addEventListener('selected-items-changed', (e) => {\n this.dispatchEvent(\n new CustomEvent('selected-items-changed', {\n bubbles: true,\n composed: true,\n detail: e.detail,\n })\n );\n });\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (attrName === 'columns') {\n this.setColumnsDataFromAttr();\n }\n }\n\n handleColumns() {\n if (this.columnsAttr) {\n this.setColumnsDataFromAttr();\n } else if (this.children.length) {\n this.setColumnsFromChildren();\n }\n }\n\n setColumnsFromChildren() {\n this.#columns = Array.from(this.children).map((child) => {\n return {\n path: child.getAttribute('path'),\n header: child.getAttribute('header'),\n type: child.localName.match('^descope-grid-(\\\\w+)-column$')?.[1] || 'text',\n\n attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {\n const attrVal = child.getAttribute(attrName);\n\n if (attrVal) {\n acc[attrName] = attrVal;\n }\n\n return acc;\n }, {}),\n };\n });\n }\n\n get columnsAttr() {\n return this.getAttribute('columns');\n }\n\n setColumnsDataFromAttr() {\n try {\n const data = JSON.parse(this.columnsAttr);\n if (isValidDataType(data)) {\n this.columns = data;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('could not parse data string from attribute \"columns\" -', e.message);\n }\n }\n\n // eslint-disable-next-line class-methods-use-this\n #renderColumn = ({ path, header, type, attrs }) => {\n const colAttrs = Object.entries(attrs)\n .map(([key, value]) => `${key}=\"${value}\"`)\n .join(' ');\n\n const tagName = `descope-grid-${type}-column`;\n\n return `<${tagName} header=\"${header}\" path=\"${path}\" ${colAttrs}>`;\n };\n\n get renderColumn() {\n return this.#renderColumn;\n }\n\n set renderColumn(renderFn) {\n this.#renderColumn = renderFn;\n this.renderColumns();\n }\n\n getColumnsTemplate() {\n return this.#columns?.reduce?.(\n (acc, item) => acc + (this.renderColumn?.(item || {}) || ''),\n ''\n );\n }\n\n // there is an issue in vaadin-grid, when rowDetailsRenderer is set, it renders an empty details panel\n reassignRowDetailsRenderer() {\n this.baseElement.rowDetailsRenderer = null;\n setTimeout(() => {\n this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);\n }, 0);\n }\n\n renderColumns() {\n const template = this.getColumnsTemplate();\n if (template) {\n this.reassignRowDetailsRenderer();\n this.innerHTML = template;\n }\n }\n\n get grid() {\n return this.shadowRoot.querySelector('vaadin-grid');\n }\n\n get data() {\n return this.grid.items;\n }\n\n set data(data) {\n if (isValidDataType(data) && this.grid.items !== data) {\n this.grid.items = data;\n\n if (this.grid.selectedItems) {\n const itemsIds = new Set(\n this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)\n );\n\n const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>\n itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)\n );\n\n // we want to update the selected items only if there is a reason,\n // to prevent redundant notifications\n if (this.grid.selectedItems.length !== newSelectedItems.length) {\n this.grid.selectedItems = newSelectedItems;\n }\n }\n }\n }\n\n get columns() {\n return this.#columns;\n }\n\n set columns(data) {\n this.#columns = data;\n this.renderColumns();\n }\n\n get paths() {\n return this.columns.map((col) => col.path);\n }\n\n get uniqueColumnId() {\n return this.getAttribute('unique-column-id');\n }\n };\n\nconst {\n host,\n headerRow,\n headerRowCell,\n contentRow,\n firstRow,\n sortIndicators,\n activeSortIndicator,\n selectedRow,\n rowSeparator,\n resizeHandle,\n toggleDetailsPanelButton,\n toggleDetailsPanelButtonOpened,\n toggleDetailsPanelButtonClosed,\n detailsPanel,\n detailsPanelLabels,\n selectedRowCell,\n detailsPanelContent,\n} = {\n host: { selector: () => 'vaadin-grid' },\n headerRow: { selector: () => '::part(header-cell)' },\n headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },\n contentRow: { selector: () => '::part(cell)' },\n firstRow: { selector: () => '::part(first-header-row-cell)' },\n selectedRow: { selector: () => '::part(selected-row)' },\n selectedRowCell: { selector: () => '::part(selected-row-cell)' },\n sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },\n activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },\n rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },\n resizeHandle: { selector: () => '::part(resize-handle)' },\n toggleDetailsPanelButton: { selector: () => 'vaadin-grid vaadin-icon.toggle-details-button' },\n toggleDetailsPanelButtonOpened: {\n selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.opened',\n },\n toggleDetailsPanelButtonClosed: {\n selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.closed',\n },\n detailsPanel: { selector: () => 'vaadin-grid::part(details-cell)' },\n detailsPanelLabels: { selector: () => 'vaadin-grid .row-details__label' },\n detailsPanelContent: { selector: () => 'vaadin-grid .row-details' },\n};\n\nexport const GridClass = compose(\n createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostHeight: { selector: () => ':host', property: 'height' },\n hostMinHeight: { selector: () => ':host', property: 'min-height' },\n fontFamily: [{ ...headerRow }, { ...contentRow }],\n fontSize: [{ ...headerRow }, { ...contentRow }],\n fontWeight: { ...contentRow },\n valueTextColor: { ...contentRow, property: 'color' },\n backgroundColor: [\n { ...host, property: 'background-color' },\n { ...contentRow, property: 'background-color' },\n ],\n sortIndicatorsColor: { ...sortIndicators, property: 'color' },\n activeSortIndicator: { ...activeSortIndicator, property: 'color' },\n borderColor: { ...host, property: 'border-color' },\n borderWidth: { ...host, property: 'border-width' },\n borderStyle: { ...host, property: 'border-style' },\n borderRadius: { ...host, property: 'border-radius' },\n selectedBackgroundColor: [\n { ...selectedRow, property: 'background-color' },\n { ...selectedRowCell, property: 'background-color' },\n ],\n headerRowTextColor: { ...headerRowCell, property: 'color' },\n separatorColor: [\n { ...firstRow, property: 'border-bottom-color' },\n { ...rowSeparator, property: 'border-top-color' },\n ],\n resizeHandleColor: { ...resizeHandle, property: 'background-color' },\n hostDirection: { ...host, property: 'direction', fallback: 'ltr' },\n toggleDetailsPanelButtonSize: [\n { ...toggleDetailsPanelButton, property: 'width' },\n { ...toggleDetailsPanelButton, property: 'height' },\n ],\n toggleDetailsPanelButtonOpenedColor: { ...toggleDetailsPanelButtonOpened, property: 'color' },\n toggleDetailsPanelButtonClosedColor: { ...toggleDetailsPanelButtonClosed, property: 'color' },\n toggleDetailsPanelButtonCursor: { ...toggleDetailsPanelButton, property: 'cursor' },\n detailsPanelBackgroundColor: { ...detailsPanel, property: 'background-color' },\n detailsPanelBorderTopColor: { ...detailsPanel, property: 'border-top-color' },\n detailsPanelLabelsColor: { ...detailsPanelLabels, property: 'color' },\n detailsPanelLabelsFontSize: { ...detailsPanelLabels, property: 'font-size' },\n detailsPanelItemsGap: { ...detailsPanelContent, property: 'grid-gap' },\n detailsPanelPadding: { ...detailsPanelContent, property: 'padding' },\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n GridMixin\n)(\n createProxy({\n delegatesFocus: false,\n slots: [''],\n wrappedEleName: 'vaadin-grid',\n style: () => `\n /*css*/\n vaadin-grid {\n overflow: hidden;\n height: 100%;\n min-height: 300px;\n }\n vaadin-grid-cell-content {\n display: flex;\n }\n vaadin-grid::part(selected-row-cell) {\n background-image: none;\n box-shadow: none;\n background-color: inherit;\n }\n vaadin-grid::part(details-cell) {\n border-top-style: dashed;\n border-top-width: 1px;\n }\n vaadin-grid .row-details {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${GridClass.cssVarList.detailsPanelItemsGap}))), 1fr));\n width: 100%;\n }\n vaadin-grid .row-details__item:has(.row-details__value.code) {\n grid-column: 1 / -1;\n order: 2;\n }\n vaadin-grid .row-details__value.text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n }\n vaadin-grid .row-details__value.code {\n margin-top: 5px;\n max-height: 120px;\n overflow: scroll;\n font-size: 0.85em;\n }\n vaadin-grid vaadin-icon.toggle-details-button {\n margin: auto;\n }\n /*!css*/\n\t\t`,\n excludeAttrsSync: ['columns', 'tabindex', 'style'],\n componentName,\n })\n);\n","import globals from '../globals';\nimport { getThemeRefs } from '../../helpers/themeHelpers';\nimport { GridClass } from '../../components/descope-grid/GridClass';\nimport { refs } from './inputWrapper';\n\nconst globalRefs = getThemeRefs(globals);\nconst vars = GridClass.cssVarList;\n\nexport const grid = {\n [vars.hostWidth]: '100%',\n [vars.hostHeight]: '100%',\n [vars.hostMinHeight]: '400px',\n [vars.fontWeight]: '400',\n [vars.backgroundColor]: globalRefs.colors.surface.main,\n\n [vars.fontSize]: refs.fontSize,\n [vars.fontFamily]: refs.fontFamily,\n\n [vars.sortIndicatorsColor]: globalRefs.colors.surface.light,\n [vars.activeSortIndicator]: globalRefs.colors.surface.dark,\n [vars.resizeHandleColor]: globalRefs.colors.surface.light,\n\n [vars.borderWidth]: refs.borderWidth,\n [vars.borderStyle]: refs.borderStyle,\n [vars.borderRadius]: refs.borderRadius,\n [vars.borderColor]: 'transparent',\n\n [vars.headerRowTextColor]: globalRefs.colors.surface.dark,\n [vars.separatorColor]: globalRefs.colors.surface.light,\n\n [vars.valueTextColor]: globalRefs.colors.surface.contrast,\n [vars.selectedBackgroundColor]: globalRefs.colors.surface.highlight,\n [vars.hostDirection]: globalRefs.direction,\n\n [vars.toggleDetailsPanelButtonSize]: '1em',\n [vars.toggleDetailsPanelButtonOpenedColor]: globalRefs.colors.surface.contrast,\n [vars.toggleDetailsPanelButtonClosedColor]: globalRefs.colors.surface.light,\n [vars.toggleDetailsPanelButtonCursor]: 'pointer',\n [vars.detailsPanelBackgroundColor]: globalRefs.colors.surface.highlight,\n [vars.detailsPanelBorderTopColor]: globalRefs.colors.surface.light,\n [vars.detailsPanelLabelsColor]: globalRefs.colors.surface.dark,\n [vars.detailsPanelLabelsFontSize]: '0.8em',\n [vars.detailsPanelItemsGap]: '2em',\n [vars.detailsPanelPadding]: '12px 0',\n\n _bordered: {\n [vars.borderColor]: refs.borderColor,\n },\n};\n\nexport default grid;\nexport { vars };\n","import { compose } from '../../../helpers';\nimport { getComponentName } from '../../../helpers/componentHelpers';\nimport { createStyleMixin, createProxy } from '../../../mixins';\n\nexport const componentName = getComponentName('notification-card');\n\nconst notificationCardMixin = (superclass) =>\n class NotificationCardMixinClass extends superclass {\n close() {\n // if animation is not applied to the element, the node will not be removed\n // from the DOM. We should avoid that. So, if in any case we allow\n // customizing the animation - we should check if animation is applied\n // and if it's not applied - remove the element from the DOM and dispatch\n // `card-closed` event.\n this.baseElement.addEventListener('animationend', () => {\n this.remove();\n this.dispatchEvent(new Event('card-closed'));\n });\n\n this.setAttribute('opened', 'false');\n }\n\n constructor() {\n super();\n\n this.baseElement.innerHTML = `\n \n
`\n )\n .join('\\n')}\n${itemLabelsMapping[key] || toTitle(key)}
\n ${defaultRowDetailsValueRenderer(value)}\n \n
\n `;\n\n this.closeEle = this.shadowRoot.querySelector('[part=\"close\"]');\n }\n\n init() {\n super.init?.();\n\n this.closeEle.onclick = () => {\n this.close();\n };\n }\n };\n\nconst selectors = {\n content: () => 'vaadin-notification-card::part(content)',\n overlay: () => 'vaadin-notification-card::part(overlay)',\n};\n\nexport const NotificationCardClass = compose(\n createStyleMixin({\n mappings: {\n hostMinWidth: { selector: selectors.content, property: 'min-width' },\n fontFamily: {},\n fontSize: {},\n backgroundColor: { selector: selectors.content },\n textColor: { property: 'color' },\n boxShadow: {},\n borderWidth: { selector: selectors.content, property: 'border-width' },\n borderColor: { selector: selectors.content, property: 'border-color' },\n borderStyle: { selector: selectors.content, property: 'border-style' },\n borderRadius: [\n { selector: selectors.content, property: 'border-radius' },\n { selector: selectors.overlay, property: 'border-radius' },\n ],\n verticalPadding: [\n { selector: selectors.content, property: 'padding-top' },\n { selector: selectors.content, property: 'padding-bottom' },\n ],\n horizontalPadding: [\n { selector: selectors.content, property: 'padding-right' },\n { selector: selectors.content, property: 'padding-left' },\n ],\n },\n }),\n notificationCardMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-notification-card',\n style: () => `\n vaadin-notification-card {\n box-shadow: none;\n }\n ::part(overlay) {\n box-shadow: none;\n background: none;\n }\n\n [part=\"close\"] {\n cursor: pointer;\n display: flex;\n }\n\n [part=\"content\"] {\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n [part=\"root\"] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n `,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import globals from '../globals';\nimport { getThemeRefs } from '../../helpers/themeHelpers';\nimport { NotificationCardClass } from '../../components/descope-notification/descope-notification-card/NotificationCardClass';\n\nconst globalRefs = getThemeRefs(globals);\nconst vars = NotificationCardClass.cssVarList;\n\nconst shadowColor = '#00000020';\n\nconst notification = {\n [vars.hostMinWidth]: '415px',\n [vars.fontFamily]: globalRefs.fonts.font1.family,\n [vars.fontSize]: globalRefs.typography.body1.size,\n [vars.backgroundColor]: globalRefs.colors.surface.main,\n [vars.textColor]: globalRefs.colors.surface.contrast,\n [vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,\n [vars.verticalPadding]: '0.625em',\n [vars.horizontalPadding]: '1.5em',\n [vars.borderRadius]: globalRefs.radius.xs,\n\n _bordered: {\n [vars.borderWidth]: globalRefs.border.sm,\n [vars.borderStyle]: 'solid',\n [vars.borderColor]: 'transparent',\n },\n\n size: {\n xs: { [vars.fontSize]: '12px' },\n sm: { [vars.fontSize]: '14px' },\n md: { [vars.fontSize]: '16px' },\n lg: { [vars.fontSize]: '18px' },\n },\n\n mode: {\n primary: {\n [vars.backgroundColor]: globalRefs.colors.primary.main,\n [vars.textColor]: globalRefs.colors.primary.contrast,\n [vars.borderColor]: globalRefs.colors.primary.light,\n },\n success: {\n [vars.backgroundColor]: globalRefs.colors.success.main,\n [vars.textColor]: globalRefs.colors.success.contrast,\n [vars.borderColor]: globalRefs.colors.success.light,\n },\n error: {\n [vars.backgroundColor]: globalRefs.colors.error.main,\n [vars.textColor]: globalRefs.colors.error.contrast,\n [vars.borderColor]: globalRefs.colors.error.light,\n },\n },\n};\n\nexport default notification;\nexport { vars };\n","import { compose, compareArraysUnordered } from '../../helpers';\nimport {\n forwardAttrs,\n getComponentName,\n observeAttributes,\n observeChildren,\n} from '../../helpers/componentHelpers';\nimport {\n resetInputLabelPosition,\n resetInputCursor,\n resetInputPlaceholder,\n resetInputReadonlyStyle,\n useHostExternalPadding,\n inputFloatingLabelStyle,\n} from '../../helpers/themeHelpers/resetHelpers';\nimport {\n createStyleMixin,\n draggableMixin,\n createProxy,\n componentNameValidationMixin,\n portalMixin,\n proxyInputMixin,\n changeMixin,\n} from '../../mixins';\n\nexport const componentName = getComponentName('multi-select-combo-box');\n\nconst multiSelectComboBoxMixin = (superclass) =>\n class MultiSelectComboBoxMixinClass extends superclass {\n static get observedAttributes() {\n return ['readonly'];\n }\n\n // eslint-disable-next-line class-methods-use-this\n #renderItem = ({ displayName, value, label }) => {\n const ele = document.createElement('span');\n ele.setAttribute('data-name', label);\n ele.setAttribute('data-id', value);\n ele.textContent = displayName || label;\n\n return ele.outerHTML;\n };\n\n #data;\n\n #value = [];\n\n get defaultValues() {\n const defaultValuesAttr = this.getAttribute('default-values');\n if (defaultValuesAttr) {\n try {\n const defaultValues = JSON.parse(defaultValuesAttr);\n if (this.isValidDataType(defaultValues)) {\n return defaultValues;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('could not parse data string from attribute \"default-values\" -', e.message);\n }\n }\n return [];\n }\n\n get renderItem() {\n return this.#renderItem;\n }\n\n set renderItem(renderFn) {\n this.#renderItem = renderFn;\n this.renderItems();\n }\n\n get data() {\n if (this.#data) return this.#data;\n\n const dataAttr = this.getAttribute('data');\n\n if (dataAttr) {\n try {\n const data = JSON.parse(dataAttr);\n if (this.isValidDataType(data)) {\n return data;\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('could not parse data string from attribute \"data\" -', e.message);\n }\n }\n\n return [];\n }\n\n set data(data) {\n if (this.isValidDataType(data)) {\n this.#data = data;\n this.renderItems();\n }\n }\n\n get allowCustomValues() {\n return this.getAttribute('allow-custom-value') === 'true';\n }\n\n get minItemsSelection() {\n return parseInt(this.getAttribute('min-items-selection'), 10) || 0;\n }\n\n get maxItemsSelection() {\n return parseInt(this.getAttribute('max-items-selection'), 10) || 0;\n }\n\n // eslint-disable-next-line class-methods-use-this\n isValidDataType(data) {\n const isValid = Array.isArray(data);\n if (!isValid) {\n // eslint-disable-next-line no-console\n console.error('data and default-values must be an array, received:', data);\n }\n\n return isValid;\n }\n\n getItemsTemplate() {\n return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');\n }\n\n renderItems() {\n const template = this.getItemsTemplate();\n if (template) this.innerHTML = template;\n }\n\n updateSelectedItems() {\n // This is a list of all the selected items, including ones that may have been removed from the DOM\n const currentSelected =\n this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];\n\n // if there are selected items, we want to trigger a potential update to the value if some child elements were removed\n if (currentSelected.length > 0) {\n // setting the value checks that the selected items are still in the DOM and will not set the value if they are not\n this.value = currentSelected;\n }\n\n // otherwise, if default value is specified, set default value as selected item\n if (this.value.length === 0) {\n this.setDefaultValues();\n }\n }\n\n // eslint-disable-next-line class-methods-use-this\n customValueTransformFn(val) {\n return val;\n }\n\n // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the\n // field that it searches the value, and the finaly display value of the input.\n // We provide a custom transform function to override that behavior.\n setComboBoxDescriptor() {\n const valueDescriptor = Object.getOwnPropertyDescriptor(\n this.inputElement.constructor.prototype,\n 'value'\n );\n\n const comboBox = this;\n\n Object.defineProperties(this.inputElement, {\n value: {\n ...valueDescriptor,\n set(val) {\n const transformedValue = comboBox.customValueTransformFn(val) || '';\n\n if (transformedValue === this.value) {\n return;\n }\n\n valueDescriptor.set.call(this, transformedValue);\n },\n },\n });\n }\n\n // To prevent duplicate items for the multi select options, we dedup them based on the \"data-id\" attribute\n // eslint-disable-next-line class-methods-use-this\n #dedupItems(items) {\n return Array.from(\n new Map(items.map((item) => [item.getAttribute('data-id'), item])).values()\n );\n }\n\n // vaadin api is to set props on their combo box node,\n // in order to avoid it, we are passing the children of this component\n // to the items & renderer props, so it will be used as the combo box items\n #onChildrenChange() {\n const items = Array.from(this.children);\n const dedupItems = this.#dedupItems(items);\n\n // we want the data-name attribute to be accessible as an object attribute\n if (items.length) {\n this.removeAttribute('has-no-options');\n\n dedupItems.forEach((node) => {\n Object.defineProperty(node, 'data-name', {\n value: node.getAttribute('data-name'),\n configurable: true,\n writable: true,\n });\n Object.defineProperty(node, 'data-id', {\n value: node.getAttribute('data-id'),\n configurable: true,\n writable: true,\n });\n });\n\n this.baseElement.items = dedupItems;\n\n setTimeout(() => {\n // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden\n this.updateSelectedItems();\n }, 0);\n } else {\n this.baseElement.items = [];\n this.setAttribute('has-no-options', '');\n }\n\n // use vaadin combobox custom renderer to render options as HTML\n // and not via default renderer, which renders only the data-name's value\n // in its own HTML template\n this.baseElement.renderer = (root, combo, model) => {\n // eslint-disable-next-line no-param-reassign\n root.innerHTML = model.item.outerHTML;\n };\n }\n\n // the default vaadin behavior is to attach the overlay to the body when opened\n // we do not want that because it's difficult to style the overlay in this way\n // so we override it to open inside the shadow DOM\n #overrideOverlaySettings() {\n const overlay = this.baseElement.shadowRoot\n .querySelector('vaadin-multi-select-combo-box-internal')\n .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');\n overlay._attachOverlay = () => {\n overlay.bringToFront();\n };\n overlay._detachOverlay = () => {};\n overlay._enterModalState = () => {};\n }\n\n #handleCustomValues() {\n if (this.allowCustomValues) {\n this.baseElement.addEventListener('custom-value-set', (e) => {\n const newItemHtml = this.#renderItem({\n label: e.detail,\n displayName: e.detail,\n value: e.detail,\n });\n this.innerHTML += newItemHtml;\n // The internal filter needs to be removed, otherwise there's a bug where a new custom item\n // added can't be removed from the dropdown because of how the vaadin component is implemented\n this.baseElement._lastFilter = '';\n // The value needs to be set with a timeout because it needs to execute after\n // the custom value is added to items by the children change observer\n setTimeout(() => {\n this.value = [...this.value, e.detail];\n }, 0);\n });\n }\n }\n\n setGetValidity() {\n // eslint-disable-next-line func-names\n this.getValidity = function () {\n if (this.pattern) {\n const patternRegex = new RegExp(this.pattern);\n if (this.value.some((val) => !patternRegex.test(val)))\n return {\n patternMismatch: true,\n };\n }\n\n if (this.isRequired && !this.value.length) {\n return {\n valueMissing: true,\n };\n }\n // If the field is not required, no minimum selection can be set\n if (\n this.isRequired &&\n this.minItemsSelection &&\n this.value.length < this.minItemsSelection\n ) {\n return {\n rangeUnderflow: true,\n };\n }\n if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {\n return {\n rangeOverflow: true,\n };\n }\n return {};\n };\n\n // This is required to override the default validity check of the vaadin component\n // which is triggered when the component is checked for validity after blur\n // Without this, our minItemsSelection and maxItemsSelection constraints will not be checked\n const that = this;\n // eslint-disable-next-line func-names\n this.baseElement.checkValidity = () => {\n return that.validity.valid;\n };\n }\n\n init() {\n super.init?.();\n\n this.setGetValidity();\n\n this.#handleCustomValues();\n\n this.renderItems();\n\n observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });\n\n observeChildren(this, this.#onChildrenChange.bind(this));\n\n // Note: we need to forward the `placeholder` because the vaadin component observes it and\n // tries to override it, causing us to lose the user set placeholder.\n forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });\n\n // This is a workaround for a problem we have in Console App, where in ScreenBuilder - the inputElement is not ready when trying to\n // set the component's descriptor and override the overlay settings.\n // THIS IS A PROBLEM WITH THE CONSOLE APP THAT NEEDS TO BE RESOLVED. Until then, we use this workaround.\n setTimeout(() => {\n this.setComboBoxDescriptor();\n this.#overrideOverlaySettings();\n });\n\n this.setDefaultValues();\n\n this.baseElement.addEventListener('selected-items-changed', () => {\n this.#updateInternalValue();\n this.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n });\n }\n\n setDefaultValues() {\n const initialDefaultValues = this.defaultValues;\n if (initialDefaultValues.length > 0) {\n this.value = this.defaultValues;\n }\n }\n\n #updateInternalValue() {\n // This is done here because we don't want to return a different copy of the same array\n // every time get value is called if a new value wasn't set\n this.#value =\n this.baseElement.selectedItems?.map((elem) => elem.getAttribute('data-id')) || [];\n }\n\n // Updating the value will update the selectedItems, which will trigger an event 'selected-items-changed'\n // which we listen to in the init function to update the internal value\n set value(vals) {\n if (vals && vals.length > 0) {\n // Filters the children of the component to find the ones that match the values,\n // since it's possible that some values that are trying to set are not in the children\n const selectedChildren = this.baseElement.items?.filter((item) =>\n vals.includes(item['data-id'])\n );\n\n // If the component allows custom values, we need to add the values that are not present in the children\n if (this.allowCustomValues) {\n const existingValues =\n selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n const missingValues = vals.filter((val) => !existingValues.includes(val));\n\n if (missingValues.length) {\n const newItemsHtml = missingValues.reduce((acc, val) => {\n const newItemHtml = this.#renderItem({\n label: val,\n displayName: val,\n value: val,\n });\n return acc + newItemHtml;\n }, '');\n this.innerHTML += newItemsHtml;\n\n // The value needs to be set with a timeout because it needs to execute after\n // the custom values are added to the items by the children change observer\n setTimeout(() => {\n this.value = vals;\n }, 0);\n return;\n }\n }\n\n const newSelectedValues =\n selectedChildren?.map((child) => child.getAttribute('data-id')) || [];\n if (!compareArraysUnordered(this.#value, newSelectedValues)) {\n this.baseElement.selectedItems = selectedChildren;\n }\n } else {\n this.baseElement.selectedItems = [];\n }\n }\n\n get value() {\n return this.#value;\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (attrName === 'readonly') {\n this.onReadOnlyChange(newValue !== null && newValue === 'true');\n }\n }\n\n onReadOnlyChange(val) {\n if (val) {\n this.baseElement?.shadowRoot\n ?.querySelector('vaadin-multi-select-combo-box-internal')\n ?.setAttribute('inert', val);\n } else {\n this.baseElement?.shadowRoot\n ?.querySelector('vaadin-multi-select-combo-box-internal')\n ?.removeAttribute('inert');\n }\n }\n };\n\nconst {\n host,\n inputField,\n inputElement,\n placeholder,\n toggle,\n clearButton,\n label,\n requiredIndicator,\n helperText,\n errorMessage,\n chip,\n chipLabel,\n overflowChipFirstBorder,\n overflowChipSecondBorder,\n} = {\n host: { selector: () => ':host' },\n inputField: { selector: '::part(input-field)' },\n inputElement: { selector: 'input' },\n placeholder: { selector: '> input:placeholder-shown' },\n toggle: { selector: '::part(toggle-button)' },\n clearButton: { selector: '::part(clear-button)' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n chip: { selector: 'vaadin-multi-select-combo-box-chip' },\n chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },\n overflowChipFirstBorder: {\n selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::before\",\n },\n overflowChipSecondBorder: {\n selector: \"vaadin-multi-select-combo-box-chip[slot='overflow']::after\",\n },\n};\n\nexport const MultiSelectComboBoxClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostDirection: { ...host, property: 'direction' },\n // we apply font-size also on the host so we can set its width with em\n fontSize: [{}, host],\n chipFontSize: { ...chipLabel, property: 'font-size' },\n fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],\n labelFontSize: { ...label, property: 'font-size' },\n labelFontWeight: { ...label, property: 'font-weight' },\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n inputHeight: { ...inputField, property: 'min-height' },\n inputBackgroundColor: { ...inputField, property: 'background-color' },\n inputBorderColor: { ...inputField, property: 'border-color' },\n inputBorderWidth: { ...inputField, property: 'border-width' },\n inputBorderStyle: { ...inputField, property: 'border-style' },\n inputBorderRadius: { ...inputField, property: 'border-radius' },\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n inputValueTextColor: { ...inputField, property: 'color' },\n inputPlaceholderTextColor: { ...placeholder, property: 'color' },\n inputDropdownButtonCursor: [\n { ...toggle, property: 'cursor' },\n { ...clearButton, property: 'cursor' },\n ],\n inputDropdownButtonColor: [\n { ...toggle, property: 'color' },\n { ...clearButton, property: 'color' },\n ],\n inputDropdownButtonSize: [\n { ...toggle, property: 'font-size' },\n { ...clearButton, property: 'font-size' },\n ],\n inputDropdownButtonOffset: [\n { ...toggle, property: 'margin-right' },\n { ...toggle, property: 'margin-left' },\n ],\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n inputHorizontalPadding: [\n { ...inputElement, property: 'padding-left' },\n { ...inputElement, property: 'padding-right' },\n { ...inputField, property: 'padding-inline-start' },\n ],\n inputVerticalPadding: [\n { ...inputField, property: 'padding-top' },\n { ...inputField, property: 'padding-bottom' },\n ],\n chipTextColor: { ...chipLabel, property: 'color' },\n chipBackgroundColor: [\n { ...chip, property: 'background-color' },\n { ...overflowChipFirstBorder, property: 'border-color' },\n { ...overflowChipSecondBorder, property: 'border-color' },\n ],\n\n labelPosition: { ...label, property: 'position' },\n labelTopPosition: { ...label, property: 'top' },\n labelLeftPosition: { ...label, property: 'left' },\n labelHorizontalPosition: [\n { ...label, property: 'left' },\n { ...label, property: 'right' },\n ],\n inputTransformY: { ...label, property: 'transform' },\n inputTransition: { ...label, property: 'transition' },\n marginInlineStart: { ...label, property: 'margin-inline-start' },\n placeholderOpacity: { ...placeholder, property: 'opacity' },\n inputVerticalAlignment: { ...inputField, property: 'align-items' },\n\n // we need to use the variables from the portal mixin\n // so we need to use an arrow function on the selector\n // for that to work, because ComboBox is not available\n // at this time.\n overlayBackground: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,\n },\n overlayTextColor: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,\n },\n overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },\n overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },\n overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },\n overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },\n overlayItemBoxShadow: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,\n },\n overlayItemPaddingInlineStart: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,\n },\n overlayItemPaddingInlineEnd: {\n property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,\n },\n },\n }),\n draggableMixin,\n portalMixin({\n name: 'overlay',\n selector: 'vaadin-multi-select-combo-box-internal',\n mappings: {\n backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },\n minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },\n margin: { selector: 'vaadin-multi-select-combo-box-overlay' },\n cursor: { selector: 'vaadin-multi-select-combo-box-item' },\n fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },\n textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },\n fontSize: { selector: 'vaadin-multi-select-combo-box-item' },\n itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },\n itemPaddingInlineStart: {\n selector: 'vaadin-multi-select-combo-box-item',\n property: 'padding-inline-start',\n },\n itemPaddingInlineEnd: {\n selector: 'vaadin-multi-select-combo-box-item',\n property: 'padding-inline-end',\n },\n },\n forward: {\n include: false,\n attributes: ['size'],\n },\n }),\n proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),\n changeMixin,\n componentNameValidationMixin,\n multiSelectComboBoxMixin\n)(\n createProxy({\n slots: ['', 'prefix'],\n wrappedEleName: 'vaadin-multi-select-combo-box',\n 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${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}\n\t\t${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}\n\t\t${resetInputPlaceholder('vaadin-multi-select-combo-box')}\n\t\t${resetInputCursor('vaadin-multi-select-combo-box')}\n\n\t\tvaadin-multi-select-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-multi-select-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-multi-select-combo-box [slot=\"input\"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n align-self: center;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\tvaadin-multi-select-combo-box[readonly] [slot=\"input\"] {\n flex-grow: 1;\n flex-basis: 4em;\n\t\t}\n\n\t\t::part(input-field) {\n padding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n ${resetInputLabelPosition('vaadin-multi-select-combo-box')}\n :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {\n display: block;\n }\n\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -4px;\n right: -4px;\n border-left-width: 0;\n border-inline-start-style: solid;\n border-inline-start-width: 2px;\n }\n vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {\n left: -8px;\n right: -8px;\n }\n\n :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {\n display: none;\n }\n\n ${inputFloatingLabelStyle()}\n\n vaadin-multi-select-combo-box::part(toggle-button),\n vaadin-multi-select-combo-box::part(clear-button) {\n align-self: center;\n }\n\n vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-multi-select-combo-box[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t`,\n // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property\n // with the same name. Including it will cause Vaadin to calculate NaN size,\n // and reset items to an empty array, and opening the list box with no items\n // to display.\n // Note: we exclude `placeholder` because the vaadin component observes it and\n // tries to override it, causing us to lose the user set placeholder.\n excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],\n componentName,\n includeForwardProps: ['items', 'renderer', 'selectedItems'],\n })\n);\n","import globals from '../globals';\nimport { MultiSelectComboBoxClass } from '../../components/descope-multi-select-combo-box/MultiSelectComboBoxClass';\nimport { getThemeRefs } from '../../helpers/themeHelpers';\nimport { refs } from './inputWrapper';\n\nconst globalRefs = getThemeRefs(globals);\nconst vars = MultiSelectComboBoxClass.cssVarList;\n\nexport const multiSelectComboBox = {\n [vars.hostWidth]: refs.width,\n [vars.hostDirection]: refs.direction,\n [vars.fontSize]: refs.fontSize,\n [vars.fontFamily]: refs.fontFamily,\n [vars.labelFontSize]: refs.labelFontSize,\n [vars.labelFontWeight]: refs.labelFontWeight,\n [vars.labelTextColor]: refs.labelTextColor,\n [vars.errorMessageTextColor]: refs.errorMessageTextColor,\n [vars.inputBorderColor]: refs.borderColor,\n [vars.inputBorderWidth]: refs.borderWidth,\n [vars.inputBorderStyle]: refs.borderStyle,\n [vars.inputBorderRadius]: refs.borderRadius,\n [vars.inputOutlineColor]: refs.outlineColor,\n [vars.inputOutlineOffset]: refs.outlineOffset,\n [vars.inputOutlineWidth]: refs.outlineWidth,\n [vars.inputOutlineStyle]: refs.outlineStyle,\n [vars.labelRequiredIndicator]: refs.requiredIndicator,\n [vars.inputValueTextColor]: refs.valueTextColor,\n [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,\n [vars.inputBackgroundColor]: refs.backgroundColor,\n [vars.inputHorizontalPadding]: refs.horizontalPadding,\n [vars.inputVerticalPadding]: refs.verticalPadding,\n [vars.inputHeight]: refs.inputHeight,\n [vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,\n [vars.inputDropdownButtonCursor]: 'pointer',\n [vars.inputDropdownButtonSize]: refs.toggleButtonSize,\n [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,\n [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,\n [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,\n [vars.chipFontSize]: refs.chipFontSize,\n [vars.chipTextColor]: globalRefs.colors.surface.contrast,\n [vars.chipBackgroundColor]: globalRefs.colors.surface.light,\n [vars.labelPosition]: refs.labelPosition,\n [vars.labelTopPosition]: refs.labelTopPosition,\n [vars.labelLeftPosition]: refs.labelLeftPosition,\n [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,\n [vars.inputTransformY]: refs.inputTransformY,\n [vars.inputTransition]: refs.inputTransition,\n [vars.marginInlineStart]: refs.marginInlineStart,\n [vars.placeholderOpacity]: refs.placeholderOpacity,\n [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,\n\n // error message icon\n [vars.errorMessageIcon]: refs.errorMessageIcon,\n [vars.errorMessageIconSize]: refs.errorMessageIconSize,\n [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,\n [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,\n [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,\n [vars.errorMessageFontSize]: refs.errorMessageFontSize,\n\n labelType: {\n floating: {\n [vars.inputHorizontalPadding]: '0.25em',\n _hasValue: {\n [vars.inputHorizontalPadding]: '0.45em',\n },\n },\n },\n\n _readonly: {\n [vars.inputDropdownButtonCursor]: 'default',\n },\n\n // Overlay theme exposed via the component:\n [vars.overlayFontSize]: refs.fontSize,\n [vars.overlayFontFamily]: refs.fontFamily,\n [vars.overlayCursor]: 'pointer',\n [vars.overlayItemBoxShadow]: 'none',\n [vars.overlayBackground]: refs.backgroundColor,\n [vars.overlayTextColor]: refs.valueTextColor,\n\n // Overlay direct theme:\n [vars.overlay.minHeight]: '400px',\n [vars.overlay.margin]: '0',\n};\n\nexport default multiSelectComboBox;\nexport { vars };\n","import {\n componentNameValidationMixin,\n createStyleMixin,\n draggableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('badge');\n\nclass RawBadge extends createBaseClass({\n componentName,\n baseSelector: ':host > div',\n}) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t\n
\n \n
\n \n
\n\t\t`;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n }\n :host > div {\n width: 100%;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n `,\n this,\n );\n }\n}\n\nexport const BadgeClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: [{ selector: () => ':host', property: 'width' }],\n hostDirection: { property: 'direction' },\n\n fontFamily: {},\n fontSize: {},\n fontWeight: {},\n textTransform: {},\n verticalPadding: [\n { property: 'padding-top' },\n { property: 'padding-bottom' },\n ],\n horizontalPadding: [\n { property: 'padding-left' },\n { property: 'padding-right' },\n ],\n\n borderWidth: {},\n borderStyle: {},\n borderColor: {},\n borderRadius: {},\n\n backgroundColor: {},\n\n textColor: { property: 'color' },\n textAlign: {},\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawBadge);\n","import globals from '@descope-ui/theme-globals';\nimport { getThemeRefs } from '@descope-ui/common/theme-helpers';\nimport { BadgeClass } from './component/BadgeClass';\n\nconst globalRefs = getThemeRefs(globals);\n\nconst vars = BadgeClass.cssVarList;\n\nconst badge = {\n [vars.hostWidth]: 'fit-content',\n [vars.hostDirection]: globalRefs.direction,\n\n [vars.textAlign]: 'center',\n\n [vars.fontFamily]: globalRefs.fonts.font1.family,\n [vars.fontWeight]: '400',\n\n [vars.verticalPadding]: '0.25em',\n [vars.horizontalPadding]: '0.5em',\n\n [vars.borderWidth]: globalRefs.border.xs,\n [vars.borderRadius]: globalRefs.radius.xs,\n [vars.borderColor]: 'transparent',\n [vars.borderStyle]: 'solid',\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n\n size: {\n xs: { [vars.fontSize]: '12px' },\n sm: { [vars.fontSize]: '14px' },\n md: { [vars.fontSize]: '16px' },\n lg: { [vars.fontSize]: '18px' },\n },\n\n mode: {\n default: {\n [vars.textColor]: globalRefs.colors.surface.dark,\n _bordered: {\n [vars.borderColor]: globalRefs.colors.surface.light,\n },\n },\n primary: {\n [vars.textColor]: globalRefs.colors.primary.main,\n _bordered: {\n [vars.borderColor]: globalRefs.colors.primary.light,\n },\n },\n secondary: {\n [vars.textColor]: globalRefs.colors.secondary.main,\n _bordered: {\n [vars.borderColor]: globalRefs.colors.secondary.light,\n },\n },\n error: {\n [vars.textColor]: globalRefs.colors.error.main,\n _bordered: {\n [vars.borderColor]: globalRefs.colors.error.light,\n },\n },\n success: {\n [vars.textColor]: globalRefs.colors.success.main,\n _bordered: {\n [vars.borderColor]: globalRefs.colors.success.light,\n },\n },\n },\n};\n\nexport default badge;\nexport { vars };\n","import {\n createStyleMixin,\n draggableMixin,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n forwardAttrs,\n getComponentName,\n injectStyle,\n observeAttributes,\n} from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('avatar');\nclass RawAvatar extends createBaseClass({\n componentName,\n baseSelector: ':host > .wrapper',\n}) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n
\n\t\t`;\n\n injectStyle(`\n :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\n .editableBadge {\n border: 1px solid;\n border-radius: 100%;\n height: fit-content;\n width: 25%;\n height: 25%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5%;\n box-sizing: border-box;\n position: absolute;\n bottom: 0;\n inset-inline-end: 0;\n }\n\n vaadin-icon {\n color: currentcolor;\n }\n\n vaadin-avatar {\n width: 100%;\n height: 100%;\n margin: 0;\n border: none\n }\n\n .wrapper {\n display: inline-flex;\n position: relative;\n width: 100%;\n height: 100%;\n }\n `, this);\n\n this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');\n\n forwardAttrs(this, this.avatarComponent, {\n includeAttrs: ['display-name', 'img', 'abbr'],\n mapAttrs: { 'display-name': 'name' },\n });\n\n const editableIcon = this.shadowRoot.querySelector('.editableBadge');\n\n observeAttributes(\n this,\n () => {\n editableIcon.style.display = this.isEditable ? '' : 'none';\n },\n { includeAttrs: ['editable'] },\n );\n }\n\n get isEditable() {\n return this.getAttribute('editable') === 'true';\n }\n}\n\nconst { host, editableBadge, avatar } = {\n host: { selector: () => ':host' },\n editableBadge: { selector: '> .editableBadge' },\n avatar: { selector: 'vaadin-avatar' },\n};\n\nexport const AvatarClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: [\n { ...host, property: 'width' },\n { ...host, property: 'min-width' },\n ],\n hostHeight: { ...host, property: 'height' },\n cursor: [avatar, host],\n hostDirection: { ...host, property: 'direction' },\n avatarTextColor: { ...avatar, property: 'color' },\n avatarBackgroundColor: { ...avatar, property: 'background-color' },\n editableIconColor: { ...editableBadge, property: 'color' },\n editableBorderColor: { ...editableBadge, property: 'border-color' },\n editableBackgroundColor: {\n ...editableBadge,\n property: 'background-color',\n },\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawAvatar);\n","import globals from '@descope-ui/theme-globals';\nimport { AvatarClass } from './component/AvatarClass';\nimport { getThemeRefs } from '@descope-ui/common/theme-helpers';\n\nconst globalRefs = getThemeRefs(globals);\nconst compVars = AvatarClass.cssVarList;\n\nconst avatar = {\n [compVars.hostDirection]: globalRefs.direction,\n [compVars.editableIconColor]: globalRefs.colors.surface.dark,\n [compVars.editableBorderColor]: globalRefs.colors.surface.dark,\n [compVars.editableBackgroundColor]: globalRefs.colors.surface.main,\n [compVars.avatarTextColor]: globalRefs.colors.surface.main,\n [compVars.avatarBackgroundColor]: globalRefs.colors.surface.dark,\n\n _editable: {\n [compVars.cursor]: 'pointer',\n },\n\n size: {\n xs: {\n [compVars.hostWidth]: '30px',\n [compVars.hostHeight]: '30px',\n },\n sm: {\n [compVars.hostWidth]: '40px',\n [compVars.hostHeight]: '40px',\n },\n md: {\n [compVars.hostWidth]: '60px',\n [compVars.hostHeight]: '60px',\n },\n lg: {\n [compVars.hostWidth]: '98px',\n [compVars.hostHeight]: '98px',\n },\n },\n};\n\nexport default avatar;\n\nexport const vars = {\n ...compVars,\n};\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport {\n getComponentName,\n forwardAttrs,\n observeChildren,\n} from '../../../../helpers/componentHelpers';\n\nexport const componentName = getComponentName('mappings-field-internal');\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass MappingsFieldInternal extends BaseInputClass {\n #errorItem;\n\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], [\n 'label-value',\n 'label-attr',\n 'button-label',\n 'invalid',\n 'readonly',\n 'disabled',\n 'st-error-message-icon',\n 'st-error-message-icon-size',\n 'st-error-message-icon-padding',\n ]);\n }\n\n // eslint-disable-next-line class-methods-use-this\n isValidDataType(data) {\n try {\n return data.every(\n (obj) =>\n typeof obj === 'object' &&\n !Array.isArray(obj) &&\n Object.getOwnPropertyNames(obj).length === 1 &&\n typeof obj[Object.keys(obj)[0]] === 'string' &&\n obj[Object.keys(obj)[0]].trim() !== ''\n );\n } catch (e) {\n return false;\n }\n }\n\n get labelValue() {\n return this.getAttribute('label-value') || 'Value';\n }\n\n get labelAttr() {\n return this.getAttribute('label-attr') || 'Attribute';\n }\n\n get buttonLabel() {\n return this.getAttribute('button-label') || 'Add mapping';\n }\n\n get options() {\n return this.getAttribute('options') || [];\n }\n\n addNewMappingItem(focusNewItem) {\n const newMappingItem = document.createElement('descope-mapping-item');\n newMappingItem.setAttribute('bordered', 'true');\n this.mappingsContainerEle.appendChild(newMappingItem);\n forwardAttrs(this, newMappingItem, {\n includeAttrs: [\n 'size',\n 'full-width',\n 'separator',\n 'options',\n 'disabled',\n 'st-error-message-icon',\n 'st-error-message-icon-size',\n 'st-error-message-icon-padding',\n ],\n });\n // This needs to be done with the timeout, otherwise the validation is performed\n // before the new item is added and thus returns a wrong result\n setTimeout(() => {\n this.setCustomValidity('');\n newMappingItem.addEventListener('mapping-item-removed', () => {\n // If the removed item was the one that was invalid, we need to reset the invalid indication for the internal\n if (newMappingItem === this.#errorItem) {\n this.resetInvalidIndication();\n this.#errorItem = undefined;\n }\n newMappingItem.remove();\n this.setCustomValidity('');\n });\n this.dispatchEvent(new CustomEvent('mapping-item-added', { bubbles: true, composed: true }));\n if (focusNewItem) {\n newMappingItem.focus();\n }\n }, 0);\n return newMappingItem;\n }\n\n get items() {\n return Array.from(this.mappingsContainerEle.querySelectorAll('descope-mapping-item'));\n }\n\n get value() {\n return this.items.reduce((acc, item) => {\n if (!item.value) {\n return acc;\n }\n\n return [...acc, item.value];\n }, []);\n }\n\n set value(mappings) {\n if (!this.isValidDataType(mappings)) {\n // eslint-disable-next-line no-console\n console.error(\n 'received invalid value to set - should be an array of objects with one key-value pair'\n );\n return;\n }\n\n const currentItems = this.items;\n\n // Remove extra mapping items we don't need\n if (currentItems.length > mappings.length) {\n for (let i = mappings.length; i < currentItems.length; i++) {\n this.mappingsContainerEle.removeChild(currentItems[i]);\n }\n }\n\n // Add or update items\n mappings.forEach((mapping, index) => {\n const mappingItem = currentItems[index];\n if (mappingItem) {\n // Set existing item value\n mappingItem.value = mapping;\n } else {\n // Add new item\n const newMappingItem = this.addNewMappingItem(false);\n // Setting the new item value needs to be done with the timeout,\n // otherwise the value is not set correctly\n setTimeout(() => {\n newMappingItem.value = mapping;\n }, 0);\n }\n });\n }\n\n constructor() {\n super();\n\n this.innerHTML = `\n \n \n \n `;\n\n this.labelsEle = this.querySelector('.labels-container');\n this.mappingsContainerEle = this.querySelector('.mappings-container');\n this.buttonContainer = this.querySelector('.button-container');\n }\n\n initLabels() {\n this.labelsEle.innerHTML = `\n \n
\n \n
\n\t\t`;\n\n injectStyle(\n `\n :host {\n\t\t\t\t\tdisplay: inline-flex;\n container-type: inline-size;\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 @container (max-width: 529px) {\n .root {\n flex-wrap: wrap;\n }\n }\n\n .btn-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-grow: 0;\n }\n\n .content-wrapper {\n display: flex;\n flex-grow: 1;\n align-items: center;\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 max-width: 100%;\n min-width: 0;\n }\n\n .label {\n flex-grow: 1;\n width: 100%;\n }\n\n .value {\n flex-grow: 1;\n }\n\n descope-badge {\n margin-inline-end: 10px;\n }\n\n .hidden {\n visibility: hidden;\n }\n\n descope-text[data-id=\"label-text\"].required:after {\n content: '*';\n color: var(${TextClass.cssVarList.textColor});\n }\n\n :host([readonly=\"true\"]) descope-button {\n visibility: hidden;\n }\n `,\n this\n );\n\n this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id=\"delete-btn\"]');\n this.editButton = this.shadowRoot.querySelector('descope-button[data-id=\"edit-btn\"]');\n this.badge = this.shadowRoot.querySelector('descope-badge');\n this.labelText = this.shadowRoot.querySelector('descope-text[data-id=\"label-text\"]');\n this.valueText = this.shadowRoot.querySelector('descope-text[data-id=\"value-text\"]');\n }\n\n onLabelChange() {\n this.labelText.innerText = this.label;\n this.labelText.setAttribute('title', this.label);\n }\n\n onValueOrPlaceholderChange() {\n const text = this.value || this.placeholder;\n const mode = this.value ? 'primary' : 'secondary';\n\n this.valueText.innerText = text;\n this.valueText.setAttribute('title', text);\n this.valueText.setAttribute('mode', mode);\n }\n\n onBadgeLabelChange() {\n if (!this.badgeLabel) {\n this.badge.style.display = 'none';\n } else {\n this.badge.innerText = this.badgeLabel;\n this.badge.style.display = '';\n }\n }\n\n onBadgeTooltipTextChange() {\n this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);\n }\n\n onIsRequiredChange() {\n this.labelText.classList.toggle('required', this.isRequired);\n }\n\n get label() {\n return this.getAttribute('label') || '';\n }\n\n get value() {\n return this.getAttribute('value') || '';\n }\n\n get placeholder() {\n return this.getAttribute('placeholder') || '';\n }\n\n get isRequired() {\n return this.getAttribute('required') === 'true';\n }\n\n get badgeLabel() {\n return this.getAttribute('badge-label') || '';\n }\n\n get badgeTooltipText() {\n return this.getAttribute('badge-tooltip-text') || '';\n }\n\n init() {\n this.onLabelChange();\n this.onValueOrPlaceholderChange();\n this.onIsRequiredChange();\n this.onBadgeLabelChange();\n this.onBadgeTooltipTextChange();\n this.handleDeleteButtonVisibility();\n\n this.deleteButton.addEventListener('click', () =>\n this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))\n );\n\n this.editButton.addEventListener('click', () =>\n this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))\n );\n }\n\n static get observedAttributes() {\n return [\n 'label',\n 'value',\n 'placeholder',\n 'required',\n 'badge-label',\n 'badge-tooltip-text',\n ].concat(super.observedAttributes);\n }\n\n handleDeleteButtonVisibility() {\n this.deleteButton.classList.toggle('hidden', this.isRequired || !this.value);\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n\n if (oldValue === newValue) {\n return;\n }\n\n if (name === 'label') {\n this.onLabelChange();\n } else if (name === 'value' || name === 'placeholder') {\n this.onValueOrPlaceholderChange();\n } else if (name === 'required') {\n this.onIsRequiredChange();\n } else if (name === 'badge-label') {\n this.onBadgeLabelChange();\n } else if (name === 'badge-tooltip-text') {\n this.onBadgeTooltipTextChange();\n }\n\n if (name === 'value' || name === 'required') {\n this.handleDeleteButtonVisibility();\n }\n }\n}\n\nconst { host, textFields, buttons, badge, labelText, contentWrapper } = {\n host: { selector: () => ':host' },\n textFields: { selector: 'descope-text' },\n labelText: { selector: 'descope-text[data-id=\"label-text\"]' },\n buttons: { selector: 'descope-button' },\n badge: { selector: 'descope-badge' },\n contentWrapper: { selector: ' .content-wrapper' },\n};\n\nexport const UserAttributeClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostMinWidth: { ...host, property: 'min-width' },\n hostMaxWidth: { ...host, property: 'max-width' },\n hostDirection: [\n { ...host, property: 'direction' },\n { ...textFields, property: TextClass.cssVarList.hostDirection },\n { ...buttons, property: ButtonClass.cssVarList.hostDirection },\n { ...badge, property: BadgeClass.cssVarList.hostDirection },\n ],\n labelMinWidth: { ...labelText, property: 'min-width' },\n contentMinWidth: { ...contentWrapper, property: 'min-width' },\n badgeMaxWidth: { ...badge, property: 'max-width' },\n itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawUserAttribute);\n","import globals from '../globals';\nimport {\n UserAttributeClass,\n componentName,\n} from '../../components/descope-user-attribute/UserAttributeClass';\nimport { createHelperVars, getThemeRefs, useVar } from '../../helpers/themeHelpers';\n\nconst globalRefs = getThemeRefs(globals);\nexport const vars = UserAttributeClass.cssVarList;\n\nconst userAttribute = {\n [vars.labelMinWidth]: '150px',\n [vars.hostDirection]: globalRefs.direction,\n [vars.contentMinWidth]: `calc(100% - ${useVar(vars.labelMinWidth)} - ${useVar(vars.itemsGap)})`,\n [vars.badgeMaxWidth]: '85px',\n [vars.itemsGap]: '4px',\n [vars.hostMinWidth]: '310px',\n [vars.hostWidth]: '530px',\n [vars.hostMaxWidth]: '100%',\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default userAttribute;\n","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==\"","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport greenVIcon from './green-v.svg';\nimport { TextClass } from '@descope-ui/descope-text/class';\nimport { ButtonClass } from '@descope-ui/descope-button/class';\nimport { BadgeClass } from '@descope-ui/descope-badge/class';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('user-auth-method');\nclass RawUserAuthMethod extends createBaseClass({\n componentName,\n baseSelector: ':host > .root',\n}) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n
\n \n \n \n \n \n
\n \n
\n\t\t`;\n\n injectStyle(\n `\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\"]{\n display: inline-flex;\n align-items: center;\n }\n `,\n this\n );\n\n this.unfulfilledButton = this.shadowRoot.querySelector('.btn.unfulfilled');\n this.fulfilledButton = this.shadowRoot.querySelector('.btn.fulfilled');\n this.statusIndicator = this.shadowRoot.querySelector('.status-indicator');\n this.labelText = this.shadowRoot.querySelector('descope-text[data-id=\"label-text\"]');\n }\n\n onLabelChange() {\n this.labelText.innerText = this.label;\n this.labelText.setAttribute('title', this.label);\n }\n\n updateButtonLabel(btnRef, label) {\n let textSpanEle = btnRef.querySelector('span');\n\n if (label) {\n if (!textSpanEle) {\n textSpanEle = document.createElement('span');\n btnRef.appendChild(textSpanEle);\n }\n textSpanEle.innerText = label;\n } else if (textSpanEle) {\n btnRef.removeChild(textSpanEle);\n }\n }\n\n onFulfilledChange() {\n if (this.isFulfilled) {\n this.unfulfilledButton.classList.add('hidden');\n this.handleFulfilled();\n } else {\n this.fulfilledButton.classList.add('hidden');\n this.handleUnfulfilled();\n }\n }\n\n handleFulfilled() {\n this.fulfilledButton.classList.toggle('hidden', !this.isFulfilledEditable);\n this.statusIndicator.classList.toggle('hidden', this.isFulfilledEditable);\n }\n\n handleUnfulfilled() {\n this.unfulfilledButton.classList.toggle('hidden', !this.isUnfulfilledEditable);\n this.statusIndicator.classList.toggle('hidden', this.isUnfulfilledEditable);\n }\n\n get label() {\n return this.getAttribute('label') || '';\n }\n\n get unfulfilledButtonLabel() {\n return this.getAttribute('button-label') || '';\n }\n\n get fulfilledButtonLabel() {\n return this.getAttribute('fulfilled-button-label') || '';\n }\n\n get isFulfilled() {\n return this.getAttribute('fulfilled') === 'true';\n }\n\n get isFulfilledEditable() {\n return this.getAttribute('fulfilled-editable') === 'true';\n }\n\n get isUnfulfilledEditable() {\n // this is to keep backward compatibility with previous versions\n return this.getAttribute('unfulfilled-editable') !== 'false';\n }\n\n init() {\n this.onLabelChange();\n this.updateButtonLabel(this.fulfilledButton, this.fulfilledButtonLabel);\n this.updateButtonLabel(this.unfulfilledButton, this.unfulfilledButtonLabel);\n this.onFulfilledChange();\n\n this.unfulfilledButton.addEventListener('click', () =>\n this.dispatchEvent(new CustomEvent('button-clicked', { bubbles: true, composed: true }))\n );\n\n this.fulfilledButton.addEventListener('click', () => {\n this.dispatchEvent(\n new CustomEvent('fulfilled-button-clicked', { bubbles: true, composed: true })\n );\n });\n }\n\n static get observedAttributes() {\n return [\n 'label',\n 'fulfilled',\n 'button-label',\n 'fulfilled-button-label',\n 'fulfilled-editable',\n 'unfulfilled-editable',\n ].concat(super.observedAttributes);\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) {\n return;\n }\n\n if (name === 'label') {\n this.onLabelChange();\n } else if (name === 'fulfilled') {\n this.onFulfilledChange();\n } else if (name === 'button-label') {\n this.updateButtonLabel(this.unfulfilledButton, this.unfulfilledButtonLabel);\n } else if (name === 'fulfilled-button-label') {\n this.updateButtonLabel(this.fulfilledButton, this.fulfilledButtonLabel);\n } else if (name === 'fulfilled-editable' && this.isFulfilled) {\n this.handleFulfilled();\n } else if (name === 'unfulfilled-editable' && !this.isFulfilled) {\n this.handleUnfulfilled();\n }\n }\n}\n\nconst { host, textField, buttons, badge, textWrapper, methodIconSlot } = {\n host: { selector: () => ':host' },\n textField: { selector: 'descope-text' },\n buttons: { selector: 'descope-button' },\n badge: { selector: 'descope-badge' },\n textWrapper: { selector: ' .text-wrapper' },\n methodIconSlot: { selector: 'slot[name=\"method-icon\"]' },\n};\n\nexport const UserAuthMethodClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostMinWidth: { ...host, property: 'min-width' },\n hostMaxWidth: { ...host, property: 'max-width' },\n hostDirection: [\n { ...host, property: 'direction' },\n { ...textField, property: TextClass.cssVarList.hostDirection },\n { ...buttons, property: ButtonClass.cssVarList.hostDirection },\n { ...badge, property: BadgeClass.cssVarList.hostDirection },\n ],\n itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],\n iconSize: [\n { ...methodIconSlot, property: 'width' },\n { ...methodIconSlot, property: 'height' },\n ],\n iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawUserAuthMethod);\n","import globals from '../globals';\nimport { UserAuthMethodClass } from '../../components/descope-user-auth-method/UserAuthMethodClass';\nimport { getThemeRefs } from '../../helpers/themeHelpers';\n\nconst globalRefs = getThemeRefs(globals);\nexport const vars = UserAuthMethodClass.cssVarList;\n\nconst userAuthMethod = {\n [vars.hostDirection]: globalRefs.direction,\n [vars.itemsGap]: '16px',\n [vars.hostMinWidth]: '310px',\n [vars.hostWidth]: '530px',\n [vars.hostMaxWidth]: '100%',\n [vars.iconSize]: '24px',\n [vars.iconColor]: 'currentcolor',\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default userAuthMethod;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport {\n getComponentName,\n forwardAttrs,\n observeAttributes,\n} from '../../../../helpers/componentHelpers';\n\nexport const componentName = getComponentName('saml-group-mappings-internal');\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: '' });\n\nclass SamlGroupMappingsInternal extends BaseInputClass {\n static get observedAttributes() {\n return ['invalid'].concat(BaseInputClass.observedAttributes || []);\n }\n\n constructor() {\n super();\n\n this.innerHTML = `\n \n
\n\n \n \n \n \n \n
\n \n
\n ${input}`;\n};\n","import hljs from 'highlight.js';\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName, observeChildren } from '../../helpers/componentHelpers';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { decode, tpl } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('code-snippet');\n\nclass CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host > code' }) {\n static get observedAttributes() {\n return ['lang', 'inline'];\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n\t\t\t${label}\n\t
\n`;\n\nexport const createMonthView = (year, month, shortWeekdays) => {\n const daysInMonth = getMaxDaysInMonth(year, month);\n\n // Get day of the week (0 = Sunday, 1 = Monday, etc.)\n const firstDayOfMonth = new Date(year, month - 1, 1).getDay();\n\n let monthView = '| ${d} | `,\n ''\n )}
|---|
| ';\n }\n\n // Add days of the month\n let dayOfWeek = firstDayOfMonth;\n for (let i = 1; i <= daysInMonth; i++) {\n if (dayOfWeek === 7) {\n dayOfWeek = 0;\n monthView += ' |
| ';\n dayOfWeek++;\n }\n\n monthView += ' |
\n \n \n \n
\n `;\n\n injectStyle(\n `\n :host {\n display: inline-block;\n box-sizing: border-box;\n max-width: 100%;\n user-select: none;\n -webkit-user-select: none;\n }\n\n :host ::slotted {\n padding: 0;\n }\n\n [data-toggle-calendar] {\n cursor: pointer;\n display: flex;\n align-self: center;\n z-index: 1;\n }\n\n [data-disabled=\"true\"] {\n pointer-events: none;\n }\n\n .calendar .day {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .nav {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n }\n\n .selectors,\n .selectors span {\n display: flex;\n justify-content: center;\n }\n\n descope-button {\n padding: 0;\n ${ButtonClass.cssVarList.horizontalPadding}: 0;\n ${ButtonClass.cssVarList.verticalPadding}: 0;\n ${ButtonClass.cssVarList.outlineWidth}: 0;\n }\n\n .combo-box-item {\n display:flex;\n flex-direction: column;\n }\n\n ${inputFloatingLabelStyle()}\n `,\n this\n );\n }\n\n set value(val) {\n if (!val) return;\n\n const epoch = newDate(val).getTime();\n\n if (!isValidEpoch(epoch) || epoch === this.epoch) {\n return;\n }\n\n this.epoch = epoch;\n\n this.renderCalendar();\n }\n\n get value() {\n return this.epoch ? formatEpoch(this.epoch, NATIVE_FORMAT) : '';\n }\n\n get isSelectedView() {\n return isViewVisible(this.preview, this.epoch);\n }\n\n get isTodayView() {\n return isViewVisible(getCurrentTime(), this.preview);\n }\n\n get monthNames() {\n return ensureMonthNamesArr(this.getAttribute('calendar-months'));\n }\n\n get weekdayNames() {\n return ensureWeekdayNamesArr(this.getAttribute('calendar-weekdays'));\n }\n\n get hasYearValue() {\n return !!this.yearInput.value;\n }\n\n get hasMonthValue() {\n return !!this.monthInput.value;\n }\n\n get yearsRange() {\n const range = this.getAttribute('years-range')?.split('-');\n\n if (range?.length === 2) {\n const [start, end] = range.map(Number);\n if (start <= end) return [start, end];\n }\n\n const currentYear = newDate().getFullYear();\n\n return [currentYear, currentYear + YEARS_RANGE];\n }\n\n init() {\n super.init?.();\n this.initCalendar();\n this.renderCalendar();\n }\n\n initCalendar() {\n this.calendar = this.shadowRoot.querySelector('.calendar');\n\n this.navPrevEle = this.shadowRoot.querySelector('.nav-prev');\n this.navNextEle = this.shadowRoot.querySelector('.nav-next');\n this.submitButton = this.shadowRoot.querySelector('.submit-button');\n this.cancelButton = this.shadowRoot.querySelector('.cancel-button');\n\n this.initInputs();\n this.initNav();\n\n this.addEventListener('day-changed', () => this.submitButton.removeAttribute('disabled'));\n // This is a workaround for descope-components inside Vaadin's Popover component.\n // When we sync attributes, the `disabled` attribute is being compared to the attribute\n // on Vaadin component; since the Vaadin component has no `disabled` attribute, we sync\n // that back to our component. This happens when using Popover, and for specific attributes,\n // namely `disabled`. This is pending a more generic fix in the way we sync attibutes.\n this.submitButton.shadowRoot.querySelector('vaadin-button').setAttribute('disabled', 'true');\n }\n\n initInputs() {\n const ele = createInputs(this.monthNames, this.yearsRange);\n this.shadowRoot.querySelector('.selectors').appendChild(ele);\n\n this.monthInput = initComboBox(\n this.shadowRoot.querySelector('.month-input'),\n this.onMonthChange.bind(this),\n this.onMonthInputBlur.bind(this)\n );\n\n this.yearInput = initComboBox(\n this.shadowRoot.querySelector('.year-input'),\n this.onYearChange.bind(this),\n this.onYearInputBlur.bind(this)\n );\n\n [this.monthInput, this.yearInput].forEach((selector) =>\n forwardAttrs(this, selector, {\n includeAttrs: ['disabled', 'size', 'st-host-direction'],\n })\n );\n }\n\n initNav() {\n this.navPrevEle.addEventListener('click', this.navPrevMonth.bind(this));\n this.navNextEle.addEventListener('click', this.navNextMonth.bind(this));\n this.cancelButton.addEventListener('click', this.onCancel.bind(this));\n this.submitButton.addEventListener('click', this.onSubmit.bind(this));\n\n [this.navPrevEle, this.navNextEle].forEach((btn) =>\n forwardAttrs(this, btn, {\n includeAttrs: ['size'],\n })\n );\n\n this.shadowRoot.querySelector('.nav-next').innerHTML = arrowRightIcon;\n this.shadowRoot.querySelector('.nav-prev').innerHTML = arrowLeftIcon;\n }\n\n onSubmit() {\n if (this.isDisabled) return;\n if (!this.value) return;\n this.dispatchEvent(new CustomEvent('date-submit', { detail: newDate(this.preview) }));\n }\n\n onCancel() {\n if (this.isDisabled) return;\n this.dispatchEvent(new CustomEvent('cancel'));\n this.dispatchEvent(new CustomEvent('date-cancel'));\n this.clearSelectedDay();\n }\n\n clearSelectedDay() {\n this.getSelectedDayEle()?.removeAttribute('data-selected');\n this.submitButton.setAttribute('disabled', 'true');\n this.epoch = '';\n }\n\n updateInputs() {\n if (this.yearInput && this.monthInput) {\n const epoch = this.preview || getCurrentTime();\n const year = getFullYear(epoch);\n const month = getMonth(epoch);\n this.monthInput.value = month;\n // For the yearInput we update the base element directly to properly trigger the change event\n // since this can be a custom value\n setTimeout(() => {\n this.yearInput.baseElement.value = year;\n });\n }\n }\n\n renderCalendar() {\n const date = newDate(this.preview || getCurrentTime());\n const epoch = date.getTime();\n\n const [year, month] = getPartsFromEpoch(epoch);\n\n if (this.calendar) {\n this.calendar.innerHTML = createMonthView(year, month, truncateWeekdays(this.weekdayNames));\n }\n\n Array.from(this.calendar?.querySelectorAll('.day-entry .day') || []).forEach((ele) =>\n ele.addEventListener('click', this.onDayChange.bind(this))\n );\n\n this.updateInputs();\n this.setSelectedDay();\n this.setCurrentDay();\n }\n\n onDayChange(e) {\n if (this.isDisabled) return;\n const date = newDate(this.preview);\n date.setDate(Number(e.target.getAttribute('data-date-day')));\n this.value = formatEpoch(date.getTime(), NATIVE_FORMAT);\n this.dispatchEvent(new CustomEvent('day-changed', { detail: date }));\n }\n\n onYearChange(e) {\n if (!e.target.value) return;\n const date = newDate(this.preview);\n date.setFullYear(Number(e.target.value.trim()));\n this.preview = date.getTime();\n this.renderCalendar();\n this.dispatchEvent(new CustomEvent('year-changed', { detail: date }));\n }\n\n onMonthChange(e) {\n if (!e.target.value) return;\n const date = newDate(this.preview);\n date.setMonth(Number(e.target.value) - 1);\n this.preview = date.getTime();\n this.renderCalendar();\n this.dispatchEvent(new CustomEvent('month-changed', { detail: date }));\n }\n\n onYearInputBlur(e) {\n this.yearInput.baseElement.value = e.target.value || getFullYear(this.preview);\n }\n\n onMonthInputBlur(e) {\n this.monthInput.baseElement.value = e.target.value || getMonth(this.preview);\n }\n\n getSelectedDayEle() {\n const day = newDate(this.epoch).getDate();\n return this.calendar?.querySelector(`[data-date-day=\"${day}\"]`);\n }\n\n getCurrentDayEle() {\n return this.calendar?.querySelector(`[data-date-day=\"${getCurrentDay()}\"]`);\n }\n\n clearSelectedDays() {\n const cells = this.calendar?.querySelectorAll(`[data-selected]`);\n if (!cells) return;\n cells.forEach((c) => c.removeAttribute('data-selected'));\n }\n\n setSelectedDay() {\n this.clearSelectedDays();\n if (this.value && this.isSelectedView) {\n this.getSelectedDayEle().setAttribute('data-selected', 'true');\n }\n }\n\n setCurrentDay() {\n if (this.isTodayView) {\n const ele = this.getCurrentDayEle();\n const title = this.getAttribute('calendar-label-today') || CALENDAR_LABEL_TODAY;\n ele?.setAttribute('data-current-day', 'true');\n ele?.setAttribute('title', title);\n }\n }\n\n navPrevMonth() {\n if (this.isDisabled) {\n return;\n }\n const date = prevMonth(this.preview);\n this.preview = date.getTime();\n this.renderCalendar();\n }\n\n navNextMonth() {\n if (this.isDisabled) {\n return;\n }\n const date = nextMonth(this.preview);\n this.preview = date.getTime();\n this.renderCalendar();\n }\n\n clearValue() {\n this.epoch = '';\n this.value = '';\n this.removeAttribute('preview');\n this.submitButton.setAttribute('disabled', 'true');\n }\n\n onInitialValueChange(newValue) {\n // if component already has a value don't re-set value\n if (this.value) {\n return;\n }\n\n const date = newDate(newValue);\n const epoch = date.getTime();\n\n if (isValidEpoch(epoch)) {\n this.epoch = epoch;\n this.preview = epoch;\n } else {\n this.clearValue();\n }\n }\n\n onYearsRangeChange() {\n setTimeout(() => {\n if (this.yearInput) {\n this.yearInput.innerHTML = getYearOptions(this.yearsRange);\n }\n });\n }\n\n onMonthNamesChange() {\n setTimeout(() => {\n if (this.monthInput) {\n this.monthInput.innerHTML = getMonthsOptions(this.monthNames);\n }\n });\n }\n\n onSubmitLabelChange(newValue) {\n if (this.submitButton) {\n this.submitButton.textContent = newValue || BUTTON_LABEL_DONE;\n }\n }\n\n onCancelLabelChange(newValue) {\n if (this.cancelButton) {\n this.cancelButton.textContent = newValue || BUTTON_LABEL_CANCEL;\n }\n }\n\n onInitialMonthChange(val) {\n const currYear = getFullYear(this.preview);\n this.preview = newDate(`${currYear}/${val}/1`).getTime();\n }\n\n onInitialYearChange(val) {\n const currMonth = getMonth(this.preview);\n this.preview = newDate(`${val}/${currMonth}/1`).getTime();\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n if (oldValue !== newValue) {\n // attrs for which affect static ui parts doesn't require calendar re-render\n if (calendarUiAttrs.includes(attrName)) {\n if (attrName === 'calendar-label-submit') {\n this.onSubmitLabelChange(newValue);\n }\n if (attrName === 'calendar-label-cancel') {\n this.onCancelLabelChange(newValue);\n }\n } else {\n // we want to render the calendar for each of these attr change\n\n if (newValue && attrName === 'initial-value') {\n this.onInitialValueChange(newValue);\n }\n if (newValue && attrName === 'initial-month') {\n this.onInitialMonthChange(newValue);\n }\n if (newValue && attrName === 'initial-year') {\n this.onInitialYearChange(newValue);\n }\n if (attrName === 'years-range') {\n this.onYearsRangeChange(Number(newValue));\n }\n if (attrName === 'calendar-months') {\n this.onMonthNamesChange();\n }\n if (attrName === 'calendar-label-today') {\n this.setCurrentDay(newValue);\n }\n if (attrName === 'disabled') {\n setTimeout(() => {\n this.cancelButton?.setAttribute('disabled', newValue === 'true');\n });\n }\n\n this.renderCalendar();\n }\n }\n }\n\n getValidity() {\n if (this.isRequired && !this.value) {\n return { valueMissing: true };\n }\n return {};\n }\n}\n\nconst {\n calendar,\n day,\n dayEntry,\n currentDay,\n selectedDay,\n disabledDay,\n weekday,\n topNav,\n topNavSelectors,\n bottomNav,\n navPrev,\n navNext,\n navPrevRTL,\n navNextRTL,\n yearInput,\n monthInput,\n} = {\n calendar: { selector: () => '.calendar' },\n topNav: { selector: () => '.nav.top-nav' },\n topNavSelectors: { selector: () => '.nav.top-nav .selectors > span' },\n bottomNav: { selector: () => '.nav.bottom-nav' },\n day: { selector: () => '.day' },\n dayEntry: { selector: () => '.day-entry' },\n currentDay: { selector: () => '.day-entry[data-current-day] .day' },\n selectedDay: { selector: () => '.day-entry[data-selected] .day' },\n disabledDay: { selector: () => '.day-entry[data-disabled=\"true\"] .day' },\n weekday: { selector: () => '.weekday' },\n navPrev: { selector: () => '.nav-prev' },\n navNext: { selector: () => '.nav-next' },\n navPrevRTL: { selector: () => ':host([st-host-direction=\"rtl\"]) .nav-prev' },\n navNextRTL: { selector: () => ':host([st-host-direction=\"rtl\"]) .nav-next' },\n yearInput: { selector: () => '.year-input' },\n monthInput: { selector: () => '.month-input' },\n};\n\nexport const CalendarClass = compose(\n createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n createStyleMixin({\n mappings: {\n fontSize: {},\n fontFamily: {},\n hostWidth: [\n { selector: () => ':host', property: 'width' },\n { selector: 'table', property: 'width' },\n ],\n hostDirection: { property: 'direction' },\n\n topNavVerticalPadding: [\n { ...topNav, property: 'padding-top' },\n { ...topNav, property: 'padding-bottom' },\n ],\n topNavHorizointalPadding: [\n { ...topNav, property: 'padding-right' },\n { ...topNav, property: 'padding-left' },\n ],\n topNavAlignment: { ...topNav, property: 'justify-content' },\n topNavGap: { ...topNav, property: 'gap' },\n topNavSelectorsGap: { ...topNavSelectors, property: 'gap' },\n\n bottomNavVerticalPadding: [\n { ...bottomNav, property: 'padding-top' },\n { ...bottomNav, property: 'padding-bottom' },\n ],\n bottomNavHorizontalPadding: [\n { ...bottomNav, property: 'padding-right' },\n { ...bottomNav, property: 'padding-left' },\n ],\n bottomNavAlignment: { ...bottomNav, property: 'justify-content' },\n bottomNavGap: { ...bottomNav, property: 'gap' },\n\n navMarginBottom: { ...topNav, property: 'margin-bottom' },\n\n calendarPadding: [\n { ...calendar, property: 'padding-bottom' },\n { ...calendar, property: 'padding-right' },\n { ...calendar, property: 'padding-left' },\n ],\n\n navBorderBottomWidth: { ...topNav, property: 'border-bottom-width' },\n navBorderBottomColor: { ...topNav, property: 'border-bottom-color' },\n navBorderBottomStyle: { ...topNav, property: 'border-bottom-style' },\n\n weekdayFontSize: { ...weekday, property: 'font-size' },\n weekdayFontWeight: { ...weekday, property: 'font-weight' },\n\n currentDayBorderColor: {\n ...currentDay,\n property: 'border-color',\n },\n currentDayBorderWidth: {\n ...currentDay,\n property: 'border-width',\n },\n currentDayBorderStyle: {\n ...currentDay,\n property: 'border-style',\n },\n\n dayHeight: { ...dayEntry, property: 'height' },\n daySize: [\n { ...day, property: 'height' },\n { ...day, property: 'width' },\n ],\n dayPadding: { ...day, property: 'padding' },\n dayRadius: { ...day, property: 'border-radius' },\n dayTextAlign: { ...day, property: 'text-align' },\n dayBlockAlign: { ...day, property: 'margin' },\n dayTextColor: { ...day, property: 'color' },\n dayFontWeight: { ...day, property: 'font-weight' },\n dayBackgroundColor: { ...day, property: 'background-color' },\n dayCursor: { ...day, property: 'cursor' },\n dayFontSize: { ...day, property: 'font-size' },\n\n dayBackgroundColorHover: {\n selector: () => '.day:hover',\n property: 'background-color',\n },\n\n daySelectedTextdColor: {\n ...selectedDay,\n property: 'color',\n },\n daySelectedBackgroundColor: {\n ...selectedDay,\n property: 'background-color',\n },\n dayDisabledTextdColor: {\n ...disabledDay,\n property: 'color',\n },\n\n yearInputWidth: { ...yearInput, property: 'width' },\n monthInputWidth: { ...monthInput, property: 'width' },\n\n navButtonSize: [\n { ...navPrev, property: 'width' },\n { ...navPrev, property: 'height' },\n { ...navNext, property: 'width' },\n { ...navNext, property: 'height' },\n ],\n navButtonCursor: [\n { ...navPrev, property: 'cursor' },\n { ...navNext, property: 'cursor' },\n ],\n navButtonRotation: [\n { ...navPrevRTL, property: 'transform' },\n { ...navNextRTL, property: 'transform' },\n ],\n navButtonOpacity: [\n { ...navPrev, property: 'opacity' },\n { ...navNext, property: 'opacity' },\n ],\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawCalendar);\n","import globals from '../globals';\nimport { CalendarClass } from '../../components/descope-date-field/descope-calendar/CalendarClass';\nimport { getThemeRefs } from '../../helpers/themeHelpers';\nimport { refs } from './inputWrapper';\n\nconst globalRefs = getThemeRefs(globals);\n\nconst vars = CalendarClass.cssVarList;\n\nconst calendar = {\n [vars.fontFamily]: refs.fontFamily,\n [vars.fontSize]: refs.fontSize,\n [vars.hostDirection]: refs.direction,\n\n [vars.calendarPadding]: '1em',\n\n [vars.topNavVerticalPadding]: '1em',\n [vars.topNavAlignment]: 'space-between',\n [vars.topNavGap]: '0',\n [vars.topNavSelectorsGap]: '0.5em',\n\n [vars.bottomNavVerticalPadding]: '0.75em',\n [vars.bottomNavHorizontalPadding]: '1.5em',\n [vars.bottomNavAlignment]: 'space-between',\n [vars.bottomNavGap]: '0.5em',\n\n [vars.navMarginBottom]: '0.75em',\n [vars.navBorderBottomWidth]: '1px',\n [vars.navBorderBottomColor]: globalRefs.colors.surface.highlight,\n [vars.navBorderBottomStyle]: 'solid',\n\n [vars.yearInputWidth]: '6em',\n [vars.monthInputWidth]: '8em',\n\n [vars.navButtonSize]: '24px',\n [vars.navButtonCursor]: 'pointer',\n\n [vars.weekdayFontSize]: '0.875em',\n [vars.weekdayFontWeight]: '500',\n\n // day table cell\n [vars.dayHeight]: '3.125em',\n\n // day value\n [vars.daySize]: '2.125em',\n [vars.dayFontSize]: '1em',\n [vars.dayRadius]: '50%',\n [vars.dayTextAlign]: 'center',\n [vars.dayPadding]: '0',\n [vars.dayTextColor]: globalRefs.colors.surface.contrast,\n [vars.dayFontWeight]: '500',\n [vars.dayBackgroundColor]: 'transparent',\n [vars.dayCursor]: 'pointer',\n [vars.dayBackgroundColorHover]: globalRefs.colors.primary.highlight,\n\n // selected day\n [vars.daySelectedBackgroundColor]: globalRefs.colors.primary.main,\n [vars.daySelectedTextdColor]: globalRefs.colors.primary.contrast,\n\n // disabled day (out of min/max range)\n [vars.dayDisabledTextdColor]: globalRefs.colors.surface.light,\n\n // today\n [vars.currentDayBorderColor]: globalRefs.colors.surface.light,\n [vars.currentDayBorderWidth]: '1px',\n [vars.currentDayBorderStyle]: 'solid',\n\n size: {\n xs: { [vars.fontSize]: '12px' },\n sm: { [vars.fontSize]: '14px' },\n md: { [vars.fontSize]: '16px' },\n lg: { [vars.fontSize]: '18px' },\n },\n\n [vars.navButtonRotation]: 'rotate(180deg)',\n\n _disabled: {\n [vars.navButtonOpacity]: '0.5',\n [vars.dayBackgroundColorHover]: 'none',\n [vars.navButtonCursor]: 'default',\n [vars.dayCursor]: 'default',\n },\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n [vars.dayBlockAlign]: '0 auto',\n },\n};\n\nexport default calendar;\nexport { vars };\n","// DateCounterClass allows us to add several counters to the input, and use them seperately.\n// For examele, we have a DayCounter, MonthCounter and YearCounter, which can each separately navigate\n// between different ranges.\nexport class DateCounter {\n #data = Object.freeze([]);\n\n constructor({ id, min, max, placeholder }, onChange) {\n this.id = id;\n this.min = min;\n this.max = max;\n this.placeholder = placeholder;\n this.onChange = onChange;\n }\n\n get data() {\n return this.#data;\n }\n\n set data(val) {\n this.#data = Object.freeze(val);\n this.onChange?.();\n }\n\n get #initialNumValue() {\n return this.data.length ? this.numberValue : 0;\n }\n\n get numberValue() {\n return Number(this.stringValue);\n }\n\n get stringValue() {\n return (this.data.join('') || this.placeholder).padStart(this.length, '0');\n }\n\n get isFull() {\n return this.numberValue * 10 > this.max || this.data.length === this.length;\n }\n\n get isEmpty() {\n return this.stringValue === this.placeholder;\n }\n\n get length() {\n return this.max.toString().length;\n }\n\n set(val) {\n this.data = val.toString().split('');\n }\n\n add(num) {\n // use local var to avoid triggering onChange\n let data = this.data;\n\n data = [...data, num];\n\n // we need to re-evaluate the number value\n const numVal = Number(data.join(''));\n\n if (numVal > this.max) {\n data = [num];\n } else if (this.length < data.length) {\n data = data.slice(1, data.length);\n }\n\n this.data = data;\n\n return num;\n }\n\n del() {\n if (!this.data.filter((d) => d !== '0').filter(Boolean).length) {\n this.data = [];\n } else {\n this.data = this.data.slice(0, this.data.length - 1);\n }\n }\n\n clear() {\n this.data = [];\n }\n\n inc(gap) {\n this.replaceValue(\n this.#initialNumValue < this.max\n ? Math.max(this.#initialNumValue + (gap || 1), this.min)\n : this.min\n );\n }\n\n dec(gap) {\n this.replaceValue(\n this.#initialNumValue > this.min\n ? Math.min(this.#initialNumValue - (gap || 1), this.max)\n : this.max\n );\n }\n\n isInRange(val) {\n return val >= this.min && val <= this.max;\n }\n\n replaceValue(val) {\n if (this.isInRange(val)) {\n this.data = val.toString().padStart(this.length, 0).split('');\n }\n }\n\n setMin(val) {\n this.min = Number(val);\n }\n\n setMax(val) {\n this.max = Number(val);\n }\n}\n","import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';\nimport {\n createStyleMixin,\n draggableMixin,\n componentNameValidationMixin,\n portalMixin,\n} from '../../mixins';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { compose } from '../../helpers';\nimport {\n isValidEpoch,\n formatEpoch,\n isNumber,\n getCurrentTime,\n overrideConstructedStylesheet,\n dateToEpoch,\n} from './helpers';\nimport { formats } from './formats';\nimport { calendarIcon } from './icons';\nimport {\n counterConfig,\n DEFAULT_FORMAT,\n DIVIDER,\n MOBILE_DEVICE_INTERACTION_TIMEOUT_MS,\n NATIVE_FORMAT,\n valRange,\n} from './consts';\nimport { DateCounter } from './DateCounterClass';\nimport { TextFieldClass } from '../descope-text-field/TextFieldClass';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\nimport { parseDateString } from './helpers';\nimport { newDate } from './date-utils';\n\nexport const componentName = getComponentName('date-field');\n\n// we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will\n// be able to process this component's overlay. The whole process needs refactoring as soon as possible.\nconst BASE_SELECTOR = 'vaadin-popover';\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: BASE_SELECTOR });\n\nconst dateFieldAttrs = [\n 'format',\n 'opened',\n 'initial-value',\n 'readonly',\n 'disable-calendar',\n 'utc-time',\n];\nconst calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];\nconst observedAttrs = [...dateFieldAttrs, ...calendarAttrs];\n\nclass RawDateFieldClass extends BaseInputClass {\n epoch = '';\n\n format = DEFAULT_FORMAT;\n\n selectedCounterIdx = 0;\n\n updateCountersDisplay() {\n this.inputElement.value = this.countersValue;\n }\n\n updateValue() {\n if (this.isCountersOutOfRange) {\n this.resetEpoch();\n } else {\n const date = formats[this.format].getDate(this.inputElement.value);\n this.updateEpoch(dateToEpoch(date, this.isUtcTime));\n }\n }\n\n onDateCounterChange = () => {\n this.updateCountersDisplay();\n this.updateValue();\n // update validity\n this.#dispatchInput();\n };\n\n updateEpoch(epoch) {\n this.epoch = dateToEpoch(epoch, this.isUtcTime);\n }\n\n dateCounters = [\n new DateCounter(counterConfig.MONTH, this.onDateCounterChange.bind(this)),\n new DateCounter(counterConfig.DAY, this.onDateCounterChange.bind(this)),\n new DateCounter(counterConfig.YEAR, this.onDateCounterChange.bind(this)),\n ];\n\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], observedAttrs);\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n \n \n ${calendarIcon}\n \n \n
\n `;\n\n injectStyle(\n `\n :host {\n display: inline-block;\n box-sizing: border-box;\n user-select: none;\n max-width: 100%;\n }\n\n :host ::slotted {\n padding: 0;\n }\n\n .toggle-calendar {\n cursor: pointer;\n display: flex;\n align-self: center;\n z-index: 1;\n height: 100%;\n align-items: center;\n }\n\n :host([readonly=\"true\"]) .toggle-calendar {\n pointer-events: none;\n }\n\n .hidden {\n display: none;\n }\n `,\n this\n );\n\n this.inputElement = this.shadowRoot.querySelector('descope-text-field');\n this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');\n }\n\n get validationTarget() {\n return this.inputElement;\n }\n\n get opened() {\n return this.getAttribute('opened') === 'true';\n }\n\n // returns the input's value as a epoch\n get displayValueEpoch() {\n const date = formats[this.format].getDate(this.inputElement.value);\n\n if (!isValidEpoch(date?.getTime())) {\n return null;\n }\n\n return date.getTime();\n }\n\n get sortedCounters() {\n return this.format\n .split(DIVIDER)\n .map((placeholder) => this.dateCounters.find((dc) => dc.placeholder === placeholder));\n }\n\n get activeCounter() {\n return this.sortedCounters[this.selectedCounterIdx];\n }\n\n get countersValue() {\n return this.sortedCounters.map((dc) => dc.stringValue).join(DIVIDER);\n }\n\n get overlay() {\n return this.baseElement.shadowRoot?.querySelector('vaadin-popover-overlay');\n }\n\n get backdrop() {\n return this.overlay.shadowRoot?.querySelector('#backdrop');\n }\n\n get calendar() {\n return this.overlay?.querySelector('descope-calendar');\n }\n\n get isRTL() {\n const computedStyleDirection = getComputedStyle(this.baseElement).getPropertyValue('direction');\n\n if (computedStyleDirection) {\n return computedStyleDirection === 'rtl';\n }\n\n // Fallback: If for some reason computed style was not calculated in time, fallback to check on attribute\n return this.getAttribute('st-host-direction') === 'rtl';\n }\n\n get value() {\n if (this.isInvalidDate()) {\n return '';\n }\n return this.epoch;\n }\n\n set value(val) {\n let value = parseInt(val, 10);\n if (!Number.isNaN(value)) {\n this.updateEpoch(value);\n this.updateDateCounters(new Date(value));\n } else {\n this.resetEpoch();\n this.resetDateCounters();\n this.clearInputEle();\n }\n }\n\n resetEpoch() {\n this.epoch = '';\n }\n\n get isCountersEmpty() {\n return this.dateCounters.every((dc) => dc.isEmpty);\n }\n\n get isCountersOutOfRange() {\n return this.dateCounters.some((dc) => !dc.isInRange(dc.numberValue));\n }\n\n get disableCalendar() {\n return this.getAttribute('disable-calendar') === 'true';\n }\n\n get isUtcTime() {\n return this.getAttribute('utc-time') === 'true';\n }\n\n get isSelectAll() {\n const inputEle = this.inputElement.baseElement.inputElement;\n return inputEle.value.length === inputEle.selectionStart + inputEle.selectionEnd;\n }\n\n reportValidity() {\n this.inputElement.reportValidity();\n }\n\n #dispatchInput() {\n this.inputElement.baseElement.dispatchEvent(new Event('input', { bubbles: true }));\n }\n\n updateInputDisplay() {\n this.inputElement.value = formatEpoch(newDate(this.countersValue).getTime(), this.format);\n }\n\n init() {\n super.init?.();\n\n this.updateFormatPattern();\n this.initPopover();\n this.onDateCounterChange();\n this.initInputElement();\n\n setTimeout(() => {\n this.#overrideOverlaySettings();\n }, 0);\n }\n\n initInputElement() {\n this.inputElement.getValidity = this.getValidity.bind(this);\n this.inputElement.baseElement.checkValidity = this.checkValidity.bind(this);\n\n this.popoverToggleButton.addEventListener('click', this.onPopoverToggle.bind(this));\n\n this.inputElement.addEventListener('focus', this.onFocus.bind(this));\n this.inputElement.addEventListener('blur', this.onBlur.bind(this));\n this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));\n this.inputElement.addEventListener('keydown', this.handleKeyboard.bind(this));\n this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));\n this.inputElement.addEventListener('pointerdown', this.onPointerDown.bind(this));\n this.inputElement.addEventListener('paste', this.onPaste.bind(this));\n\n forwardAttrs(this, this.inputElement, {\n includeAttrs: [\n 'label',\n 'label-type',\n 'placeholder',\n 'disabled',\n 'readonly',\n 'bordered',\n 'required',\n 'full-width',\n 'st-host-direction',\n 'pattern',\n 'bordered',\n 'data-errormessage-value-missing',\n 'data-errormessage-pattern-mismatch',\n 'data-errormessage-range-underflow',\n 'data-errormessage-range-overflow',\n 'st-error-message-icon',\n 'st-error-message-icon-size',\n 'st-error-message-icon-padding',\n ],\n });\n }\n\n handleInput(e) {\n e.preventDefault();\n\n this.handleSelectAll();\n\n if (e.data && isNumber(e.data)) {\n this.parseDigits(e.data);\n this.updateCountersDisplay();\n } else if (e.inputType) {\n this.handleNavKeys(e);\n }\n }\n\n initPopover() {\n this.baseElement.trigger = ['click'];\n this.baseElement.withBackdrop = true;\n this.baseElement.renderer = this.#popoverRenderer.bind(this);\n\n // block popover events from focusing/blurring the text-field\n this.baseElement.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n });\n }\n\n handleSelectAll() {\n if (this.isSelectAll) {\n this.selectFirstCounter();\n }\n }\n\n #popoverPosStylesheet;\n\n #popoverRenderer(root) {\n // popoverRenderer should run only once, when the popover is first rendering.\n if (!root.firstChild) {\n this.overlay.positionTarget = this.shadowRoot.querySelector('.toggle-calendar');\n\n root.appendChild(this.#getPopoverContent());\n\n // override vaadin's constructed stylesheet which hides the host element\n overrideConstructedStylesheet(this.baseElement);\n\n this.backdrop.addEventListener('click', this.closePopover.bind(this));\n }\n\n // Hide overlay before adjusting position to prevent flickering\n root.style.setProperty('visibility', 'hidden');\n\n // Wait until overlay is ready\n setTimeout(() => {\n this.#adjustPopoverPosition(root);\n\n // Show adjusted overlay\n root.style.setProperty('visibility', 'visible');\n this.updateCalendarView(root);\n }, 100);\n }\n\n #adjustPopoverPosition() {\n const popover = this.shadowRoot.querySelector('vaadin-popover').shadowRoot;\n\n // Remove previously added stylesheets\n this.#popoverPosStylesheet?.remove();\n\n const windowRect = document.body.getBoundingClientRect();\n const inputRect = this.getBoundingClientRect();\n const calendarRect = this.calendar.getBoundingClientRect();\n\n const side = this.isRTL ? 'right' : 'left';\n const offset = inputRect[side] - calendarRect[side];\n const availableLeft = calendarRect.left;\n const availableRight = windowRect.width - calendarRect.right;\n\n let newOffset;\n if (offset > 0) {\n newOffset = Math.min(offset, availableRight);\n } else {\n newOffset = Math.min(Math.abs(offset), availableLeft) * -1;\n }\n\n injectStyle(\n `\n vaadin-popover-overlay::part(overlay) {\n transform: translateX(${newOffset}px);\n }\n `,\n popover\n );\n }\n\n #getPopoverContent() {\n const ele = document.createElement('span');\n\n ele.innerHTML = `\n \n No item...\n \n
\n\t`;\n\n injectStyle(\n `\n .wrapper {\n overflow: auto;\n display: grid;\n max-height: 100%;\n width: 100%;\n }\n\n :host {\n display: inline-flex;\n width: 100%;\n }\n slot[name=\"empty-state\"] {\n justify-content: center;\n align-items: center;\n display: flex;\n flex-grow: 1;\n }\n\n :host slot[name=\"empty-state\"] {\n display: none;\n }\n :host([empty]) slot[name=\"empty-state\"] {\n display: flex;\n }\n ::slotted(:not([slot])) {\n width: 100%;\n }\n `,\n this,\n );\n }\n\n get items() {\n return this.shadowRoot.querySelector('slot').assignedElements();\n }\n\n #handleEmptyState() {\n if (this.items.length === 0) {\n this.setAttribute('empty', 'true');\n } else {\n this.removeAttribute('empty');\n }\n }\n\n get variant() {\n return this.getAttribute('variant') || 'list';\n }\n\n #handleItemsVariant() {\n this.items.forEach((item) => {\n let listItem = item;\n if (listItem.localName !== ListItemClass.componentName) {\n listItem = item.querySelector(ListItemClass.componentName);\n }\n\n const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';\n listItem?.setAttribute('variant', listItemVariant);\n });\n }\n\n init() {\n super.init?.();\n\n // we want new items to get the size\n observeChildren(this, () => {\n this.#handleEmptyState();\n this.#handleItemsVariant();\n this.#handleReadOnly();\n });\n }\n\n get isReadOnly() {\n return this.getAttribute('readonly') === 'true';\n }\n\n #handleReadOnly() {\n this.items.forEach((item) => {\n if (this.isReadOnly) item.setAttribute('inert', '');\n else item.removeAttribute('inert');\n });\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n\n if (newValue === oldValue) return;\n\n if (name === 'variant') {\n this.#handleItemsVariant();\n } else if (name === 'readonly') {\n this.#handleReadOnly();\n }\n }\n}\n\nexport const ListClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n maxHeight: { selector: () => ':host' },\n minHeight: {},\n verticalPadding: [\n { property: 'padding-top' },\n { property: 'padding-bottom' },\n ],\n horizontalPadding: [\n { property: 'padding-left' },\n { property: 'padding-right' },\n ],\n hostDirection: { selector: () => ':host', property: 'direction' },\n fontFamily: {},\n gap: {},\n\n backgroundColor: {},\n borderRadius: {},\n borderColor: {},\n borderStyle: {},\n borderWidth: {},\n\n boxShadow: {},\n gridTemplateColumns: {},\n maxItemsWidth: {\n selector: () => '::slotted(:not([slot]))',\n property: 'max-width',\n },\n minItemsWidth: {\n selector: () => '::slotted(:not([slot]))',\n property: 'min-width',\n },\n itemsHorizontalAlign: {\n selector: () => '::slotted(*)',\n property: 'justify-self',\n },\n emptyStateTextColor: {\n selector: () => 'slot[name=\"empty-state\"]',\n property: 'color',\n },\n emptyStateTextFontFamily: {\n selector: () => 'slot[name=\"empty-state\"]',\n property: 'font-family',\n },\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawList);\n","import { compose } from '@descope-ui/common/utils';\nimport { getComponentName, limitAbbreviation } from '@descope-ui/common/components-helpers';\nimport {\n createStyleMixin,\n draggableMixin,\n createProxy,\n componentNameValidationMixin,\n createDynamicDataMixin,\n} from '@descope-ui/common/components-mixins';\nimport { TextClass } from '@descope-ui/descope-text/class';\nimport { ListClass } from '@descope-ui/descope-list/class';\nimport { ListItemClass } from '@descope-ui/descope-list-item/class';\n\nexport const componentName = getComponentName('apps-list');\n\nconst itemRenderer = ({ name, icon, url }, _, ref) => `\n \n \n \n
\n ${JSON.stringify(item, null, 4)}`;\n\nconst createTemplate = (templateString) => {\n const template = document.createElement('template');\n template.innerHTML = templateString;\n\n return template;\n};\n\nconst getTemplateContent = (templateOrString) => {\n if (typeof templateOrString === 'string') {\n return createTemplate(templateOrString).content;\n }\n\n if (templateOrString instanceof HTMLTemplateElement) {\n return templateOrString.content;\n }\n\n // eslint-disable-next-line no-console\n console.error('Invalid template', templateOrString);\n return null;\n};\n\nexport const createDynamicDataMixin =\n ({\n itemRenderer = defaultItemRenderer,\n validateSchema = defaultValidateSchema,\n slotName,\n rerenderAttrsList = [],\n }) =>\n (superclass) =>\n class DynamicDataMixinClass extends superclass {\n #data = [];\n\n // eslint-disable-next-line class-methods-use-this\n #validateSchema(data) {\n if (!validateSchema) return true;\n\n const validation = validateSchema(data);\n if (validation === true) return true;\n\n // eslint-disable-next-line no-console\n console.error('Data schema validation failed', validation || '');\n\n return false;\n }\n\n #removeOldItems() {\n const selector = slotName ? `*[slot=\"${slotName}\"]` : ':not([slot])';\n this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());\n }\n\n #renderItems() {\n this.#removeOldItems();\n this.data.forEach((item, index) => {\n const content = getTemplateContent(itemRenderer(item, index, this));\n this.baseElement.appendChild(content?.cloneNode(true));\n });\n }\n\n set data(value) {\n if (this.#validateSchema(value)) {\n this.#data = value;\n this.#renderItems();\n }\n }\n\n get data() {\n return this.#data;\n }\n\n init() {\n super.init?.();\n\n observeAttributes(\n this,\n (attrs) => {\n if (attrs.includes('data')) this.#handleDataAttr();\n else this.#renderItems();\n },\n { includeAttrs: [...rerenderAttrsList, 'data'] }\n );\n }\n\n #handleDataAttr() {\n const dataAttr = this.getAttribute('data');\n\n if (!dataAttr) return;\n\n try {\n this.data = JSON.parse(dataAttr);\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn('Invalid JSON data', dataAttr);\n }\n }\n };\n","import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';\nimport { createDynamicDataMixin } from '../../mixins/createDynamicDataMixin';\nimport { CheckboxClass } from '../boolean-fields/descope-checkbox/CheckboxClass';\nimport { SwitchToggleClass } from '../boolean-fields/descope-switch-toggle/SwitchToggleClass';\n\nexport const componentName = getComponentName('scopes-list');\nconst variants = ['checkbox', 'switch'];\n\nconst itemRenderer = ({ id, desc, required = false }, _, ref) => {\n const ComponentClass = ref.variant === 'checkbox' ? CheckboxClass : SwitchToggleClass;\n\n return `\n <${ComponentClass.componentName}\n bordered=\"true\"\n size=${ref.size}\n label=\"${desc}\"\n data-id=\"${id}\"\n readonly=\"${required || ref.isReadOnly}\"\n required=\"${required}\"\n checked=\"true\"\n >\n`;\n};\n\nclass RawScopesList extends createBaseClass({ componentName, baseSelector: 'div' }) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n\t\t`;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n }\n\n div {\n display: flex;\n flex-direction: column;\n }\n `,\n this\n );\n }\n\n get isReadOnly() {\n return this.getAttribute('readonly') === 'true';\n }\n\n get size() {\n return this.getAttribute('size') || 'sm';\n }\n\n #getChildNodes() {\n return Array.from(this.shadowRoot.querySelector('div').children);\n }\n\n // eslint-disable-next-line class-methods-use-this\n reportValidity() {\n this.checkValidity();\n }\n\n // eslint-disable-next-line class-methods-use-this\n checkValidity() {\n return this.data.every((item) => !item.required || this.value.includes(item.id));\n }\n\n get value() {\n return this.#getChildNodes()\n .filter((node) => node.checked)\n .map((node) => node.getAttribute('data-id'));\n }\n\n set value(val = []) {\n this.#getChildNodes().forEach((node) => {\n // eslint-disable-next-line no-param-reassign\n node.checked = val.includes(node.getAttribute('data-id'));\n });\n }\n\n get variant() {\n const variant = this.getAttribute('variant');\n\n return variants.includes(variant) ? variant : variants[0];\n }\n}\n\nexport const ScopesListClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostDirection: [\n { selector: () => ':host', property: 'direction' },\n {\n selector: () => CheckboxClass.componentName,\n property: CheckboxClass.cssVarList.hostDirection,\n },\n {\n selector: () => SwitchToggleClass.componentName,\n property: SwitchToggleClass.cssVarList.hostDirection,\n },\n ],\n gap: { selector: () => 'div', property: 'gap' },\n requiredInputBorderColor: [\n {\n selector: `${CheckboxClass.componentName}[required=\"true\"]`,\n property: CheckboxClass.cssVarList.inputBorderColor,\n },\n {\n selector: `${SwitchToggleClass.componentName}[required=\"true\"]`,\n property: SwitchToggleClass.cssVarList.inputBorderColor,\n },\n ],\n requiredInputValueTextColor: [\n {\n selector: `${CheckboxClass.componentName}[required=\"true\"]`,\n property: CheckboxClass.cssVarList.inputValueTextColor,\n },\n {\n selector: `${SwitchToggleClass.componentName}[required=\"true\"]`,\n property: SwitchToggleClass.cssVarList.knobColor,\n },\n ],\n },\n }),\n createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size', 'variant'] }),\n draggableMixin,\n componentNameValidationMixin\n)(RawScopesList);\n","import { ScopesListClass } from '../../components/descope-scopes-list/ScopesListClass';\nimport theme, { vars as inputVars } from './inputWrapper';\n\nexport const vars = ScopesListClass.cssVarList;\n\nconst scopesList = {\n [vars.requiredInputBorderColor]: theme._disabled[inputVars.borderColor],\n [vars.requiredInputValueTextColor]: theme._disabled[inputVars.valueTextColor],\n [vars.hostWidth]: '280px',\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default scopesList;\n","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K\"","import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { LogoClass } from '../descope-logo/LogoClass';\nimport arrowsImg from './arrows.svg';\n\nexport const componentName = getComponentName('third-party-app-logo');\nclass RawThirdPartyAppLogoClass extends createBaseClass({\n componentName,\n baseSelector: '.wrapper',\n}) {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t\t\n
\n\t\t\t`;\n\n injectStyle(\n `\n :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host([draggable=\"true\"]) > div {\n\t\t\t\t\tpointer-events: none\n\t\t\t\t}\n\n .wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: max-content;\n }\n\n\t\t\t\t.third-party-app-logo {\n flex-shrink: 0;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\tmax-height: 100%;\n\t\t\t\t\tobject-fit: contain;\n\t\t\t\t}\n\n .company-logo-wrapper, .third-party-app-logo-wrapper {\n flex-shrink: 0;\n display: inline-flex;\n }\n\n .company-logo-wrapper {\n justify-content: flex-end;\n }\n\n .third-party-app-logo-wrapper {\n justify-content: flex-start;\n }\n\n .arrows {\n flex-shrink: 0;\n display: flex;\n }\n `,\n this\n );\n }\n}\n\nconst companyLogoWrapper = '>.company-logo-wrapper';\nconst thirdPartyAppLogoWrapper = '>.third-party-app-logo-wrapper';\n\nexport const ThirdPartyAppLogoClass = compose(\n createStyleMixin({\n mappings: {\n logoMaxHeight: [\n { selector: companyLogoWrapper, property: 'height' },\n { selector: thirdPartyAppLogoWrapper, property: 'height' },\n ],\n logoMaxWidth: [\n { selector: companyLogoWrapper, property: 'max-width' },\n { selector: thirdPartyAppLogoWrapper, property: 'max-width' },\n ],\n thirdPartyAppLogo: {\n selector: () => '.third-party-app-logo',\n property: 'content',\n fallback: {},\n },\n companyLogoFallback: {\n selector: LogoClass.componentName,\n property: LogoClass.cssVarList.fallbackUrl,\n },\n gap: {},\n arrowsColor: { selector: IconClass.componentName, property: IconClass.cssVarList.fill },\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawThirdPartyAppLogoClass);\n","import { ThirdPartyAppLogoClass } from '../../components/descope-third-party-app-logo/ThirdPartyAppLogoClass';\nimport { getThemeRefs } from '../../helpers/themeHelpers';\nimport globals from '../globals';\n\nconst globalRefs = getThemeRefs(globals);\nconst vars = ThirdPartyAppLogoClass.cssVarList;\n\nconst thirdPartyAppLogo = {\n [vars.gap]: globalRefs.spacing.lg,\n [vars.arrowsColor]: globalRefs.colors.surface.dark,\n [vars.thirdPartyAppLogoFallback]:\n 'url(https://imgs.descope.com/components/third-party-app-logo-placeholder.svg)',\n [vars.companyLogoFallback]:\n 'url(https://imgs.descope.com/components/project-logo-placeholder.svg)',\n size: {\n xs: {\n [vars.logoMaxHeight]: '30px',\n [vars.logoMaxWidth]: '120px',\n },\n sm: {\n [vars.logoMaxHeight]: '40px',\n [vars.logoMaxWidth]: '160px',\n },\n md: {\n [vars.logoMaxHeight]: '48px',\n [vars.logoMaxWidth]: '200px',\n },\n lg: {\n [vars.logoMaxHeight]: '60px',\n [vars.logoMaxWidth]: '240px',\n },\n },\n};\n\nexport default thirdPartyAppLogo;\nexport { vars };\n","import { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName, observeAttributes } from '../../helpers/componentHelpers';\nimport { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport { TextFieldClass } from '../descope-text-field/TextFieldClass';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('security-questions-setup');\n\nconst attrsToSync = [\n 'full-width',\n 'readonly',\n 'size',\n 'label-type',\n 'question-label',\n 'question-placeholder',\n 'question-data-errormessage-value-missing',\n 'answer-label',\n 'answer-placeholder',\n 'answer-data-errormessage-value-missing',\n 'st-error-message-icon',\n 'st-error-message-icon-size',\n 'st-error-message-icon-padding',\n];\n\nconst attrsToReRender = ['count', 'questions'];\nclass RawSecurityQuestionsSetup extends createBaseClass({ componentName, baseSelector: 'div' }) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n\t\t`;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n }\n\n div {\n display: flex;\n flex-direction: column;\n }\n `,\n this\n );\n }\n\n get count() {\n return Number(this.getAttribute('count')) || 0;\n }\n\n #renderQuestions() {\n const res = Array.from({ length: this.count }).map(\n (_, index) =>\n // \n `\n \n \n
\n \n
\n \n
\n \n \n\n \n
\n `\n // \n );\n\n this.baseElement.innerHTML = res.join(\n '\n ${text}\n\n \n
\n `\n // \n );\n\n this.baseElement.innerHTML = res.join(\n '\n
\n\t\t`;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n box-sizing: border-box;\n padding: 0;\n gap: 0;\n }\n .wrapper {\n display: grid;\n width: 100%;\n }\n descope-email-field,\n descope-phone-field,\n descope-phone-input-box-field {\n grid-area: 1/1;\n width: 100%;\n height: 100%;\n }\n .hidden {\n visibility: hidden;\n }\n `,\n this\n );\n }\n\n get isExternalInput() {\n return this.getAttribute('external-input') === 'true';\n }\n\n get emailInputEle() {\n return this.isExternalInput ? this.emailInput.externalInput : this.emailInput.inputElement;\n }\n\n get phoneVariant() {\n const isInputBox = this.getAttribute('phone-variant') === 'inputBox';\n return isInputBox ? this.phoneInputBoxInput : this.phoneCountryCodeInput;\n }\n\n get defaultCode() {\n const firstItem = this.phoneCountryCodeInput.countryCodes?.[0] || '';\n return this.getAttribute('default-code') || firstItem;\n }\n\n get activeInputEle() {\n if (this.activeInput === this.emailInput) {\n return this.emailInputEle;\n }\n return this.phoneVariant.phoneNumberInputEle;\n }\n\n get value() {\n return this.activeInput?.value || '';\n }\n\n set value(val) {\n this.handleActiveInput(val);\n this.activeInput.value = val;\n }\n\n async init() {\n super.init?.();\n\n this.initInputs();\n this.updateAttrs();\n this.toggleInputVisibility();\n\n await this.waitForInputs();\n\n this.initInputEles();\n this.overrideEmailInputType();\n this.overrideEmailSetAttribute();\n }\n\n waitForInputs() {\n return new Promise((resolve) => {\n const check = setInterval(() => {\n if (this.emailInputEle) {\n clearInterval(check);\n resolve();\n }\n });\n });\n }\n\n initInputs() {\n this.emailInput = this.shadowRoot.querySelector(EMAIL_FIELD);\n this.phoneCountryCodeInput = this.shadowRoot.querySelector(PHONE_FIELD);\n this.phoneInputBoxInput = this.shadowRoot.querySelector(PHONE_INPUT_BOX_FIELD);\n\n this.inputs = [this.emailInput, this.phoneCountryCodeInput, this.phoneInputBoxInput];\n\n this.activeInput = this.emailInput;\n }\n\n // we need to listen on the inner `input` element itself, otherwise we don't always get an `input` event\n initInputEles() {\n const inputEles = [\n this.emailInputEle,\n this.phoneCountryCodeInput.phoneNumberInputEle,\n this.phoneInputBoxInput.phoneNumberInputEle,\n ];\n\n inputEles.forEach((ele) => {\n ele.addEventListener('input', this.onValueChange.bind(this));\n });\n }\n\n overrideEmailInputType() {\n this.emailInputEle.addEventListener('focus', () => {\n this.emailInputEle.setAttribute('type', 'text');\n });\n this.emailInputEle.addEventListener('blur', () => {\n setTimeout(() => {\n this.emailInputEle.setAttribute('type', 'email');\n });\n });\n }\n\n // We want to prevent Vaadin from changing the input type to `email`\n // otherwise, we cannot get the selectionStart from the input.\n overrideEmailSetAttribute() {\n const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);\n this.emailInputEle.setAttribute = (name, value) => {\n if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {\n return origEmailSetAttr(name, value);\n }\n return false;\n };\n }\n\n updateAttrs() {\n forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });\n\n forwardAttrs(this, this.phoneCountryCodeInput, {\n includeAttrs: attrs.phone.countryCode,\n mapAttrs: attrMap.phone,\n });\n\n forwardAttrs(this, this.phoneInputBoxInput, {\n includeAttrs: attrs.phone.inputBox,\n mapAttrs: attrMap.phone,\n });\n\n this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));\n\n setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));\n }\n\n onValueChange() {\n this.#selectionStart = this.activeInputEle.selectionStart;\n this.handleActiveInput(this.activeInput.value);\n }\n\n handleActiveInput(val) {\n const expectedActiveInput = isNumericValue(val) ? this.phoneVariant : this.emailInput;\n\n if (this.activeInput !== expectedActiveInput) {\n this.setActiveInput(expectedActiveInput);\n }\n }\n\n setActiveInput(expectedActiveInput) {\n const val = this.activeInput.value;\n this.activeInput = expectedActiveInput;\n this.setActiveInputValue(val);\n if (this.#isReportedValidity) this.activeInput.reportValidity();\n this.setActiveInputSelectionStart();\n this.toggleInputVisibility();\n }\n\n setActiveInputSelectionStart() {\n setTimeout(() => {\n this.activeInputEle.focus();\n this.activeInputEle.setSelectionRange?.(this.#selectionStart, this.#selectionStart);\n });\n }\n\n setActiveInputValue(val) {\n const sanitizedVal = sanitizeValue(val);\n const isPhoneField = this.activeInput.localName === PHONE_FIELD;\n const value = isPhoneField\n ? `${this.phoneCountryCodeInput.countryCodeItems}-${sanitizedVal}`\n : sanitizedVal;\n this.activeInput.value = value;\n }\n\n toggleInputVisibility() {\n this.inputs.forEach((input) => {\n input !== this.activeInput ? input.classList.add('hidden') : input.classList.remove('hidden');\n });\n }\n\n reportValidity() {\n this.#isReportedValidity = true;\n\n const ele = this.activeInputEle;\n\n // On reportValidity we want to set the caret at the end of the input value.\n // Since checkValidity triggers `focus` on the input, it sets the caret at the start of the input,\n // regardless the existing value.\n const origInputType = ele.type;\n ele.setAttribute('type', 'text');\n setTimeout(() => {\n ele.setSelectionRange?.(ele.value.length, ele.value.length);\n ele.setAttribute('type', origInputType);\n });\n\n return this.activeInput.reportValidity();\n }\n\n checkValidity() {\n return this.activeInput.checkValidity();\n }\n}\n\nexport const HybridFieldClass = compose(\n createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostDirection: [\n { selector: () => 'descope-email-field', property: 'direction' },\n { selector: () => 'descope-phone-field', property: 'direction' },\n { selector: () => 'descope-phone-input-box-field', property: 'direction' },\n ],\n errorMessageIcon: [\n {\n selector: () => PhoneFieldClass.componentName,\n property: PhoneFieldClass.cssVarList.errorMessageIcon,\n },\n {\n selector: () => PhoneFieldInputBoxClass.componentName,\n property: PhoneFieldInputBoxClass.cssVarList.errorMessageIcon,\n },\n ],\n errorMessageIconSize: [\n {\n selector: () => PhoneFieldClass.componentName,\n property: PhoneFieldClass.cssVarList.errorMessageIconSize,\n },\n {\n selector: () => PhoneFieldInputBoxClass.componentName,\n property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconSize,\n },\n ],\n errorMessageIconPadding: [\n {\n selector: () => PhoneFieldClass.componentName,\n property: PhoneFieldClass.cssVarList.errorMessageIconPadding,\n },\n {\n selector: () => PhoneFieldInputBoxClass.componentName,\n property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPadding,\n },\n ],\n errorMessageIconRepeat: [\n {\n selector: () => PhoneFieldClass.componentName,\n property: PhoneFieldClass.cssVarList.errorMessageIconRepeat,\n },\n {\n selector: () => PhoneFieldInputBoxClass.componentName,\n property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconRepeat,\n },\n ],\n errorMessageIconPosition: [\n {\n selector: () => PhoneFieldClass.componentName,\n property: PhoneFieldClass.cssVarList.errorMessageIconPosition,\n },\n {\n selector: () => PhoneFieldInputBoxClass.componentName,\n property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,\n },\n ],\n errorMessageFontSize: [\n {\n selector: () => PhoneFieldClass.componentName,\n property: PhoneFieldClass.cssVarList.errorMessageFontSize,\n },\n {\n selector: () => PhoneFieldInputBoxClass.componentName,\n property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontSize,\n },\n ],\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawHybridField);\n","import { HybridFieldClass } from '../../components/descope-hybrid-field/HybridFieldClass';\nimport { refs } from './inputWrapper';\n\nconst vars = HybridFieldClass.cssVarList;\n\nconst hybridField = {\n [vars.hostDirection]: refs.direction,\n\n // error message icon\n [vars.errorMessageIcon]: refs.errorMessageIcon,\n [vars.errorMessageIconSize]: refs.errorMessageIconSize,\n [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,\n [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,\n [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,\n [vars.errorMessageFontSize]: refs.errorMessageFontSize,\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default hybridField;\nexport { vars };\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';\nimport { injectStyle, observeChildren, syncAttrs } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('alert');\n\nclass RawAlert extends createBaseClass({ componentName, baseSelector: ':host > div' }) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n \n
\n `;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n }\n :host > div {\n display: flex;\n width: 100%;\n }\n :host([empty=\"true\"]) {\n display: none;\n }\n .icon {\n flex-shrink: 0;\n }\n .content {\n display: flex;\n flex-wrap: wrap;\n white-space: normal;\n overflow-wrap: break-word;\n }\n `,\n this\n );\n }\n\n init() {\n super.init?.();\n\n this.slotEle = this.shadowRoot.querySelector('slot');\n this.textComp = this.shadowRoot.querySelector('descope-enriched-text');\n\n this.slotEle.addEventListener('slotchange', this.handleSlotChange.bind(this));\n\n syncAttrs(this.textComp, this, { includeAttrs: ['empty'] });\n\n observeChildren(this, this.handleChildrenChange.bind(this));\n\n forwardAttrs(this, this.textComp, {\n includeAttrs: ['variant', 'full-width', 'link-target-blank'],\n });\n }\n\n handleChildrenChange() {\n this.textComp.textContent = this.textContent;\n }\n\n handleSlotChange() {\n const assignedNodes = this.slotEle.assignedNodes({ flatten: true });\n if (!assignedNodes.length) return;\n this.textComp.textContent = assignedNodes[0]?.textContent || '';\n }\n}\n\nconst { icon } = {\n icon: { selector: () => '.icon' },\n};\n\nexport const AlertClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostDirection: { selector: () => ':host', property: 'direction' },\n textColor: {\n selector: EnrichedTextClass.componentName,\n property: EnrichedTextClass.cssVarList.textColor,\n },\n backgroundColor: {},\n borderColor: {},\n borderWidth: {},\n borderStyle: {},\n borderRadius: {},\n fontSize: [\n {},\n {\n selector: EnrichedTextClass.componentName,\n property: EnrichedTextClass.cssVarList.fontSize,\n },\n ],\n gap: {},\n horizontalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],\n verticalPadding: [{ property: 'padding-right' }, { property: 'padding-left' }],\n alignItems: {},\n justifyContent: [\n {},\n {\n selector: EnrichedTextClass.componentName,\n property: EnrichedTextClass.cssVarList.textAlign,\n },\n ],\n icon: [\n { ...icon, property: 'content' },\n { ...icon, property: 'display', fallback: 'none' },\n ],\n iconSize: [\n { ...icon, property: 'width' },\n { ...icon, property: 'height' },\n ],\n },\n }),\n createStyleMixin({ componentNameOverride: getComponentName('enriched-text') }),\n createStyleMixin({ componentNameOverride: getComponentName('text') }),\n draggableMixin,\n componentNameValidationMixin\n)(RawAlert);\n","import globals from '../globals';\nimport { getThemeRefs, useVar } from '../../helpers/themeHelpers';\nimport { AlertClass } from '../../components/descope-alert/AlertClass';\nimport { vars as textCompVars } from '@descope-ui/descope-text/theme';\n\nconst globalRefs = getThemeRefs(globals);\nconst vars = AlertClass.cssVarList;\n\nconst alert = {\n [vars.hostDirection]: globalRefs.direction,\n [vars.backgroundColor]: 'transparent',\n [vars.iconSize]: '1.35em',\n [vars.alignItems]: 'center',\n [vars.borderRadius]: globalRefs.radius.md,\n [vars.horizontalPadding]: '0',\n [vars.verticalPadding]: '0',\n [vars.gap]: `0.5em`,\n [vars.fontSize]: useVar(textCompVars.fontSize),\n\n mode: {\n error: {\n // Notice: If icon is empty, we need to remove it from the theme, to prevent it from rendering minimal layout\n // [vars.icon]: `url(${icon})`,\n [vars.textColor]: globalRefs.colors.error.main,\n _bordered: {\n [vars.borderColor]: globalRefs.colors.error.main,\n },\n },\n success: {\n // Notice: If icon is empty, we need to remove it from the theme, to prevent it from rendering minimal layout\n // [vars.icon]: '',\n [vars.textColor]: globalRefs.colors.success.main,\n _bordered: {\n [vars.borderColor]: globalRefs.colors.success.main,\n },\n },\n },\n\n spacing: {\n xs: {\n [vars.horizontalPadding]: globalRefs.spacing.xs,\n [vars.verticalPadding]: globalRefs.spacing.xs,\n },\n sm: {\n [vars.horizontalPadding]: globalRefs.spacing.sm,\n [vars.verticalPadding]: globalRefs.spacing.sm,\n },\n md: {\n [vars.horizontalPadding]: globalRefs.spacing.md,\n [vars.verticalPadding]: globalRefs.spacing.md,\n },\n lg: {\n [vars.horizontalPadding]: globalRefs.spacing.lg,\n [vars.verticalPadding]: globalRefs.spacing.lg,\n },\n xl: {\n [vars.horizontalPadding]: globalRefs.spacing.xl,\n [vars.verticalPadding]: globalRefs.spacing.xl,\n },\n },\n\n textAlign: {\n left: {\n [vars.justifyContent]: 'left',\n },\n center: {\n [vars.justifyContent]: 'center',\n },\n right: {\n [vars.justifyContent]: 'right',\n },\n },\n\n _bordered: {\n [vars.borderWidth]: globalRefs.border.xs,\n [vars.borderColor]: 'transparent',\n [vars.borderStyle]: 'solid',\n [vars.borderWidth]: globalRefs.border.xs,\n [vars.borderRadius]: globalRefs.radius.sm,\n },\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default alert;\nexport { vars };\n","import { injectStyle, observeChildren } from '@descope-ui/common/components-helpers';\nimport { draggableMixin, createStyleMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseInputClass } from '../../baseClasses/createBaseInputClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\n\nexport const componentName = getComponentName('hcaptcha');\n\nconst observedAttributes = ['enabled', 'site-key'];\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div' });\nclass RawHcaptcha extends BaseInputClass {\n static get observedAttributes() {\n return observedAttributes.concat(BaseInputClass.observedAttributes || []);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n if (oldValue !== newValue) {\n if (attrName === 'enabled') {\n this.toggleCaptchaEles(newValue === 'true');\n }\n }\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n \n \n
\n \n \n \n ![\"hcaptcha\"/](\"https://imgs.descope.com/connectors/templates/hcaptcha/hcaptcha-big.png\")
\n
\n \n \n
\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n }\n\n get value() {\n return this.comboBox.value;\n }\n\n set value(val) {\n if (!this.allowCustomValue) {\n this.comboBox.data = [{ label: val, value: val }];\n setTimeout(() => {\n this.comboBox.value = val;\n });\n } else {\n this.comboBox.value = val;\n }\n }\n\n get defaultValue() {\n return this.getAttribute('default-value');\n }\n\n async #autoCompleteSearch(value) {\n const { results, error } = await this.fetchResults(value);\n if (error) {\n return { error };\n }\n return {\n results,\n };\n }\n\n // eslint-disable-next-line class-methods-use-this\n #itemRenderer(displayName, value, label, disabled) {\n return `${\n displayName || label\n }`;\n }\n\n #overrideComboBoxRenderers() {\n this.comboBox.renderer = (root, _, model) => {\n if (model.item.getAttribute('disabled') === 'true') {\n root.setAttribute('disabled', 'true');\n } else {\n root.removeAttribute('disabled');\n }\n // eslint-disable-next-line no-param-reassign\n root.innerHTML = model.item.outerHTML;\n };\n\n this.comboBox.renderItem = ({ displayName, value, label, disabled }) =>\n this.#itemRenderer(displayName, value, label, disabled);\n }\n\n focus() {\n this.comboBox.focus();\n }\n\n init() {\n // This event listener needs to be placed before the super.init() call\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.comboBox.focus();\n });\n\n super.init?.();\n this.#initComboBox();\n // This is required since when we remove the invalid attribute from the internal mappings field,\n // we want to reflect the change in the parent component\n syncAttrs(this, this.comboBox, { includeAttrs: ['invalid'] });\n }\n\n #initComboBox() {\n this.debouncedSearch = asyncDebounce(async (value) => {\n try {\n const { results, error } = await this.#autoCompleteSearch(value);\n return { results, error, value };\n } catch (error) {\n return { error, value };\n }\n }, DEBOUNCE_SEARCH_DELAY);\n\n forwardAttrs(this, this.comboBox, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'label',\n 'label-type',\n 'placeholder',\n 'disabled',\n 'readonly',\n 'required',\n 'full-width',\n 'helper-text',\n 'invalid',\n 'error-message',\n 'data-errormessage-value-missing',\n 'st-host-direction',\n 'allow-custom-value',\n 'st-error-message-icon',\n 'st-error-message-icon-size',\n 'st-error-message-icon-padding',\n ],\n });\n\n this.comboBox.addEventListener('filter-changed', this.onSearch.bind(this));\n this.#overrideComboBoxRenderers();\n }\n\n #getEmptyResultsData() {\n return [\n {\n label: this.noResultsFoundMessage,\n value: INVALID_OPTION_VALUE,\n disabled: true,\n },\n ];\n }\n\n #getErrorResultsData() {\n return [\n {\n label: this.errorFetchingResultsMessage,\n value: INVALID_OPTION_VALUE,\n disabled: true,\n },\n ];\n }\n\n async onSearch(e) {\n const searchValue = e.detail.value;\n if (!searchValue || searchValue.length < this.minSearchLength) {\n return;\n }\n this.comboBox.loading = true;\n this.comboBox.setAttribute('opened', 'true');\n const response = await this.debouncedSearch(searchValue);\n if (response && response.value === searchValue) {\n this.comboBox.loading = false;\n if (response.error) {\n this.comboBox.data = this.#getErrorResultsData();\n } else if (response.results?.length === 0) {\n this.comboBox.data = this.#getEmptyResultsData();\n } else {\n this.comboBox.data = response.results || [];\n }\n }\n }\n\n // eslint-disable-next-line class-methods-use-this,no-unused-vars\n fetchResults(value) {\n // eslint-disable-next-line no-console\n console.warn('fetchResults', 'needs to be implemented');\n return { results: [], error: undefined };\n }\n\n getValidity() {\n if (this.isRequired && !this.value) {\n return { valueMissing: true };\n }\n return { valid: true };\n }\n}\n\nexport default AutocompleteFieldInternal;\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport {\n forwardAttrs,\n getComponentName,\n syncAttrs,\n} from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport { componentName as descopeInternalComponentName } from './descope-autocomplete-field-internal/AutocompleteFieldInternal';\n\nexport const componentName = getComponentName('autocomplete-field');\n\nconst customMixin = (superclass) =>\n class AutocompleteFieldMixinClass extends superclass {\n get defaultValue() {\n return this.getAttribute('default-value');\n }\n\n setDefaultValue() {\n if (this.defaultValue) {\n setTimeout(() => {\n this.inputElement.value = this.defaultValue;\n });\n }\n }\n\n init() {\n super.init?.();\n const template = document.createElement('template');\n\n template.innerHTML = `\n <${descopeInternalComponentName}\n tabindex=\"-1\"\n >\n `;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(\n descopeInternalComponentName,\n );\n\n forwardAttrs(this, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'label',\n 'required',\n 'label-type',\n 'placeholder',\n 'full-width',\n 'allow-custom-value',\n 'min-search-length',\n 'no-results-message',\n 'error-fetching-results-message',\n 'data-errormessage-value-missing',\n 'invalid',\n 'error-message',\n 'readonly',\n 'disabled',\n 'st-host-direction',\n 'st-error-message-icon',\n 'st-error-message-icon-size',\n 'st-error-message-icon-padding',\n ],\n });\n\n // This is required since when we remove the invalid attribute from the internal mappings field,\n // we want to reflect the change in the parent component\n syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });\n this.inputElement.fetchResults = this.fetchResults;\n this.setDefaultValue();\n }\n\n set fetchResults(fetchResults) {\n this.inputElement.fetchResults = fetchResults;\n }\n };\n\nconst { host } = {\n host: { selector: () => ':host' },\n};\n\nexport const AutocompleteFieldClass = compose(\n createStyleMixin({\n componentNameOverride: getComponentName('input-wrapper'),\n }),\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostDirection: { ...host, property: 'direction' },\n fontSize: { ...host },\n checkmarkDisplay: {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.overlayCheckmarkDisplay,\n },\n itemPaddingInlineStart: {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.overlayItemPaddingInlineStart,\n },\n itemPaddingInlineEnd: {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.overlayItemPaddingInlineEnd,\n },\n selectedItemBackground: {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.overlaySelectedItemBackground,\n },\n selectedItemHoverBackground: {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.overlaySelectedItemHoverBackground,\n },\n selectedItemFocusBackground: {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.overlaySelectedItemFocusBackground,\n },\n itemHoverBackground: {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.overlayItemHoverBackground,\n },\n },\n }),\n draggableMixin,\n proxyInputMixin({\n proxyProps: ['value', 'selectionStart'],\n inputEvent: 'input',\n proxyParentValidation: true,\n }),\n componentNameValidationMixin,\n customMixin,\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-custom-field',\n style: () => `\n :host {\n display: inline-flex;\n max-width: 100%;\n direction: ltr;\n }\n vaadin-custom-field {\n line-height: unset;\n width: 100%;\n }\n\n descope-autocomplete-field-internal {\n display: inline-block;\n box-sizing: border-box;\n user-select: none;\n width: 100%;\n max-width: 100%;\n }\n\n descope-autocomplete-field-internal ::slotted {\n padding: 0;\n }\n `,\n excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],\n componentName,\n }),\n);\n","import globals from '@descope-ui/theme-globals';\nimport { AutocompleteFieldClass } from './component/AutocompleteFieldClass';\nimport { getThemeRefs } from '@descope-ui/common/theme-helpers';\nimport { refs } from '@descope-ui/theme-input-wrapper';\n\nconst vars = AutocompleteFieldClass.cssVarList;\nconst globalRefs = getThemeRefs(globals);\n\nconst autocompleteField = {\n [vars.hostWidth]: refs.width,\n [vars.hostDirection]: refs.direction,\n [vars.fontSize]: refs.fontSize,\n [vars.checkmarkDisplay]: 'none',\n [vars.itemPaddingInlineStart]: globalRefs.spacing.lg,\n [vars.itemPaddingInlineEnd]: globalRefs.spacing.lg,\n [vars.selectedItemBackground]: globalRefs.colors.primary.light,\n [vars.selectedItemHoverBackground]: globalRefs.colors.primary.light,\n [vars.selectedItemFocusBackground]: globalRefs.colors.primary.light,\n [vars.itemHoverBackground]: globalRefs.colors.primary.highlight,\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default autocompleteField;\nexport { vars };\n","export const initGoogleMapsLoader = (apiKey) => {\n if (window.google?.maps) {\n return;\n }\n\n /* eslint-disable */\n // prettier-ignore\n (g=>{var h,a,k,p=\"The Google Maps JavaScript API\",c=\"google\",l=\"importLibrary\",q=\"__ib__\",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=>\"_\"+t[0].toLowerCase()),g[k]);e.set(\"callback\",c+\".maps.\"+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+\" could not load.\"));a.nonce=m.querySelector(\"script[nonce]\")?.nonce||\"\";m.head.append(a)}));d[l]?console.warn(p+\" only loads once. Ignoring:\",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({\n key: apiKey,\n });\n /* eslint-enable */\n};\n","/* global google */\n\nimport {\n createBaseConnectorClass,\n CONNECTOR_ERRORS,\n} from '@descope-ui/common/base-classes';\nimport { initGoogleMapsLoader } from './googleScriptInit';\n\nexport class GoogleMapsConnector extends createBaseConnectorClass() {\n #autocompleteService = null;\n\n #initializationPromise = null;\n\n constructor(getAttribute) {\n super(getAttribute);\n // Start initialization but don't block constructor\n this.#initializationPromise = this.#initializeAutocompleteService();\n }\n\n // eslint-disable-next-line class-methods-use-this\n getRequiredParams() {\n return ['public-api-key'];\n }\n\n // eslint-disable-next-line class-methods-use-this\n getOptionalParams() {\n return [\n {\n key: 'includedPrimaryTypes',\n attribute: 'address-types',\n },\n {\n key: 'language',\n attribute: 'address-language',\n },\n {\n key: 'region',\n attribute: 'address-region',\n },\n ];\n }\n\n async #initializeAutocompleteService() {\n const apiKey = this.getAttribute('public-api-key');\n if (this.#autocompleteService || !apiKey) {\n return;\n }\n\n try {\n initGoogleMapsLoader(apiKey);\n\n const { AutocompleteSuggestion } =\n await google.maps.importLibrary('places');\n this.#autocompleteService = AutocompleteSuggestion;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(\n 'Failed to initialize Google Maps Autocomplete service:',\n error,\n );\n throw error;\n }\n }\n\n async _fetchResults(query) {\n if (!query?.trim()) {\n return { results: [] };\n }\n\n try {\n await this.#initializationPromise;\n\n const request = {\n input: query,\n };\n\n // Add optional parameters\n this.getOptionalParams().forEach(({ attribute, key, defaultValue }) => {\n const value = this.getAttribute(attribute) || defaultValue;\n if (value) {\n if (key === 'includedPrimaryTypes') {\n request[key] = value\n .split(',')\n .map((type) => type.trim())\n .filter(Boolean);\n } else {\n request[key] = value;\n }\n }\n });\n\n const { suggestions } =\n await this.#autocompleteService.fetchAutocompleteSuggestions(request);\n return this.#parseResponse(suggestions);\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error('Google Maps Places Autocomplete failed:', error);\n return { results: [], error: CONNECTOR_ERRORS.FETCH_RESULTS_ERROR };\n }\n }\n\n // eslint-disable-next-line class-methods-use-this\n #parseResponse(suggestions) {\n if (!suggestions?.length) {\n return { results: [] };\n }\n\n return {\n results: suggestions.map((suggestion) => {\n const prediction = suggestion.placePrediction;\n return {\n id: prediction.placeId,\n label: prediction.text.text,\n value: prediction.text.text,\n };\n }),\n };\n }\n}\n","import {\n createBaseConnectorClass,\n CONNECTOR_ERRORS,\n} from '@descope-ui/common/base-classes';\n\nconst RADAR_AUTOCOMPLETE_URL = 'https://api.radar.io/v1/search/autocomplete';\n\nexport class RadarConnector extends createBaseConnectorClass() {\n // eslint-disable-next-line class-methods-use-this\n getRequiredParams() {\n return ['public-api-key'];\n }\n\n // eslint-disable-next-line class-methods-use-this\n getOptionalParams() {\n return [\n {\n key: 'layers',\n attribute: 'address-types',\n },\n {\n key: 'limit',\n attribute: 'address-limit',\n },\n {\n key: 'lang',\n attribute: 'address-language',\n },\n {\n key: 'countryCode',\n attribute: 'address-region',\n },\n ];\n }\n\n async _fetchResults(query) {\n if (!query?.trim()) {\n return { results: [] };\n }\n\n const apiKey = this.getAttribute('public-api-key');\n const params = new URLSearchParams({\n query: query.trim(),\n });\n\n // Add optional parameters\n this.getOptionalParams().forEach(({ attribute, key, defaultValue }) => {\n const value = this.getAttribute(attribute) || defaultValue;\n if (value) {\n if (key === 'layers' || key === 'countryCode') {\n params.append(\n key,\n value\n .split(',')\n .map((type) => type.trim())\n .filter(Boolean)\n .join(','),\n );\n } else {\n params.append(key, value);\n }\n }\n });\n\n try {\n const response = await fetch(\n `${RADAR_AUTOCOMPLETE_URL}?${params.toString()}`,\n {\n headers: {\n Authorization: apiKey,\n },\n },\n );\n\n if (!response.ok) {\n throw new Error(`Radar API returned ${response.status}`);\n }\n\n const data = await response.json();\n return this.#parseResponse(data);\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error('Radar Places Autocomplete failed:', error);\n return { results: [], error: CONNECTOR_ERRORS.FETCH_RESULTS_ERROR };\n }\n }\n\n // eslint-disable-next-line class-methods-use-this\n #parseResponse(data) {\n if (!data?.addresses?.length) {\n return { results: [] };\n }\n return {\n results: data.addresses.map((address) => ({\n label: address.formattedAddress,\n value: address.formattedAddress,\n })),\n };\n }\n}\n","import { createBaseInputClass } from '@descope-ui/common/base-classes';\nimport {\n getComponentName,\n forwardAttrs,\n syncAttrs,\n} from '@descope-ui/common/components-helpers';\nimport { connectorMixin } from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport { GoogleMapsConnector, RadarConnector } from '../../connectors';\n\nexport const componentName = getComponentName('address-field-internal');\n\nconst GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';\nconst RADAR_CONNECTOR_TEMPLATE = 'radar';\n\nconst CONNECTOR_CLASSES = {\n [GOOGLE_MAPS_CONNECTOR_TEMPLATE]: GoogleMapsConnector,\n [RADAR_CONNECTOR_TEMPLATE]: RadarConnector,\n};\n\nconst BaseInputClass = createBaseInputClass({\n componentName,\n baseSelector: '',\n});\nconst initConnectorAttrs = ['public-api-key'];\nconst observedAttrs = [...initConnectorAttrs];\n\nclass RawAddressFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], observedAttrs);\n }\n\n get errorMsgValueMissing() {\n return (\n this.getAttribute('data-errormessage-value-missing') ||\n this.defaultErrorMsgValueMissing\n );\n }\n\n constructor() {\n super();\n\n this.innerHTML = `\n \n
\n `;\n\n this.autocompleteField = this.querySelector('descope-autocomplete-field');\n }\n\n get value() {\n return this.autocompleteField.value;\n }\n\n set value(val) {\n this.autocompleteField.value = val;\n }\n\n focus() {\n this.autocompleteField.focus();\n }\n\n init() {\n // This event listener needs to be placed before the super.init() call\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.autocompleteField.focus();\n });\n\n super.init?.();\n this.initAutocomplete();\n }\n\n initAutocomplete() {\n forwardAttrs(this, this.autocompleteField, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'label',\n 'label-type',\n 'placeholder',\n 'disabled',\n 'readonly',\n 'required',\n 'full-width',\n 'helper-text',\n 'error-message',\n 'default-value',\n 'data-errormessage-value-missing',\n 'st-host-direction',\n 'allow-custom-value',\n 'min-search-length',\n 'st-error-message-icon',\n 'st-error-message-icon-size',\n 'st-error-message-icon-padding',\n ],\n });\n // This is required since when we remove the invalid attribute from the autocomplete field,\n // we want to reflect the change in the address field component\n syncAttrs(this, this.autocompleteField, { includeAttrs: ['invalid'] });\n\n // Bind the connector fetch results fn to the autocomplete field\n this.autocompleteField.fetchResults = this.fetchConnectorResults.bind(this);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (initConnectorAttrs.includes(attrName)) {\n this.initializeConnector();\n }\n }\n }\n\n getValidity() {\n if (this.isRequired && !this.value) {\n return { valueMissing: true };\n }\n return { valid: true };\n }\n}\n\nexport const AddressFieldInternal = compose(\n connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),\n)(RawAddressFieldInternal);\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport {\n getComponentName,\n forwardAttrs,\n syncAttrs,\n} from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\nimport { componentName as descopeInternalComponentName } from './descope-address-field-internal/AddressFieldInternal';\n\nexport const componentName = getComponentName('address-field');\n\nconst customMixin = (superclass) =>\n class AddressFieldMixinClass extends superclass {\n get defaultValue() {\n return this.getAttribute('default-value');\n }\n\n setDefaultValue() {\n if (this.defaultValue) {\n setTimeout(() => {\n this.inputElement.value = this.defaultValue;\n });\n }\n }\n\n set connectorClasses(value) {\n this.inputElement.connectorClasses = value;\n }\n\n get connectorClasses() {\n return this.inputElement.connectorClasses;\n }\n\n init() {\n super.init?.();\n const template = document.createElement('template');\n\n template.innerHTML = `\n <${descopeInternalComponentName}\n tabindex=\"-1\"\n >\n `;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(\n descopeInternalComponentName,\n );\n\n forwardAttrs(this, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'label',\n 'required',\n 'label-type',\n 'placeholder',\n 'full-width',\n 'allow-custom-value',\n 'min-search-length',\n 'no-results-message',\n 'error-fetching-results-message',\n 'data-errormessage-value-missing',\n 'invalid',\n 'error-message',\n 'readonly',\n 'disabled',\n 'st-host-direction',\n 'st-error-message-icon',\n 'st-error-message-icon-size',\n 'st-error-message-icon-padding',\n 'connector-template',\n 'public-api-key',\n 'address-types',\n 'address-language',\n 'address-region',\n 'address-limit',\n ],\n });\n\n // This is required since when we remove the invalid attribute from the internal mappings field,\n // we want to reflect the change in the parent component\n syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });\n this.setDefaultValue();\n }\n };\n\nconst { host } = {\n host: { selector: () => ':host' },\n};\n\nexport const AddressFieldClass = compose(\n createStyleMixin({\n componentNameOverride: getComponentName('input-wrapper'),\n }),\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostDirection: { ...host, property: 'direction' },\n },\n }),\n draggableMixin,\n proxyInputMixin({\n proxyProps: ['value', 'selectionStart'],\n inputEvent: 'input',\n proxyParentValidation: true,\n }),\n componentNameValidationMixin,\n customMixin,\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-custom-field',\n style: () => `\n :host {\n display: inline-flex;\n max-width: 100%;\n direction: ltr;\n }\n vaadin-custom-field {\n line-height: unset;\n width: 100%;\n }\n\n ${descopeInternalComponentName} {\n display: inline-block;\n box-sizing: border-box;\n user-select: none;\n width: 100%;\n max-width: 100%;\n }\n\n ${descopeInternalComponentName} ::slotted {\n padding: 0;\n }\n`,\n excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],\n componentName,\n }),\n);\n","import { AddressFieldClass } from './component/AddressFieldClass';\nimport { refs } from '@descope-ui/theme-input-wrapper';\n\nconst vars = AddressFieldClass.cssVarList;\n\nconst addressField = {\n [vars.hostWidth]: refs.width,\n [vars.hostDirection]: refs.direction,\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default addressField;\nexport { vars };\n","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=\"","const fmt = (val, pad = 2) => String(val).padStart(pad, '0');\n\nexport const formatTime = (ms = 0) => {\n const totalSeconds = Math.floor(ms / 1000);\n\n const secondsInMinute = 60;\n const secondsInHour = secondsInMinute * 60;\n\n const hours = Math.floor(totalSeconds / secondsInHour);\n const minutes = Math.floor((totalSeconds % secondsInHour) / secondsInMinute);\n const seconds = totalSeconds % secondsInMinute;\n\n const timeParts = [...(hours ? [fmt(hours)] : []), fmt(minutes), fmt(seconds)];\n\n return timeParts.join(':');\n};\n","import {\n createStyleMixin,\n draggableMixin,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n getComponentName,\n injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport clockIcon from './clock.svg';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { formatTime } from './helpers';\n\nexport const componentName = getComponentName('timer');\n\nconst observedAttributes = ['seconds', 'hide-icon', 'paused'];\n\nconst BaseClass = createBaseClass({\n componentName,\n baseSelector: ':host > .wrapper',\n});\n\nconst DEFAULT_INTERVAL = 1000;\n\nclass RawTimer extends BaseClass {\n #timeRemains = 0;\n\n #intervalId;\n\n static get observedAttributes() {\n return observedAttributes.concat(BaseClass.observedAttributes || []);\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n
\n\t\t`;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n user-select: none;\n -webkit-user-select: none;\n }\n .wrapper {\n display: flex;\n align-items: center;\n flex-direction: row;\n width: 100%;\n }\n .hidden {\n display: none;\n }\n `,\n this,\n );\n\n this.icon = this.shadowRoot.querySelector('.icon');\n this.timer = this.shadowRoot.querySelector('.timer');\n }\n\n get seconds() {\n const val = this.getAttribute('seconds');\n const secs = parseInt(val || 0, 10) * 1000;\n return Math.max(0, secs);\n }\n\n // we use `pause` attribute for allowing preview mode by executing `pause`\n get isPaused() {\n return this.getAttribute('paused') === 'true';\n }\n\n init() {\n super.init?.();\n\n this.#timeRemains = this.seconds;\n }\n\n startInterval() {\n const intervalCycle = () => {\n this.#decreaseInterval();\n if (!this.#timeRemains) this.stop();\n this.#updateDisplay(this.#timeRemains);\n };\n\n if (this.#timeRemains) {\n this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);\n } else {\n this.stop();\n }\n }\n\n stopInterval() {\n clearInterval(this.#intervalId);\n }\n\n #decreaseInterval() {\n this.#timeRemains = this.#timeRemains - DEFAULT_INTERVAL;\n }\n\n reset() {\n this.#timeRemains = this.seconds;\n this.#updateDisplay(this.#timeRemains);\n\n if (this.isPaused) return;\n\n this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));\n this.startInterval();\n }\n\n stop() {\n this.stopInterval();\n this.#timeRemains = 0;\n this.#updateDisplay(this.#timeRemains);\n this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));\n }\n\n pause() {\n this.setAttribute('paused', 'true');\n this.stopInterval();\n }\n\n resume() {\n this.removeAttribute('paused');\n this.startInterval();\n }\n\n #updateDisplay(val) {\n this.timer.textContent = formatTime(val);\n }\n\n #toggleIcon(val) {\n this.icon.classList.toggle('hidden', val);\n }\n\n #handlePause(paused) {\n setTimeout(() => {\n if (paused) {\n this.pause();\n } else {\n // we want to prevent a another interval from starting in case previous interval was not yet cleared\n if (!this.#intervalId) {\n this.resume();\n }\n }\n });\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (newValue !== oldValue) {\n if (attrName === 'seconds') {\n this.reset();\n }\n if (attrName === 'hide-icon') {\n this.#toggleIcon(newValue === 'true');\n }\n if (attrName === 'paused') {\n this.#handlePause(newValue === 'true');\n }\n }\n }\n}\n\nconst { host, icon, timer } = {\n host: { selector: () => ':host' },\n icon: { selector: () => '.icon' },\n timer: { selector: () => '.timer' },\n};\n\nexport const TimerClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: {},\n iconSize: [\n { ...icon, property: 'width' },\n { ...icon, property: 'height' },\n ],\n fontFamily: {},\n minHeight: {},\n fontWeight: { ...timer },\n lineHeight: { ...timer },\n textColor: { ...timer, property: 'color' },\n gap: {},\n textAlign: { property: 'justify-content' },\n hostWidth: { ...host, property: 'width' },\n hostDirection: { ...host, property: 'direction' },\n iconColor: { ...icon, property: IconClass.cssVarList.fill },\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawTimer);\n","import globals from '@descope-ui/theme-globals';\nimport { TimerClass } from './component/TimerClass';\nimport { getThemeRefs } from '@descope-ui/common/theme-helpers';\n\nconst globalRefs = getThemeRefs(globals);\nconst vars = TimerClass.cssVarList;\n\nconst timer = {\n [vars.hostDirection]: globalRefs.direction,\n [vars.gap]: '0.25em',\n [vars.fontFamily]: globalRefs.fonts.font1.family,\n [vars.minHeight]: '1.5em',\n [vars.lineHeight]: '1em',\n [vars.fontWeight]: globalRefs.fonts.font1.fontWeight,\n [vars.textColor]: globalRefs.colors.surface.contrast,\n [vars.iconColor]: globalRefs.colors.surface.contrast,\n [vars.iconSize]: '1em',\n\n size: {\n xs: { [vars.fontSize]: '12px' },\n sm: { [vars.fontSize]: '14px' },\n md: { [vars.fontSize]: '16px' },\n lg: { [vars.fontSize]: '18px' },\n },\n\n textAlign: {\n right: { [vars.textAlign]: 'right' },\n left: { [vars.textAlign]: 'left' },\n center: { [vars.textAlign]: 'center' },\n },\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default timer;\n\nexport { vars };\n","import {\n createStyleMixin,\n draggableMixin,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n forwardAttrs,\n getComponentName,\n injectStyle,\n} from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('timer-button');\n\nconst buttonAttrs = [\n 'button-variant',\n 'button-mode',\n 'size',\n 'text-align',\n 'full-width',\n];\n\nconst mapButtonAttrs = {\n 'button-variant': 'variant',\n 'button-mode': 'mode',\n};\n\nconst timerAttrs = [\n 'timer-seconds',\n 'timer-hide-icon',\n 'timer-paused',\n 'size',\n 'text-align',\n 'full-width',\n];\n\nconst mapTimerAttrs = {\n 'timer-seconds': 'seconds',\n 'timer-hide-icon': 'hide-icon',\n 'timer-paused': 'paused',\n};\n\nconst BaseClass = createBaseClass({\n componentName,\n baseSelector: ':host > div',\n});\n\nclass RawTimerButton extends BaseClass {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n \n \n
\n\t\t`;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n }\n .wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n align-items: center;\n width: 100%;\n }\n .timer {\n flex: 1;\n }\n `,\n this,\n );\n\n this.timer = this.shadowRoot.querySelector('.timer');\n this.button = this.shadowRoot.querySelector('.button');\n\n this.timer.addEventListener('timer-started', () => this.onTimerStarted());\n this.timer.addEventListener('timer-ended', () => this.onTimerEnded());\n\n this.button.addEventListener('click', this.onClick.bind(this));\n }\n\n set onclick(val) {\n this.button.onclick = val;\n }\n\n init() {\n super.init?.();\n\n forwardAttrs(this, this.button, {\n includeAttrs: buttonAttrs,\n mapAttrs: mapButtonAttrs,\n });\n\n forwardAttrs(this, this.timer, {\n includeAttrs: timerAttrs,\n mapAttrs: mapTimerAttrs,\n });\n\n // When we sync attributes, the `disabled` attribute is being compared to the attribute\n // on Vaadin component; since the Vaadin component has no `disabled` attribute, we sync\n // that back to our component.\n // This is pending a more generic fix in the way we sync attibutes.\n this.button.shadowRoot\n .querySelector('vaadin-button')\n .setAttribute('disabled', 'true');\n }\n\n onTimerStarted() {\n this.toggleButtonDisable(true);\n }\n\n onTimerEnded() {\n this.toggleButtonDisable(false);\n }\n\n onClick() {\n this.timer.reset();\n }\n\n toggleButtonDisable(isDisabled) {\n setTimeout(() => {\n isDisabled\n ? this.button.setAttribute('disabled', 'true')\n : this.button.removeAttribute('disabled');\n });\n }\n}\n\nconst { host } = {\n host: { selector: () => ':host' },\n icon: { selector: '.icon' },\n timer: { selector: '.timer' },\n};\n\nexport const TimerButtonClass = compose(\n createStyleMixin({\n mappings: {\n gap: {},\n flexDirection: {},\n hostWidth: { ...host, property: 'width' },\n hostDirection: { ...host, property: 'direction' },\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawTimerButton);\n","import globals from '@descope-ui/theme-globals';\nimport { getThemeRefs } from '@descope-ui/common/theme-helpers';\nimport { TimerButtonClass } from './component/TimerButtonClass';\n\nconst globalRefs = getThemeRefs(globals);\nconst vars = TimerButtonClass.cssVarList;\n\nconst timerButton = {\n [vars.gap]: globalRefs.spacing.sm,\n [vars.flexDirection]: 'column',\n\n _horizontal: {\n [vars.flexDirection]: 'row',\n },\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default timerButton;\n\nexport { vars };\n","import { createBaseClass } from '@descope-ui/common/base-classes';\nimport {\n getComponentName,\n injectStyle\n} from '@descope-ui/common/components-helpers';\nimport {\n componentNameValidationMixin,\n createStyleMixin,\n draggableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('password-strength');\nclass RawPasswordStrength extends createBaseClass({\n componentName,\n baseSelector: ':host > .wrapper',\n}) {\n static get observedAttributes() {\n return ['options', 'value'];\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n \n
\n\t\t`;\n\n injectStyle(`\n :host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\n .wrapper {\n display: inline-flex;\n position: relative;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: flex-start;\n }\n\n .bar {\n flex-grow: 1;\n }\n\n .bars-container {\n display: flex;\n flex-grow: 1;\n width: 100%;\n }\n `, this);\n\n this.barsContainer = this.shadowRoot.querySelector('.bars-container');\n this.textContainer = this.shadowRoot.querySelector('.text-container');\n }\n\n get options() {\n return this.getAttribute('options')?.split(',') || [];\n }\n\n // we need to have the option to take the zxcvbn from outside the component\n getCalcScoreFn = () => import('./calcScore').then(module => module.default);\n\n #score = -1;\n\n async calcScore() {\n const value = this.getAttribute('value') || ''\n if (!value) return -1;\n\n const calcScore = await this.getCalcScoreFn();\n\n return calcScore(value).score;\n }\n\n renderBars() {\n this.barsContainer.innerHTML = '';\n this.bars = this.options.map((option, index) => {\n const bar = document.createElement('div');\n bar.classList.add('bar');\n bar.classList.toggle('filled', index <= this.#score);\n this.barsContainer.appendChild(bar);\n\n return bar;\n });\n }\n\n init() {\n super.init?.();\n // we are prefetching the calcScore function\n this.getCalcScoreFn();\n }\n\n\n async onValueChange() {\n const newScore = await this.calcScore();\n if (newScore === this.#score) return;\n\n this.#score = newScore;\n this.dispatchEvent(new CustomEvent('score-changed', { bubbles: true, composed: true, detail: this.#score }));\n\n this.bars?.forEach((bar, index) => {\n bar.classList.toggle('filled', index <= this.#score);\n });\n\n this.textContainer.innerHTML = this.options[this.#score] || '';\n\n if (this.#score === -1) this.removeAttribute('score');\n else this.setAttribute('score', this.#score);\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue === newValue) return;\n\n if (name === 'options') {\n return this.renderBars();\n }\n\n if (name === 'value') {\n return this.onValueChange();\n }\n }\n}\n\nconst { host, bar, filledBar, barsContainer, text } = {\n host: { selector: () => ':host' },\n bar: { selector: ' .bar' },\n barsContainer: { selector: ' .bars-container' },\n filledBar: { selector: ' .bar.filled' },\n text: { selector: ' .text-container' },\n};\n\nexport const PasswordStrengthClass = compose(\n createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n createStyleMixin({\n mappings: {\n hostWidth: [\n { ...host, property: 'width' },\n { ...host, property: 'min-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n hostMinWidth: { ...host, property: 'min-width' },\n barHeight: { ...bar, property: 'height' },\n barBorderRadius: { ...bar, property: 'border-radius' },\n emptyBarColor: { ...bar, property: 'background-color' },\n filledBarColor: { ...filledBar, property: 'background-color' },\n textColor: { ...text, property: 'color' },\n spacing: { property: 'gap' },\n barSpacing: { ...barsContainer, property: 'gap' },\n fontSize: {},\n fontWeight: {},\n fontFamily: {},\n barTransition: { ...bar, property: 'transition' },\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawPasswordStrength);\n","import globals from '@descope-ui/theme-globals';\nimport { PasswordStrengthClass } from './component/PasswordStrengthClass';\nimport { getThemeRefs } from '@descope-ui/common/theme-helpers';\nimport { refs } from '@descope-ui/theme-input-wrapper';\n\nconst globalRefs = getThemeRefs(globals);\nconst compVars = PasswordStrengthClass.cssVarList;\n\nconst passwordStrength = {\n [compVars.hostDirection]: globalRefs.direction,\n [compVars.barHeight]: '4px',\n [compVars.barTransition]: 'background-color 0.3s',\n [compVars.barBorderRadius]: globalRefs.radius.sm,\n [compVars.hostMinWidth]: refs.minWidth,\n [compVars.barSpacing]: globalRefs.spacing.sm,\n [compVars.emptyBarColor]: globalRefs.colors.surface.light,\n [compVars.fontFamily]: refs.fontFamily,\n [compVars.fontSize]: refs.labelFontSize,\n [compVars.fontWeight]: refs.labelFontWeight,\n [compVars.spacing]: globalRefs.spacing.sm,\n _fullWidth: {\n [compVars.hostWidth]: '100%',\n },\n score : {\n 0: {\n [compVars.filledBarColor]: globalRefs.colors.error.light,\n [compVars.textColor]: globalRefs.colors.error.light,\n },\n 1: {\n [compVars.filledBarColor]: globalRefs.colors.error.main,\n [compVars.textColor]: globalRefs.colors.error.main,\n },\n 2: {\n [compVars.filledBarColor]: globalRefs.colors.error.dark,\n [compVars.textColor]: globalRefs.colors.error.dark,\n },\n 3: {\n [compVars.filledBarColor]: globalRefs.colors.success.dark,\n [compVars.textColor]: globalRefs.colors.success.dark,\n },\n 4: {\n [compVars.filledBarColor]: globalRefs.colors.success.main,\n [compVars.textColor]: globalRefs.colors.success.main,\n },\n }\n};\n\nexport default passwordStrength;\n\nexport const vars = {\n ...compVars,\n};\n","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=\"","import {\n createStyleMixin,\n draggableMixin,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n forwardAttrs,\n getComponentName,\n injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport chevronIcon from './chevron.svg';\nimport { TextClass } from '@descope-ui/descope-text/class';\n\nexport const componentName = getComponentName('collapsible-container');\n\nclass RawCollapsibleContainer extends createBaseClass({\n componentName,\n baseSelector: 'slot',\n}) {\n static get observedAttributes() {\n return ['collapsed', 'collapsible', 'text'];\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n \n
\n \n \n \n
\n\t`;\n\n injectStyle(\n `\n div.content {\n transition-property: max-height;\n overflow: auto;\n height: auto;\n\t\t\t}\n\t\t\tslot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n slot:focus-visible {\n outline: none;\n }\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n .header {\n user-select: none;\n display: flex;\n align-items: baseline;\n }\n .icon {\n flex-shrink: 0;\n height: var(${TextClass.cssVarList.textLineHeight});\n min-height: 24px;\n display: flex;\n align-items: center;\n }\n descope-icon {\n transition-property: transform;\n }\n .rotate {\n transform: rotate(-180deg);\n }\n descope-text {\n width: 100%;\n display: flex;\n }\n span {\n align-self: center;\n word-break: break-word;\n }\n span:empty {\n display: none;\n }\n .wrapper {\n overflow: hidden;\n display: inline-flex;\n width: 100%;\n flex-direction: column;\n }\n `,\n this,\n );\n\n this.header = this.shadowRoot.querySelector('.header');\n this.content = this.shadowRoot.querySelector('div.content');\n this.icon = this.header.querySelector('descope-icon');\n this.headerText = this.header.querySelector('span');\n this.textComponent = this.shadowRoot.querySelector('descope-text');\n }\n\n get isCollapsible() {\n return this.getAttribute('collapsible') === 'true';\n }\n\n calcContentHeight() {\n return this.content.offsetHeight || this.content.scrollHeight;\n }\n\n get isCollapsed() {\n return this.getAttribute('collapsed') === 'true';\n }\n\n toggle() {\n this.setAttribute('collapsed', this.isCollapsed ? 'false' : 'true');\n }\n\n collapse(animated = false) {\n const final = () => {\n this.content.style.maxHeight = '0px';\n };\n this.icon.classList.add('rotate');\n if (!animated) return final();\n\n this.content.style.maxHeight = this.calcContentHeight() + 'px';\n setTimeout(final);\n }\n\n expand(animated = false) {\n const final = () => {\n this.content.style.maxHeight = '';\n };\n this.icon.classList.remove('rotate');\n if (!animated) return final();\n\n this.content.addEventListener('transitionend', final, { once: true });\n this.content.style.maxHeight = this.calcContentHeight() + 'px';\n }\n\n #isComponentMounted = false;\n\n init() {\n super.init?.();\n // we want to animate the collapse/expand only after the first time the component is connected\n // so when setting a default value for the collapsed attribute, it will not animate\n this.#isComponentMounted = true;\n\n this.header.addEventListener('click', () => {\n if (!this.isCollapsible) return;\n this.toggle();\n });\n forwardAttrs(this, this.textComponent, {\n includeAttrs: ['text-align', 'text-variant', 'text-mode'],\n mapAttrs: { 'text-mode': 'mode', 'text-variant': 'variant' },\n });\n }\n\n updateHeaderText() {\n const text = this.getAttribute('text') || '';\n this.headerText.innerText = text;\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'text') {\n this.updateHeaderText();\n return;\n }\n const collapsed = this.isCollapsed && this.isCollapsible;\n if (collapsed) {\n this.collapse(this.#isComponentMounted);\n } else {\n this.expand(this.#isComponentMounted);\n }\n }\n}\n\nconst selectors = {\n host: () => ':host',\n icon: () => 'descope-icon',\n iconWrapper: () => '.icon',\n header: () => '.header',\n text: () => 'span',\n wrapper: () => '.wrapper',\n content: () => 'div.content',\n};\n\nexport const CollapsibleContainerClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: selectors.host, property: 'width' },\n hostDirection: { selector: selectors.host, property: 'direction' },\n verticalPadding: [\n { selector: selectors.wrapper, property: 'padding-top' },\n { selector: selectors.wrapper, property: 'padding-bottom' },\n ],\n horizontalPadding: [\n { selector: selectors.wrapper, property: 'padding-left' },\n { selector: selectors.wrapper, property: 'padding-right' },\n ],\n\n flexDirection: {},\n justifyContent: {},\n alignItems: {},\n gap: [{}, { property: 'margin-top' }],\n\n backgroundColor: { selector: selectors.wrapper },\n backgroundImage: { selector: selectors.wrapper },\n backgroundPositionX: { selector: selectors.wrapper },\n backgroundPositionY: { selector: selectors.wrapper },\n backgroundSize: { selector: selectors.wrapper },\n backgroundRepeat: { selector: selectors.wrapper },\n\n borderRadius: { selector: selectors.wrapper },\n borderColor: { selector: selectors.wrapper },\n borderStyle: { selector: selectors.wrapper },\n borderWidth: { selector: selectors.wrapper },\n\n boxShadow: { selector: selectors.wrapper },\n\n headerIconOrder: { selector: selectors.iconWrapper, property: 'order' },\n headerCursor: { selector: selectors.header, property: 'cursor' },\n headerGap: { selector: selectors.header, property: 'gap' },\n textGrow: { selector: selectors.text, property: 'flex-grow' },\n textDirection: { selector: selectors.text, property: 'direction' },\n iconAnimationDuration: {\n selector: selectors.icon,\n property: 'transition-duration',\n },\n contentAnimationDuration: {\n selector: selectors.content,\n property: 'transition-duration',\n },\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawCollapsibleContainer);\n","import { CollapsibleContainerClass, componentName } from './component/CollapsibleContainerClass';\nimport globals from '@descope-ui/theme-globals';\nimport { getThemeRefs, createHelperVars } from '@descope-ui/common/theme-helpers';\n\n\nconst globalRefs = getThemeRefs(globals);\n\nconst compVars = CollapsibleContainerClass.cssVarList;\n\nconst [helperTheme, helperRefs, helperVars] = createHelperVars(\n {\n shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format\n },\n componentName\n);\n\nconst { shadowColor } = helperRefs;\n\nconst collapsibleContainer = {\n ...helperTheme,\n\n [compVars.hostWidth]: '100%',\n [compVars.boxShadow]: 'none',\n\n [compVars.backgroundColor]: globalRefs.colors.surface.main,\n\n [compVars.backgroundImage]: '', // we need to set a value to avoid inner containers from inheriting the parent's background image\n [compVars.backgroundPositionX]: 'center',\n [compVars.backgroundPositionY]: 'center',\n [compVars.backgroundSize]: 'cover',\n [compVars.backgroundRepeat]: 'no-repeat',\n\n [compVars.borderRadius]: '0px',\n [compVars.hostDirection]: globalRefs.direction,\n\n [compVars.flexDirection]: 'column',\n [compVars.alignItems]: 'flex-start',\n [compVars.justifyContent]: 'flex-start',\n\n [compVars.headerGap]: globalRefs.spacing.md,\n\n [compVars.iconAnimationDuration]: '0.1s',\n [compVars.contentAnimationDuration]: '0.1s',\n\n [compVars.borderWidth]: '0px',\n [compVars.textGrow]: '0',\n\n verticalPadding: {\n sm: { [compVars.verticalPadding]: '5px' },\n md: { [compVars.verticalPadding]: '10px' },\n lg: { [compVars.verticalPadding]: '20px' },\n },\n\n horizontalPadding: {\n sm: { [compVars.horizontalPadding]: '5px' },\n md: { [compVars.horizontalPadding]: '10px' },\n lg: { [compVars.horizontalPadding]: '20px' },\n },\n\n spaceBetween: {\n sm: { [compVars.gap]: '10px' },\n md: { [compVars.gap]: '20px' },\n lg: { [compVars.gap]: '30px' },\n },\n\n shadow: {\n sm: {\n [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,\n },\n md: {\n [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,\n },\n lg: {\n [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,\n },\n xl: {\n [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,\n },\n '2xl': {\n [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings\n [compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`,\n },\n },\n\n borderRadius: {\n sm: { [compVars.borderRadius]: globalRefs.radius.sm },\n md: { [compVars.borderRadius]: globalRefs.radius.md },\n lg: { [compVars.borderRadius]: globalRefs.radius.lg },\n xl: { [compVars.borderRadius]: globalRefs.radius.xl },\n '2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },\n '3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },\n },\n\n iconPosition: {\n 'left': { [compVars.headerIconOrder]: '0' },\n 'right': { [compVars.headerIconOrder]: '1' },\n },\n\n _fillTitle: {\n [compVars.textGrow]: '1',\n },\n\n _border: {\n [compVars.borderColor]: globalRefs.colors.surface.light,\n [compVars.borderWidth]: globalRefs.border.xs,\n [compVars.borderStyle]: 'solid',\n },\n\n _collapsible: {\n [compVars.headerCursor]: 'pointer',\n }\n};\n\nexport default collapsibleContainer;\n\nexport const vars = {\n ...compVars,\n ...helperVars,\n};\n","import {\n createStyleMixin,\n draggableMixin,\n componentNameValidationMixin,\n createDynamicDataMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n forwardAttrs,\n getComponentName,\n injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { TextClass } from '@descope-ui/descope-text/class';\n\nexport const componentName = getComponentName('recovery-codes');\n\nconst itemRenderer = ({ value }, _, ref) => {\n return `\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n `;\n\n this.list = this.shadowRoot.querySelector('.list');\n this.icon = this.shadowRoot.querySelector('.icon')\n this.iconWrapper = this.shadowRoot.querySelector('.icon-wrapper')\n\n injectStyle(\n `\n :host {\n display: inline-block;\n position: relative;\n }\n .wrapper {\n display: flex;\n justify-content: space-between;\n }\n .list {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n }\n descope-text span {\n display: inline-flex;\n align-items: center;\n width: fit-content;\n }\n descope-text span::before {\n content: '\\\\02022';\n transform: translateY(-0.06em);\n }\n .icon-wrapper {\n align-self: flex-start;\n }\n .icon {\n cursor: pointer;\n }\n .icon.copied {\n cursor: initial;\n }\n .icon.readonly {\n pointer-events: none;\n }\n `,\n this,\n );\n }\n\n get variant() {\n return this.getAttribute('variant');\n }\n\n get mode() {\n return this.getAttribute('mode');\n }\n\n init() {\n super.init();\n\n\n this.icon.addEventListener('click', this.onCopy.bind(this));\n\n forwardAttrs(this, this.iconWrapper, { includeAttrs: ['variant', 'mode'] });\n }\n\n onCopy() {\n navigator.clipboard.writeText(\n String(this.data.map((rc) => rc.value).join('\\n')),\n );\n\n this.icon.setAttribute('icon', 'vaadin:check-circle-o');\n this.icon.setAttribute('title', 'Copied');\n this.icon.classList.add('copied');\n\n setTimeout(() => {\n this.icon.setAttribute('icon', 'vaadin:copy-o');\n this.icon.setAttribute('title', 'Copy');\n this.icon.classList.remove('copied');\n }, 5000);\n }\n\n onReadOnly(isReadOnly) {\n this.icon.classList.toggle('readonly', isReadOnly);\n }\n \n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (newValue !== oldValue) {\n if (attrName === 'readonly') {\n this.onReadOnly(newValue === 'true');\n }\n }\n }\n}\n\nexport const RecoveryCodesClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostMinWidth: { selector: () => ':host', property: 'min-width' },\n hostDirection: [\n { selector: () => ':host', property: 'direction' },\n {\n selector: () => TextClass.componentName,\n property: TextClass.cssVarList.hostDirection\n },\n ],\n textAlign: { selector: () => '.list', property: 'align-items' },\n iconColor: { selector: () => 'vaadin-icon', property: 'color' },\n iconSize: { selector: () => 'vaadin-icon', property: 'font-size' },\n iconGap: { selector: () => '.wrapper', property: 'gap' },\n bulletGap: { selector: () => 'descope-text span', property: 'gap' }\n },\n }),\n createDynamicDataMixin({\n itemRenderer,\n rerenderAttrsList: ['variant', 'mode'],\n targetSelector: '.list'\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawRecoveryCodes);\n","import globals from '@descope-ui/theme-globals';\nimport { getThemeRefs, useVar } from '@descope-ui/common/theme-helpers';\nimport { TextClass } from '@descope-ui/descope-text/class';\nimport { RecoveryCodesClass } from './component/RecoveryCodesClass';\n\nconst globalRefs = getThemeRefs(globals);\nconst vars = RecoveryCodesClass.cssVarList;\nconst textVars = TextClass.cssVarList;\n\nconst recoveryCodes = {\n [vars.hostMinWidth]: '190px',\n [vars.hostDirection]: globalRefs.direction,\n [vars.iconColor]: useVar(textVars.textColor),\n [vars.iconSize]: useVar(textVars.fontSize),\n [vars.iconGap]: '8px',\n [vars.bulletGap]: '0.35em',\n\n textAlign: {\n right: { [vars.textAlign]: 'flex-end' },\n left: { [vars.textAlign]: 'flex-start' },\n center: { [vars.textAlign]: 'center' },\n },\n\n _fullWidth: {\n [vars.hostWidth]: '100%',\n },\n};\n\nexport default recoveryCodes;\nexport { vars };\n","import { compose } from '@descope-ui/common/utils';\nimport {\n limitAbbreviation,\n getComponentName,\n injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport {\n createStyleMixin,\n draggableMixin,\n componentNameValidationMixin,\n createDynamicDataMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { IconClass } from '@descope-ui/descope-icon/class';\nimport { TextClass } from '@descope-ui/descope-text/class';\nimport { ListClass } from '@descope-ui/descope-list/class';\nimport { ListItemClass } from '@descope-ui/descope-list-item/class';\n\nexport const componentName = getComponentName('outbound-apps');\n\nconst itemRenderer = (\n { name, description, logo, appId, isConnected },\n _,\n ref,\n) => {\n const action = isConnected ? 'disconnect' : 'connect';\n return `\n \n ${name}\n ${\n description\n ? `\n ${description}\n `\n : ''\n }\n
\n \n \n ${isConnected ? ref.disconnectButtonLabel : ref.connectButtonLabel}\n \n
\n \n
\n \n \n \n \n \n \n \n \n ${badge}\n ${removeDeviceLink}\n \n
\n \n \n \n ![\"recaptcha\"/](\"https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png\")
\n
\n \n