{"version":3,"file":"bundle.min.js","sources":["../node_modules/element-internals-polyfill/dist/maps.js","../node_modules/element-internals-polyfill/dist/aom.js","../node_modules/element-internals-polyfill/dist/mutation-observers.js","../node_modules/element-internals-polyfill/dist/utils.js","../node_modules/element-internals-polyfill/dist/ValidityState.js","../node_modules/element-internals-polyfill/dist/CustomStateSet.js","../node_modules/element-internals-polyfill/dist/HTMLFormControlsCollection.js","../node_modules/element-internals-polyfill/dist/patch-form-prototype.js","../node_modules/element-internals-polyfill/dist/element-internals.js","../node_modules/element-internals-polyfill/dist/index.js","../node_modules/@lit/reactive-element/css-tag.js","../node_modules/@lit/reactive-element/reactive-element.js","../node_modules/lit-html/lit-html.js","../node_modules/lit-element/lit-element.js","../node_modules/@lit/reactive-element/decorators/custom-element.js","../node_modules/@lit/reactive-element/decorators/property.js","../node_modules/@lit/reactive-element/decorators/state.js","../node_modules/@lit/reactive-element/decorators/base.js","../node_modules/@lit/reactive-element/decorators/query.js","../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js","../dist/elements/_shared/redispatch.js","../dist/elements/_shared/polyfills.js","../dist/elements/_shared/formElement.js","../node_modules/lit-html/directive.js","../node_modules/lit-html/directives/class-map.js","../node_modules/@cloudsuite/mosaic-shared/dist/styles/colors.style.js","../node_modules/@cloudsuite/mosaic-shared/dist/styles/globals.style.js","../node_modules/@cloudsuite/mosaic-shared/dist/styles/spacing.style.js","../dist/elements/accordion/accordion.style.js","../node_modules/@cloudsuite/mosaic-shared/dist/scripts/dependency-injection.js","../node_modules/@preact/signals-core/dist/signals-core.mjs","../node_modules/@cloudsuite/mosaic-shared/dist/scripts/signals.js","../node_modules/@cloudsuite/mosaic-shared/dist/icons/library.js","../node_modules/@cloudsuite/mosaic-shared/dist/styles/host.style.js","../dist/elements/_shared/fonts.style.js","../dist/elements/_shared/generate-id.js","../dist/elements/accordion/accordion.js","../dist/elements/alert/alert.style.js","../dist/elements/alert/alert.js","../dist/elements/avatar/avatar.style.js","../dist/elements/avatar/avatar.js","../dist/elements/badge/badge.style.js","../dist/elements/badge/badge.js","../node_modules/@cloudsuite/mosaic-shared/dist/styles/breakpoints.js","../dist/elements/banner/banner.style.js","../dist/elements/_shared/animations.js","../dist/elements/banner/banner.js","../dist/elements/breadcrumb/breadcrumb.style.js","../dist/elements/breadcrumb/breadcrumb.js","../dist/elements/button/button.style.js","../dist/elements/button-group/button-group.style.js","../dist/elements/button-group/button-group.js","../dist/elements/_shared/form.style.js","../dist/elements/button-input/button-input.style.js","../dist/elements/button-input/button-input.js","../dist/elements/button/button.js","../dist/elements/carousel-pagination/carousel-pagination.style.js","../dist/elements/carousel-pagination/carousel-pagination.js","../dist/elements/checkbox/checkbox.style.js","../dist/elements/checkbox/checkbox.js","../dist/elements/chip/chip.style.js","../dist/elements/chip/chip.js","../dist/elements/date-input/date-input.style.js","../dist/elements/date-input/date-input.js","../dist/elements/definition-list/definition-list.style.js","../dist/elements/_shared/hasSlot.js","../dist/elements/definition-list/definition-list.js","../dist/elements/divider/divider.style.js","../dist/elements/divider/divider.js","../node_modules/@cloudsuite/mosaic-shared/dist/styles/shadows.style.js","../dist/elements/dropdown-menu/dropdown-menu.style.js","../dist/elements/dropdown-menu/dropdown-menu.js","../dist/elements/dropdown/dropdown.style.js","../node_modules/lit-html/directives/if-defined.js","../dist/elements/dropdown/dropdown.js","../dist/elements/expandable/expandable.style.js","../dist/elements/expandable/expandable.js","../dist/elements/fieldset/fieldset.style.js","../dist/elements/fieldset/fieldset.js","../dist/elements/filter-navigation-field/filter-navigation-field.style.js","../dist/elements/filter-navigation-field/filter-navigation-field.js","../dist/elements/form-field/form-field.style.js","../dist/elements/form-field/form-field.js","../dist/elements/group/group.style.js","../dist/elements/group/group.js","../dist/elements/header-button/header-button.style.js","../dist/elements/header-button/header-button.js","../dist/elements/hotspot-target/hotspot-target.style.js","../node_modules/@cloudsuite/mosaic-shared/dist/scripts/breakpoints.js","../dist/elements/hotspot-target/hotspot-target.js","../dist/elements/icon-button/icon-button.style.js","../dist/elements/icon-button/icon-button.js","../dist/elements/icon/render-icon.js","../dist/elements/icon/icon.style.js","../dist/elements/icon/icon.js","../dist/elements/image/image.style.js","../dist/elements/image/image.js","../dist/elements/label/label.style.js","../dist/elements/label/label.js","../dist/elements/link/link.style.js","../dist/elements/link/link.js","../dist/elements/list/list.style.js","../dist/elements/list/list.js","../dist/elements/loader/loader.style.js","../dist/elements/loader/loader.js","../dist/elements/menu/menu.style.js","../dist/elements/menu/menu.js","../dist/elements/modal/modal.style.js","../dist/elements/_shared/scroll-lock.js","../dist/elements/modal/modal.js","../dist/elements/option/option.style.js","../dist/elements/option/option.js","../node_modules/lit-html/directives/map.js","../node_modules/lit-html/directives/range.js","../dist/elements/pagination/pagination-section.js","../dist/elements/pagination/pagination.style.js","../dist/elements/pagination/pagination.js","../dist/elements/paper/paper.style.js","../node_modules/@cloudsuite/mosaic-shared/dist/testing/get-elements.js","../dist/elements/paper/paper.js","../dist/elements/password-input/password-input.style.js","../dist/elements/password-input/password-input.js","../node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs","../node_modules/@floating-ui/core/dist/floating-ui.core.mjs","../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs","../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs","../node_modules/composed-offset-position/dist/composed-offset-position.mjs","../dist/elements/popup/popup.style.js","../dist/elements/popup/popup.js","../dist/elements/radio-button/radio-button.style.js","../dist/elements/radio-button/radio-button.js","../dist/elements/range-slider/range-slider.style.js","../dist/elements/range-slider/range-slider.js","../dist/elements/rating/rating.style.js","../dist/elements/rating/rating.js","../dist/elements/select/select-strategies.js","../dist/elements/select/select.style.js","../dist/elements/select/select.js","../dist/elements/selectable/selectable.style.js","../dist/elements/selectable/selectable.js","../dist/elements/slide-in/slide-in.style.js","../dist/elements/slide-in/slide-in.js","../dist/elements/stepper-input/stepper-input.style.js","../dist/elements/stepper-input/stepper-input.js","../dist/elements/steps/steps.style.js","../dist/elements/steps/steps.js","../dist/elements/sticky-bar/sticky-bar.style.js","../dist/elements/sticky-bar/sticky-bar.js","../dist/elements/swatch/swatch.style.js","../dist/elements/swatch/swatch.js","../dist/elements/table/table.style.js","../dist/elements/table/table.js","../dist/elements/tabs/tabs.style.js","../dist/elements/tabs/tabs.js","../dist/elements/text-input/text-input.style.js","../dist/elements/text-input/text-input.js","../dist/elements/text/text.style.js","../node_modules/lit-html/directives/style-map.js","../dist/elements/text/text.js","../dist/elements/textarea/textarea.style.js","../dist/elements/textarea/textarea.js","../dist/elements/toast/toast.style.js","../dist/elements/toast/toast.js","../dist/elements/toggle/toggle.style.js","../dist/elements/toggle/toggle.js","../dist/elements/tooltip/tooltip.style.js","../dist/elements/tooltip/tooltip.js","../dist/elements/video/video.style.js","../dist/elements/video/video.js","../dist/elements/_style-guide/parse-css-variable.js","../dist/elements/_style-guide/wrap-custom-css.js","../dist/elements/_style-guide/colors/colors.style.js","../dist/elements/_style-guide/colors/colors.js","../dist/elements/_style-guide/colors/shadows.js","../dist/elements/_style-guide/spacing/spacing.style.js","../dist/elements/_style-guide/spacing/spacing.js","../dist/elements/_style-guide/typography/typography.js","../dist/elements/version.js"],"sourcesContent":["/**\n * This file contains the WeakMaps used throughout this project. The WeakMaps exist to tie\n * objects together without polluting the objects themselves with references we'd rather keep\n * hidden. This allows the polyfill to work as transparently as possible.\n */\n/** Use an ElementInternals instance to get a reference to the element it is attached to */\nexport const refMap = new WeakMap();\n/** Usee an ElementsInternals instance to get its ValidityState object */\nexport const validityMap = new WeakMap();\n/** Use an ElementInternals instance to get its attached input[type=\"hidden\"] */\nexport const hiddenInputMap = new WeakMap();\n/** Use a custom element to get its attached ElementInternals instance */\nexport const internalsMap = new WeakMap();\n/** Use an ElementInternals instance to get the attached validation message */\nexport const validationMessageMap = new WeakMap();\n/** Use a form element to get attached custom elements and ElementInternals instances */\nexport const formsMap = new WeakMap();\n/** Use a custom element or other object to get their associated MutationObservers */\nexport const shadowHostsMap = new WeakMap();\n/** Use a form element to get a set of attached custom elements */\nexport const formElementsMap = new WeakMap();\n/** Use an ElementInternals instance to get a reference to an element's value */\nexport const refValueMap = new WeakMap();\n/** Elements that need to be upgraded once added to the DOM */\nexport const upgradeMap = new WeakMap();\n/** Save references to shadow roots for inclusion in internals instance */\nexport const shadowRootMap = new WeakMap();\n/** Save a reference to the internals' validation anchor */\nexport const validationAnchorMap = new WeakMap();\n/** Map DocumentFragments to their MutationObservers so we can disconnect once elements are removed */\nexport const documentFragmentMap = new WeakMap();\n/** Whether connectedCallback has already been called. */\nexport const connectedCallbackMap = new WeakMap();\n/** Save a reference to validity state for elements that need to upgrade after being connected */\nexport const validityUpgradeMap = new WeakMap();\n","import { upgradeMap } from \"./maps.js\";\nimport { setAttribute } from \"./utils.js\";\nimport \"./types.js\";\nexport const aom = {\n ariaAtomic: \"aria-atomic\",\n ariaAutoComplete: \"aria-autocomplete\",\n ariaBrailleLabel: \"aria-braillelabel\",\n ariaBrailleRoleDescription: \"aria-brailleroledescription\",\n ariaBusy: \"aria-busy\",\n ariaChecked: \"aria-checked\",\n ariaColCount: \"aria-colcount\",\n ariaColIndex: \"aria-colindex\",\n ariaColIndexText: \"aria-colindextext\",\n ariaColSpan: \"aria-colspan\",\n ariaCurrent: \"aria-current\",\n ariaDescription: \"aria-description\",\n ariaDisabled: \"aria-disabled\",\n ariaExpanded: \"aria-expanded\",\n ariaHasPopup: \"aria-haspopup\",\n ariaHidden: \"aria-hidden\",\n ariaInvalid: \"aria-invalid\",\n ariaKeyShortcuts: \"aria-keyshortcuts\",\n ariaLabel: \"aria-label\",\n ariaLevel: \"aria-level\",\n ariaLive: \"aria-live\",\n ariaModal: \"aria-modal\",\n ariaMultiLine: \"aria-multiline\",\n ariaMultiSelectable: \"aria-multiselectable\",\n ariaOrientation: \"aria-orientation\",\n ariaPlaceholder: \"aria-placeholder\",\n ariaPosInSet: \"aria-posinset\",\n ariaPressed: \"aria-pressed\",\n ariaReadOnly: \"aria-readonly\",\n ariaRelevant: \"aria-relevant\",\n ariaRequired: \"aria-required\",\n ariaRoleDescription: \"aria-roledescription\",\n ariaRowCount: \"aria-rowcount\",\n ariaRowIndex: \"aria-rowindex\",\n ariaRowIndexText: \"aria-rowindextext\",\n ariaRowSpan: \"aria-rowspan\",\n ariaSelected: \"aria-selected\",\n ariaSetSize: \"aria-setsize\",\n ariaSort: \"aria-sort\",\n ariaValueMax: \"aria-valuemax\",\n ariaValueMin: \"aria-valuemin\",\n ariaValueNow: \"aria-valuenow\",\n ariaValueText: \"aria-valuetext\",\n role: \"role\",\n};\nexport const initAom = (ref, internals) => {\n for (let key in aom) {\n internals[key] = null;\n let closureValue = null;\n const attributeName = aom[key];\n Object.defineProperty(internals, key, {\n get() {\n return closureValue;\n },\n set(value) {\n closureValue = value;\n if (ref.isConnected) {\n setAttribute(ref, attributeName, value);\n }\n else {\n upgradeMap.set(ref, internals);\n }\n },\n });\n }\n};\n","import { internalsMap, shadowHostsMap, upgradeMap, hiddenInputMap, documentFragmentMap, formElementsMap, validityUpgradeMap, refValueMap } from './maps.js';\nimport { aom } from './aom.js';\nimport { setAttribute, removeHiddenInputs, initForm, initLabels, upgradeInternals, setDisabled, mutationObserverExists } from './utils.js';\nfunction initNode(node) {\n const internals = internalsMap.get(node);\n const { form } = internals;\n initForm(node, form, internals);\n initLabels(node, internals.labels);\n}\n/**\n * If a fieldset's disabled state is toggled, the formDisabledCallback\n * on any child form-associated cusotm elements.\n */\nexport const walkFieldset = (node, firstRender = false) => {\n const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node) {\n return internalsMap.has(node) ?\n NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n }\n });\n let current = walker.nextNode();\n /**\n * We don't need to call anything on first render if\n * the element isn't disabled\n */\n const isCallNecessary = (!firstRender || node.disabled);\n while (current) {\n if (current.formDisabledCallback && isCallNecessary) {\n setDisabled(current, node.disabled);\n }\n current = walker.nextNode();\n }\n};\nexport const disabledOrNameObserverConfig = { attributes: true, attributeFilter: ['disabled', 'name'] };\nexport const disabledOrNameObserver = mutationObserverExists() ? new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n const target = mutation.target;\n /** Manage changes to the ref's disabled state */\n if (mutation.attributeName === 'disabled') {\n if (target.constructor['formAssociated']) {\n setDisabled(target, target.hasAttribute('disabled'));\n }\n else if (target.localName === 'fieldset') {\n /**\n * Repurpose the observer for fieldsets which need\n * to be walked whenever the disabled attribute is set\n */\n walkFieldset(target);\n }\n }\n /** Manage changes to the ref's name */\n if (mutation.attributeName === 'name') {\n if (target.constructor['formAssociated']) {\n const internals = internalsMap.get(target);\n const value = refValueMap.get(target);\n internals.setFormValue(value);\n }\n }\n }\n}) : {};\nexport function observerCallback(mutationList) {\n mutationList.forEach(mutationRecord => {\n const { addedNodes, removedNodes } = mutationRecord;\n const added = Array.from(addedNodes);\n const removed = Array.from(removedNodes);\n added.forEach(node => {\n /** Allows for dynamic addition of elements to forms */\n if (internalsMap.has(node) && node.constructor['formAssociated']) {\n initNode(node);\n }\n /** Upgrade the accessibility information on any previously connected */\n if (upgradeMap.has(node)) {\n const internals = upgradeMap.get(node);\n const aomKeys = Object.keys(aom);\n aomKeys\n .filter(key => internals[key] !== null)\n .forEach(key => {\n setAttribute(node, aom[key], internals[key]);\n });\n upgradeMap.delete(node);\n }\n /** Upgrade the validity state when the element is connected */\n if (validityUpgradeMap.has(node)) {\n const internals = validityUpgradeMap.get(node);\n setAttribute(node, 'internals-valid', internals.validity.valid.toString());\n setAttribute(node, 'internals-invalid', (!internals.validity.valid).toString());\n setAttribute(node, 'aria-invalid', (!internals.validity.valid).toString());\n validityUpgradeMap.delete(node);\n }\n /** If the node that's added is a form, check the validity */\n if (node.localName === 'form') {\n const formElements = formElementsMap.get(node);\n const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node) {\n return (internalsMap.has(node) && node.constructor['formAssociated'] && !(formElements && formElements.has(node))) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n }\n });\n let current = walker.nextNode();\n while (current) {\n initNode(current);\n current = walker.nextNode();\n }\n }\n if (node.localName === 'fieldset') {\n disabledOrNameObserver.observe?.(node, disabledOrNameObserverConfig);\n walkFieldset(node, true);\n }\n });\n removed.forEach(node => {\n const internals = internalsMap.get(node);\n /** Clean up any hidden input elements left after an element is disconnected */\n if (internals && hiddenInputMap.get(internals)) {\n removeHiddenInputs(internals);\n }\n /** Disconnect any unneeded MutationObservers */\n if (shadowHostsMap.has(node)) {\n const observer = shadowHostsMap.get(node);\n observer.disconnect();\n }\n });\n });\n}\n/**\n * This observer callback is just for document fragments\n * it will upgrade an ElementInternals instance if was appended\n * from a document fragment.\n */\nexport function fragmentObserverCallback(mutationList) {\n mutationList.forEach(mutation => {\n const { removedNodes } = mutation;\n removedNodes.forEach(node => {\n const observer = documentFragmentMap.get(mutation.target);\n if (internalsMap.has(node)) {\n upgradeInternals(node);\n }\n observer.disconnect();\n });\n });\n}\n/**\n * Defer the upgrade of nodes withing a DocumentFragment\n * @param fragment {DocumentFragment}\n */\nexport const deferUpgrade = (fragment) => {\n const observer = new MutationObserver(fragmentObserverCallback);\n // is this using shady DOM and is not actually a DocumentFragment?\n if (window?.ShadyDOM?.inUse &&\n fragment.mode &&\n fragment.host) {\n // using shady DOM polyfill. Best to just observe the host.\n fragment = fragment.host;\n }\n observer.observe?.(fragment, { childList: true });\n documentFragmentMap.set(fragment, observer);\n};\nexport const observer = mutationObserverExists() ? new MutationObserver(observerCallback) : {};\nexport const observerConfig = {\n childList: true,\n subtree: true\n};\n","import { hiddenInputMap, formsMap, formElementsMap, internalsMap, } from \"./maps.js\";\nimport { disabledOrNameObserver, disabledOrNameObserverConfig, } from \"./mutation-observers.js\";\n/**\n * Set attribute if its value differs from existing one.\n *\n * In comparison to other attribute modification methods (removeAttribute and\n * toggleAttribute), setAttribute always triggers attributeChangedCallback\n * even if the actual value has not changed.\n *\n * This polyfill relies heavily on attributes to pass aria information to\n * screen readers. This behaviour differs from native implementation which does\n * not change attributes.\n *\n * To limit this difference we only set attribute value when it is different\n * from the current state.\n *\n * @param {ICustomElement | Element} ref - The custom element instance\n * @param {string} name - The attribute name\n * @param {string} value - The attribute value\n * @returns\n */\nexport const setAttribute = (ref, name, value) => {\n if (ref.getAttribute(name) === value) {\n return;\n }\n ref.setAttribute(name, value);\n};\n/**\n * Toggle's the disabled state (attributes & callback) on the given element\n * @param {HTMLElement} ref - The custom element instance\n * @param {boolean} disabled - The disabled state\n */\nexport const setDisabled = (ref, disabled) => {\n ref.toggleAttribute(\"internals-disabled\", disabled);\n if (disabled) {\n setAttribute(ref, \"aria-disabled\", \"true\");\n }\n else {\n ref.removeAttribute(\"aria-disabled\");\n }\n if (ref.formDisabledCallback) {\n ref.formDisabledCallback.apply(ref, [disabled]);\n }\n};\n/**\n * Removes all hidden inputs for the given element internals instance\n * @param {ElementInternals} internals - The element internals instance\n * @return {void}\n */\nexport const removeHiddenInputs = (internals) => {\n const hiddenInputs = hiddenInputMap.get(internals);\n hiddenInputs.forEach((hiddenInput) => {\n hiddenInput.remove();\n });\n hiddenInputMap.set(internals, []);\n};\n/**\n * Creates a hidden input for the given ref\n * @param {HTMLElement} ref - The element to watch\n * @param {ElementInternals} internals - The element internals instance for the ref\n * @return {HTMLInputElement} The hidden input\n */\nexport const createHiddenInput = (ref, internals) => {\n const input = document.createElement(\"input\");\n input.type = \"hidden\";\n input.name = ref.getAttribute(\"name\");\n ref.after(input);\n hiddenInputMap.get(internals).push(input);\n return input;\n};\n/**\n * Initialize a ref by setting up an attribute observe on it\n * looking for changes to disabled\n * @param {HTMLElement} ref - The element to watch\n * @param {ElementInternals} internals - The element internals instance for the ref\n * @return {void}\n */\nexport const initRef = (ref, internals) => {\n hiddenInputMap.set(internals, []);\n disabledOrNameObserver.observe?.(ref, disabledOrNameObserverConfig);\n};\n/**\n * Set up labels for the ref\n * @param {HTMLElement} ref - The ref to add labels to\n * @param {NodeList} labels - A list of the labels\n * @return {void}\n */\nexport const initLabels = (ref, labels) => {\n if (labels.length) {\n const labelList = Array.from(labels);\n labelList.forEach((label) => label.addEventListener(\"click\", ref.click.bind(ref)));\n const [firstLabel] = labelList;\n let firstLabelId = firstLabel.id;\n if (!firstLabel.id) {\n firstLabelId = `${firstLabel.htmlFor}_Label`;\n firstLabel.id = firstLabelId;\n }\n setAttribute(ref, \"aria-labelledby\", firstLabelId);\n }\n};\n/**\n * Sets the internals-valid and internals-invalid attributes\n * based on form validity.\n * @param {HTMLFormElement} - The target form\n * @return {void}\n */\nexport const setFormValidity = (form) => {\n const nativeControlValidity = Array.from(form.elements)\n .filter((element) => !element.tagName.includes(\"-\") && element.validity)\n .map((element) => element.validity.valid);\n const polyfilledElements = formElementsMap.get(form) || [];\n const polyfilledValidity = Array.from(polyfilledElements)\n .filter((control) => control.isConnected)\n .map((control) => internalsMap.get(control).validity.valid);\n const hasInvalid = [...nativeControlValidity, ...polyfilledValidity].includes(false);\n form.toggleAttribute(\"internals-invalid\", hasInvalid);\n form.toggleAttribute(\"internals-valid\", !hasInvalid);\n};\n/**\n * The global form input callback. Updates the form's validity\n * attributes on input.\n * @param {Event} - The form input event\n * @return {void}\n */\nexport const formInputCallback = (event) => {\n setFormValidity(findParentForm(event.target));\n};\n/**\n * The global form change callback. Updates the form's validity\n * attributes on change.\n * @param {Event} - The form change event\n * @return {void}\n */\nexport const formChangeCallback = (event) => {\n setFormValidity(findParentForm(event.target));\n};\n/**\n * The global form submit callback. We need to cancel any submission\n * if a nested internals is invalid.\n * @param {HTMLFormElement} - The form element\n * @return {void}\n */\nexport const wireSubmitLogic = (form) => {\n const submitButtonSelector = [\n \"button[type=submit]\",\n \"input[type=submit]\",\n \"button:not([type])\",\n ]\n .map((sel) => `${sel}:not([disabled])`)\n .map((sel) => `${sel}:not([form])${form.id ? `,${sel}[form='${form.id}']` : \"\"}`)\n .join(\",\");\n form.addEventListener(\"click\", (event) => {\n const target = event.target;\n if (target.closest(submitButtonSelector)) {\n // validate\n const elements = formElementsMap.get(form);\n /**\n * If this form does not validate then we're done\n */\n if (form.noValidate) {\n return;\n }\n /** If the Set has items, continue */\n if (elements.size) {\n const nodes = Array.from(elements);\n /** Check the internals.checkValidity() of all nodes */\n const validityList = nodes.reverse().map((node) => {\n const internals = internalsMap.get(node);\n return internals.reportValidity();\n });\n /** If any node is false, stop the event */\n if (validityList.includes(false)) {\n event.preventDefault();\n }\n }\n }\n });\n};\n/**\n * The global form reset callback. This will loop over added\n * inputs and call formResetCallback if applicable\n * @return {void}\n */\nexport const formResetCallback = (event) => {\n /** Get the Set of elements attached to this form */\n const elements = formElementsMap.get(event.target);\n /** Some forms won't contain form associated custom elements */\n if (elements && elements.size) {\n /** Loop over the elements and call formResetCallback if applicable */\n elements.forEach((element) => {\n if (element.constructor.formAssociated &&\n element.formResetCallback) {\n element.formResetCallback.apply(element);\n }\n });\n }\n};\n/**\n * Initialize the form. We will need to add submit and reset listeners\n * if they don't already exist. If they do, just add the new ref to the form.\n * @param {HTMLElement} ref - The element ref that includes internals\n * @param {HTMLFormElement} form - The form the ref belongs to\n * @param {ElementInternals} internals - The internals for ref\n * @return {void}\n */\nexport const initForm = (ref, form, internals) => {\n if (form) {\n /** This will be a WeakMap */\n const formElements = formElementsMap.get(form);\n if (formElements) {\n /** If formElements exists, add to it */\n formElements.add(ref);\n }\n else {\n /** If formElements doesn't exist, create it and add to it */\n const initSet = new Set();\n initSet.add(ref);\n formElementsMap.set(form, initSet);\n /** Add listeners to emulate validation and reset behavior */\n wireSubmitLogic(form);\n form.addEventListener(\"reset\", formResetCallback);\n form.addEventListener(\"input\", formInputCallback);\n form.addEventListener(\"change\", formChangeCallback);\n }\n formsMap.set(form, { ref, internals });\n /** Call formAssociatedCallback if applicable */\n if (ref.constructor[\"formAssociated\"] && ref.formAssociatedCallback) {\n setTimeout(() => {\n ref.formAssociatedCallback.apply(ref, [form]);\n }, 0);\n }\n setFormValidity(form);\n }\n};\n/**\n * Recursively look for an element's parent form\n * @param {Element} elem - The element to look for a parent form\n * @return {HTMLFormElement|null} - The parent form, if one exists\n */\nexport const findParentForm = (elem) => {\n let parent = elem.parentNode;\n if (parent && parent.tagName !== \"FORM\") {\n parent = findParentForm(parent);\n }\n return parent;\n};\n/**\n * Throw an error if the element ref is not form associated\n * @param ref {HTMLElement} - The element to check if it is form associated\n * @param message {string} - The error message to throw\n * @param ErrorType {any} - The error type to throw, defaults to DOMException\n */\nexport const throwIfNotFormAssociated = (ref, message, ErrorType = DOMException) => {\n if (!ref.constructor[\"formAssociated\"]) {\n throw new ErrorType(message);\n }\n};\n/**\n * Called for each HTMLFormElement.checkValidity|reportValidity\n * will loop over a form's added components and call the respective\n * method modifying the default return value if needed\n * @param form {HTMLFormElement} - The form element to run the method on\n * @param returnValue {boolean} - The initial result of the original method\n * @param method {'checkValidity'|'reportValidity'} - The original method\n * @returns {boolean} The form's validity state\n */\nexport const overrideFormMethod = (form, returnValue, method) => {\n const elements = formElementsMap.get(form);\n /** Some forms won't contain form associated custom elements */\n if (elements && elements.size) {\n elements.forEach((element) => {\n const internals = internalsMap.get(element);\n const valid = internals[method]();\n if (!valid) {\n returnValue = false;\n }\n });\n }\n return returnValue;\n};\n/**\n * Will upgrade an ElementInternals instance by initializing the\n * instance's form and labels. This is called when the element is\n * either constructed or appended from a DocumentFragment\n * @param ref {HTMLElement} - The custom element to upgrade\n */\nexport const upgradeInternals = (ref) => {\n if (ref.constructor[\"formAssociated\"]) {\n const internals = internalsMap.get(ref);\n const { labels, form } = internals;\n initLabels(ref, labels);\n initForm(ref, form, internals);\n }\n};\n/**\n * Check to see if MutationObserver exists in the current\n * execution context. Will likely return false on the server\n * @returns {boolean}\n */\nexport function mutationObserverExists() {\n return typeof MutationObserver !== \"undefined\";\n}\n","import { setFormValidity } from './utils.js';\n/** Emulate the browser's default ValidityState object */\nexport class ValidityState {\n constructor() {\n this.badInput = false;\n this.customError = false;\n this.patternMismatch = false;\n this.rangeOverflow = false;\n this.rangeUnderflow = false;\n this.stepMismatch = false;\n this.tooLong = false;\n this.tooShort = false;\n this.typeMismatch = false;\n this.valid = true;\n this.valueMissing = false;\n Object.seal(this);\n }\n}\n/**\n * Reset a ValidityState object back to valid\n * @param {ValidityState} validityObject - The object to modify\n * @return {ValidityState} - The modified ValidityStateObject\n */\nexport const setValid = (validityObject) => {\n validityObject.badInput = false;\n validityObject.customError = false;\n validityObject.patternMismatch = false;\n validityObject.rangeOverflow = false;\n validityObject.rangeUnderflow = false;\n validityObject.stepMismatch = false;\n validityObject.tooLong = false;\n validityObject.tooShort = false;\n validityObject.typeMismatch = false;\n validityObject.valid = true;\n validityObject.valueMissing = false;\n return validityObject;\n};\n/**\n * Reconcile a ValidityState object with a new state object\n * @param {ValidityState} - The base object to reconcile with new state\n * @param {Object} - A partial ValidityState object to override the original\n * @return {ValidityState} - The updated ValidityState object\n */\nexport const reconcileValidity = (validityObject, newState, form) => {\n validityObject.valid = isValid(newState);\n Object.keys(newState).forEach(key => validityObject[key] = newState[key]);\n if (form) {\n setFormValidity(form);\n }\n return validityObject;\n};\n/**\n * Check if a partial ValidityState object should be valid\n * @param {Object} - A partial ValidityState object\n * @return {Boolean} - Should the new object be valid\n */\nexport const isValid = (validityState) => {\n let valid = true;\n for (let key in validityState) {\n if (key !== 'valid' && validityState[key] !== false) {\n valid = false;\n }\n }\n return valid;\n};\n","/** Save a reference to the ref for the CustomStateSet */\nconst customStateMap = new WeakMap();\nfunction addState(ref, stateName) {\n ref.toggleAttribute(stateName, true);\n if (ref.part) {\n ref.part.add(stateName);\n }\n}\nexport class CustomStateSet extends Set {\n static get isPolyfilled() {\n return true;\n }\n constructor(ref) {\n super();\n if (!ref || !ref.tagName || ref.tagName.indexOf(\"-\") === -1) {\n throw new TypeError(\"Illegal constructor\");\n }\n customStateMap.set(this, ref);\n }\n add(state) {\n if (!/^--/.test(state) || typeof state !== \"string\") {\n throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${state} must start with '--'.`);\n }\n const result = super.add(state);\n const ref = customStateMap.get(this);\n const stateName = `state${state}`;\n /**\n * Only add the state immediately if the ref is connected to the DOM;\n * otherwise, wait a tick because the element is likely being constructed\n * by document.createElement and would throw otherwise.\n */\n if (ref.isConnected) {\n addState(ref, stateName);\n }\n else {\n setTimeout(() => {\n addState(ref, stateName);\n });\n }\n return result;\n }\n clear() {\n for (let [entry] of this.entries()) {\n this.delete(entry);\n }\n super.clear();\n }\n delete(state) {\n const result = super.delete(state);\n const ref = customStateMap.get(this);\n /**\n * Only toggle the state/attr immediately if the ref is connected to the DOM;\n * otherwise, wait a tick because the element is likely being constructed\n * by document.createElement and would throw otherwise.\n */\n if (ref.isConnected) {\n ref.toggleAttribute(`state${state}`, false);\n if (ref.part) {\n ref.part.remove(`state${state}`);\n }\n }\n else {\n setTimeout(() => {\n ref.toggleAttribute(`state${state}`, false);\n if (ref.part) {\n ref.part.remove(`state${state}`);\n }\n });\n }\n return result;\n }\n}\n","var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n};\nvar __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\nvar _HTMLFormControlsCollection_elements;\nexport class HTMLFormControlsCollection {\n constructor(elements) {\n _HTMLFormControlsCollection_elements.set(this, void 0);\n __classPrivateFieldSet(this, _HTMLFormControlsCollection_elements, elements, \"f\");\n for (let i = 0; i < elements.length; i++) {\n let element = elements[i];\n this[i] = element;\n if (element.hasAttribute('name')) {\n this[element.getAttribute('name')] = element;\n }\n }\n Object.freeze(this);\n }\n get length() {\n return __classPrivateFieldGet(this, _HTMLFormControlsCollection_elements, \"f\").length;\n }\n [(_HTMLFormControlsCollection_elements = new WeakMap(), Symbol.iterator)]() {\n return __classPrivateFieldGet(this, _HTMLFormControlsCollection_elements, \"f\")[Symbol.iterator]();\n }\n item(i) {\n return this[i] == null ? null : this[i];\n }\n namedItem(name) {\n return this[name] == null ? null : this[name];\n }\n}\n","import { HTMLFormControlsCollection } from './HTMLFormControlsCollection.js';\nimport { formElementsMap } from './maps.js';\nimport { overrideFormMethod } from './utils.js';\n/**\n * Patch the HTMLElement prototype\n *\n * This function patches checkValidity, reportValidity and elements\n */\nexport function patchFormPrototype() {\n const checkValidity = HTMLFormElement.prototype.checkValidity;\n HTMLFormElement.prototype.checkValidity = checkValidityOverride;\n const reportValidity = HTMLFormElement.prototype.reportValidity;\n HTMLFormElement.prototype.reportValidity = reportValidityOverride;\n function checkValidityOverride(...args) {\n let returnValue = checkValidity.apply(this, args);\n return overrideFormMethod(this, returnValue, 'checkValidity');\n }\n function reportValidityOverride(...args) {\n let returnValue = reportValidity.apply(this, args);\n return overrideFormMethod(this, returnValue, 'reportValidity');\n }\n const { get } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, 'elements');\n Object.defineProperty(HTMLFormElement.prototype, 'elements', {\n get(...args) {\n const elements = get.call(this, ...args);\n const polyfilledElements = Array.from(formElementsMap.get(this) || []);\n // If there are no polyfilled elements, return the native elements collection\n if (polyfilledElements.length === 0) {\n return elements;\n }\n // Merge the native elements with the polyfilled elements\n // and order them by their position in the DOM\n const orderedElements = Array.from(elements).concat(polyfilledElements).sort((a, b) => {\n if (a.compareDocumentPosition) {\n return a.compareDocumentPosition(b) & 2 ? 1 : -1;\n }\n return 0;\n });\n return new HTMLFormControlsCollection(orderedElements);\n },\n });\n}\n","import { connectedCallbackMap, internalsMap, refMap, refValueMap, shadowHostsMap, shadowRootMap, validationAnchorMap, validityMap, validationMessageMap, validityUpgradeMap, } from \"./maps.js\";\nimport { setAttribute, createHiddenInput, findParentForm, initRef, mutationObserverExists, removeHiddenInputs, setDisabled, throwIfNotFormAssociated, upgradeInternals, } from \"./utils.js\";\nimport { initAom } from \"./aom.js\";\nimport { ValidityState, reconcileValidity, setValid } from \"./ValidityState.js\";\nimport { deferUpgrade, observerCallback, observerConfig, } from \"./mutation-observers.js\";\nimport { CustomStateSet } from \"./CustomStateSet.js\";\nimport { patchFormPrototype } from \"./patch-form-prototype.js\";\nexport class ElementInternals {\n static get isPolyfilled() {\n return true;\n }\n constructor(ref) {\n if (!ref || !ref.tagName || ref.tagName.indexOf(\"-\") === -1) {\n throw new TypeError(\"Illegal constructor\");\n }\n const rootNode = ref.getRootNode();\n const validity = new ValidityState();\n this.states = new CustomStateSet(ref);\n refMap.set(this, ref);\n validityMap.set(this, validity);\n internalsMap.set(ref, this);\n initAom(ref, this);\n initRef(ref, this);\n Object.seal(this);\n /**\n * If appended from a DocumentFragment, wait until it is connected\n * before attempting to upgrade the internals instance\n */\n if (rootNode instanceof DocumentFragment) {\n deferUpgrade(rootNode);\n }\n }\n /**\n * Will return true if the element is in a valid state\n */\n checkValidity() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);\n /** If the element will not validate, it is necessarily valid by default */\n if (!this.willValidate) {\n return true;\n }\n const validity = validityMap.get(this);\n if (!validity.valid) {\n const validityEvent = new Event(\"invalid\", {\n bubbles: false,\n cancelable: true,\n composed: false,\n });\n ref.dispatchEvent(validityEvent);\n }\n return validity.valid;\n }\n /** The form element the custom element is associated with */\n get form() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n let form;\n if (ref.constructor[\"formAssociated\"] === true) {\n form = findParentForm(ref);\n }\n return form;\n }\n /** A list of all relative form labels for this element */\n get labels() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n const id = ref.getAttribute(\"id\");\n const hostRoot = ref.getRootNode();\n if (hostRoot && id) {\n return hostRoot.querySelectorAll(`[for=\"${id}\"]`);\n }\n return [];\n }\n /** Will report the elements validity state */\n reportValidity() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);\n /** If the element will not validate, it is valid by default */\n if (!this.willValidate) {\n return true;\n }\n const valid = this.checkValidity();\n const anchor = validationAnchorMap.get(this);\n if (anchor && !ref.constructor[\"formAssociated\"]) {\n throw new DOMException(`Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);\n }\n if (!valid && anchor) {\n ref.focus();\n anchor.focus();\n }\n return valid;\n }\n /** Sets the element's value within the form */\n setFormValue(value) {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element.`);\n removeHiddenInputs(this);\n if (value != null && !(value instanceof FormData)) {\n if (ref.getAttribute(\"name\")) {\n const hiddenInput = createHiddenInput(ref, this);\n hiddenInput.value = value;\n }\n }\n else if (value != null && value instanceof FormData) {\n Array.from(value)\n .reverse()\n .forEach(([formDataKey, formDataValue]) => {\n if (typeof formDataValue === \"string\") {\n const hiddenInput = createHiddenInput(ref, this);\n hiddenInput.name = formDataKey;\n hiddenInput.value = formDataValue;\n }\n });\n }\n refValueMap.set(ref, value);\n }\n /**\n * Sets the element's validity. The first argument is a partial ValidityState object\n * reflecting the changes to be made to the element's validity. If the element is invalid,\n * the second argument sets the element's validation message.\n *\n * If the field is valid and a message is specified, the method will throw a TypeError.\n */\n setValidity(validityChanges, validationMessage, anchor) {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);\n if (!validityChanges) {\n throw new TypeError(\"Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.\");\n }\n validationAnchorMap.set(this, anchor);\n const validity = validityMap.get(this);\n const validityChangesObj = {};\n for (const key in validityChanges) {\n validityChangesObj[key] = validityChanges[key];\n }\n if (Object.keys(validityChangesObj).length === 0) {\n setValid(validity);\n }\n const check = { ...validity, ...validityChangesObj };\n delete check.valid;\n const { valid } = reconcileValidity(validity, check, this.form);\n if (!valid && !validationMessage) {\n throw new DOMException(`Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.`);\n }\n validationMessageMap.set(this, valid ? \"\" : validationMessage);\n // check to make sure the host element is connected before adding attributes\n // because safari doesnt allow elements to have attributes added in the constructor\n if (ref.isConnected) {\n ref.toggleAttribute(\"internals-invalid\", !valid);\n ref.toggleAttribute(\"internals-valid\", valid);\n setAttribute(ref, \"aria-invalid\", `${!valid}`);\n }\n else {\n validityUpgradeMap.set(ref, this);\n }\n }\n get shadowRoot() {\n const ref = refMap.get(this);\n const shadowRoot = shadowRootMap.get(ref);\n if (shadowRoot) {\n return shadowRoot;\n }\n return null;\n }\n /** The element's validation message set during a call to ElementInternals.setValidity */\n get validationMessage() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n return validationMessageMap.get(this);\n }\n /** The current validity state of the object */\n get validity() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n const validity = validityMap.get(this);\n return validity;\n }\n /** If true the element will participate in a form's constraint validation. */\n get willValidate() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n if (ref.matches(\":disabled\") ||\n ref[\"disabled\"] ||\n ref.hasAttribute(\"disabled\") ||\n ref.hasAttribute(\"readonly\")) {\n return false;\n }\n return true;\n }\n}\nexport function isElementInternalsSupported() {\n if (typeof window === \"undefined\" ||\n !window.ElementInternals ||\n !HTMLElement.prototype.attachInternals) {\n return false;\n }\n class ElementInternalsFeatureDetection extends HTMLElement {\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n }\n const randomName = `element-internals-feature-detection-${Math.random()\n .toString(36)\n .replace(/[^a-z]+/g, \"\")}`;\n customElements.define(randomName, ElementInternalsFeatureDetection);\n const featureDetectionElement = new ElementInternalsFeatureDetection();\n return [\n \"shadowRoot\",\n \"form\",\n \"willValidate\",\n \"validity\",\n \"validationMessage\",\n \"labels\",\n \"setFormValue\",\n \"setValidity\",\n \"checkValidity\",\n \"reportValidity\",\n ].every((prop) => prop in featureDetectionElement.internals);\n}\nlet hasElementInternalsPolyfillBeenApplied = false;\nlet hasCustomStateSetPolyfillBeenApplied = false;\n/**\n * Forcibly applies the polyfill for CustomStateSet.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet\n */\nexport function forceCustomStateSetPolyfill(attachInternals) {\n if (hasCustomStateSetPolyfillBeenApplied) {\n return;\n }\n hasCustomStateSetPolyfillBeenApplied = true;\n /** @ts-expect-error These types won't match because this is a polyfill */\n window.CustomStateSet = CustomStateSet;\n if (attachInternals) {\n HTMLElement.prototype.attachInternals = function (...args) {\n const internals = attachInternals.call(this, args);\n internals.states = new CustomStateSet(this);\n return internals;\n };\n }\n}\n/**\n * Forcibly applies the polyfill for ElementInternals. Useful for situations\n * like Chrome extensions where Chrome supports ElementInternals, but the\n * CustomElements polyfill is required.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n *\n * @param forceCustomStateSet Optional: when true, forces the\n * [CustomStateSet](https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet)\n * polyfill as well.\n */\nexport function forceElementInternalsPolyfill(forceCustomStateSet = true) {\n if (hasElementInternalsPolyfillBeenApplied) {\n return;\n }\n hasElementInternalsPolyfillBeenApplied = true;\n if (typeof window !== \"undefined\") {\n /** @ts-expect-error: we need to replace the default ElementInternals */\n window.ElementInternals = ElementInternals;\n }\n if (typeof CustomElementRegistry !== \"undefined\") {\n const define = CustomElementRegistry.prototype.define;\n CustomElementRegistry.prototype.define = function (name, constructor, options) {\n if (constructor.formAssociated) {\n const connectedCallback = constructor.prototype.connectedCallback;\n constructor.prototype.connectedCallback = function () {\n if (!connectedCallbackMap.has(this)) {\n connectedCallbackMap.set(this, true);\n if (this.hasAttribute(\"disabled\")) {\n setDisabled(this, true);\n }\n }\n if (connectedCallback != null) {\n connectedCallback.apply(this);\n }\n // always upgradeInternals in connectedCallback instead of constructor\n upgradeInternals(this);\n };\n }\n define.call(this, name, constructor, options);\n };\n }\n /**\n * Attaches an ElementInternals instance to a custom element. Calling this method\n * on a built-in element will throw an error.\n */\n if (typeof HTMLElement !== \"undefined\") {\n HTMLElement.prototype.attachInternals = function () {\n if (!this.tagName) {\n /** This happens in the LitSSR environment. Here we can generally ignore internals for now */\n return {};\n }\n else if (this.tagName.indexOf(\"-\") === -1) {\n throw new Error(`Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.`);\n }\n if (internalsMap.has(this)) {\n throw new DOMException(`DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.`);\n }\n return new ElementInternals(this);\n };\n }\n if (typeof Element !== \"undefined\") {\n function attachShadowObserver(...args) {\n const shadowRoot = attachShadow.apply(this, args);\n shadowRootMap.set(this, shadowRoot);\n if (mutationObserverExists()) {\n const observer = new MutationObserver(observerCallback);\n if (window.ShadyDOM) {\n observer.observe(this, observerConfig);\n }\n else {\n observer.observe(shadowRoot, observerConfig);\n }\n shadowHostsMap.set(this, observer);\n }\n return shadowRoot;\n }\n const attachShadow = Element.prototype.attachShadow;\n Element.prototype.attachShadow = attachShadowObserver;\n }\n if (mutationObserverExists() && typeof document !== \"undefined\") {\n const documentObserver = new MutationObserver(observerCallback);\n documentObserver.observe(document.documentElement, observerConfig);\n }\n /**\n * Keeps the polyfill from throwing in environments where HTMLFormElement\n * is undefined like in a server environment\n */\n if (typeof HTMLFormElement !== \"undefined\") {\n patchFormPrototype();\n }\n if (forceCustomStateSet ||\n (typeof window !== \"undefined\" && !window.CustomStateSet)) {\n forceCustomStateSetPolyfill();\n }\n}\n","import { forceCustomStateSetPolyfill, forceElementInternalsPolyfill, isElementInternalsSupported, } from \"./element-internals.js\";\nimport \"./element-internals.js\";\nexport * from \"./types.js\";\nexport { forceCustomStateSetPolyfill, forceElementInternalsPolyfill, } from \"./element-internals.js\";\n// Deteermine whether the webcomponents polyfill has been applied.\nconst isCePolyfill = !!customElements.polyfillWrapFlushCallback;\n// custom elements polyfill is on. Do not auto-apply. User should determine\n// whether to force or not.\nif (!isCePolyfill) {\n if (!isElementInternalsSupported()) {\n forceElementInternalsPolyfill(false);\n }\n else if (typeof window !== \"undefined\" && !window.CustomStateSet) {\n forceCustomStateSetPolyfill(HTMLElement.prototype.attachInternals);\n }\n}\n","/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&\"adoptedStyleSheets\"in Document.prototype&&\"replace\"in CSSStyleSheet.prototype,s=Symbol(),o=new WeakMap;class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)throw Error(\"CSSResult is not constructable. Use `unsafeCSS` or `css` instead.\");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const s=this.t;if(e&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o.set(s,t))}return t}toString(){return this.cssText}}const r=t=>new n(\"string\"==typeof t?t:t+\"\",void 0,s),i=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if(\"number\"==typeof t)return t;throw Error(\"Value passed to 'css' function must be a 'css' function result: \"+t+\". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.\")})(s)+t[o+1]),t[0]);return new n(o,t,s)},S=(s,o)=>{if(e)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement(\"style\"),n=t.litNonce;void 0!==n&&o.setAttribute(\"nonce\",n),o.textContent=e.cssText,s.appendChild(o)}},c=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e=\"\";for(const s of t.cssRules)e+=s.cssText;return r(e)})(t):t;export{n as CSSResult,S as adoptStyles,i as css,c as getCompatibleStyle,e as supportsAdoptingStyleSheets,r as unsafeCSS};\n//# sourceMappingURL=css-tag.js.map\n","import{getCompatibleStyle as t,adoptStyles as s}from\"./css-tag.js\";export{CSSResult,adoptStyles,css,getCompatibleStyle,supportsAdoptingStyleSheets,unsafeCSS}from\"./css-tag.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{is:i,defineProperty:e,getOwnPropertyDescriptor:r,getOwnPropertyNames:h,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:\"\",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},f=(t,s)=>!i(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol(\"metadata\"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e(this.prototype,t,r)}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(d(\"elementProperties\")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(d(\"finalized\")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d(\"properties\"))){const t=this.properties,s=[...h(t),...o(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(t(s))}else void 0!==s&&i.push(t(s));return i}static _$Eu(t,s){const i=s.attribute;return!1===i?void 0:\"string\"==typeof i?i:\"string\"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return s(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r=\"function\"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i)}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU()}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU()}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:\"open\"},b[d(\"elementProperties\")]=new Map,b[d(\"finalized\")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push(\"2.0.4\");export{b as ReactiveElement,u as defaultConverter,f as notEqual};\n//# sourceMappingURL=reactive-element.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst n=globalThis,c=n.trustedTypes,h=c?c.createPolicy(\"lit-html\",{createHTML:t=>t}):void 0,f=\"$lit$\",v=`lit$${Math.random().toFixed(9).slice(2)}$`,m=\"?\"+v,_=`<${m}>`,w=document,lt=()=>w.createComment(\"\"),st=t=>null===t||\"object\"!=typeof t&&\"function\"!=typeof t,g=Array.isArray,$=t=>g(t)||\"function\"==typeof t?.[Symbol.iterator],x=\"[ \\t\\n\\f\\r]\",T=/<(?:(!--|\\/[^a-zA-Z])|(\\/?[a-zA-Z][^>\\s]*)|(\\/?$))/g,E=/-->/g,k=/>/g,O=RegExp(`>|${x}(?:([^\\\\s\"'>=/]+)(${x}*=${x}*(?:[^ \\t\\n\\f\\r\"'\\`<>=]|(\"|')|))|$)`,\"g\"),S=/'/g,j=/\"/g,M=/^(?:script|style|textarea|title)$/i,P=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),ke=P(1),Oe=P(2),Se=P(3),R=Symbol.for(\"lit-noChange\"),D=Symbol.for(\"lit-nothing\"),V=new WeakMap,I=w.createTreeWalker(w,129);function N(t,i){if(!g(t)||!t.hasOwnProperty(\"raw\"))throw Error(\"invalid template strings array\");return void 0!==h?h.createHTML(i):i}const U=(t,i)=>{const s=t.length-1,e=[];let h,o=2===i?\"\":3===i?\"\":\"\",n=T;for(let i=0;i\"===l[0]?(n=h??T,c=-1):void 0===l[1]?c=-2:(c=n.lastIndex-l[2].length,r=l[1],n=void 0===l[3]?O:'\"'===l[3]?j:S):n===j||n===S?n=O:n===E||n===k?n=T:(n=O,h=void 0);const u=n===O&&t[i+1].startsWith(\"/>\")?\" \":\"\";o+=n===T?s+_:c>=0?(e.push(r),s.slice(0,c)+f+s.slice(c)+v+u):s+v+(-2===c?i:u)}return[N(t,o+(t[s]||\"\")+(2===i?\"\":3===i?\"\":\"\")),e]};class B{constructor({strings:t,_$litType$:i},s){let e;this.parts=[];let h=0,o=0;const n=t.length-1,r=this.parts,[l,a]=U(t,i);if(this.el=B.createElement(l,s),I.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(e=I.nextNode())&&r.length0){e.textContent=c?c.emptyScript:\"\";for(let s=0;s2||\"\"!==s[0]||\"\"!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=D}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=z(this,t,i,0),o=!st(t)||t!==this._$AH&&t!==R,o&&(this._$AH=t);else{const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new et(i.insertBefore(lt(),t),t,void 0,s??{})}return h._$AI(t),h};export{si as _$LH,ke as html,Se as mathml,R as noChange,D as nothing,Q as render,Oe as svg};\n//# sourceMappingURL=lit-html.js.map\n","import{ReactiveElement as e}from\"@lit/reactive-element\";export*from\"@lit/reactive-element\";import{render as n,noChange as l}from\"lit-html\";export*from\"lit-html\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class h extends e{constructor(){super(...arguments),this.renderOptions={host:this},this.o=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.o=n(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.o?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.o?.setConnected(!1)}render(){return l}}h._$litElement$=!0,h[\"finalized\"]=!0,globalThis.litElementHydrateSupport?.({LitElement:h});const f=globalThis.litElementPolyfillSupport;f?.({LitElement:h});const x={_$AK:(t,e,s)=>{t._$AK(e,s)},_$AL:t=>t._$AL};(globalThis.litElementVersions??=[]).push(\"4.1.0\");export{h as LitElement,x as _$LE};\n//# sourceMappingURL=lit-element.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t=t=>(e,o)=>{void 0!==o?o.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)};export{t as customElement};\n//# sourceMappingURL=custom-element.js.map\n","import{defaultConverter as t,notEqual as e}from\"../reactive-element.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o={attribute:!0,type:String,converter:t,reflect:!1,hasChanged:e},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),s.set(r.name,t),\"accessor\"===n){const{name:o}=r;return{set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t)},init(e){return void 0!==e&&this.P(o,void 0,t),e}}}if(\"setter\"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t)}}throw Error(\"Unsupported decorator location: \"+n)};function n(t){return(e,o)=>\"object\"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,r?{...t,wrapped:!0}:t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}export{n as property,r as standardProperty};\n//# sourceMappingURL=property.js.map\n","import{property as t}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};\n//# sourceMappingURL=state.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&\"object\"!=typeof t&&Object.defineProperty(e,t,c),c);export{e as desc};\n//# sourceMappingURL=base.js.map\n","import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function e(e,r){return(n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:r}=\"object\"==typeof s?n:i??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return t(n,s,{get(){let t=e.call(this);return void 0===t&&(t=o(this),(null!==t||this.hasUpdated)&&r.call(this,t)),t}})}return t(n,s,{get(){return o(this)}})}}export{e as query};\n//# sourceMappingURL=query.js.map\n","import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function o(o){return(e,n)=>{const{slot:r,selector:s}=o??{},c=\"slot\"+(r?`[name=${r}]`:\":not([name])\");return t(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}export{o as queryAssignedElements};\n//# sourceMappingURL=query-assigned-elements.js.map\n","export const redispatchEvent = (element, event) => {\n if (event.bubbles && (!element.shadowRoot || event.composed)) {\n event.stopPropagation();\n }\n const copy = Reflect.construct(event.constructor, [event.type, event]);\n const dispatched = element.dispatchEvent(copy);\n if (!dispatched) {\n event.preventDefault();\n }\n return dispatched;\n};\n//# sourceMappingURL=redispatch.js.map","export const requestSubmitPolyfill = () => {\n const validateSubmitter = (submitter, form) => {\n if (!(submitter instanceof HTMLElement)) {\n throw new TypeError('parameter 1 is not of type \\'HTMLElement\\'');\n }\n if (submitter.type !== 'submit') {\n throw new TypeError('The specified element is not a submit button');\n }\n if (submitter.form !== form) {\n throw new DOMException('The specified element is not owned by this form element', 'NotFoundError');\n }\n };\n if (typeof HTMLFormElement.prototype.requestSubmit !== 'function') {\n HTMLFormElement.prototype.requestSubmit = function (submitter) {\n if (submitter) {\n validateSubmitter(submitter, this);\n submitter.click();\n }\n else {\n submitter = document.createElement('input');\n submitter.type = 'submit';\n submitter.hidden = true;\n this.appendChild(submitter);\n submitter.click();\n this.removeChild(submitter);\n }\n };\n }\n};\n//# sourceMappingURL=polyfills.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { redispatchEvent } from './redispatch.js';\nimport { requestSubmitPolyfill } from './polyfills.js';\nrequestSubmitPolyfill();\nexport class ChangeEvent extends Event {\n constructor(value) {\n super(ChangeEvent.type, { bubbles: true, composed: true });\n this.value = '';\n this.value = value;\n }\n}\nChangeEvent.type = 'change';\nexport class FormElement extends LitElement {\n constructor() {\n super(...arguments);\n this.internals = this.attachInternals();\n this.initialValue = '';\n this.isInitialValueChange = true;\n }\n get form() {\n return this.internals.form;\n }\n get type() {\n return this.localName;\n }\n get validity() {\n return this.internals.validity;\n }\n get validationMessage() {\n return this.internals.validationMessage;\n }\n get willValidate() {\n return this.internals.willValidate;\n }\n checkValidity() {\n return this.internals.checkValidity();\n }\n reportValidity() {\n return this.internals.reportValidity();\n }\n emit(value) {\n this.dispatchEvent(new ChangeEvent(value));\n }\n}\nFormElement.formAssociated = true;\nexport class ValueFormElement extends FormElement {\n updated(changedProperties) {\n if (changedProperties.has('value')) {\n this.internals.setFormValue(this.value);\n }\n super.updated(changedProperties);\n }\n}\nexport class BooleanFormElement extends FormElement {\n updated(changedProperties) {\n super.updated(changedProperties);\n if (changedProperties.has('checked')) {\n const value = this.value || 'on';\n this.internals.setFormValue(this.checked ? value : null);\n }\n }\n}\nexport const buttonTypes = ['submit', 'reset', 'button'];\nexport class ButtonElement extends FormElement {\n constructor() {\n super(...arguments);\n this.buttonType = 'button';\n this.isRedispatchingEvent = false;\n }\n dispatchSubmit(event) {\n event.preventDefault();\n if (this.isRedispatchingEvent) {\n return;\n }\n if (!this.form) {\n return;\n }\n const isSubmit = this.buttonType === 'submit';\n const isReset = this.buttonType === 'reset';\n if (!(isSubmit || isReset)) {\n return;\n }\n event.stopPropagation();\n this.isRedispatchingEvent = true;\n const prevented = !redispatchEvent(this, event);\n this.isRedispatchingEvent = false;\n if (prevented) {\n return;\n }\n if (isSubmit && typeof this.form.requestSubmit == 'function') {\n this.form.requestSubmit();\n return;\n }\n if (isSubmit) {\n this.form.submit();\n return;\n }\n if (isReset) {\n this.form.reset();\n return;\n }\n }\n}\n__decorate([\n property({ type: String, attribute: 'type' })\n], ButtonElement.prototype, \"buttonType\", void 0);\n//# sourceMappingURL=formElement.js.map","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this.t=t,this._$AM=e,this.i=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}export{i as Directive,t as PartType,e as directive};\n//# sourceMappingURL=directive.js.map\n","import{noChange as R}from\"../lit-html.js\";import{directive as e,Directive as i,PartType as t}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const Rt=e(class extends i{constructor(s){if(super(s),s.type!==t.ATTRIBUTE||\"class\"!==s.name||s.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter((s=>t[s])).join(\" \")+\" \"}update(t,[s]){if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(\" \").split(/\\s/).filter((t=>\"\"!==t))));for(const t in s)s[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(s)}const i=t.element.classList;for(const t of this.st)t in s||(i.remove(t),this.st.delete(t));for(const t in s){const r=!!s[t];r===this.st.has(t)||this.nt?.has(t)||(r?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return R}});export{Rt as classMap};\n//# sourceMappingURL=class-map.js.map\n","import { css } from 'lit';\nexport const csColorAction = {\n primary: css `var(--cs-color-action-primary, #36af84)`,\n primaryHover: css `var(--cs-color-action-primary-hover, #73c1a6)`,\n secondary: css `var(--cs-color-action-secondary, #222222)`,\n secondaryHover: css `var(--cs-color-action-secondary-hover, #555555)`,\n linkPrimary: css `var(--cs-color-action-link-primary, #4096ef)`,\n linkPrimaryHover: css `var(--cs-color-action-link-primary-hover, #3a87d7)`,\n linkSecondary: css `var(--cs-color-action-link-secondary, #222222)`,\n linkSecondaryHover: css `var(--cs-color-action-link-secondary-hover, #3A87D7)`,\n linkWhite: css `var(--cs-color-action-link-white, #ffffff)`,\n linkWhiteHover: css `var(--cs-color-action-link-white-hover, #ffffff)`,\n hotspot: css `var(--cs-color-action-hotspot, #ffffff)`,\n hotspotHover: css `var(--cs-color-action-hotspot-hover, #ffffffa8)`\n};\nexport const csColorBorder = {\n dark: css `var(--cs-color-border-dark, #999999)`,\n medium: css `var(--cs-color-border-medium, #bebfc2)`,\n light: css `var(--cs-color-border-light, #eaeaea)`\n};\nexport const csColorBackground = {\n primary: css `var(--cs-color-background-primary, #ffffff)`,\n secondary: css `var(--cs-color-background-secondary, #f7fafd)`,\n inverted: css `var(--cs-color-background-inverted, #222222)`,\n muted: css `var(--cs-color-background-muted, #999999)`,\n disabled: css `var(--cs-color-background-disabled, #eaeaea)`,\n tooltip: css `var(--cs-color-background-tooltip, #000000d9)`,\n error: css `var(--cs-color-background-error, #fae9ed)`,\n info: css `var(--cs-color-background-info, #ecf5fe)`,\n success: css `var(--cs-color-background-success, #ebf7f3)`,\n warning: css `var(--cs-color-background-warning, #fef2eb)`\n};\nexport const csColorText = {\n headings: css `var(--cs-color-text-headings, #222222)`,\n body: css `var(--cs-color-text-body, #555555)`,\n muted: css `var(--cs-color-text-muted, #999999)`,\n placeholder: css `var(--cs-color-text-placeholder, #bebfc2)`,\n white: css `var(--cs-color-text-white, #ffffff)`\n};\nexport const csColorFunctional = {\n error: css `var(--cs-color-functional-error, #c81a47)`,\n info: css `var(--cs-color-functional-info, #4096ef)`,\n success: css `var(--cs-color-functional-success, #7aaf36)`,\n warning: css `var(--cs-color-functional-warning, #ef7733)`,\n infoOverlay: css `var(--cs-color-functional-info-overlay, #4096ef33)`,\n errorHover: css `var(--cs-color-functional-error-hover, #D3486C)`,\n infoHover: css `var(--cs-color-functional-info-hover, #66ABF2)`,\n successHover: css `var(--cs-color-functional-success-hover, #94BF5E)`,\n warningHover: css `var(--cs-color-functional-warning-hover, #F2925C)`,\n highlight: css `var(--cs-color-functional-highlight, #ecc030)`,\n new: css `var(--cs-color-functional-new, #36af84)`,\n sale: css `var(--cs-color-functional-sale, #1c5f71)`,\n bestseller: css `var(--cs-color-functional-bestseller, #ef7733)`,\n ourChoice: css `var(--cs-color-functional-our-choice, #0d2f66)`\n};\n//# sourceMappingURL=colors.style.js.map","import { css } from 'lit';\nexport const csTransition = {\n duration: css `var(--cs-transition-duration, 0.3s)`,\n timingFunction: css `var(--cs-transition-timing-function, ease-in-out)`\n};\nexport const csBorder = {\n radiusNone: css `var(--cs-border-radius-none, 0)`,\n radiusMinimal: css `var(--cs-border-radius-minimal, 2px)`,\n radiusSubtle: css `var(--cs-border-radius-subtle, 3px)`,\n radiusMedium: css `var(--cs-border-radius-medium, 4px)`,\n radiusRounded: css `var(--cs-border-radius-rounded, 10px)`,\n radiusFull: css `var(--cs-border-radius-full, 360px)`,\n width: css `var(--cs-border-width, 1px)`\n};\n//# sourceMappingURL=globals.style.js.map","import { css } from 'lit';\nexport const csSpacing = {\n spacing00: css `var(--cs-spacing-00, 1px)`,\n spacing01: css `var(--cs-spacing-01, 2px)`,\n spacing02: css `var(--cs-spacing-02, 3px)`,\n spacing03: css `var(--cs-spacing-03, 4px)`,\n spacing04: css `var(--cs-spacing-04, 5px)`,\n spacing05: css `var(--cs-spacing-05, 10px)`,\n spacing06: css `var(--cs-spacing-06, 15px)`,\n spacing07: css `var(--cs-spacing-07, 20px)`,\n spacing08: css `var(--cs-spacing-08, 30px)`,\n spacing09: css `var(--cs-spacing-09, 40px)`,\n spacing10: css `var(--cs-spacing-10, 50px)`,\n spacing11: css `var(--cs-spacing-11, 60px)`,\n spacing12: css `var(--cs-spacing-12, 75px)`,\n spacing13: css `var(--cs-spacing-13, 100px)`\n};\n//# sourceMappingURL=spacing.style.js.map","import { css } from 'lit';\nimport { csColorBackground, csColorBorder } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder, csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseAccordion = {\n headerGap: css `var(--cse-accordion-header-gap, ${csSpacing.spacing05})`,\n defaultHeaderBackgroundColor: css `var(--cse-accordion-default-header-background-color, ${csColorBackground.secondary})`,\n defaultHeaderBorderTopRadius: css `var(--cse-accordion-default-header-border-top-radius, ${csBorder.radiusMinimal})`,\n defaultHeaderBorderBottomRadius: css `var(--cse-accordion-default-header-border-bottom-radius, 0)`,\n defaultHeaderPaddingBlock: css `var(--cse-accordion-default-header-padding-y, ${csSpacing.spacing05})`,\n defaultHeaderPaddingInline: css `var(--cse-accordion-default-header-padding-x, ${csSpacing.spacing06})`,\n defaultContentBackgroundColor: css `var(--cse-accordion-default-content-background-color, ${csColorBackground.primary})`,\n defaultContentPaddingBlock: css `var(--cse-accordion-default-content-padding-y, ${csSpacing.spacing06})`,\n defaultContentPaddingInline: css `var(--cse-accordion-default-content-padding-x, ${csSpacing.spacing06})`,\n panelGap: css `var(--cse-accordion-panel-gap, ${csSpacing.spacing04})`,\n panelHeaderPaddingBlock: css `var(--cse-accordion-panel-header-padding-y, ${csSpacing.spacing05})`,\n panelContentBorderBottomColor: css `var(--cse-accordion-panel-border-bottom-color, ${csColorBorder.light})`,\n panelContentBorderBottomWidth: css `var(--cse-accordion-panel-border-bottom-width, ${csBorder.width})`,\n panelContentPaddingBottom: css `var(--cse-accordion-panel-content-padding-bottom, ${csSpacing.spacing06})`,\n panelContentPaddingTop: css `var(--cse-accordion-panel-content-padding-top, 0)`,\n simpleHeaderPaddingBlock: css `var(--cse-accordion-simple-header-padding-y, ${csSpacing.spacing05})`,\n simpleContentPaddingBottom: css `var(--cse-accordion-simple-content-padding-bottom, 0)`,\n simpleContentPaddingTop: css `var(--cse-accordion-simple-content-padding-top, ${csSpacing.spacing04})`,\n groupGap: css `var(--cse-accordion-group-gap, ${csSpacing.spacing04})`\n};\nexport const style = css `\n /* Header */\n .cse-accordion-header {\n align-items: center;\n display: flex;\n justify-content: space-between;\n gap: ${cseAccordion.headerGap};\n cursor: pointer;\n }\n\n /* Icon */\n .cse-accordion-icon {\n transform: rotate(0);\n transition-duration: ${csTransition.duration};\n transition-property: transform;\n transition-timing-function: ${csTransition.timingFunction};\n }\n\n .cse-accordion-icon.open {\n transform: rotate(-180deg);\n }\n\n /* Content */\n .cse-accordion-content {\n display: grid;\n grid-template-rows: 0fr;\n\n transition-duration: ${csTransition.duration};\n transition-property: grid-template-rows, padding;\n transition-timing-function: ${csTransition.timingFunction};\n }\n\n .cse-accordion-content > slot[name=\"content\"] {\n display: block;\n overflow: hidden;\n }\n\n .cse-accordion.open .cse-accordion-content {\n grid-template-rows: 1fr;\n }\n\n /* Variant default */\n .variant-default .cse-accordion-header {\n background-color: ${cseAccordion.defaultHeaderBackgroundColor};\n border-top-left-radius: ${cseAccordion.defaultHeaderBorderTopRadius};\n border-top-right-radius: ${cseAccordion.defaultHeaderBorderTopRadius};\n border-bottom-left-radius: ${cseAccordion.defaultHeaderBorderBottomRadius};\n border-bottom-right-radius: ${cseAccordion.defaultHeaderBorderBottomRadius};\n padding-block: ${cseAccordion.defaultHeaderPaddingBlock};\n padding-inline: ${cseAccordion.defaultHeaderPaddingInline};\n }\n\n .variant-default .cse-accordion-content {\n background-color: ${cseAccordion.defaultContentBackgroundColor};\n padding-block: ${cseAccordion.defaultContentPaddingBlock};\n padding-inline: ${cseAccordion.defaultContentPaddingInline};\n }\n\n .variant-default.open .cse-accordion-content {\n padding-block: ${cseAccordion.defaultContentPaddingBlock};\n }\n\n /* Variant panel */\n .variant-panel {\n display: flex;\n flex-direction: column;\n gap: ${cseAccordion.panelGap};\n }\n\n .variant-panel .cse-accordion-header {\n padding-block: ${cseAccordion.panelHeaderPaddingBlock};\n padding-inline: 0;\n }\n\n .variant-panel .cse-accordion-content {\n padding-block: 0;\n padding-inline: 0;\n border-bottom-width: ${cseAccordion.panelContentBorderBottomWidth};\n border-bottom-style: solid;\n border-bottom-color: ${cseAccordion.panelContentBorderBottomColor};\n }\n\n .variant-panel.open .cse-accordion-content {\n padding-top: ${cseAccordion.panelContentPaddingTop};\n padding-bottom: ${cseAccordion.panelContentPaddingBottom};\n }\n\n /* Variant Simpel */\n .variant-simple .cse-accordion-header {\n justify-content: left;\n padding-block: ${cseAccordion.simpleHeaderPaddingBlock};\n }\n\n .variant-simple .cse-accordion-content {\n padding-top: ${cseAccordion.simpleContentPaddingTop};\n padding-bottom: ${cseAccordion.simpleContentPaddingBottom};\n }\n\n /* Accordion group */\n .cse-accordion-group {\n display: flex;\n flex-direction: column;\n gap: ${cseAccordion.groupGap};\n }\n`;\n//# sourceMappingURL=accordion.style.js.map","var _a, _b;\nexport const REAL = 'REAL';\nexport const FAKE = 'FAKE';\nclass DependencyContainer {\n constructor() {\n this.dependencyType = window.dependencyType ?? REAL;\n this[_a] = {\n constructors: new Map(),\n instances: new Map(),\n };\n this[_b] = {\n constructors: new Map(),\n instances: new Map(),\n };\n }\n addDependency(dependencyType, token, constructor) {\n this[dependencyType].constructors.set(token, constructor);\n }\n getDependency(token) {\n const dependencyType = this.dependencyType;\n if (this[dependencyType].instances.has(token)) {\n return this[dependencyType].instances.get(token);\n }\n if (this[dependencyType].constructors.has(token)) {\n const constructor = this[dependencyType].constructors.get(token);\n const instance = new constructor();\n this[dependencyType].instances.set(token, instance);\n return instance;\n }\n throw new Error(`No dependency found for token: '${String(token)}'`);\n }\n clearDependencies(dependencyType = FAKE) {\n this[dependencyType].instances.clear();\n }\n switch(dependencyType = FAKE) {\n if (this.dependencyType === dependencyType) {\n return;\n }\n console.log(`Switch dependencyType to: \"${dependencyType}\"`);\n this.dependencyType = dependencyType;\n }\n}\n_a = REAL, _b = FAKE;\nwindow.dependencyContainer ?? (window.dependencyContainer = new DependencyContainer());\nexport const dependencyContainer = window.dependencyContainer;\nexport function registerDependency(dependencyType, token) {\n return (constructor) => {\n dependencyContainer.addDependency(dependencyType, token, constructor);\n };\n}\nexport function inject(token) {\n return (target, name) => {\n const property = {\n get: () => dependencyContainer.getDependency(token),\n };\n Object.defineProperty(target, name, property);\n };\n}\n//# sourceMappingURL=dependency-injection.js.map","const i=Symbol.for(\"preact-signals\");function t(){if(r>1){r--;return}let i,t=!1;while(void 0!==s){let o=s;s=void 0;f++;while(void 0!==o){const n=o.o;o.o=void 0;o.f&=-3;if(!(8&o.f)&&v(o))try{o.c()}catch(o){if(!t){i=o;t=!0}}o=n}}f=0;r--;if(t)throw i}function o(i){if(r>0)return i();r++;try{return i()}finally{t()}}let n,s;function h(i){const t=n;n=void 0;try{return i()}finally{n=t}}let r=0,f=0,e=0;function c(i){if(void 0===n)return;let t=i.n;if(void 0===t||t.t!==n){t={i:0,S:i,p:n.s,n:void 0,t:n,e:void 0,x:void 0,r:t};if(void 0!==n.s)n.s.n=t;n.s=t;i.n=t;if(32&n.f)i.S(t);return t}else if(-1===t.i){t.i=0;if(void 0!==t.n){t.n.p=t.p;if(void 0!==t.p)t.p.n=t.n;t.p=n.s;t.n=void 0;n.s.n=t;n.s=t}return t}}function u(i){this.v=i;this.i=0;this.n=void 0;this.t=void 0}u.prototype.brand=i;u.prototype.h=function(){return!0};u.prototype.S=function(i){if(this.t!==i&&void 0===i.e){i.x=this.t;if(void 0!==this.t)this.t.e=i;this.t=i}};u.prototype.U=function(i){if(void 0!==this.t){const t=i.e,o=i.x;if(void 0!==t){t.x=o;i.e=void 0}if(void 0!==o){o.e=t;i.x=void 0}if(i===this.t)this.t=o}};u.prototype.subscribe=function(i){return E(()=>{const t=this.value,o=n;n=void 0;try{i(t)}finally{n=o}})};u.prototype.valueOf=function(){return this.value};u.prototype.toString=function(){return this.value+\"\"};u.prototype.toJSON=function(){return this.value};u.prototype.peek=function(){const i=n;n=void 0;try{return this.value}finally{n=i}};Object.defineProperty(u.prototype,\"value\",{get(){const i=c(this);if(void 0!==i)i.i=this.i;return this.v},set(i){if(i!==this.v){if(f>100)throw new Error(\"Cycle detected\");this.v=i;this.i++;e++;r++;try{for(let i=this.t;void 0!==i;i=i.x)i.t.N()}finally{t()}}}});function d(i){return new u(i)}function v(i){for(let t=i.s;void 0!==t;t=t.n)if(t.S.i!==t.i||!t.S.h()||t.S.i!==t.i)return!0;return!1}function l(i){for(let t=i.s;void 0!==t;t=t.n){const o=t.S.n;if(void 0!==o)t.r=o;t.S.n=t;t.i=-1;if(void 0===t.n){i.s=t;break}}}function y(i){let t,o=i.s;while(void 0!==o){const i=o.p;if(-1===o.i){o.S.U(o);if(void 0!==i)i.n=o.n;if(void 0!==o.n)o.n.p=i}else t=o;o.S.n=o.r;if(void 0!==o.r)o.r=void 0;o=i}i.s=t}function a(i){u.call(this,void 0);this.x=i;this.s=void 0;this.g=e-1;this.f=4}(a.prototype=new u).h=function(){this.f&=-3;if(1&this.f)return!1;if(32==(36&this.f))return!0;this.f&=-5;if(this.g===e)return!0;this.g=e;this.f|=1;if(this.i>0&&!v(this)){this.f&=-2;return!0}const i=n;try{l(this);n=this;const i=this.x();if(16&this.f||this.v!==i||0===this.i){this.v=i;this.f&=-17;this.i++}}catch(i){this.v=i;this.f|=16;this.i++}n=i;y(this);this.f&=-2;return!0};a.prototype.S=function(i){if(void 0===this.t){this.f|=36;for(let i=this.s;void 0!==i;i=i.n)i.S.S(i)}u.prototype.S.call(this,i)};a.prototype.U=function(i){if(void 0!==this.t){u.prototype.U.call(this,i);if(void 0===this.t){this.f&=-33;for(let i=this.s;void 0!==i;i=i.n)i.S.U(i)}}};a.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(let i=this.t;void 0!==i;i=i.x)i.t.N()}};Object.defineProperty(a.prototype,\"value\",{get(){if(1&this.f)throw new Error(\"Cycle detected\");const i=c(this);this.h();if(void 0!==i)i.i=this.i;if(16&this.f)throw this.v;return this.v}});function w(i){return new a(i)}function _(i){const o=i.u;i.u=void 0;if(\"function\"==typeof o){r++;const s=n;n=void 0;try{o()}catch(t){i.f&=-2;i.f|=8;g(i);throw t}finally{n=s;t()}}}function g(i){for(let t=i.s;void 0!==t;t=t.n)t.S.U(t);i.x=void 0;i.s=void 0;_(i)}function p(i){if(n!==this)throw new Error(\"Out-of-order effect\");y(this);n=i;this.f&=-2;if(8&this.f)g(this);t()}function b(i){this.x=i;this.u=void 0;this.s=void 0;this.o=void 0;this.f=32}b.prototype.c=function(){const i=this.S();try{if(8&this.f)return;if(void 0===this.x)return;const t=this.x();if(\"function\"==typeof t)this.u=t}finally{i()}};b.prototype.S=function(){if(1&this.f)throw new Error(\"Cycle detected\");this.f|=1;this.f&=-9;_(this);l(this);r++;const i=n;n=this;return p.bind(this,i)};b.prototype.N=function(){if(!(2&this.f)){this.f|=2;this.o=s;s=this}};b.prototype.d=function(){this.f|=8;if(!(1&this.f))g(this)};function E(i){const t=new b(i);try{t.c()}catch(i){t.d();throw i}return t.d.bind(t)}export{u as Signal,o as batch,w as computed,E as effect,d as signal,h as untracked};//# sourceMappingURL=signals-core.mjs.map\n","import { batch, computed, effect, signal } from '@preact/signals-core';\nexport const createBatch = batch;\nexport const createEffect = effect;\nexport const createSignal = (value) => {\n const internalSignal = signal(value);\n return [\n () => internalSignal.value,\n (value) => { internalSignal.value = value; },\n ];\n};\nexport const createComputed = (compute) => {\n const internalComputed = computed(compute);\n return () => internalComputed.value;\n};\n//# sourceMappingURL=signals.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { dependencyContainer, FAKE, REAL, registerDependency } from '../scripts/dependency-injection.js';\nimport { createSignal } from '../scripts/signals.js';\nexport const iconStyles = ['solid', 'regular', 'light', 'thin'];\nexport const NO_ICON_CONFIGURED = 'NO_ICON_CONFIGURED';\nexport const ICON_LIBRARY = Symbol.for('ICON_LIBRARY');\nlet IconLibrary = class IconLibrary {\n constructor() {\n this.iconSignals = new Map;\n this.adHocRoleIndex = 0;\n this.createAdHocIconRole = () => {\n return `ad-hoc-icon.${++this.adHocRoleIndex}`;\n };\n this.initializeIconsByRole = (iconsByRole) => {\n for (const [role, icon] of Object.entries(iconsByRole)) {\n this.initializeIconByRole(role, icon);\n }\n };\n this.initializeIconByRole = (role, icon) => {\n const [getIcon, setIcon] = this.getOrCreateIconSignal(role);\n if (getIcon() === NO_ICON_CONFIGURED) {\n setIcon(icon);\n }\n };\n this.setIconByRole = (role, icon) => {\n const setIcon = this.getOrCreateIconSignal(role)[1];\n setIcon(icon);\n };\n this.setIconsByRole = (iconsByRole) => {\n for (const [role, icon] of Object.entries(iconsByRole)) {\n this.setIconByRole(role, icon);\n }\n };\n this.getIconByRole = (role) => {\n return this.getOrCreateIconSignal(role)[0];\n };\n this.getIconsByComponent = (component) => {\n const allRoles = {};\n this.iconSignals.forEach((value, key) => {\n if (key.startsWith(`${component}.`)) {\n allRoles[key] = value[0]();\n }\n });\n return allRoles;\n };\n this.getOrCreateIconSignal = (role) => {\n const existingSignal = this.iconSignals.get(role);\n if (existingSignal !== undefined) {\n return existingSignal;\n }\n const newSignal = createSignal(NO_ICON_CONFIGURED);\n this.iconSignals.set(role, newSignal);\n return newSignal;\n };\n }\n};\nIconLibrary = __decorate([\n registerDependency(REAL, ICON_LIBRARY),\n registerDependency(FAKE, ICON_LIBRARY)\n], IconLibrary);\nexport { IconLibrary };\nconst iconLibrary = dependencyContainer.getDependency(ICON_LIBRARY);\nexport const createAdHocIconRole = iconLibrary.createAdHocIconRole;\nexport const initializeIconsByRole = iconLibrary.initializeIconsByRole;\nexport const initializeIconByRole = iconLibrary.initializeIconByRole;\nexport const getIconByRole = iconLibrary.getIconByRole;\nexport const setIconByRole = iconLibrary.setIconByRole;\nexport const getIconsByComponent = iconLibrary.getIconsByComponent;\n//# sourceMappingURL=library.js.map","import { css } from 'lit';\nexport const hostStyle = css `\n :host {\n box-sizing: border-box;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: border-box;\n }\n`;\n//# sourceMappingURL=host.style.js.map","import { unsafeCSS } from 'lit';\nimport { css } from 'lit';\nimport { csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const csFontFamilyBody = css `var(--cs-font-family-body, Roboto, Arial, sans-serif)`;\nexport const csFontFamilyHeadings = css `var(--cs-font-family-headings, Poppins, Arial, sans-serif)`;\nexport const csFontLargerTitle = {\n color: css `var(--cs-font-larger-title-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-larger-title-font-family, ${csFontFamilyHeadings})`,\n fontSize: css `var(--cs-font-larger-title-font-size, 50px)`,\n fontSizeMobile: css `var(--cs-font-larger-title-font-size-mobile, 36px)`,\n fontWeight: css `var(--cs-font-larger-title-font-weight, 400)`,\n lineHeight: css `var(--cs-font-larger-title-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-larger-title-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-larger-title-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontLargeTitle = {\n color: css `var(--cs-font-large-title-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-large-title-font-family, ${csFontFamilyHeadings})`,\n fontSize: css `var(--cs-font-large-title-font-size, 40px)`,\n fontSizeMobile: css `var(--cs-font-large-title-font-size-mobile, 30px)`,\n fontWeight: css `var(--cs-font-large-title-font-weight, 400)`,\n lineHeight: css `var(--cs-font-large-title-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-large-title-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-large-title-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontHeading1 = {\n color: css `var(--cs-font-heading-1-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-heading-1-font-family, ${csFontFamilyHeadings})`,\n fontSize: css `var(--cs-font-heading-1-font-size, 30px)`,\n fontSizeMobile: css `var(--cs-font-heading-1-font-size-mobile, 26px)`,\n fontWeight: css `var(--cs-font-heading-1-font-weight, 400)`,\n lineHeight: css `var(--cs-font-heading-1-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-heading-1-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-heading-1-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontHeading2 = {\n color: css `var(--cs-font-heading-2-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-heading-2-font-family, ${csFontFamilyHeadings})`,\n fontSize: css `var(--cs-font-heading-2-font-size, 28px)`,\n fontSizeMobile: css `var(--cs-font-heading-2-font-size-mobile, 24px)`,\n fontWeight: css `var(--cs-font-heading-2-font-weight, 400)`,\n lineHeight: css `var(--cs-font-heading-2-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-heading-2-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-heading-2-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontHeading3 = {\n color: css `var(--cs-font-heading-3-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-heading-3-font-family, ${csFontFamilyHeadings})`,\n fontSize: css `var(--cs-font-heading-3-font-size, 24px)`,\n fontSizeMobile: css `var(--cs-font-heading-3-font-size-mobile, 20px)`,\n fontWeight: css `var(--cs-font-heading-3-font-weight, 400)`,\n lineHeight: css `var(--cs-font-heading-3-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-heading-3-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-heading-3-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontHeading4 = {\n color: css `var(--cs-font-heading-4-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-heading-4-font-family, ${csFontFamilyHeadings})`,\n fontSize: css `var(--cs-font-heading-4-font-size, 18px)`,\n fontSizeMobile: css `var(--cs-font-heading-4-font-size-mobile, 18px)`,\n fontWeight: css `var(--cs-font-heading-4-font-weight, 400)`,\n lineHeight: css `var(--cs-font-heading-4-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-heading-4-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-heading-4-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontHeading5 = {\n color: css `var(--cs-font-heading-5-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-heading-5-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-heading-5-font-size, 16px)`,\n fontSizeMobile: css `var(--cs-font-heading-5-font-size-mobile, 16px)`,\n fontWeight: css `var(--cs-font-heading-5-font-weight, 700)`,\n lineHeight: css `var(--cs-font-heading-5-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-heading-5-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-heading-5-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontHeading6 = {\n color: css `var(--cs-font-heading-6-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-heading-6-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-heading-6-font-size, 14px)`,\n fontSizeMobile: css `var(--cs-font-heading-6-font-size-mobile, 14px)`,\n fontWeight: css `var(--cs-font-heading-6-font-weight, 700)`,\n lineHeight: css `var(--cs-font-heading-6-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-heading-6-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-heading-6-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontProductTitleL = {\n color: css `var(--cs-font-product-title-l-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-product-title-l-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-product-title-l-font-size, 18px)`,\n fontSizeMobile: css `var(--cs-font-product-title-l-font-size-mobile, 18px)`,\n fontWeight: css `var(--cs-font-product-title-l-font-weight, 700)`,\n lineHeight: css `var(--cs-font-product-title-l-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-product-title-l-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-product-title-l-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontProductTitleM = {\n color: css `var(--cs-font-product-title-m-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-product-title-m-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-product-title-m-font-size, 16px)`,\n fontSizeMobile: css `var(--cs-font-product-title-m-font-size-mobile, 16px)`,\n fontWeight: css `var(--cs-font-product-title-m-font-weight, 700)`,\n lineHeight: css `var(--cs-font-product-title-m-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-product-title-m-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-product-title-m-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontProductTitleS = {\n color: css `var(--cs-font-product-title-s-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-product-title-s-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-product-title-s-font-size, 14px)`,\n fontSizeMobile: css `var(--cs-font-product-title-s-font-size-mobile, 14px)`,\n fontWeight: css `var(--cs-font-product-title-s-font-weight, 700)`,\n lineHeight: css `var(--cs-font-product-title-s-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-product-title-s-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-product-title-s-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontIntro = {\n color: css `var(--cs-font-intro-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-intro-font-family, ${csFontFamilyHeadings})`,\n fontSize: css `var(--cs-font-intro-font-size, 20px)`,\n fontSizeMobile: css `var(--cs-font-intro-font-size-mobile, 20px)`,\n fontWeight: css `var(--cs-font-intro-font-weight, 200)`,\n lineHeight: css `var(--cs-font-intro-line-height, 1.5)`,\n letterSpacing: css `var(--cs-font-intro-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-intro-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontQuote = {\n color: css `var(--cs-font-quote-color, ${csColorText.headings})`,\n fontFamily: css `var(--cs-font-quote-font-family, ${csFontFamilyHeadings})`,\n fontSize: css `var(--cs-font-quote-font-size, 30px)`,\n fontSizeMobile: css `var(--cs-font-quote-font-size-mobile, 26px)`,\n fontWeight: css `var(--cs-font-quote-font-weight, 400)`,\n lineHeight: css `var(--cs-font-quote-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-quote-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-quote-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontBody = {\n color: css `var(--cs-font-body-color, ${csColorText.body})`,\n fontFamily: css `var(--cs-font-body-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-body-font-size, 16px)`,\n fontSizeMobile: css `var(--cs-font-body-font-size-mobile, 16px)`,\n fontWeight: css `var(--cs-font-body-font-weight, 400)`,\n lineHeight: css `var(--cs-font-body-line-height, 1.5)`,\n letterSpacing: css `var(--cs-font-body-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-body-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontBodyS = {\n color: css `var(--cs-font-body-s-color, ${csColorText.body})`,\n fontFamily: css `var(--cs-font-body-s-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-body-s-font-size, 14px)`,\n fontSizeMobile: css `var(--cs-font-body-s-font-size-mobile, 14px)`,\n fontWeight: css `var(--cs-font-body-s-font-weight, 400)`,\n lineHeight: css `var(--cs-font-body-s-line-height, 1.5)`,\n letterSpacing: css `var(--cs-font-body-s-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-body-s-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontCaptionL = {\n color: css `var(--cs-font-caption-l-color, ${csColorText.muted})`,\n fontFamily: css `var(--cs-font-caption-l-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-caption-l-font-size, 14px)`,\n fontSizeMobile: css `var(--cs-font-caption-l-font-size-mobile, 14px)`,\n fontWeight: css `var(--cs-font-caption-l-font-weight, 400)`,\n lineHeight: css `var(--cs-font-caption-l-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-caption-l-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-caption-l-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontCaptionM = {\n color: css `var(--cs-font-caption-m-color, ${csColorText.muted})`,\n fontFamily: css `var(--cs-font-caption-m-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-caption-m-font-size, 12px)`,\n fontSizeMobile: css `var(--cs-font-caption-m-font-size-mobile, 12px)`,\n fontWeight: css `var(--cs-font-caption-m-font-weight, 400)`,\n lineHeight: css `var(--cs-font-caption-m-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-caption-m-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-caption-m-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontCaptionS = {\n color: css `var(--cs-font-caption-s-color, ${csColorText.muted})`,\n fontFamily: css `var(--cs-font-caption-s-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-caption-s-font-size, 10px)`,\n fontSizeMobile: css `var(--cs-font-caption-s-font-size-mobile, 10px)`,\n fontWeight: css `var(--cs-font-caption-s-font-weight, 500)`,\n lineHeight: css `var(--cs-font-caption-s-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-caption-s-letter-spacing, 0.3px)`,\n textTransform: css `var(--cs-font-caption-s-text-transform, uppercase)`,\n textDecoration: css `initial`,\n};\nexport const csFontPriceL = {\n color: css `var(--cs-font-price-l-color, ${csColorText.body})`,\n fontFamily: css `var(--cs-font-price-l-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-price-l-font-size, 28px)`,\n fontSizeMobile: css `var(--cs-font-price-l-font-size-mobile, 22px)`,\n fontWeight: css `var(--cs-font-price-l-font-weight, 700)`,\n lineHeight: css `var(--cs-font-price-l-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-price-l-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-price-l-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontPriceM = {\n color: css `var(--cs-font-price-m-color, ${csColorText.body})`,\n fontFamily: css `var(--cs-font-price-m-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-price-m-font-size, 20px)`,\n fontSizeMobile: css `var(--cs-font-price-m-font-size-mobile, 18px)`,\n fontWeight: css `var(--cs-font-price-m-font-weight, 700)`,\n lineHeight: css `var(--cs-font-price-m-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-price-m-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-price-m-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontPriceS = {\n color: css `var(--cs-font-price-s-color, ${csColorText.body})`,\n fontFamily: css `var(--cs-font-price-s-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-price-s-font-size, 16px)`,\n fontSizeMobile: css `var(--cs-font-price-s-font-size-mobile, 14px)`,\n fontWeight: css `var(--cs-font-price-s-font-weight, 700)`,\n lineHeight: css `var(--cs-font-price-s-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-price-s-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-price-s-text-transform, none)`,\n textDecoration: css `initial`,\n};\nexport const csFontPriceDiscount = {\n color: css `var(--cs-font-price-discount-color, ${csColorText.body})`,\n fontFamily: css `var(--cs-font-price-discount-font-family, ${csFontFamilyBody})`,\n fontSize: css `var(--cs-font-price-discount-font-size, 12px)`,\n fontSizeMobile: css `var(--cs-font-price-discount-font-size-mobile, 12px)`,\n fontWeight: css `var(--cs-font-price-discount-font-weight, 400)`,\n lineHeight: css `var(--cs-font-price-discount-line-height, 1.2)`,\n letterSpacing: css `var(--cs-font-price-discount-letter-spacing, normal)`,\n textTransform: css `var(--cs-font-price-discount-text-transform, none)`,\n textDecoration: css `var(--cs-font-price-discount-text-decoration, line-through)`,\n};\nconst csFontVariants = {\n 'larger-title': csFontLargerTitle,\n 'large-title': csFontLargeTitle,\n 'heading-1': csFontHeading1,\n 'heading-2': csFontHeading2,\n 'heading-3': csFontHeading3,\n 'heading-4': csFontHeading4,\n 'heading-5': csFontHeading5,\n 'heading-6': csFontHeading6,\n 'product-title-l': csFontProductTitleL,\n 'product-title-m': csFontProductTitleM,\n 'product-title-s': csFontProductTitleS,\n 'intro': csFontIntro,\n 'quote': csFontQuote,\n 'body': csFontBody,\n 'body-s': csFontBodyS,\n 'caption-l': csFontCaptionL,\n 'caption-m': csFontCaptionM,\n 'caption-s': csFontCaptionS,\n 'price-l': csFontPriceL,\n 'price-m': csFontPriceM,\n 'price-s': csFontPriceS,\n 'price-discount': csFontPriceDiscount,\n};\nconst fontStyles = [];\nfor (const [name, fontStyle] of Object.entries(csFontVariants)) {\n fontStyles.push(css `.font-${unsafeCSS(name)} {\n color: var(--cse-text-color, ${fontStyle['color']});\n font-family: ${fontStyle['fontFamily']};\n font-size: ${fontStyle['fontSizeMobile']};\n font-weight: ${fontStyle['fontWeight']};\n line-height: ${fontStyle['lineHeight']};\n letter-spacing: ${fontStyle['letterSpacing']};\n text-transform: ${fontStyle['textTransform']};\n text-decoration: ${fontStyle['textDecoration']};\n\n @media (min-width: 768px) {\n font-size: ${fontStyle['fontSize']};\n }\n }`);\n}\nexport const fontVariants = Object.keys(csFontVariants);\nexport { fontStyles };\n//# sourceMappingURL=fonts.style.js.map","export const generateID = (prefix) => {\n if (prefix === '') {\n throw Error('prefix must be supplied');\n }\n const cryptoObj = window.crypto || self.crypto;\n const array = new Uint8Array(5);\n cryptoObj.getRandomValues(array);\n const randomString = Array.from(array, byte => (byte % 10).toString()).join('');\n return `${prefix}-${randomString}`;\n};\n//# sourceMappingURL=generate-id.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './accordion.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { generateID } from \"../_shared/generate-id.js\";\nexport const accordionVariants = ['default', 'panel', 'simple'];\nexport class AccordionToggleEvent extends Event {\n constructor(accordion) {\n super(AccordionToggleEvent.type, { bubbles: true, composed: true });\n this.accordion = accordion;\n }\n}\nAccordionToggleEvent.type = 'accordion-toggle';\ninitializeIconsByRole({\n 'cse-accordion.toggle': { name: 'angle-down', style: 'light' }\n});\nlet CSEAccordion = class CSEAccordion extends LitElement {\n constructor() {\n super(...arguments);\n this.open = false;\n this.variant = 'default';\n this.contentId = generateID('accordion');\n this.toggleAccordion = () => {\n this.open = !this.open;\n this.dispatchEvent(new AccordionToggleEvent(this));\n };\n }\n render() {\n const toggleClasses = classMap({\n 'cse-accordion-icon': true,\n 'open': this.open\n });\n const renderToggleHeader = () => {\n if (this.variant === 'simple') {\n return html `\n
\n \n \n \n \n
\n `;\n }\n else {\n return html `\n
\n \n \n
\n `;\n }\n };\n return html `\n
\n ${renderToggleHeader()}\n
\n \n
\n
\n `;\n }\n};\nCSEAccordion.styles = [hostStyle, fontStyles, style];\n__decorate([\n property({ type: Boolean })\n], CSEAccordion.prototype, \"open\", void 0);\n__decorate([\n property({ type: String })\n], CSEAccordion.prototype, \"variant\", void 0);\nCSEAccordion = __decorate([\n customElement('cse-accordion')\n], CSEAccordion);\nexport { CSEAccordion };\nlet CSEAccordionGroup = class CSEAccordionGroup extends LitElement {\n constructor() {\n super(...arguments);\n this.isCSEAccordion = (element) => {\n return element instanceof CSEAccordion;\n };\n }\n handleAccordionToggle(event) {\n this.slottedElements\n .filter(this.isCSEAccordion)\n .forEach(accordion => { accordion.open = accordion === event.accordion && event.accordion.open; });\n }\n render() {\n return html `\n
\n \n
\n `;\n }\n};\nCSEAccordionGroup.styles = [hostStyle, style];\n__decorate([\n queryAssignedElements()\n], CSEAccordionGroup.prototype, \"slottedElements\", void 0);\nCSEAccordionGroup = __decorate([\n customElement('cse-accordion-group')\n], CSEAccordionGroup);\nexport { CSEAccordionGroup };\n//# sourceMappingURL=accordion.js.map","import { css } from 'lit';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csColorBackground, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseAlert = {\n borderRadius: css `var(--cse-alert-border-radius, ${csBorder.radiusMinimal})`,\n color: css `var(--cse-alert-color, ${csColorText.body})`,\n columnGap: css `var(--cse-alert-column-gap, ${csSpacing.spacing05})`,\n errorBackgroundColor: css `var(--cse-alert-error-background-color, ${csColorBackground.error})`,\n errorColor: css `var(--cse-alert-error-color, ${csColorFunctional.error})`,\n infoBackgroundColor: css `var(--cse-alert-info-background-color, ${csColorBackground.info})`,\n infoColor: css `var(--cse-alert-info-color, ${csColorFunctional.info})`,\n padding: css `var(--cse-alert-padding, ${csSpacing.spacing06})`,\n rowGap: css `var(--cse-alert-row-gap, ${csSpacing.spacing04})`,\n successBackgroundColor: css `var(--cse-alert-success-background-color, ${csColorBackground.success})`,\n successColor: css `var(--cse-alert-success-color, ${csColorFunctional.success})`,\n warningBackgroundColor: css `var(--cse-alert-warning-background-color, ${csColorBackground.warning})`,\n warningColor: css `var(--cse-alert-warning-color, ${csColorFunctional.warning})`\n};\nexport const style = css `\n .cse-alert {\n --cse-link-primary-color: ${csColorText.body};\n\n border-radius: ${cseAlert.borderRadius};\n display: flex;\n column-gap: ${cseAlert.columnGap};\n padding: ${cseAlert.padding};\n width: 100%;\n }\n\n .content {\n flex: 1;\n display: flex;\n flex-direction: column;\n row-gap: ${cseAlert.rowGap};\n }\n\n .title, .description {\n --cse-text-color: ${cseAlert.color};\n }\n\n .variant-error {\n background: ${cseAlert.errorBackgroundColor};\n }\n\n .variant-info {\n background: ${cseAlert.infoBackgroundColor};\n }\n\n .variant-success {\n background: ${cseAlert.successBackgroundColor};\n }\n\n .variant-warning {\n background: ${cseAlert.warningBackgroundColor};\n }\n\n [role=\"cse-alert.error\"] {\n color: ${cseAlert.errorColor};\n }\n\n [role=\"cse-alert.info\"] {\n color: ${cseAlert.infoColor};\n }\n\n [role=\"cse-alert.success\"] {\n color: ${cseAlert.successColor};\n }\n\n [role=\"cse-alert.warning\"] {\n color: ${cseAlert.warningColor};\n }\n`;\n//# sourceMappingURL=alert.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './alert.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\ninitializeIconsByRole({\n 'cse-alert.error': { name: 'octagon-xmark', style: 'solid' },\n 'cse-alert.info': { name: 'circle-info', style: 'solid' },\n 'cse-alert.success': { name: 'circle-check', style: 'solid' },\n 'cse-alert.warning': { name: 'triangle-exclamation', style: 'solid' },\n});\nexport const alertVariants = ['error', 'info', 'success', 'warning'];\nlet CSEAlert = class CSEAlert extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'info';\n }\n render() {\n return html `\n
\n \n
\n \n \n \n
\n
\n `;\n }\n};\nCSEAlert.styles = [hostStyle, fontStyles, style];\n__decorate([\n property({ type: String })\n], CSEAlert.prototype, \"variant\", void 0);\nCSEAlert = __decorate([\n customElement('cse-alert')\n], CSEAlert);\nexport { CSEAlert };\n//# sourceMappingURL=alert.js.map","import { css } from 'lit';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseAvatar = {\n borderRadius: css `var(--cse-avatar-border-radius, ${csBorder.radiusFull})`,\n smallSize: css `var(--cse-avatar-small-size, 32px)`,\n mediumSize: css `var(--cse-avatar-medium-size, 40px)`,\n largeSize: css `var(--cse-avatar-large-size, 64px)`,\n extraLargeSize: css `var(--cse-avatar-extra-large-size, 80px)`\n};\nexport const style = css `\n .cse-avatar {\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${cseAvatar.borderRadius};\n }\n\n .size-small {\n width: ${cseAvatar.smallSize};\n height: ${cseAvatar.smallSize};\n }\n\n .size-medium {\n width: ${cseAvatar.mediumSize};\n height: ${cseAvatar.mediumSize};\n }\n\n .size-large {\n width: ${cseAvatar.largeSize};\n height: ${cseAvatar.largeSize};\n }\n\n .size-extra-large {\n width: ${cseAvatar.extraLargeSize};\n height: ${cseAvatar.extraLargeSize};\n }\n`;\n//# sourceMappingURL=avatar.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './avatar.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nexport const avatarSizes = ['small', 'medium', 'large', 'extra-large'];\nlet CSEAvatar = class CSEAvatar extends LitElement {\n constructor() {\n super(...arguments);\n this.size = 'medium';\n }\n render() {\n return html `\n
\n fallback image\n
\n `;\n }\n};\nCSEAvatar.styles = [hostStyle, style];\n__decorate([\n property({ type: String })\n], CSEAvatar.prototype, \"size\", void 0);\nCSEAvatar = __decorate([\n customElement('cse-avatar')\n], CSEAvatar);\nexport { CSEAvatar };\n//# sourceMappingURL=avatar.js.map","import { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { css } from 'lit';\nimport { csFontBody, csFontBodyS, csFontCaptionS } from \"../_shared/fonts.style.js\";\nimport { csColorBackground, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseBadge = {\n borderWidth: css `var(--cse-badge-border-width, ${csBorder.width})`,\n borderRadius: css `var(--cse-badge-border-radius, ${csBorder.radiusMinimal})`,\n columnGap: css `var(--cse-badge-column-gap, ${csSpacing.spacing03})`,\n fontFamily: css `var(--cse-badge-font-family, ${csFontBody.fontFamily})`,\n fontSize: css `var(--cse-badge-font-size, ${csFontBodyS.fontSize})`,\n fontWeight: css `var(--cse-badge-font-weight, ${csFontBodyS.fontWeight})`,\n lineHeight: css `var(--cse-badge-line-height, 1.4)`,\n letterSpacing: css `var(--cse-badge-letter-spacing, normal)`,\n paddingBlock: css `var(--cse-badge-padding-y, ${csSpacing.spacing03})`,\n paddingInline: css `var(--cse-badge-padding-x, ${csSpacing.spacing05})`,\n borderedBackgroundColor: css `var(--cse-badge-bordered-background-color, ${csColorBackground.primary})`,\n floatingBorderColor: css `var(--cse-badge-floating-border-color, ${csColorBackground.primary})`,\n floatingBorderWidth: css `var(--cse-badge-floating-border-width, 2px)`,\n floatingBorderRadius: css `var(--cse-badge-floating-border-radius, ${csBorder.radiusFull})`,\n floatingMinWidth: css `var(--cse-badge-floating-min-width, 22px)`,\n smallFontSize: css `var(--cse-badge-small-font-size, ${csFontCaptionS.fontSize})`,\n smallFontWeight: css `var(--cse-badge-small-font-weight, ${csFontBodyS.fontWeight})`,\n smallLineHeight: css `var(--cse-badge-small-line-height, ${csFontCaptionS.lineHeight})`,\n smallLetterSpacing: css `var(--cse-badge-small-letter-spacing, 0.03em)`,\n smallPaddingBlock: css `var(--cse-badge-small-padding-y, ${csSpacing.spacing02})`,\n smallPaddingInline: css `var(--cse-badge-small-padding-x, ${csSpacing.spacing04})`,\n smallTextTransform: css `var(--cse-badge-small-text-transform, uppercase)`,\n defaultBackgroundColor: css `var(--cse-badge-default-background-color, ${csColorBackground.secondary})`,\n defaultColor: css `var(--cse-badge-default-color, ${csColorText.body})`,\n infoBackgroundColor: css `var(--cse-badge-info-background-color, ${csColorFunctional.info})`,\n infoColor: css `var(--cse-badge-info-color, ${csColorText.white})`,\n successBackgroundColor: css `var(--cse-badge-success-background-color, ${csColorFunctional.success})`,\n successColor: css `var(--cse-badge-success-color, ${csColorText.white})`,\n errorBackgroundColor: css `var(--cse-badge-error-background-color, ${csColorFunctional.error})`,\n errorColor: css `var(--cse-badge-error-color, ${csColorText.white})`,\n warningBackgroundColor: css `var(--cse-badge-warning-background-color, ${csColorFunctional.warning})`,\n warningColor: css `var(--cse-badge-warning-color, ${csColorText.white})`,\n newBackgroundColor: css `var(--cse-badge-new-background-color, ${csColorFunctional.new})`,\n newColor: css `var(--cse-badge-new-color, ${csColorText.white})`,\n ourChoiceBackgroundColor: css `var(--cse-badge-our-choice-background-color, ${csColorFunctional.ourChoice})`,\n ourChoiceColor: css `var(--cse-badge-our-choice-color, ${csColorText.white})`,\n bestsellerBackgroundColor: css `var(--cse-badge-bestseller-background-color, ${csColorFunctional.bestseller})`,\n bestsellerColor: css `var(--cse-badge-bestseller-color, ${csColorText.white})`,\n saleBackgroundColor: css `var(--cse-badge-sale-background-color, ${csColorFunctional.sale})`,\n saleColor: css `var(--cse-badge-sale-color, ${csColorText.white})`,\n premiumBackgroundColor: css `var(--cse-badge-premium-background-color, ${csColorFunctional.highlight})`,\n premiumColor: css `var(--cse-badge-premium-color, ${csColorText.body})`,\n};\nexport const style = css `\n .cse-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n background: ${cseBadge.defaultBackgroundColor};\n border-radius: ${cseBadge.borderRadius};\n color: ${cseBadge.defaultColor};\n column-gap: ${cseBadge.columnGap};\n font-family: ${cseBadge.fontFamily};\n font-size: ${cseBadge.fontSize};\n font-weight: ${cseBadge.fontWeight};\n line-height: ${cseBadge.lineHeight};\n letter-spacing: ${cseBadge.letterSpacing};\n padding-block: ${cseBadge.paddingBlock};\n padding-inline: ${cseBadge.paddingInline};\n }\n\n .cse-badge.size-small {\n font-size: ${cseBadge.smallFontSize};\n font-weight: ${cseBadge.smallFontWeight};\n line-height: ${cseBadge.smallLineHeight};\n letter-spacing: ${cseBadge.smallLetterSpacing};\n padding-block: ${cseBadge.smallPaddingBlock};\n padding-inline: ${cseBadge.smallPaddingInline};\n text-transform: ${cseBadge.smallTextTransform};\n }\n\n /* DEFAULT */\n .cse-badge.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-style: solid;\n border-width: ${cseBadge.borderWidth};\n border-color: ${cseBadge.defaultColor};\n }\n\n .cse-badge.composition-simple {\n background: none;\n border: none;\n padding: 0;\n }\n\n .cse-badge.composition-floating {\n border-style: solid;\n border-width: ${cseBadge.floatingBorderWidth};\n border-color: ${cseBadge.floatingBorderColor};\n border-radius: ${cseBadge.floatingBorderRadius};\n min-width: ${cseBadge.floatingMinWidth};\n }\n\n /* ERROR */\n .cse-badge.variant-error {\n background-color: ${cseBadge.errorBackgroundColor};\n color: ${cseBadge.errorColor};\n }\n\n .cse-badge.variant-error.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.errorBackgroundColor};\n color: ${cseBadge.errorBackgroundColor};\n }\n\n .cse-badge.variant-error.composition-simple {\n background-color: transparent;\n color: ${cseBadge.errorBackgroundColor};\n }\n\n /* INFO */\n .cse-badge.variant-info {\n background-color: ${cseBadge.infoBackgroundColor};\n color: ${cseBadge.infoColor};\n }\n\n .cse-badge.variant-info.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.infoBackgroundColor};\n color: ${cseBadge.infoBackgroundColor};\n }\n\n .cse-badge.variant-info.composition-simple {\n background-color: transparent;\n color: ${cseBadge.infoBackgroundColor};\n }\n\n /* SUCCESS */\n .cse-badge.variant-success {\n background-color: ${cseBadge.successBackgroundColor};\n color: ${cseBadge.successColor};\n }\n\n .cse-badge.variant-success.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.successBackgroundColor};\n color: ${cseBadge.successBackgroundColor};\n }\n\n .cse-badge.variant-success.composition-simple {\n background-color: transparent;\n color: ${cseBadge.successBackgroundColor};\n }\n\n /* WARNING */\n .cse-badge.variant-warning {\n background-color: ${cseBadge.warningBackgroundColor};\n color: ${cseBadge.warningColor};\n }\n\n .cse-badge.variant-warning.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.warningBackgroundColor};\n color: ${cseBadge.warningBackgroundColor};\n }\n\n .cse-badge.variant-warning.composition-simple {\n background-color: transparent;\n color: ${cseBadge.warningBackgroundColor};\n }\n\n /* NEW */\n .cse-badge.variant-new {\n background-color: ${cseBadge.newBackgroundColor};\n color: ${cseBadge.newColor};\n }\n\n .cse-badge.variant-new.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.newBackgroundColor};\n color: ${cseBadge.newBackgroundColor};\n }\n\n .cse-badge.variant-new.composition-simple {\n background-color: transparent;\n color: ${cseBadge.newBackgroundColor};\n }\n\n /* OUR CHOICE */\n .cse-badge.variant-our-choice {\n background-color: ${cseBadge.ourChoiceBackgroundColor};\n color: ${cseBadge.ourChoiceColor};\n }\n\n .cse-badge.variant-our-choice.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.ourChoiceBackgroundColor};\n color: ${cseBadge.ourChoiceBackgroundColor};\n }\n\n .cse-badge.variant-our-choice.composition-simple {\n background-color: transparent;\n color: ${cseBadge.ourChoiceBackgroundColor};\n }\n\n /* BESTSELLER */\n .cse-badge.variant-bestseller {\n background-color: ${cseBadge.bestsellerBackgroundColor};\n color: ${cseBadge.bestsellerColor};\n }\n\n .cse-badge.variant-bestseller.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.bestsellerBackgroundColor};\n color: ${cseBadge.bestsellerBackgroundColor};\n }\n\n .cse-badge.variant-bestseller.composition-simple {\n background-color: transparent;\n color: ${cseBadge.bestsellerBackgroundColor};\n }\n\n /* SALE */\n .cse-badge.variant-sale {\n background-color: ${cseBadge.saleBackgroundColor};\n color: ${cseBadge.saleColor};\n }\n\n .cse-badge.variant-sale.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.saleBackgroundColor};\n color: ${cseBadge.saleBackgroundColor};\n }\n\n .cse-badge.variant-sale.composition-simple {\n background-color: transparent;\n color: ${cseBadge.saleBackgroundColor};\n }\n\n /* PREMIUM */\n .cse-badge.variant-premium {\n background-color: ${cseBadge.premiumBackgroundColor};\n color: ${cseBadge.premiumColor};\n }\n\n .cse-badge.variant-premium.composition-bordered {\n background-color: ${cseBadge.borderedBackgroundColor};\n border-color: ${cseBadge.premiumBackgroundColor};\n color: ${cseBadge.premiumBackgroundColor};\n }\n\n .cse-badge.variant-premium.composition-simple {\n background-color: transparent;\n color: ${cseBadge.premiumBackgroundColor};\n }\n`;\n//# sourceMappingURL=badge.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './badge.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nexport const badgeVariants = ['default', 'error', 'info', 'success', 'warning', 'new', 'our-choice', 'bestseller', 'sale', 'premium'];\nexport const badgeCompositions = ['solid', 'bordered', 'simple', 'floating'];\nexport const badgeSizes = ['default', 'small'];\nlet CSEBadge = class CSEBadge extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'default';\n this.composition = 'solid';\n this.size = 'default';\n }\n render() {\n const classes = classMap({\n 'cse-badge': true,\n [`variant-${this.variant}`]: true,\n [`composition-${this.composition}`]: true,\n [`size-${this.size}`]: true,\n });\n return html `\n
\n \n \n
\n `;\n }\n};\nCSEBadge.styles = [hostStyle, style];\n__decorate([\n property({ type: String })\n], CSEBadge.prototype, \"variant\", void 0);\n__decorate([\n property({ type: String })\n], CSEBadge.prototype, \"composition\", void 0);\n__decorate([\n property({ type: String })\n], CSEBadge.prototype, \"size\", void 0);\nCSEBadge = __decorate([\n customElement('cse-badge')\n], CSEBadge);\nexport { CSEBadge };\n//# sourceMappingURL=badge.js.map","import { unsafeCSS } from 'lit';\nexport const breakpoints = {\n small: 768,\n medium: 992,\n large: 1200,\n extraLarge: 1380,\n};\nexport const SCREENS = {\n small: unsafeCSS(`${breakpoints.small}px`),\n medium: unsafeCSS(`${breakpoints.medium}px`),\n large: unsafeCSS(`${breakpoints.large}px`),\n extraLarge: unsafeCSS(`${breakpoints.extraLarge}px`),\n};\n//# sourceMappingURL=breakpoints.js.map","import { css } from 'lit';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csColorAction, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { SCREENS } from '@cloudsuite/mosaic-shared/styles/breakpoints.js';\nexport const cseBanner = {\n columnGap: css `var(--cse-banner-column-gap, ${csSpacing.spacing10})`,\n textGap: css `var(--cse-banner-text-gap, ${csSpacing.spacing05})`,\n paddingBlock: css `var(--cse-banner-padding-y, ${csSpacing.spacing05})`,\n paddingInline: css `var(--cse-banner-padding-x, ${csSpacing.spacing06})`,\n primaryBackgroundColor: css `var(--cse-banner-primary-background-color, ${csColorAction.primary})`,\n primaryColor: css `var(--cse-banner-primary-color, ${csColorText.white})`,\n secondaryBackgroundColor: css `var(--cse-banner-secondary-background-color, ${csColorAction.secondary})`,\n secondaryColor: css `var(--cse-banner-secondary-color, ${csColorText.white})`,\n infoBackgroundColor: css `var(--cse-banner-info-background-color, ${csColorFunctional.info})`,\n infoColor: css `var(--cse-banner-info-color, ${csColorText.white})`,\n successBackgroundColor: css `var(--cse-banner-success-background-color, ${csColorFunctional.success})`,\n successColor: css `var(--cse-banner-success-color, ${csColorText.white})`,\n errorBackgroundColor: css `var(--cse-banner-error-background-color, ${csColorFunctional.error})`,\n errorColor: css `var(--cse-banner-error-color, ${csColorText.white})`,\n warningBackgroundColor: css `var(--cse-banner-warning-background-color, ${csColorFunctional.warning})`,\n warningColor: css `var(--cse-banner-warning-color, ${csColorText.white})`,\n};\nexport const style = css `\n .cse-banner {\n padding-block: ${cseBanner.paddingBlock};\n padding-inline: ${cseBanner.paddingInline};\n width: 100%;\n\n @media(min-width: ${SCREENS.medium}) {\n display: flex;\n justify-content: space-around;\n }\n }\n\n .content {\n column-gap: ${cseBanner.columnGap};\n display: flex;\n justify-content: space-between;\n\n @media(min-width: ${SCREENS.medium}) {\n align-items: center;\n }\n }\n\n .inner {\n display: flex;\n gap: ${cseBanner.textGap};\n align-items: baseline;\n }\n\n .text-content {\n --cse-link-primary-color-hover: ${csColorText.white};\n display: flex;\n gap: ${cseBanner.textGap};\n flex-direction: column;\n\n @media(min-width: ${SCREENS.medium}) {\n flex-direction: row;\n }\n }\n\n .variant-primary {\n --cse-text-color: ${cseBanner.primaryColor};\n --cse-link-primary-color: ${cseBanner.primaryColor};\n background: ${cseBanner.primaryBackgroundColor};\n }\n\n .variant-primary .content {\n color: ${cseBanner.primaryColor};\n }\n\n .variant-secondary {\n --cse-text-color: ${cseBanner.secondaryColor};\n --cse-link-primary-color: ${cseBanner.secondaryColor};\n background: ${cseBanner.secondaryBackgroundColor};\n }\n\n .variant-secondary .content {\n color: ${cseBanner.secondaryColor};\n }\n\n .variant-error {\n --cse-text-color: ${cseBanner.errorColor};\n --cse-link-primary-color: ${cseBanner.errorColor};\n background: ${cseBanner.errorBackgroundColor};\n }\n\n .variant-error .content {\n color: ${cseBanner.errorColor};\n }\n\n .variant-info {\n --cse-text-color: ${cseBanner.infoColor};\n --cse-link-primary-color: ${cseBanner.infoColor};\n background: ${cseBanner.infoBackgroundColor};\n }\n\n .variant-info .content {\n color: ${cseBanner.infoColor};\n }\n\n .variant-success {\n --cse-text-color: ${cseBanner.successColor};\n --cse-link-primary-color: ${cseBanner.successColor};\n background: ${cseBanner.successBackgroundColor};\n }\n\n .variant-success .content {\n color: ${cseBanner.successColor};\n }\n\n .variant-warning {\n --cse-text-color: ${cseBanner.warningColor};\n --cse-link-primary-color: ${cseBanner.warningColor};\n background: ${cseBanner.warningBackgroundColor};\n }\n\n .variant-warning .content {\n color: ${cseBanner.warningColor};\n }\n`;\n//# sourceMappingURL=banner.style.js.map","export function animateTo(el, keyframes, options) {\n return new Promise(resolve => {\n const animation = el.animate(keyframes, {\n ...options,\n });\n animation.addEventListener('cancel', resolve, { once: true });\n animation.addEventListener('finish', resolve, { once: true });\n });\n}\n//# sourceMappingURL=animations.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './banner.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { animateTo } from \"../_shared/animations.js\";\ninitializeIconsByRole({\n 'cse-banner.dismiss': { name: 'xmark', style: 'regular' },\n});\nexport const bannerVariants = ['primary', 'secondary', 'error', 'info', 'success', 'warning'];\nlet CSEBanner = class CSEBanner extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'primary';\n this.dismissable = false;\n this.animationComplete = Promise.resolve();\n this.close = async () => {\n let resolve;\n this.animationComplete = new Promise((res) => { resolve = res; });\n await animateTo(this.banner, this.closeAnimation.keyframes, this.closeAnimation.options).then(() => resolve());\n this.style.display = 'none';\n };\n }\n firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.closeAnimation = {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0 }\n ],\n options: { duration: 250, easing: 'ease-in-out' }\n };\n }\n async getUpdateComplete() {\n const update = await super.getUpdateComplete();\n await this.animationComplete;\n return update;\n }\n render() {\n return html `\n
\n
\n
\n \n \n
\n ${this.dismissable ? html `\n \n ` : nothing}\n
\n
\n `;\n }\n};\nCSEBanner.styles = [hostStyle, style, fontStyles];\n__decorate([\n property({ type: String })\n], CSEBanner.prototype, \"variant\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEBanner.prototype, \"dismissable\", void 0);\n__decorate([\n query('.cse-banner')\n], CSEBanner.prototype, \"banner\", void 0);\nCSEBanner = __decorate([\n customElement('cse-banner')\n], CSEBanner);\nexport { CSEBanner };\n//# sourceMappingURL=banner.js.map","import { css } from 'lit';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csColorAction, csColorBackground, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseBreadcrumb = {\n color: css `var(--cse-breadcrumb-color, ${csColorText.body})`,\n colorHover: css `var(--cse-breadcrumb-color-hover, ${csColorAction.linkPrimaryHover})`,\n columnGap: css `var(--cse-breadcrumb-column-gap, ${csSpacing.spacing04})`,\n pillBackgroundColor: css `var(--cse-breadcrumb-pill-background-color, ${csColorBackground.primary})`,\n pillBackgroundColorHover: css `var(--cse-breadcrumb-pill-background-color-hover, ${csColorBackground.info})`,\n pillBorderRadius: css `var(--cse-breadcrumb-pill-border-radius, ${csBorder.radiusFull})`,\n pillPaddingInline: css `var(--cse-breadcrumb-pill-padding-x, ${csSpacing.spacing05})`,\n pillPaddingBlock: css `var(--cse-breadcrumb-pill-padding-y, ${csSpacing.spacing03})`,\n activeColor: css `var(--cse-breadcrumb-active-color, ${csColorText.muted})`,\n separatorColor: css `var(--cse-breadcrumb-separator-color, ${csColorText.muted})`,\n separatorPaddingInline: css `var(--cse-breadcrumb-separator-padding-x, ${csSpacing.spacing04})`,\n separatorPaddingBlock: css `var(--cse-breadcrumb-separator-padding-y, ${csSpacing.spacing02})`\n};\nexport const style = css `\n .cse-breadcrumb {\n --cse-text-color: ${cseBreadcrumb.color};\n align-items: center;\n color: ${cseBreadcrumb.color};\n column-gap: ${cseBreadcrumb.columnGap};\n display: flex;\n text-decoration: none;\n }\n\n .cse-breadcrumb:hover {\n --cse-text-color: ${cseBreadcrumb.colorHover};\n color: ${cseBreadcrumb.colorHover};\n }\n\n .type-active,\n .type-active:hover {\n --cse-text-color: ${cseBreadcrumb.activeColor};\n color: ${cseBreadcrumb.activeColor};\n }\n\n .type-separator {\n padding-block: ${cseBreadcrumb.separatorPaddingBlock};\n padding-inline: ${cseBreadcrumb.separatorPaddingInline};\n }\n\n .type-separator,\n .type-separator:hover {\n --cse-text-color: ${cseBreadcrumb.separatorColor};\n color: ${cseBreadcrumb.separatorColor};\n }\n\n .variant-pill {\n background-color: ${cseBreadcrumb.pillBackgroundColor};\n border-radius: ${cseBreadcrumb.pillBorderRadius};\n padding-block: ${cseBreadcrumb.pillPaddingBlock};\n padding-inline: ${cseBreadcrumb.pillPaddingInline};\n }\n\n .variant-pill:hover {\n background-color: ${cseBreadcrumb.pillBackgroundColorHover}\n }\n`;\n//# sourceMappingURL=breadcrumb.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './breadcrumb.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\ninitializeIconsByRole({\n 'cse-breadcrumb.home': { name: 'house', style: 'solid' },\n 'cse-breadcrumb.separator': { name: 'angle-right', style: 'solid' },\n});\nexport const breadcrumbTypes = ['active', 'default', 'home', 'separator'];\nexport const breadcrumbVariants = ['default', 'pill'];\nlet CSEBreadcrumb = class CSEBreadcrumb extends LitElement {\n constructor() {\n super(...arguments);\n this.type = 'default';\n this.url = '';\n this.variant = 'default';\n this.classes = () => classMap({\n 'cse-breadcrumb': true,\n 'font-body-s': this.type !== 'separator',\n [`type-${this.type}`]: true,\n 'variant-pill': this.variant === 'pill' && this.type !== 'separator'\n });\n }\n render() {\n switch (this.type) {\n case 'active': return html `\n \n \n \n `;\n case 'separator': return html `\n \n `;\n default: return html `\n \n ${this.type === 'home'\n ? html ``\n : nothing}\n \n \n `;\n }\n }\n};\nCSEBreadcrumb.styles = [hostStyle, fontStyles, style];\n__decorate([\n property({ type: String })\n], CSEBreadcrumb.prototype, \"type\", void 0);\n__decorate([\n property({ type: String })\n], CSEBreadcrumb.prototype, \"url\", void 0);\n__decorate([\n property({ type: String })\n], CSEBreadcrumb.prototype, \"variant\", void 0);\nCSEBreadcrumb = __decorate([\n customElement('cse-breadcrumb')\n], CSEBreadcrumb);\nexport { CSEBreadcrumb };\n//# sourceMappingURL=breadcrumb.js.map","import { css } from 'lit';\nimport { csColorAction, csColorBackground, csColorBorder, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder, csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csFontBody } from \"../_shared/fonts.style.js\";\nexport const cseButton = {\n backgroundColorDisabled: css `var(--cse-button-background-color-disabled, ${csColorBorder.light})`,\n borderColorDisabled: css `var(--cse-button-border-color-disabled, ${csColorBorder.light})`,\n borderRadius: css `var(--cse-button-border-radius, ${csBorder.radiusMinimal})`,\n borderWidth: css `var(--cse-button-border-width, ${csBorder.width})`,\n colorDisabled: css `var(--cse-button-color-disabled, ${csColorBorder.dark})`,\n columnGap: css `var(--cse-button-column-gap, ${csSpacing.spacing05})`,\n fontFamily: css `var(--cse-button-font-family, ${csFontBody.fontFamily})`,\n fontSize: css `var(--cse-button-font-size, ${csFontBody.fontSize})`,\n fontWeight: css `var(--cse-button-font-weight, 400)`,\n height: css `var(--cse-button-height, 48px)`,\n paddingBlock: css `var(--cse-button-padding-y, ${csSpacing.spacing05})`,\n paddingInline: css `var(--cse-button-padding-x, ${csSpacing.spacing07})`,\n smallFontSize: css `var(--cse-button-small-font-size, ${csFontBody.fontSize})`,\n smallFontWeight: css `var(--cse-button-small-font-weight, 400)`,\n smallHeight: css `var(--cse-button-small-height, 40px)`,\n smallPaddingBlock: css `var(--cse-button-small-padding-y, ${csSpacing.spacing04})`,\n smallPaddingInline: css `var(--cse-button-small-padding-x, ${csSpacing.spacing06})`,\n defaultColor: css `var(--cse-button-default-color, ${csColorAction.secondary})`,\n defaultColorHover: css `var(--cse-button-default-color-hover, ${csColorAction.secondary})`,\n defaultBackgroundColor: css `var(--cse-button-default-background-color, ${csColorBackground.primary})`,\n defaultBackgroundColorHover: css `var(--cse-button-default-background-color-hover, ${csColorBackground.primary})`,\n defaultBorderColor: css `var(--cse-button-default-border-color, ${csColorAction.secondary})`,\n defaultBorderColorHover: css `var(--cse-button-default-border-color-hover, ${csColorAction.secondaryHover})`,\n primaryColor: css `var(--cse-button-primary-color, ${csColorText.white})`,\n primaryColorHover: css `var(--cse-button-primary-color-hover, ${csColorText.white})`,\n primaryBackgroundColor: css `var(--cse-button-primary-background-color, ${csColorAction.primary})`,\n primaryBackgroundColorHover: css `var(--cse-button-primary-background-color-hover, ${csColorAction.primaryHover})`,\n primaryBorderColor: css `var(--cse-button-primary-border-color, ${csColorAction.primary})`,\n primaryBorderColorHover: css `var(--cse-button-primary-border-color-hover, ${csColorAction.primaryHover})`,\n secondaryColor: css `var(--cse-button-secondary-color, ${csColorText.white})`,\n secondaryColorHover: css `var(--cse-button-secondary-color-hover, ${csColorText.white})`,\n secondaryBackgroundColor: css `var(--cse-button-secondary-background-color, ${csColorAction.secondary})`,\n secondaryBackgroundColorHover: css `var(--cse-button-secondary-background-color-hover, ${csColorAction.secondaryHover})`,\n secondaryBorderColor: css `var(--cse-button-secondary-border-color, ${csColorAction.secondary})`,\n secondaryBorderColorHover: css `var(--cse-button-secondary-border-color-hover, ${csColorAction.secondaryHover})`,\n errorColor: css `var(--cse-button-error-color, ${csColorText.white})`,\n errorColorHover: css `var(--cse-button-error-color-hover, ${csColorText.white})`,\n errorBackgroundColor: css `var(--cse-button-error-background-color, ${csColorFunctional.error})`,\n errorBackgroundColorHover: css `var(--cse-button-error-background-color-hover, ${csColorFunctional.errorHover})`,\n errorBorderColor: css `var(--cse-button-error-border-color, ${csColorFunctional.error})`,\n errorBorderColorHover: css `var(--cse-button-error-border-color-hover, ${csColorFunctional.errorHover})`,\n infoColor: css `var(--cse-button-info-color, ${csColorText.white})`,\n infoColorHover: css `var(--cse-button-info-color-hover, ${csColorText.white})`,\n infoBackgroundColor: css `var(--cse-button-info-background-color, ${csColorFunctional.info})`,\n infoBackgroundColorHover: css `var(--cse-button-info-background-color-hover, ${csColorFunctional.infoHover})`,\n infoBorderColor: css `var(--cse-button-info-border-color, ${csColorFunctional.info})`,\n infoBorderColorHover: css `var(--cse-button-info-border-color-hover, ${csColorFunctional.infoHover})`,\n successColor: css `var(--cse-button-success-color, ${csColorText.white})`,\n successColorHover: css `var(--cse-button-success-color-hover, ${csColorText.white})`,\n successBackgroundColor: css `var(--cse-button-success-background-color, ${csColorFunctional.success})`,\n successBackgroundColorHover: css `var(--cse-button-success-background-color-hover, ${csColorFunctional.successHover})`,\n successBorderColor: css `var(--cse-button-success-border-color, ${csColorFunctional.success})`,\n successBorderColorHover: css `var(--cse-button-success-border-color-hover, ${csColorFunctional.successHover})`,\n warningColor: css `var(--cse-button-warning-color, ${csColorText.white})`,\n warningColorHover: css `var(--cse-button-warning-color-hover, ${csColorText.white})`,\n warningBackgroundColor: css `var(--cse-button-warning-background-color, ${csColorFunctional.warning})`,\n warningBackgroundColorHover: css `var(--cse-button-warning-background-color-hover, ${csColorFunctional.warningHover})`,\n warningBorderColor: css `var(--cse-button-warning-border-color, ${csColorFunctional.warning})`,\n warningBorderColorHover: css `var(--cse-button-warning-border-color-hover, ${csColorFunctional.warningHover})`,\n};\nexport const style = css `\n .cse-button {\n align-items: center;\n background-color: ${cseButton.defaultBackgroundColor};\n border-radius: ${cseButton.borderRadius};\n border-width: ${cseButton.borderWidth};\n border-style: solid;\n border-color: ${cseButton.defaultBorderColor};\n color: ${cseButton.defaultColor};\n column-gap: ${cseButton.columnGap};\n cursor: pointer;\n display: inline-flex;\n font-family: ${cseButton.fontFamily};\n justify-content: center;\n position: relative;\n text-decoration: none;\n transition-duration: ${csTransition.duration};\n transition-property: border-color, color, background-color;\n transition-timing-function: ${csTransition.timingFunction};\n }\n\n .cse-button.full-width {\n width: 100%;\n }\n\n :not(.size-small) {\n padding-block: ${cseButton.paddingBlock};\n padding-inline: ${cseButton.paddingInline};\n height: ${cseButton.height};\n max-height: ${cseButton.height};\n font-size: ${cseButton.fontSize};\n font-weight: ${cseButton.fontWeight};\n }\n\n .size-small {\n padding-block: ${cseButton.smallPaddingBlock};\n padding-inline: ${cseButton.smallPaddingInline};\n height: ${cseButton.smallHeight};\n max-height: ${cseButton.smallHeight};\n font-size: ${cseButton.smallFontSize};\n font-weight: ${cseButton.smallFontWeight};\n }\n\n .cse-button:hover {\n background-color: ${cseButton.defaultBackgroundColorHover};\n border-color: ${cseButton.defaultBorderColorHover};\n color: ${cseButton.defaultColorHover};\n }\n\n .cse-button:disabled {\n cursor: default;\n background-color: ${cseButton.backgroundColorDisabled};\n border-color: ${cseButton.borderColorDisabled};\n color: ${cseButton.colorDisabled};\n }\n\n .square {\n padding: 0;\n justify-content: center;\n max-width: ${cseButton.height};\n width: ${cseButton.height};;\n }\n\n .size-small.square {\n max-width: ${cseButton.smallHeight};\n width: ${cseButton.smallHeight};\n }\n\n /* VARIANTS */\n .variant-primary:not(:disabled) {\n background-color: ${cseButton.primaryBackgroundColor};\n border-color: ${cseButton.primaryBorderColor};\n color: ${cseButton.primaryColor};\n }\n\n .variant-primary:not(:disabled):hover {\n background-color: ${cseButton.primaryBackgroundColorHover};\n border-color: ${cseButton.primaryBorderColorHover};\n color: ${cseButton.primaryColorHover};\n }\n\n .variant-secondary:not(:disabled) {\n background-color: ${cseButton.secondaryBackgroundColor};\n border-color: ${cseButton.secondaryBorderColor};\n color: ${cseButton.secondaryColor};\n }\n\n .variant-secondary:not(:disabled):hover {\n background-color: ${cseButton.secondaryBackgroundColorHover};\n border-color: ${cseButton.secondaryBorderColorHover};\n color: ${cseButton.secondaryColorHover};\n }\n\n .variant-error:not(:disabled) {\n background-color: ${cseButton.errorBackgroundColor};\n border-color: ${cseButton.errorBorderColor};\n color: ${cseButton.errorColor};\n }\n\n .variant-error:not(:disabled):hover {\n background-color: ${cseButton.errorBackgroundColorHover};\n border-color: ${cseButton.errorBorderColorHover};\n color: ${cseButton.errorColorHover};\n }\n\n .variant-info:not(:disabled) {\n background-color: ${cseButton.infoBackgroundColor};\n border-color: ${cseButton.infoBorderColor};\n color: ${cseButton.infoColor};\n }\n\n .variant-info:not(:disabled):hover {\n background-color: ${cseButton.infoBackgroundColorHover};\n border-color: ${cseButton.infoBorderColorHover};\n color: ${cseButton.infoColorHover};\n }\n\n .variant-success:not(:disabled) {\n background-color: ${cseButton.successBackgroundColor};\n border-color: ${cseButton.successBorderColor};\n color: ${cseButton.successColor};\n }\n\n .variant-success:not(:disabled):hover {\n background-color: ${cseButton.successBackgroundColorHover};\n border-color: ${cseButton.successBorderColorHover};\n color: ${cseButton.successColorHover};\n }\n\n .variant-warning:not(:disabled) {\n background-color: ${cseButton.warningBackgroundColor};\n border-color: ${cseButton.warningBorderColor};\n color: ${cseButton.warningColor};\n }\n\n .variant-warning:not(:disabled):hover {\n background-color: ${cseButton.warningBackgroundColorHover};\n border-color: ${cseButton.warningBorderColorHover};\n color: ${cseButton.warningColorHover};\n }\n`;\nexport const buttonGroupStyle = css `\n\n :host([slot=\"left\"]) .cse-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: 0;\n }\n\n :host([slot=\"right\"]) .cse-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-left: 0;\n }\n`;\n//# sourceMappingURL=button.style.js.map","import { css } from 'lit';\nimport { cseButton } from \"../button/button.style.js\";\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const style = css `\n .cse-button-group {\n border-radius: ${cseButton.borderRadius};\n display: inline-flex;\n flex-direction: row;\n outline-offset: -1px;\n outline-style: solid;\n outline-width: ${cseButton.borderWidth};\n }\n\n cse-divider {\n --cse-divider-margin: ${csSpacing.spacing05};\n transition-duration: ${csTransition.duration};\n transition-property: opacity;\n transition-timing-function: ${csTransition.timingFunction};\n }\n\n .cse-button-group:hover cse-divider {\n opacity: 0;\n }\n\n /* VARIANTS */\n .variant-default {\n --cse-divider-border-color: ${cseButton.defaultBorderColor};\n background-color: ${cseButton.defaultBackgroundColor};\n outline-color: ${cseButton.defaultBorderColor};\n }\n\n .variant-primary {\n background-color: ${cseButton.primaryBackgroundColor};\n outline-color: ${cseButton.primaryBorderColor};\n }\n\n .variant-secondary {\n background-color: ${cseButton.secondaryBackgroundColor};\n outline-color: ${cseButton.secondaryBorderColor};\n }\n\n .variant-error {\n background-color: ${cseButton.errorBackgroundColor};\n outline-color: ${cseButton.errorBorderColor};\n }\n\n .variant-info {\n background-color: ${cseButton.infoBackgroundColor};\n outline-color: ${cseButton.infoBorderColor};\n }\n\n .variant-success {\n background-color: ${cseButton.successBackgroundColor};\n outline-color: ${cseButton.successBorderColor};\n }\n\n .variant-warning {\n background-color: ${cseButton.warningBackgroundColor};\n outline-color: ${cseButton.warningBorderColor};\n }\n`;\n//# sourceMappingURL=button-group.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { style } from './button-group.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nlet CSEButtonGroup = class CSEButtonGroup extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'default';\n this.size = 'default';\n this.displayDivider = true;\n }\n updated(changedProperties) {\n super.updated(changedProperties);\n const assignedNodesLeft = this.leftSlot.assignedNodes({ flatten: true });\n const assignedButtonsLeft = assignedNodesLeft.map(this.findButton).filter(this.isButton);\n const assignedNodesRight = this.rightSlot.assignedNodes({ flatten: true });\n const assignedButtonsRight = assignedNodesRight.map(this.findButton).filter(this.isButton);\n if (assignedButtonsLeft.length !== 1 || assignedButtonsRight.length !== 1) {\n throw new Error('Invalid button group: should contain exactly 2 buttons');\n }\n [...assignedButtonsLeft, ...assignedButtonsRight].forEach(button => {\n button.variant = this.variant;\n button.size = this.size;\n if (button.disabled) {\n this.displayDivider = false;\n }\n });\n }\n findButton(node) {\n const selector = 'cse-button';\n return node instanceof HTMLElement ? node.closest(selector) ?? node.querySelector(selector) : null;\n }\n isButton(button) {\n return button !== null;\n }\n render() {\n return html `\n
\n \n ${this.displayDivider ? html `` : nothing}\n \n
\n `;\n }\n};\nCSEButtonGroup.styles = [hostStyle, style];\n__decorate([\n property({ type: String })\n], CSEButtonGroup.prototype, \"variant\", void 0);\n__decorate([\n property({ type: String })\n], CSEButtonGroup.prototype, \"size\", void 0);\n__decorate([\n state()\n], CSEButtonGroup.prototype, \"displayDivider\", void 0);\n__decorate([\n query('slot[name=\"left\"]')\n], CSEButtonGroup.prototype, \"leftSlot\", void 0);\n__decorate([\n query('slot[name=\"right\"]')\n], CSEButtonGroup.prototype, \"rightSlot\", void 0);\nCSEButtonGroup = __decorate([\n customElement('cse-button-group')\n], CSEButtonGroup);\nexport { CSEButtonGroup };\n//# sourceMappingURL=button-group.js.map","import { css } from 'lit';\nimport { csColorBackground, csColorBorder, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csFontBody } from './fonts.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const csFormControl = {\n backgroundColor: css `var(--cs-form-control-background-color, ${csColorBackground.primary})`,\n backgroundColorChecked: css `var(--cs-form-control-background-color-checked, ${csColorFunctional.info})`,\n backgroundColorCheckedHover: css `var(--cs-form-control-background-color-checked-hover, ${csColorFunctional.infoHover})`,\n backgroundColorSelected: css `var(--cs-form-control-background-color-selected, ${csColorBackground.secondary})`,\n backgroundColorDisabled: css `var(--cs-form-control-background-color-disabled, ${csColorBackground.disabled})`,\n borderColor: css `var(--cs-form-control-border-color, ${csColorBorder.light})`,\n borderColorDisabled: css `var(--cs-form-control-border-color-disabled, ${csColorBackground.disabled})`,\n borderColorError: css `var(--cs-form-control-border-color-error, ${csColorFunctional.error})`,\n borderColorHover: css `var(--cs-form-control-border-color-hover, ${csColorFunctional.infoHover})`,\n borderColorSuccess: css `var(--cs-form-control-border-color-success, ${csColorFunctional.success})`,\n borderRadius: css `var(--cs-form-control-border-radius, ${csBorder.radiusMedium})`,\n borderWidth: css `var(--cs-form-control-border-width, ${csBorder.width})`,\n color: css `var(--cs-form-control-color, ${csColorText.body})`,\n colorHover: css `var(--cs-form-control-color-hover, ${csColorFunctional.infoHover})`,\n colorDisabled: css `var(--cs-form-control-color-disabled, ${csColorText.muted})`,\n fontFamily: css `var(--cs-form-control-font-family, ${csFontBody.fontFamily})`,\n fontSize: css `var(--cs-form-control-font-size, 16px)`,\n height: css `var(--cs-form-control-height, 40px)`,\n paddingBlock: css `var(--cs-form-control-padding-y, 0)`,\n paddingInline: css `var(--cs-form-control-padding-x, ${csSpacing.spacing05})`,\n placeholderColor: css `var(--cs-form-control-placeholder-color, ${csColorText.placeholder})`,\n outlineFocus: css `var(--cs-form-control-outline-focus, -webkit-focus-ring-color auto 1px)`\n};\n//# sourceMappingURL=form.style.js.map","import { css } from 'lit';\nimport { csFormControl } from \"../_shared/form.style.js\";\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseButtonInput = {\n backgroundColor: css `var(--cse-button-input-background-color, ${csFormControl.backgroundColor})`,\n backgroundColorDisabled: css `var(--cse-button-input-background-color-disabled, ${csFormControl.backgroundColorDisabled})`,\n borderWidth: css `var(--cse-button-input-border-width, ${csFormControl.borderWidth})`,\n borderColor: css `var(--cse-button-input-border-color, ${csFormControl.borderColor})`,\n borderColorError: css `var(--cse-button-input-border-color-error, ${csFormControl.borderColorError})`,\n borderColorSuccess: css `var(--cse-button-input-border-color-success, ${csFormControl.borderColorSuccess})`,\n borderRadius: css `var(--cse-button-input-border-radius, ${csFormControl.borderRadius})`,\n color: css `var(--cse-button-input-color, ${csFormControl.color})`,\n colorDisabled: css `var(--cse-button-input-color-disabled, ${csFormControl.colorDisabled})`,\n fontSize: css `var(--cse-button-input-font-size, ${csFormControl.fontSize})`,\n fontFamily: css `var(--cse-button-input-font-family, ${csFormControl.fontFamily})`,\n gap: css `var(--cse-button-input-gap, ${csSpacing.spacing05})`,\n height: css `var(--cse-button-input-height, auto)`,\n paddingLeft: css `var(--cse-button-input-padding-left, ${csFormControl.paddingInline})`,\n paddingRight: css `var(--cse-button-input-padding-right, ${csSpacing.spacing02})`,\n paddingBlock: css `var(--cse-button-input-padding-y, ${csSpacing.spacing02})`,\n outlineFocus: css `var(--cse-button-input-outline-focus, ${csFormControl.outlineFocus})`,\n placeholderColor: css `var(--cse-button-input-placeholder-color, ${csFormControl.placeholderColor})`,\n actionsGap: css `var(--cse-button-input-actions-gap, ${csSpacing.spacing05})`,\n};\nexport const style = css `\n .cse-button-input {\n align-items: center;\n background: ${cseButtonInput.backgroundColor};\n border-color: ${cseButtonInput.borderColor};\n border-style: solid;\n border-radius: ${cseButtonInput.borderRadius};\n border-width: ${cseButtonInput.borderWidth};\n color: ${cseButtonInput.color};\n display: flex;\n font-size: ${cseButtonInput.fontSize};\n font-family: ${cseButtonInput.fontFamily};\n gap: ${cseButtonInput.gap};\n height: ${cseButtonInput.height};\n padding-block: ${cseButtonInput.paddingBlock};\n padding-right: ${cseButtonInput.paddingRight};\n padding-left: ${cseButtonInput.paddingLeft};\n transition-duration: ${csTransition.duration};\n transition-timing-function: ${csTransition.timingFunction};\n transition-property: color, background-color, border-color;\n width: 100%;\n }\n\n .cse-button-input.disabled {\n background-color: ${cseButtonInput.backgroundColorDisabled};\n color: ${cseButtonInput.colorDisabled};\n }\n\n .cse-button-input:has(input:focus-visible) {\n outline: ${cseButtonInput.outlineFocus};\n }\n\n input {\n all: unset;\n align-self: stretch;\n flex: 1;\n }\n\n input::placeholder {\n color: ${cseButtonInput.placeholderColor};\n }\n\n .cse-button-input.valid-error {\n border-color: ${cseButtonInput.borderColorError};\n }\n\n .cse-button-input.valid-success {\n border-color: ${cseButtonInput.borderColorSuccess};\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: ${cseButtonInput.actionsGap};\n }\n`;\n//# sourceMappingURL=button-input.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { style } from './button-input.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nexport class ButtonInputSubmit extends Event {\n constructor(value) {\n super(ButtonInputSubmit.type, { bubbles: true, composed: true });\n this.value = '';\n this.value = value;\n }\n}\nButtonInputSubmit.type = 'cse-button-input-submit';\nexport class ButtonInputClear extends Event {\n constructor() {\n super(ButtonInputClear.type, { bubbles: true, composed: true });\n }\n}\nButtonInputClear.type = 'cse-button-input-clear';\nlet CSEButtonInput = class CSEButtonInput extends LitElement {\n constructor() {\n super(...arguments);\n this.buttonVariant = 'secondary';\n this.disabled = false;\n this.placeholder = '';\n this.value = '';\n this.valid = 'none';\n this.autofocus = false;\n }\n focus() {\n this.input.focus();\n }\n render() {\n const classes = classMap({\n 'cse-button-input': true,\n 'disabled': this.disabled,\n [`valid-${this.valid}`]: true,\n });\n return html `\n
\n \n
\n ${this.value.length > 0 && !this.disabled ? html `\n \n ` : nothing}\n \n \n \n \n
\n
\n `;\n }\n handleTyping(e) {\n this.value = e.target.value;\n if (e.code === 'Enter') {\n this.submit(new Event('click'));\n }\n }\n clear(e) {\n e.stopPropagation();\n this.value = '';\n this.dispatchEvent(new ButtonInputClear());\n }\n submit(e) {\n e.stopPropagation();\n this.dispatchEvent(new ButtonInputSubmit(this.value || ''));\n }\n};\nCSEButtonInput.styles = [hostStyle, style];\n__decorate([\n property({ type: String, attribute: 'button-variant' })\n], CSEButtonInput.prototype, \"buttonVariant\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEButtonInput.prototype, \"disabled\", void 0);\n__decorate([\n property()\n], CSEButtonInput.prototype, \"placeholder\", void 0);\n__decorate([\n property({ type: String, reflect: true })\n], CSEButtonInput.prototype, \"value\", void 0);\n__decorate([\n property({ type: String })\n], CSEButtonInput.prototype, \"valid\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEButtonInput.prototype, \"autofocus\", void 0);\n__decorate([\n query('input')\n], CSEButtonInput.prototype, \"input\", void 0);\nCSEButtonInput = __decorate([\n customElement('cse-button-input')\n], CSEButtonInput);\nexport { CSEButtonInput };\n//# sourceMappingURL=button-input.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ButtonElement } from \"../_shared/formElement.js\";\nimport { buttonGroupStyle, style } from './button.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nexport const buttonVariants = ['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning'];\nexport const buttonSizes = ['default', 'small'];\nexport const fitVariants = ['auto', 'fill', 'square'];\nlet CSEButton = class CSEButton extends ButtonElement {\n constructor() {\n super(...arguments);\n this.variant = 'default';\n this.size = 'default';\n this.fit = 'auto';\n this.disabled = false;\n this.url = '';\n this.target = '_self';\n this.renderButtonContents = () => html `\n \n \n \n `;\n }\n render() {\n const isLink = this.url !== '';\n const classes = classMap({\n 'cse-button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'full-width': this.fit === 'fill',\n 'square': this.fit === 'square'\n });\n if (isLink) {\n return html `\n \n ${this.renderButtonContents()}\n \n `;\n }\n else {\n return html `\n \n ${this.renderButtonContents()}\n \n `;\n }\n }\n};\nCSEButton.styles = [hostStyle, style, buttonGroupStyle];\n__decorate([\n property({ type: String })\n], CSEButton.prototype, \"variant\", void 0);\n__decorate([\n property({ type: String })\n], CSEButton.prototype, \"size\", void 0);\n__decorate([\n property({ type: String })\n], CSEButton.prototype, \"fit\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEButton.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: String })\n], CSEButton.prototype, \"url\", void 0);\n__decorate([\n property({ type: String })\n], CSEButton.prototype, \"target\", void 0);\nCSEButton = __decorate([\n customElement('cse-button')\n], CSEButton);\nexport { CSEButton };\n//# sourceMappingURL=button.js.map","import { css } from 'lit';\nimport { csColorAction, csColorBackground } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder, csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nconst cseCarouselPaginationDotSize = css `8px`;\nexport const cseCarouselPagination = {\n dotBackgroundColor: css `var(--cse-carousel-dot-background-color, ${csColorAction.secondary})`,\n dotBackgroundColorDisabled: css `var(--cse-carousel-dot-background-color-disabled, ${csColorBackground.disabled})`,\n dotBackgroundColorHover: css `var(--cse-carousel-dot-background-color-hover, ${csColorAction.secondaryHover})`,\n dotBorderRadius: css `var(--cse-carousel-dot-border-radius, ${csBorder.radiusFull})`,\n dotHeight: css `var(--cse-carousel-dot-height, ${cseCarouselPaginationDotSize})`,\n dotWidth: css `var(--cse-carousel-dot-width, ${cseCarouselPaginationDotSize})`,\n dotSelectedBackgroundColor: css `var(--cse-carousel-dot-selected-background-color, ${csColorAction.linkPrimary})`,\n dotSelectedBackgroundColorHover: css `var(--cse-carousel-dot-selected-background-color-hover, ${csColorAction.linkPrimaryHover})`,\n dotSelectedBorderRadius: css `var(--cse-carousel-dot-selected-border-radius, ${cseCarouselPaginationDotSize})`,\n dotSelectedHeight: css `var(--cse-carousel-dot-selected-height, ${cseCarouselPaginationDotSize})`,\n dotSelectedWidth: css `var(--cse-carousel-dot-selected-width, 16px)`,\n};\nexport const style = css `\n /* Dot */\n .carousel-dot {\n background-color: ${cseCarouselPagination.dotBackgroundColor};\n border: none;\n border-radius: ${cseCarouselPagination.dotBorderRadius};\n cursor: pointer;\n display: block;\n height: ${cseCarouselPagination.dotHeight};\n transition-duration: ${csTransition.duration};\n transition-property: background-color, width;\n transition-timing-function: ${csTransition.timingFunction};\n width: ${cseCarouselPagination.dotWidth};\n }\n\n .carousel-dot:hover {\n background-color: ${cseCarouselPagination.dotBackgroundColorHover};\n }\n\n .carousel-dot.selected {\n background-color: ${cseCarouselPagination.dotSelectedBackgroundColor};\n border-radius: ${cseCarouselPagination.dotSelectedBorderRadius};\n height: ${cseCarouselPagination.dotSelectedHeight};\n width: ${cseCarouselPagination.dotSelectedWidth};\n }\n\n .carousel-dot.selected:hover {\n background-color: ${cseCarouselPagination.dotSelectedBackgroundColorHover};\n }\n\n .carousel-dot.disabled {\n background-color: ${cseCarouselPagination.dotBackgroundColorDisabled};\n pointer-events: none;\n }\n`;\n//# sourceMappingURL=carousel-pagination.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './carousel-pagination.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\ninitializeIconsByRole({\n 'cse-carousel-pagination.next': { name: 'arrow-right', style: 'light' },\n 'cse-carousel-pagination.previous': { name: 'arrow-left', style: 'light' },\n});\nexport const carouselPaginationTypes = ['dot', 'next', 'previous'];\nlet CSECarouselPagination = class CSECarouselPagination extends LitElement {\n constructor() {\n super(...arguments);\n this.index = 0;\n this.type = 'dot';\n this.selected = false;\n this.disabled = false;\n }\n render() {\n if (this.type === 'dot') {\n return html `\n \n \n `;\n }\n else {\n return html `\n \n ${this.type === 'next'\n ? html ``\n : html ``}\n \n `;\n }\n }\n};\nCSECarouselPagination.styles = [hostStyle, style, fontStyles];\n__decorate([\n property({ type: Number })\n], CSECarouselPagination.prototype, \"index\", void 0);\n__decorate([\n property({ type: String })\n], CSECarouselPagination.prototype, \"type\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSECarouselPagination.prototype, \"selected\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSECarouselPagination.prototype, \"disabled\", void 0);\nCSECarouselPagination = __decorate([\n customElement('cse-carousel-pagination')\n], CSECarouselPagination);\nexport { CSECarouselPagination };\n//# sourceMappingURL=carousel-pagination.js.map","import { css } from 'lit';\nimport { csFormControl } from \"../_shared/form.style.js\";\nimport { csColorAction, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder, csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseCheckbox = {\n backgroundColor: css `var(--cse-checkbox-background-color, ${csFormControl.backgroundColor})`,\n checkedBackgroundColor: css `var(--cse-checkbox-checked-background-color, ${csFormControl.backgroundColorChecked})`,\n checkedBackgroundColorHover: css `var(--cse-checkbox-checked-background-color-hover, ${csFormControl.backgroundColorCheckedHover})`,\n backgroundColorDisabled: css `var(--cse-checkbox-background-color-disabled, ${csFormControl.backgroundColorDisabled})`,\n borderColor: css `var(--cse-checkbox-border-color, ${csFormControl.borderColor})`,\n checkedBorderColor: css `var(--cse-checkbox-checked-border-color, ${csColorAction.linkPrimary})`,\n borderColorHover: css `var(--cse-checkbox-border-color-hover, ${csFormControl.borderColorHover})`,\n borderRadius: css `var(--cse-checkbox-border-radius, ${csBorder.radiusMinimal})`,\n borderWidth: css `var(--cse-checkbox-border-width, ${csFormControl.borderWidth})`,\n opacityDisabled: css `var(--cse-checkbox-opacity-disabled, .35)`,\n outlineFocus: css `var(--cse-checkbox-outline-focus, ${csFormControl.outlineFocus})`,\n height: css `var(--cse-checkbox-height, 20px)`,\n width: css `var(--cse-checkbox-width, 20px)`,\n gap: css `var(--cse-checkbox-gap, ${csSpacing.spacing05})`,\n color: css `var(--cse-checkbox-color, ${csFormControl.color})`,\n colorDisabled: css `var(--cse-checkbox-color-disabled, ${csColorText.placeholder})`,\n fontFamily: css `var(--cse-checkbox-font-family, ${csFormControl.fontFamily})`,\n fontSize: css `var(--cse-checkbox-font-size, ${csFormControl.fontSize})`,\n iconColor: css `var(--cse-checkbox-icon-color, ${csColorText.white})`,\n groupGap: css `var(--cse-checkbox-group-gap, ${csSpacing.spacing05})`,\n};\nexport const style = css `\n .cse-checkbox {\n align-items: center;\n display: inline-flex;\n }\n\n input {\n flex: 0 0 auto;\n appearance: none;\n -webkit-appearance: none;\n background-color: ${cseCheckbox.backgroundColor};\n border-width: ${cseCheckbox.borderWidth};\n border-style: solid;\n border-color: ${cseCheckbox.borderColor};\n border-radius: ${cseCheckbox.borderRadius};\n width: ${cseCheckbox.width};\n height: ${cseCheckbox.height};\n margin: 0;\n transition-duration: ${csTransition.duration};\n transition-property: border-width, border-color, box-shadow, background-color;\n transition-timing-function: ${csTransition.timingFunction};\n }\n\n input:focus,\n input:focus-visible {\n outline: ${cseCheckbox.outlineFocus};\n }\n\n .cse-checkbox.checked input {\n background-color: ${cseCheckbox.checkedBackgroundColor};\n border-color: ${cseCheckbox.checkedBorderColor};\n }\n\n .cse-checkbox:not(.disabled), .cse-checkbox:not(.disabled) input {\n cursor: pointer;\n }\n\n .cse-checkbox:not(.disabled):hover input {\n border-color: ${cseCheckbox.borderColorHover};\n }\n\n .cse-checkbox.disabled:not(.checked) input {\n background-color: ${cseCheckbox.backgroundColorDisabled};\n pointer-events: none;\n }\n\n .cse-checkbox.disabled.checked input {\n opacity: ${cseCheckbox.opacityDisabled};\n pointer-events: none;\n }\n\n .cse-checkbox.checked:not(.disabled):hover input {\n background-color: ${cseCheckbox.checkedBackgroundColorHover};\n }\n\n .label {\n color: ${cseCheckbox.color};\n display: inline-block;\n font-family: ${cseCheckbox.fontFamily};\n font-size: ${cseCheckbox.fontSize};\n line-height: normal;\n margin-left: ${cseCheckbox.gap};\n user-select: none;\n vertical-align: top;\n }\n\n .cse-checkbox.disabled .label {\n color: ${cseCheckbox.colorDisabled};\n }\n\n .cse-checkbox:not(.disabled) .label {\n cursor: pointer;\n }\n\n [role=\"cse-checkbox.check\"] {\n color: ${cseCheckbox.iconColor};\n position: absolute;\n width: ${cseCheckbox.width};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n }\n`;\nexport const groupStyle = css `\n .cse-checkbox-group {\n display: flex;\n flex-direction: column;\n gap: ${cseCheckbox.groupGap};\n }\n`;\n//# sourceMappingURL=checkbox.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { groupStyle, style } from './checkbox.style.js';\nimport { BooleanFormElement } from \"../_shared/formElement.js\";\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\ninitializeIconsByRole({\n 'cse-checkbox.check': { name: 'check', style: 'light' },\n});\nlet CSECheckbox = class CSECheckbox extends BooleanFormElement {\n constructor() {\n super();\n this._id = '';\n this.name = '';\n this.value = '';\n this.required = false;\n this.disabled = false;\n this.checked = false;\n this.autofocus = false;\n this.toggleChecked = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.emit(this.checked);\n }\n };\n this.addEventListener('click', this.toggleChecked);\n }\n focus() {\n this.input.focus();\n }\n render() {\n return html `\n \n \n ${this.checked\n ? html ``\n : nothing}\n \n \n `;\n }\n};\nCSECheckbox.styles = [hostStyle, style];\n__decorate([\n property({ type: String, attribute: 'id' })\n], CSECheckbox.prototype, \"_id\", void 0);\n__decorate([\n property({ type: String })\n], CSECheckbox.prototype, \"name\", void 0);\n__decorate([\n property({ type: String, reflect: true })\n], CSECheckbox.prototype, \"value\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSECheckbox.prototype, \"required\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSECheckbox.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: Boolean, reflect: true })\n], CSECheckbox.prototype, \"checked\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSECheckbox.prototype, \"autofocus\", void 0);\n__decorate([\n query('input')\n], CSECheckbox.prototype, \"input\", void 0);\nCSECheckbox = __decorate([\n customElement('cse-checkbox')\n], CSECheckbox);\nexport { CSECheckbox };\nlet CSECheckboxGroup = class CSECheckboxGroup extends LitElement {\n render() {\n return html `\n
\n \n
\n `;\n }\n};\nCSECheckboxGroup.styles = [hostStyle, groupStyle];\nCSECheckboxGroup = __decorate([\n customElement('cse-checkbox-group')\n], CSECheckboxGroup);\nexport { CSECheckboxGroup };\n//# sourceMappingURL=checkbox.js.map","import { css } from 'lit';\nimport { csColorBackground, csColorBorder, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder, csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseChip = {\n backgroundColor: css `var(--cse-chip-background-color, ${csColorBackground.primary})`,\n backgroundColorHover: css `var(--cse-chip-background-color-hover, ${csColorBackground.primary})`,\n backgroundColorDisabled: css `var(--cse-chip-background-color-disabled, ${csColorBackground.primary})`,\n borderColor: css `var(--cse-chip-border-color, ${csColorBorder.light})`,\n borderColorHover: css `var(--cse-chip-border-color-hover, ${csColorFunctional.info})`,\n borderColorDisabled: css `var(--cse-chip-border-color-disabled, ${csColorBorder.light})`,\n borderRadius: css `var(--cse-chip-border-radius, ${csBorder.radiusSubtle})`,\n color: css `var(--cse-chip-color, ${csColorText.body})`,\n colorHover: css `var(--cse-chip-color-hover, ${csColorText.body})`,\n colorDisabled: css `var(--cse-chip-color-disabled, ${csColorText.muted})`,\n columnGap: css `var(--cse-chip-column-gap, ${csSpacing.spacing04})`,\n height: css `var(--cse-chip-height, 32px)`,\n paddingInline: css `var(--cse-chip-padding-x, ${csSpacing.spacing05})`,\n paddingBlock: css `var(--cse-chip-padding-y, ${csSpacing.spacing04})`,\n selectedBackgroundColor: css `var(--cse-chip-selected-background-color, ${csColorBackground.info})`,\n selectedBackgroundColorDisabled: css `var(--cse-chip-selected-background-color-disabled, ${csColorBackground.disabled})`,\n selectedBorderColor: css `var(--cse-chip-selected-border-color, ${csColorBackground.info})`,\n selectedBorderColorDisabled: css `var(--cse-chip-selected-border-color-disabled, ${csColorBackground.disabled})`,\n selectedColor: css `var(--cse-chip-selected-color, ${csColorFunctional.info})`,\n};\nexport const cseChipGroup = {\n columnGap: css `var(--cse-chip-group-column-gap, ${csSpacing.spacing05})`,\n rowGap: css `var(--cse-chip-group-row-gap, ${csSpacing.spacing06})`,\n};\nexport const groupStyle = css `\n .cse-chip-group {\n column-gap: ${cseChipGroup.columnGap};\n display: flex;\n row-gap: ${cseChipGroup.rowGap};\n }\n\n .wrap {\n flex-wrap: wrap;\n }\n`;\nexport const style = css `\n .cse-chip {\n --cse-text-color: ${cseChip.color};\n align-items: center;\n background: ${cseChip.backgroundColor};\n border-style: solid;\n border-width: ${csBorder.width};\n border-color: ${cseChip.borderColor};\n border-radius: ${cseChip.borderRadius};\n column-gap: ${cseChip.columnGap};\n display: inline-flex;\n min-height: ${cseChip.height};\n padding-block: ${cseChip.paddingBlock};\n padding-inline: ${cseChip.paddingInline};\n user-select: none;\n transition-duration: ${csTransition.duration};\n transition-timing-function: ${csTransition.timingFunction};\n transition-property: background-color, border-color, color;\n }\n\n .cse-chip.full-width {\n width: 100%;\n }\n\n .cse-chip:not(:disabled) {\n cursor: pointer;\n }\n\n .cse-chip:hover {\n background: ${cseChip.backgroundColorHover};\n border-color: ${cseChip.borderColorHover};\n color: ${cseChip.colorHover};\n }\n\n .cse-chip:disabled {\n background-color: ${cseChip.backgroundColorDisabled};\n border-color: ${cseChip.borderColorDisabled};\n color: ${cseChip.colorDisabled};\n pointer-events: none;\n }\n\n .cse-chip.selected {\n background: ${cseChip.selectedBackgroundColor};\n border-color: ${cseChip.selectedBorderColor};\n color: ${cseChip.selectedColor};\n }\n\n .cse-chip.selected:hover {\n background: ${cseChip.selectedBackgroundColor};\n border-color: ${cseChip.borderColorHover};\n }\n\n .cse-chip.selected:disabled {\n background: ${cseChip.selectedBackgroundColorDisabled};\n border-color: ${cseChip.selectedBorderColorDisabled};\n color: ${cseChip.colorDisabled};\n }\n\n [role=\"cse-chip.dropdown\"] {\n color: ${cseChip.color};\n }\n\n :disabled [role=\"cse-chip.dropdown\"] {\n color: inherit;\n }\n`;\n//# sourceMappingURL=chip.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style, groupStyle } from './chip.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\ninitializeIconsByRole({\n 'cse-chip.selected': { name: 'check', style: 'light' },\n 'cse-chip.dismiss': { name: 'xmark', style: 'light' },\n 'cse-chip.dropdown': { name: 'angle-down', style: 'light' },\n});\nexport const chipVariants = ['default', 'dismissable', 'dropdown'];\nlet CSEChipGroup = class CSEChipGroup extends LitElement {\n constructor() {\n super(...arguments);\n this.wrap = false;\n }\n render() {\n return html `\n
\n \n
\n `;\n }\n};\nCSEChipGroup.styles = [hostStyle, groupStyle];\n__decorate([\n property({ type: Boolean })\n], CSEChipGroup.prototype, \"wrap\", void 0);\nCSEChipGroup = __decorate([\n customElement('cse-chip-group')\n], CSEChipGroup);\nexport { CSEChipGroup };\nlet CSEChip = class CSEChip extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'default';\n this.disabled = false;\n this.selected = false;\n this.url = '';\n this.fit = 'auto';\n this.handleIconClick = (event) => {\n if (this.disabled)\n return;\n event.preventDefault();\n event.stopPropagation();\n this.dispatchEvent(new CSEChipDismissedEvent(this));\n };\n this.renderSelectedIcon = () => html `\n \n `;\n this.renderDropdownIcon = () => html `\n \n `;\n this.renderDismissButton = () => html `\n \n `;\n }\n render() {\n const isLink = this.url !== '';\n const classes = classMap({\n 'cse-chip': true,\n 'font-body-s': true,\n 'selected': this.selected,\n 'full-width': this.fit === 'fill',\n });\n if (isLink) {\n return html `\n \n \n \n \n `;\n }\n else {\n return html `\n \n `;\n }\n }\n};\nCSEChip.styles = [hostStyle, style, fontStyles];\n__decorate([\n property({ type: String })\n], CSEChip.prototype, \"variant\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEChip.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEChip.prototype, \"selected\", void 0);\n__decorate([\n property({ type: String })\n], CSEChip.prototype, \"url\", void 0);\n__decorate([\n property({ type: String })\n], CSEChip.prototype, \"fit\", void 0);\nCSEChip = __decorate([\n customElement('cse-chip')\n], CSEChip);\nexport { CSEChip };\nexport class CSEChipDismissedEvent extends Event {\n constructor(chip) {\n super(CSEChipDismissedEvent.type, { bubbles: true, composed: true });\n this.chip = chip;\n }\n}\nCSEChipDismissedEvent.type = 'cse-chip-dismissed';\n//# sourceMappingURL=chip.js.map","import { css } from 'lit';\nimport { csFormControl } from \"../_shared/form.style.js\";\nimport { csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseDateInput = {\n backgroundColor: css `var(--cse-date-input-background-color, ${csFormControl.backgroundColor})`,\n backgroundColorDisabled: css `var(--cse-date-input-background-color-disabled, ${csFormControl.backgroundColorDisabled})`,\n borderWidth: css `var(--cse-date-input-border-width, ${csFormControl.borderWidth})`,\n borderColor: css `var(--cse-date-input-border-color, ${csFormControl.borderColor})`,\n borderColorError: css `var(--cse-date-input-border-color-error, ${csFormControl.borderColorError})`,\n borderColorSuccess: css `var(--cse-date-input-border-color-success, ${csFormControl.borderColorSuccess})`,\n borderRadius: css `var(--cse-date-input-border-radius, ${csFormControl.borderRadius})`,\n color: css `var(--cse-date-input-color, ${csFormControl.color})`,\n colorDisabled: css `var(--cse-date-input-color-disabled, ${csFormControl.colorDisabled})`,\n fontSize: css `var(--cse-date-input-font-size, ${csFormControl.fontSize})`,\n fontFamily: css `var(--cse-date-input-font-family, ${csFormControl.fontFamily})`,\n height: css `var(--cse-date-input-height, ${csFormControl.height})`,\n paddingInline: css `var(--cse-date-input-padding-x, ${csFormControl.paddingInline})`,\n paddingBlock: css `var(--cse-date-input-padding-y, ${csFormControl.paddingBlock})`,\n outlineFocus: css `var(--cse-date-input-outline-focus, ${csFormControl.outlineFocus})`,\n};\nexport const style = css `\n .cse-date-input {\n background: ${cseDateInput.backgroundColor};\n border-width: ${cseDateInput.borderWidth};\n border-style: solid;\n border-color: ${cseDateInput.borderColor};\n border-radius: ${cseDateInput.borderRadius};\n color: ${cseDateInput.color};\n display: block;\n font-size: ${cseDateInput.fontSize};\n font-family: ${cseDateInput.fontFamily};\n width: 100%;\n height: ${cseDateInput.height};\n padding-block: ${cseDateInput.paddingBlock};\n padding-inline: ${cseDateInput.paddingInline};\n transition-duration: ${csTransition.duration};\n transition-timing-function: ${csTransition.timingFunction};\n transition-property: color, background-color, border-color;\n }\n\n .cse-date-input.disabled {\n background-color: ${cseDateInput.backgroundColorDisabled};\n color: ${cseDateInput.colorDisabled};\n }\n\n .cse-date-input.valid-error {\n border-color: ${cseDateInput.borderColorError};\n }\n\n .cse-date-input.valid-success {\n border-color: ${cseDateInput.borderColorSuccess};\n }\n\n .cse-date-input:focus-visible {\n outline: ${cseDateInput.outlineFocus};\n }\n`;\n//# sourceMappingURL=date-input.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ValueFormElement } from \"../_shared/formElement.js\";\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './date-input.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nlet CSEDateInput = class CSEDateInput extends ValueFormElement {\n constructor() {\n super(...arguments);\n this._id = '';\n this.name = '';\n this.value = '';\n this.required = false;\n this.disabled = false;\n this.valid = 'none';\n this.autofocus = false;\n this.handleChange = () => {\n this.value = this.input.value;\n this.emit(this.value);\n };\n }\n focus() {\n this.input.focus();\n }\n render() {\n const classes = classMap({\n 'cse-date-input': true,\n 'disabled': this.disabled,\n [`valid-${this.valid}`]: true,\n });\n return html `\n \n `;\n }\n updated(changedProperties) {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this.checkRequired();\n }\n }\n checkRequired() {\n if (this.required && this.input.value.trim() === '') {\n this.internals.setValidity({\n valueMissing: true\n }, this.requiredText || 'This field is required', this.input);\n }\n else {\n this.internals.setValidity({});\n }\n }\n};\nCSEDateInput.styles = [hostStyle, style];\n__decorate([\n property({ type: String, attribute: 'id' })\n], CSEDateInput.prototype, \"_id\", void 0);\n__decorate([\n property({ type: String })\n], CSEDateInput.prototype, \"name\", void 0);\n__decorate([\n property({ type: String, reflect: true })\n], CSEDateInput.prototype, \"value\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEDateInput.prototype, \"required\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEDateInput.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: String })\n], CSEDateInput.prototype, \"valid\", void 0);\n__decorate([\n query('input')\n], CSEDateInput.prototype, \"input\", void 0);\n__decorate([\n property({ type: String, attribute: 'required-text' })\n], CSEDateInput.prototype, \"requiredText\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEDateInput.prototype, \"autofocus\", void 0);\nCSEDateInput = __decorate([\n customElement('cse-date-input')\n], CSEDateInput);\nexport { CSEDateInput };\n//# sourceMappingURL=date-input.js.map","import { css } from 'lit';\nimport { csColorBackground, csColorBorder, csColorFunctional, csColorText, } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseDefinitionListItem = {\n borderColor: css `var(--cse-definition-list-item-border-color, ${csColorBorder.light})`,\n color: css `var(--cse-definition-list-item-color, ${csColorText.body})`,\n evenBackgroundColor: css `var(--cse-definition-list-item-even-background-color, ${csColorBackground.secondary})`,\n oddBackgroundColor: css `var(--cse-definition-list-item-odd-background-color, ${csColorBackground.primary})`,\n paddingInline: css `var(--cse-definition-list-item-padding-x, ${csSpacing.spacing05})`,\n paddingBlock: css `var(--cse-definition-list-item-padding-y, ${csSpacing.spacing05})`,\n infoColor: css `var(--cse-definition-list-item-info-color, ${csColorFunctional.info})`,\n};\nexport const listStyle = css `\n .cse-definition-list {\n width: 100%;\n }\n`;\nexport const definitionListItemStyle = css `\n .cse-definition-list-item {\n --cse-text-color: ${cseDefinitionListItem.color};\n border-width: ${csBorder.width};\n border-style: solid;\n border-color: ${cseDefinitionListItem.borderColor};\n padding-block: ${cseDefinitionListItem.paddingBlock};\n padding-inline: ${cseDefinitionListItem.paddingInline};\n display: grid;\n grid-template-columns: 1fr 1fr;\n width: 100%;\n }\n\n :host([data-definition-odd]) .cse-definition-list-item {\n background-color: ${cseDefinitionListItem.oddBackgroundColor};\n }\n\n :host([data-definition-even]) .cse-definition-list-item {\n background-color: ${cseDefinitionListItem.evenBackgroundColor};\n }\n\n :host(:not([data-definition-first])) .cse-definition-list-item {\n margin-top: calc(-1 * ${csBorder.width});\n }\n\n .term {\n display: flex;\n gap: ${csSpacing.spacing05};\n align-items: center;\n }\n\n [role=\"cse-definition-list-item.info\"] {\n color: ${cseDefinitionListItem.infoColor};\n }\n\n .hidden-icon {\n opacity: 0;\n }\n`;\n//# sourceMappingURL=definition-list.style.js.map","const isNonEmptyTextNode = (node) => {\n return (node.nodeType === node.TEXT_NODE\n && node.textContent !== null\n && node.textContent.trim() !== '');\n};\nconst isElementWithoutSlotNode = (node) => {\n return (node.nodeType === node.ELEMENT_NODE\n && !node.hasAttribute('slot'));\n};\nexport const hasDefaultSlot = (element) => {\n return [...element.childNodes].some((node) => {\n return isNonEmptyTextNode(node) || isElementWithoutSlotNode(node);\n });\n};\nexport const hasNamedSlot = (element, name) => {\n return element.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n};\n//# sourceMappingURL=hasSlot.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\nimport { definitionListItemStyle, listStyle } from './definition-list.style.js';\nimport { hasNamedSlot } from \"../_shared/hasSlot.js\";\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\ninitializeIconsByRole({\n 'cse-definition-list-item.info': { name: 'circle-info', style: 'regular' },\n});\nlet CSEDefinitionListItem = class CSEDefinitionListItem extends LitElement {\n constructor() {\n super(...arguments);\n this.renderInfoIcon = () => {\n if (hasNamedSlot(this, 'info')) {\n return html `\n \n \n \n \n `;\n }\n return html ``;\n };\n }\n render() {\n return html `\n
\n
\n ${this.renderInfoIcon()}\n \n
\n \n
\n `;\n }\n};\nCSEDefinitionListItem.styles = [hostStyle, fontStyles, definitionListItemStyle];\nCSEDefinitionListItem = __decorate([\n customElement('cse-definition-list-item')\n], CSEDefinitionListItem);\nexport { CSEDefinitionListItem };\nlet CSEDefinitionList = class CSEDefinitionList extends LitElement {\n handleSlotChange() {\n const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });\n const assignedDefinitions = assignedNodes.map(this.findDefinition).filter(this.isDefinition);\n assignedDefinitions.forEach((definition, index) => {\n const isOdd = index % 2 === 0;\n index === 0 ? definition.dataset['definitionFirst'] = '' : delete definition.dataset['definitionFirst'];\n if (isOdd) {\n delete definition.dataset['definitionEven'];\n definition.dataset['definitionOdd'] = '';\n }\n else {\n delete definition.dataset['definitionOdd'];\n definition.dataset['definitionEven'] = '';\n }\n });\n }\n findDefinition(node) {\n const selector = 'cse-definition-list-item';\n return node instanceof HTMLElement ? node.closest(selector) ?? node.querySelector(selector) : null;\n }\n isDefinition(definition) {\n return definition !== null;\n }\n render() {\n return html `\n
\n \n
\n `;\n }\n};\nCSEDefinitionList.styles = [hostStyle, listStyle];\n__decorate([\n query('slot')\n], CSEDefinitionList.prototype, \"defaultSlot\", void 0);\nCSEDefinitionList = __decorate([\n customElement('cse-definition-list')\n], CSEDefinitionList);\nexport { CSEDefinitionList };\n//# sourceMappingURL=definition-list.js.map","import { css } from 'lit';\nimport { csColorBorder } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseDivider = {\n borderColor: css `var(--cse-divider-border-color, ${csColorBorder.light})`,\n width: css `var(--cse-divider-width, ${csBorder.width})`,\n margin: css `var(--cse-divider-margin, 0)`,\n};\nexport const style = css `\n :host {\n position: relative;\n --internal-border-style: solid;\n }\n\n :host([orientation=\"horizontal\"]) {\n border-top-width: ${cseDivider.width};\n border-top-style: var(--internal-border-style);\n border-top-color: ${cseDivider.borderColor};\n display: block;\n margin-inline: ${cseDivider.margin};\n width: 100%;\n }\n\n :host([orientation=\"vertical\"]) {\n border-left-width: ${cseDivider.width};\n border-left-style: var(--internal-border-style);\n border-left-color: ${cseDivider.borderColor};\n display: inline-block;\n margin-block: ${cseDivider.margin};\n min-height: 100%;\n }\n\n :host([variant=\"dashed\"]) {\n --internal-border-style: dashed;\n }\n`;\n//# sourceMappingURL=divider.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { style } from './divider.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nexport const dividerOrientations = ['horizontal', 'vertical'];\nexport const dividerVariants = ['solid', 'dashed'];\nlet CSEDivider = class CSEDivider extends LitElement {\n};\nCSEDivider.styles = [hostStyle, style];\nCSEDivider = __decorate([\n customElement('cse-divider')\n], CSEDivider);\nexport { CSEDivider };\n//# sourceMappingURL=divider.js.map","import { css } from 'lit';\nimport { csColorAction } from './colors.style.js';\nexport const csShadow = {\n default: css `var(--cs-shadow-default, 0 5px 10px 0 rgb(0 0 0 / 15%))`,\n downSmall: css `var(--cs-shadow-down-small, 0 2px 3px 0 rgb(0 0 0 / 5%))`,\n upSmall: css `var(--cs-shadow-up-small, 0 -2px 3px 0 rgb(0 0 0 / 5%))`,\n downLarge: css `var(--cs-shadow-down-large, 0 20px 20px 0 rgb(0 0 0 / 15%))`,\n slideIn: css `var(--cs-shadow-slide-in, -10px 0 20px 0 rgb(0 0 0 / 15%))`,\n textShadow: css `var(--cs-shadow-text-shadow, 0 5px 10px 0 rgb(0 0 0 / 50%))`,\n};\nexport const csFocus = {\n default: css `var(--cs-shadow-focus-default, 0 0 4px 0 ${csColorAction.secondary})`,\n primary: css `var(--cs-shadow-focus-primary, 0 0 4px 0 ${csColorAction.primary})`,\n secondary: css `var(--cs-shadow-focus-secondary, 0 0 4px 0 ${csColorAction.secondary})`\n};\n//# sourceMappingURL=shadows.style.js.map","import { css } from 'lit';\nimport { csColorBackground } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csShadow } from '@cloudsuite/mosaic-shared/styles/shadows.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseDropdownMenu = {\n backgroundColor: css `var(--cse-dropdown-menu-background-color, ${csColorBackground.primary})`,\n borderRadius: css `var(--cse-dropdown-menu-border-radius, ${csBorder.radiusNone})`,\n boxShadow: css `var(--cse-dropdown-menu-box-shadow, ${csShadow.default})`,\n paddingInline: css `var(--cse-dropdown-menu-padding-x, ${csSpacing.spacing05})`,\n paddingBlock: css `var(--cse-dropdown-menu-padding-y, ${csSpacing.spacing05})`,\n gap: css `var(--cse-dropdown-menu-gap, ${csSpacing.spacing05})`,\n};\nexport const style = css `\n .cse-dropdown-menu {\n background-color: ${cseDropdownMenu.backgroundColor};\n border-radius: ${cseDropdownMenu.borderRadius};\n box-shadow: ${cseDropdownMenu.boxShadow};\n display: flex;\n flex-direction: column;\n max-width: var(--cse-popup-auto-size-available-width); /* special var that is defined in cse-popup ts */\n max-height: var(--cse-popup-auto-size-available-height); /* special var that is defined in cse-popup ts */\n overflow: auto;\n overscroll-behavior: none;\n padding-block: ${cseDropdownMenu.paddingBlock};\n padding-inline: ${cseDropdownMenu.paddingInline};\n row-gap: ${cseDropdownMenu.gap};\n }\n`;\n//# sourceMappingURL=dropdown-menu.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { customElement } from 'lit/decorators.js';\nimport { html, LitElement } from 'lit';\nimport { style } from './dropdown-menu.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nlet CSEDropdownMenu = class CSEDropdownMenu extends LitElement {\n render() {\n return html `\n
\n \n
\n `;\n }\n};\nCSEDropdownMenu.styles = [hostStyle, style];\nCSEDropdownMenu = __decorate([\n customElement('cse-dropdown-menu')\n], CSEDropdownMenu);\nexport { CSEDropdownMenu };\n//# sourceMappingURL=dropdown-menu.js.map","import { css } from 'lit';\nimport { csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csFontBody } from \"../_shared/fonts.style.js\";\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseDropdown = {\n colorDisabled: css `var(--cse-dropdown-color-disabled, ${csColorText.muted})`,\n};\nexport const style = css `\n :host {\n position: relative;\n }\n\n .anchor:not(.disabled) {\n cursor: pointer;\n }\n\n .default-anchor {\n display: flex;\n align-items: center;\n user-select: none;\n }\n\n .description {\n --cse-text-color: ${csFontBody.color};\n margin-right: ${csSpacing.spacing05};\n }\n\n .value {\n margin-right: ${csSpacing.spacing04};\n }\n\n [role=\"cse-dropdown.arrow\"] {\n transition-duration: ${csTransition.duration};\n transition-property: transform;\n transition-timing-function: ${csTransition.timingFunction};\n }\n\n .icon-open {\n transform: rotate(180deg);\n }\n\n .align-right {\n justify-content: flex-end;\n }\n\n .disabled {\n --cs-font-body-s-color: ${cseDropdown.colorDisabled};\n color: ${cseDropdown.colorDisabled};\n }\n`;\n//# sourceMappingURL=dropdown.style.js.map","import{nothing as D}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const to=t=>t??D;export{to as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, LitElement, nothing } from 'lit';\nimport { style } from './dropdown.style.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\ninitializeIconsByRole({\n 'cse-dropdown.arrow': { name: 'angle-down', style: 'light' },\n});\nexport const dropdownAlignments = ['left', 'right'];\nexport const dropdownMenuWidths = ['anchor', 'content'];\nlet CSEDropdown = class CSEDropdown extends LitElement {\n constructor() {\n super(...arguments);\n this.dropdownOpen = false;\n this.alignment = 'left';\n this.description = '';\n this.value = '';\n this.disabled = false;\n this.menuWidth = 'content';\n this.dropdownDistance = 5;\n this.handleDocumentClick = (event) => {\n const path = event.composedPath();\n if (this && !path.includes(this)) {\n this.toggleDropdown();\n }\n };\n this.renderDefaultAnchor = () => html `\n
\n ${this.description.length ? html `\n \n ${this.description}\n \n ` : nothing}\n ${this.value.length ? html `\n \n ${this.value}\n \n ` : nothing}\n \n
\n `;\n }\n addOpenListeners() {\n document.addEventListener('click', this.handleDocumentClick);\n }\n removeOpenListeners() {\n document.removeEventListener('click', this.handleDocumentClick);\n }\n toggleDropdown() {\n if (this.disabled) {\n return;\n }\n this.dropdownOpen = !this.dropdownOpen;\n }\n render() {\n return html `\n \n \n ${this.renderDefaultAnchor()}\n \n \n \n \n \n \n \n `;\n }\n updated(changedProperties) {\n super.updated(changedProperties);\n if (changedProperties.has('dropdownOpen')) {\n if (this.dropdownOpen) {\n this.addOpenListeners();\n }\n else {\n this.removeOpenListeners();\n }\n }\n }\n};\nCSEDropdown.styles = [hostStyle, style, fontStyles];\n__decorate([\n property({ type: Boolean, reflect: true, attribute: 'dropdown-open' })\n], CSEDropdown.prototype, \"dropdownOpen\", void 0);\n__decorate([\n property({ type: String })\n], CSEDropdown.prototype, \"alignment\", void 0);\n__decorate([\n property({ type: String })\n], CSEDropdown.prototype, \"description\", void 0);\n__decorate([\n property({ type: String })\n], CSEDropdown.prototype, \"value\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEDropdown.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: String, attribute: 'menu-width' })\n], CSEDropdown.prototype, \"menuWidth\", void 0);\nCSEDropdown = __decorate([\n customElement('cse-dropdown')\n], CSEDropdown);\nexport { CSEDropdown };\n//# sourceMappingURL=dropdown.js.map","import { css } from 'lit';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseExpandable = {\n listRowGap: css `var(--cse-expandable-list-row-gap, ${csSpacing.spacing08})`,\n};\nexport const style = css `\n ::slotted([hide]) {\n display: none;\n }\n\n .open ::slotted([hide]) {\n display: block;\n }\n\n .variant-list {\n display: flex;\n flex-direction: column;\n row-gap: ${cseExpandable.listRowGap};\n }\n\n .variant-text .content {\n display: block;\n overflow: hidden;\n position: relative;\n }\n\n .variant-text .content::after {\n display: block;\n content: \"\";\n background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);;\n width: 100%;\n height: 50%;\n position: absolute;\n bottom: 0;\n }\n\n .variant-text.open .content {\n height: auto;\n }\n\n .variant-text.open .content::after {\n display: none;\n }\n`;\n//# sourceMappingURL=expandable.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './expandable.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { generateID } from \"../_shared/generate-id.js\";\nlet CSEExpandable = class CSEExpandable extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'text';\n this.visibleOnInit = 100;\n this.open = false;\n this.showMoreText = 'Show more';\n this.showLessText = 'Show less';\n this.toggleableChildren = [];\n this.displayToggle = true;\n this.allowedChildNodes = [\n 'CSE-CHECKBOX-GROUP',\n 'CSE-GROUP'\n ];\n this.contentId = generateID('expandable');\n this.updateVisibility = () => {\n if (this.variant === 'list') {\n if (this.toggleableChildren.length === 0) {\n this.displayToggle = false;\n }\n this.toggleableChildren.forEach(child => {\n child.style.setProperty('display', this.open ? 'block' : 'none');\n });\n }\n };\n this.toggle = () => {\n this.open = !this.open;\n this.updateVisibility();\n };\n this.renderTextContentStyle = () => {\n if (!this.open) {\n return `height: ${this.visibleOnInit}px;`;\n }\n return 'height: auto;';\n };\n this.renderToggle = () => {\n return html `\n \n ${this.open ? this.showLessText : this.showMoreText}\n \n `;\n };\n }\n firstUpdated() {\n if (this.variant === 'list') {\n const listNodes = this.defaultSlot.assignedNodes({ flatten: true });\n const filteredListNodes = listNodes.filter(node => this.allowedChildNodes.includes(node.nodeName));\n filteredListNodes.forEach((node) => {\n const group = node;\n const children = [...group.children];\n children.forEach((child, index) => {\n if (index >= this.visibleOnInit) {\n this.toggleableChildren.push(child);\n }\n });\n });\n }\n this.updateVisibility();\n }\n render() {\n return html `\n \n \n ${this.displayToggle ? this.renderToggle() : nothing}\n \n `;\n }\n};\nCSEExpandable.styles = [hostStyle, fontStyles, style];\n__decorate([\n property({ type: String })\n], CSEExpandable.prototype, \"variant\", void 0);\n__decorate([\n property({ type: Number, attribute: 'visible-on-init' })\n], CSEExpandable.prototype, \"visibleOnInit\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEExpandable.prototype, \"open\", void 0);\n__decorate([\n property({ type: String, attribute: 'show-more-text' })\n], CSEExpandable.prototype, \"showMoreText\", void 0);\n__decorate([\n property({ type: String, attribute: 'show-less-text' })\n], CSEExpandable.prototype, \"showLessText\", void 0);\n__decorate([\n query('slot')\n], CSEExpandable.prototype, \"defaultSlot\", void 0);\n__decorate([\n state()\n], CSEExpandable.prototype, \"toggleableChildren\", void 0);\n__decorate([\n state()\n], CSEExpandable.prototype, \"displayToggle\", void 0);\nCSEExpandable = __decorate([\n customElement('cse-expandable')\n], CSEExpandable);\nexport { CSEExpandable };\n//# sourceMappingURL=expandable.js.map","import { css } from 'lit';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseFieldset = {\n gap: css `var(--cse-fieldset-gap, ${csSpacing.spacing06})`,\n};\nexport const style = css `\n :host {\n display: block;\n }\n\n fieldset {\n border: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: ${cseFieldset.gap};\n }\n`;\n//# sourceMappingURL=fieldset.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { style } from './fieldset.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nlet CSEFieldset = class CSEFieldset extends LitElement {\n render() {\n return html `\n
\n \n
\n `;\n }\n};\nCSEFieldset.styles = [hostStyle, style];\nCSEFieldset = __decorate([\n customElement('cse-fieldset')\n], CSEFieldset);\nexport { CSEFieldset };\n//# sourceMappingURL=fieldset.js.map","import { css } from 'lit';\nimport { csColorAction, csColorBackground, csColorBorder, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseFilterNavigationField = {\n backgroundColor: css `var(--cse-filter-navigation-field-background-color, ${csColorBackground.primary})`,\n borderColor: css `var(--cse-filter-navigation-field-border-color, ${csColorBorder.light})`,\n borderRadius: css `var(--cse-filter-navigation-field-border-radius, ${csBorder.radiusMinimal})`,\n borderWidth: css `var(--cse-filter-navigation-field-border-width, ${csBorder.width})`,\n paddingInline: css `var(--cse-filter-navigation-field-padding-x, ${csSpacing.spacing05})`,\n paddingBlock: css `var(--cse-filter-navigation-field-padding-y, ${csSpacing.spacing05})`,\n borderColorActive: css `var(--cse-filter-navigation-field-border-color-active, ${csColorAction.linkPrimary})`,\n borderColorHover: css `var(--cse-filter-navigation-field-border-color-hover, ${csColorAction.linkPrimary})`,\n columnGap: css `var(--cse-filter-navigation-field-column-gap, ${csSpacing.spacing05})`,\n rowGap: css `var(--cse-filter-navigation-field-row-gap, ${csSpacing.spacing02})`,\n descriptionColor: css `var(--cse-filter-navigation-field-description-color, ${csColorText.muted})`,\n completedIconColor: css `var(--cse-filter-navigation-field-completed-icon-color, ${csColorFunctional.success})`,\n skippedIconColor: css `var(--cse-filter-navigation-field-skipped-icon-color, ${csColorText.muted})`,\n};\nexport const style = css `\n .cse-filter-navigation-field {\n align-items: center;\n background-color: ${cseFilterNavigationField.backgroundColor};\n border-width: ${cseFilterNavigationField.borderWidth};\n border-style: solid;\n border-color: ${cseFilterNavigationField.borderColor};\n border-radius: ${cseFilterNavigationField.borderRadius};\n column-gap: ${cseFilterNavigationField.columnGap};\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n padding-block: ${cseFilterNavigationField.paddingBlock};\n padding-inline: ${cseFilterNavigationField.paddingInline};\n user-select: none;\n }\n\n .cse-filter-navigation-field:hover {\n border-color: ${cseFilterNavigationField.borderColorHover};\n }\n \n .cse-filter-navigation-field.active {\n border-color: ${cseFilterNavigationField.borderColorActive};\n }\n\n .content {\n display: flex;\n flex-direction: column;\n row-gap: ${cseFilterNavigationField.rowGap};\n }\n\n .description {\n --cse-text-color: ${cseFilterNavigationField.descriptionColor};\n }\n\n .incomplete {\n align-items: center;\n }\n\n [role=\"cse-filter-navigation-field.completed\"] {\n color: ${cseFilterNavigationField.completedIconColor};\n }\n\n [role=\"cse-filter-navigation-field.skipped\"] {\n color: ${cseFilterNavigationField.skippedIconColor};\n }\n`;\n//# sourceMappingURL=filter-navigation-field.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './filter-navigation-field.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\ninitializeIconsByRole({\n 'cse-filter-navigation-field.completed': { name: 'check', style: 'regular' },\n 'cse-filter-navigation-field.skipped': { name: 'dash', style: 'regular' },\n});\nexport const filterNavigationFieldStates = ['completed', 'skipped', 'none'];\nlet CSEFilterNavigationField = class CSEFilterNavigationField extends LitElement {\n constructor() {\n super(...arguments);\n this.active = false;\n this.state = 'none';\n this.renderIcon = () => {\n if (this.state === 'completed') {\n return html `\n \n `;\n }\n if (this.state === 'skipped') {\n return html `\n \n `;\n }\n return nothing;\n };\n }\n render() {\n return html `\n
\n
\n \n \n \n \n \n \n
\n\n ${this.renderIcon()}\n
\n `;\n }\n};\nCSEFilterNavigationField.styles = [hostStyle, style];\n__decorate([\n property({ type: Boolean })\n], CSEFilterNavigationField.prototype, \"active\", void 0);\n__decorate([\n property({ type: String })\n], CSEFilterNavigationField.prototype, \"state\", void 0);\nCSEFilterNavigationField = __decorate([\n customElement('cse-filter-navigation-field')\n], CSEFilterNavigationField);\nexport { CSEFilterNavigationField };\n//# sourceMappingURL=filter-navigation-field.js.map","import { css } from 'lit';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseFormField = {\n gap: css `var(--cse-form-field-gap, ${csSpacing.spacing02})`,\n helpTextColor: css `var(--cse-form-field-help-text-color, ${csColorText.muted})`,\n invalidTextColor: css `var(--cse-form-field-invalid-text-color, ${csColorFunctional.error})`,\n};\nexport const style = css `\n .cse-form-field {\n display: flex;\n flex-direction: column;\n position: relative;\n row-gap: ${cseFormField.gap};\n }\n\n .help-text {\n --cse-text-color: ${cseFormField.helpTextColor};\n }\n \n .invalid-text {\n --cse-text-color: ${cseFormField.invalidTextColor};\n }\n`;\n//# sourceMappingURL=form-field.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { style } from './form-field.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nexport const formFieldValidation = ['none', 'error', 'success'];\nlet CSEFormField = class CSEFormField extends LitElement {\n render() {\n return html `\n
\n \n \n \n \n
\n `;\n }\n};\nCSEFormField.styles = [hostStyle, fontStyles, style];\nCSEFormField = __decorate([\n customElement('cse-form-field')\n], CSEFormField);\nexport { CSEFormField };\n//# sourceMappingURL=form-field.js.map","import { css } from 'lit';\nexport const style = css `\n .cse-group {\n display: flex;\n }\n\n .inline {\n display: inline-flex;\n }\n\n .cse-group:not(.no-wrap) {\n flex-wrap: wrap;\n }\n\n /* .direction-row-reverse {\n flex-direction: row-reverse;\n }\n\n .direction-column {\n flex-direction: column;\n }\n\n .direction-column-reverse {\n flex-direction: column-reverse;\n }\n\n .justify-space-between {\n justify-content: space-between;\n }\n\n .justify-space-evenly {\n justify-content: space-evenly;\n }\n\n .justify-start {\n justify-content: start;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: end;\n }\n\n .align-center {\n align-items: center;\n } */\n`;\n//# sourceMappingURL=group.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './group.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const groupDirections = ['row', 'row-reverse', 'column', 'column-reverse'];\nexport const groupJustifyOptions = ['space-between', 'space-evenly', 'start', 'center', 'end'];\nexport const groupAlignments = ['normal', 'center'];\nexport const groupGaps = ['01', '02', '03', '04', '05', '06', '07', '08'];\nlet CSEGroup = class CSEGroup extends LitElement {\n constructor() {\n super(...arguments);\n this.inline = false;\n this.nowrap = false;\n this.direction = 'row';\n this.justify = 'start';\n this.alignment = 'normal';\n this.columnGap = '04';\n this.rowGap = '04';\n }\n render() {\n const columnGapValue = `spacing${this.columnGap}`;\n const rowGapValue = `spacing${this.rowGap}`;\n return html `\n \n \n \n `;\n }\n};\nCSEGroup.styles = [hostStyle, style];\n__decorate([\n property({ type: Boolean })\n], CSEGroup.prototype, \"inline\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEGroup.prototype, \"nowrap\", void 0);\n__decorate([\n property({ type: String })\n], CSEGroup.prototype, \"direction\", void 0);\n__decorate([\n property({ type: String })\n], CSEGroup.prototype, \"justify\", void 0);\n__decorate([\n property({ type: String })\n], CSEGroup.prototype, \"alignment\", void 0);\n__decorate([\n property({ type: String, attribute: 'column-gap' })\n], CSEGroup.prototype, \"columnGap\", void 0);\n__decorate([\n property({ type: String, attribute: 'row-gap' })\n], CSEGroup.prototype, \"rowGap\", void 0);\nCSEGroup = __decorate([\n customElement('cse-group')\n], CSEGroup);\nexport { CSEGroup };\n//# sourceMappingURL=group.js.map","import { css } from 'lit';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csColorAction, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseHeaderButton = {\n gap: css `var(--cse-header-button-gap, ${csSpacing.spacing04})`,\n color: css `var(--cse-header-button-color, ${csColorText.body})`,\n colorDisabled: css `var(--cse-header-button-color-disabled, ${csColorText.muted})`,\n iconColor: css `var(--cse-header-button-icon-color, ${csColorAction.linkSecondary})`,\n iconColorHover: css `var(--cse-header-button-icon-color-hover, ${csColorAction.linkSecondaryHover})`,\n badgePositionTop: css `var(--cse-header-button-badge-position-top, -9px)`,\n badgePositionLeft: css `var(--cse-header-button-badge-position-left, 14px)`,\n};\nexport const style = css `\n .cse-header-button {\n --cse-text-color: ${cseHeaderButton.color};\n align-items: center;\n background: none;\n border: none;\n color: ${cseHeaderButton.iconColor};\n display: inline-flex;\n flex-direction: column;\n font-size: inherit;\n gap: ${cseHeaderButton.gap};\n padding: 0;\n text-decoration: none;\n }\n\n .cse-header-button:hover {\n color: ${cseHeaderButton.iconColorHover};\n cursor: pointer;\n }\n\n .cse-header-button.disabled {\n --cse-text-color: ${cseHeaderButton.colorDisabled};\n\n color: ${cseHeaderButton.colorDisabled};\n cursor: not-allowed;\n }\n\n .icon-wrapper {\n position: relative;\n }\n\n cse-badge {\n position: absolute;\n top: ${cseHeaderButton.badgePositionTop};\n left: ${cseHeaderButton.badgePositionLeft};\n }\n\n .inline cse-badge {\n position: initial;\n transform: translate(0, ${cseHeaderButton.badgePositionTop});\n margin-left: -12px;\n display: inline-block;\n }\n\n .cse-header-button.inline {\n flex-direction: row;\n }\n`;\n//# sourceMappingURL=header-button.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hasNamedSlot } from \"../_shared/hasSlot.js\";\nimport { style } from './header-button.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\ninitializeIconsByRole({\n 'cse-header-button.icon': { name: 'circle', style: 'light' },\n});\nlet CSEHeaderButton = class CSEHeaderButton extends LitElement {\n constructor() {\n super(...arguments);\n this.inline = false;\n this.disabled = false;\n this.badgeVariant = 'default';\n this.url = '';\n this.renderBadge = () => html `\n \n \n \n `;\n this.renderButtonContent = (hasBadge) => html `\n
\n \n \n \n ${hasBadge ? this.renderBadge() : nothing}\n
\n \n `;\n }\n render() {\n const hasBadge = hasNamedSlot(this, 'badge');\n const isLink = this.url !== '';\n const tabindex = this.disabled ? -1 : 0;\n const classes = classMap({\n 'cse-header-button': true,\n 'inline': this.inline,\n 'disabled': this.disabled,\n });\n if (isLink) {\n return html `\n \n ${this.renderButtonContent(hasBadge)}\n \n `;\n }\n else {\n return html `\n \n `;\n }\n }\n};\nCSEHeaderButton.styles = [hostStyle, fontStyles, style];\n__decorate([\n property({ type: Boolean })\n], CSEHeaderButton.prototype, \"inline\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEHeaderButton.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: String, attribute: 'badge-variant' })\n], CSEHeaderButton.prototype, \"badgeVariant\", void 0);\n__decorate([\n property({ type: String })\n], CSEHeaderButton.prototype, \"url\", void 0);\nCSEHeaderButton = __decorate([\n customElement('cse-header-button')\n], CSEHeaderButton);\nexport { CSEHeaderButton };\n//# sourceMappingURL=header-button.js.map","import { css } from 'lit';\nimport { csBorder, csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csColorAction, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseHotspotTarget = {\n borderRadius: css `var(--cse-hotspot-target-border-radius, ${csBorder.radiusFull})`,\n color: css `var(--cse-hotspot-target-color, ${csColorText.body})`,\n colorHover: css `var(--cse-hotspot-target-color-hover, ${csColorAction.primary})`,\n sizeDesktop: css `var(--cse-hotspot-target-size-desktop, 40px)`,\n sizeMobile: css `var(--cse-hotspot-target-size-mobile, 35px)`,\n};\nexport const style = css `\n .cse-hotspot-target {\n color: ${cseHotspotTarget.color};\n display: grid;\n background-color: ${csColorAction.hotspot};\n border-radius: ${cseHotspotTarget.borderRadius};\n border-width: 0;\n font-size: inherit;\n place-items: center;\n position: relative;\n transition-duration: ${csTransition.duration};\n transition-property: color;\n transition-timing-function: ${csTransition.timingFunction};\n }\n\n .size-small,\n .size-small::before,\n .size-small::after {\n height: ${cseHotspotTarget.sizeMobile};\n width: ${cseHotspotTarget.sizeMobile};\n }\n\n .size-large,\n .size-large::before,\n .size-large::after {\n height: ${cseHotspotTarget.sizeDesktop};\n width: ${cseHotspotTarget.sizeDesktop};\n }\n\n .cse-hotspot-target:hover {\n color: ${cseHotspotTarget.colorHover};\n cursor: pointer;\n }\n\n .cse-hotspot-target::before {\n animation: pulsate 2s infinite;\n content: '';\n background-color: ${csColorAction.hotspot};\n border-radius: ${cseHotspotTarget.borderRadius};\n opacity: 0;\n position: absolute;\n transform: scale(1);\n transition: transform .3s ease-in-out;\n z-index: -2;\n }\n\n .cse-hotspot-target:hover::before {\n animation-play-state: paused;\n }\n\n @keyframes pulsate {\n 0% {\n transform: scale(1);\n opacity: .66;\n }\n\n 70% {\n transform: scale(1.5);\n opacity: 0;\n }\n\n 100% {\n transform: scale(1.0);\n }\n }\n\n .cse-hotspot-target::after {\n background: ${csColorAction.hotspot};\n border-radius: ${cseHotspotTarget.borderRadius};\n box-shadow: 0 0 0 5px rgba(255 255 255 / 0%);\n content: '';\n position: absolute;\n transform: scale(1);\n transition-duration: .3s;\n transition-property: transform box-shadow;\n transition-timing-function: ease-in-out;\n z-index: -1;\n }\n\n .cse-hotspot-target:hover::after {\n box-shadow: 0 0 0 5px ${csColorAction.hotspotHover};\n transform: scale(1.25);\n }\n`;\n//# sourceMappingURL=hotspot-target.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { FAKE, REAL, registerDependency } from './dependency-injection.js';\nimport { createSignal } from './signals.js';\nexport const BREAKPOINTS = Symbol('BREAKPOINTS');\nlet ConcreteBreakpoints = class ConcreteBreakpoints {\n constructor() {\n [this.small, this.setSmall] = createSignal(true);\n [this.large, this.setLarge] = createSignal(false);\n }\n matchMedia(breakpoint) {\n const mediaQuery = window.matchMedia(`(min-width: ${breakpoint}px)`);\n this.setLarge(mediaQuery.matches);\n this.setSmall(!mediaQuery.matches);\n mediaQuery.addEventListener('change', (query) => {\n this.setLarge(query.matches);\n this.setSmall(!query.matches);\n });\n }\n};\nConcreteBreakpoints = __decorate([\n registerDependency(FAKE, BREAKPOINTS),\n registerDependency(REAL, BREAKPOINTS)\n], ConcreteBreakpoints);\nexport { ConcreteBreakpoints };\n//# sourceMappingURL=breakpoints.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { style } from './hotspot-target.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { inject } from '@cloudsuite/mosaic-shared/scripts/dependency-injection.js';\nimport { BREAKPOINTS } from '@cloudsuite/mosaic-shared/scripts/breakpoints.js';\nimport { breakpoints } from '@cloudsuite/mosaic-shared/styles/breakpoints.js';\nimport { createEffect } from '@cloudsuite/mosaic-shared/scripts/signals.js';\ninitializeIconsByRole({\n 'cse-hotspot-target.target': { name: 'plus', style: 'light' }\n});\nlet CSEHotspotTarget = class CSEHotspotTarget extends LitElement {\n constructor() {\n super();\n this.smallScreen = false;\n this.ariaLabel = '';\n this.breakpoints.matchMedia(breakpoints.medium);\n createEffect(() => {\n this.smallScreen = this.breakpoints.small();\n });\n }\n render() {\n return html `\n \n \n \n `;\n }\n};\nCSEHotspotTarget.styles = [hostStyle, style];\n__decorate([\n inject(BREAKPOINTS)\n], CSEHotspotTarget.prototype, \"breakpoints\", void 0);\n__decorate([\n state()\n], CSEHotspotTarget.prototype, \"smallScreen\", void 0);\n__decorate([\n property({ type: String, attribute: 'aria-label' })\n], CSEHotspotTarget.prototype, \"ariaLabel\", void 0);\nCSEHotspotTarget = __decorate([\n customElement('cse-hotspot-target')\n], CSEHotspotTarget);\nexport { CSEHotspotTarget };\n//# sourceMappingURL=hotspot-target.js.map","import { css } from 'lit';\nimport { csColorAction, csColorBackground, csColorBorder, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder, csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseIconButton = {\n backgroundColorDisabled: css `var(--cse-icon-button-background-color-disabled, ${csColorBackground.disabled})`,\n borderColorDisabled: css `var(--cse-icon-button-border-color-disabled, ${csColorBorder.light})`,\n borderRadius: css `var(--cse-icon-button-border-radius, ${csBorder.radiusFull})`,\n borderWidth: css `var(--cse-icon-button-border-width, 0)`,\n colorDisabled: css `var(--cse-icon-button-color-disabled, ${csColorText.muted})`,\n primaryBackgrounColor: css `var(--cse-icon-button-primary-background-color, ${csColorBackground.primary})`,\n primaryBackgrounColorHover: css `var(--cse-icon-button-primary-background-color-hover, ${csColorBackground.primary})`,\n primaryBorderColor: css `var(--cse-icon-button-primary-border-color, ${csColorBackground.primary})`,\n primaryColor: css `var(--cse-icon-button-primary-color, ${csColorAction.secondary})`,\n primaryColorHover: css `var(--cse-icon-button-primary-color-hover, ${csColorAction.linkPrimaryHover})`,\n secondaryBackgroundColor: css `var(--cse-icon-button-secondary-background-color, ${csColorBackground.secondary})`,\n secondaryBackgroundColorHover: css `var(--cse-icon-button-secondary-background-color-hover, ${csColorBackground.secondary})`,\n secondaryBorderColor: css `var(--cse-icon-button-secondary-border-color, ${csColorBackground.secondary})`,\n secondaryColor: css `var(--cse-icon-button-secondary-color, ${csColorAction.secondary})`,\n secondaryColorHover: css `var(--cse-icon-button-secondary-color-hover, ${csColorAction.linkPrimaryHover})`,\n errorColor: css `var(--cse-icon-button-error-color, ${csColorFunctional.error})`,\n errorColorHover: css `var(--cse-icon-button-error-color-hover, ${csColorFunctional.errorHover})`,\n defaultSize: css `var(--cse-icon-button-default-size, 42px)`,\n smallSize: css `var(--cse-icon-button-small-size, 24px)`,\n};\nexport const style = css `\n .cse-icon-button {\n border-width: ${cseIconButton.borderWidth};\n border-style: solid;\n border-radius: ${cseIconButton.borderRadius};\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n transition-duration: ${csTransition.duration};\n transition-property: border-color, color, background-color;\n transition-timing-function: ${csTransition.timingFunction};\n }\n\n .cse-icon-button[disabled] {\n background-color: ${cseIconButton.backgroundColorDisabled};\n border-color: ${cseIconButton.borderColorDisabled};\n color: ${cseIconButton.colorDisabled};\n pointer-events: none;\n }\n\n .cse-icon-button:not([disabled]) {\n cursor: pointer;\n }\n\n /* VARIANT */\n .variant-primary {\n color: ${cseIconButton.primaryColor};\n background-color: ${cseIconButton.primaryBackgrounColor};\n border-color: ${cseIconButton.primaryBorderColor};\n }\n\n .variant-primary:hover {\n background-color: ${cseIconButton.primaryBackgrounColorHover};\n color: ${cseIconButton.primaryColorHover};\n }\n\n .variant-secondary {\n color: ${cseIconButton.secondaryColor};\n background-color: ${cseIconButton.secondaryBackgroundColor};\n border-color: ${cseIconButton.secondaryBorderColor};\n }\n\n .variant-secondary:hover {\n background-color: ${cseIconButton.secondaryBackgroundColorHover};\n color: ${cseIconButton.secondaryColorHover};\n }\n\n .cse-icon-button[error] {\n color: ${cseIconButton.errorColor};\n }\n\n .cse-icon-button[error]:hover {\n color: ${cseIconButton.errorColorHover};\n }\n\n /* SIZE */\n .size-default {\n height: ${cseIconButton.defaultSize};\n width: ${cseIconButton.defaultSize};\n }\n\n .size-small {\n height: ${cseIconButton.smallSize};\n width: ${cseIconButton.smallSize};\n }\n`;\n//# sourceMappingURL=icon-button.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './icon-button.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nexport const iconButtonVariants = ['primary', 'secondary'];\nexport const iconButtonSizes = ['default', 'small'];\ninitializeIconsByRole({\n 'cse-icon-button.clear': { name: 'xmark', style: 'light' },\n});\nlet CSEIconButton = class CSEIconButton extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'primary';\n this.size = 'default';\n this.disabled = false;\n this.error = false;\n this.ariaLabel = '';\n }\n render() {\n return html `\n \n \n \n \n \n `;\n }\n};\nCSEIconButton.styles = [fontStyles, hostStyle, style];\n__decorate([\n property()\n], CSEIconButton.prototype, \"variant\", void 0);\n__decorate([\n property({ type: String })\n], CSEIconButton.prototype, \"size\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEIconButton.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEIconButton.prototype, \"error\", void 0);\n__decorate([\n property({ type: String, attribute: 'aria-label' })\n], CSEIconButton.prototype, \"ariaLabel\", void 0);\nCSEIconButton = __decorate([\n customElement('cse-icon-button')\n], CSEIconButton);\nexport { CSEIconButton };\n//# sourceMappingURL=icon-button.js.map","import { html, svg } from 'lit';\nimport { dependencyContainer, FAKE, REAL } from '@cloudsuite/mosaic-shared/scripts/dependency-injection.js';\nexport const RENDER_ICON = Symbol('ICON_SERVICE');\nexport class FakeRenderIcon {\n renderIcon(icon) {\n return svg `\n \n fa-${icon.style} fa-${icon.name}\n \n `;\n }\n}\nexport class RealRenderIcon {\n renderIcon(icon) {\n return html `\n \n \n \n \n \n ${icon.name}\n `;\n }\n}\nif (window.IS_STORYBOOK) {\n dependencyContainer.addDependency(REAL, RENDER_ICON, RealRenderIcon);\n dependencyContainer.addDependency(FAKE, RENDER_ICON, RealRenderIcon);\n}\nelse {\n dependencyContainer.addDependency(REAL, RENDER_ICON, RealRenderIcon);\n dependencyContainer.addDependency(FAKE, RENDER_ICON, FakeRenderIcon);\n}\n//# sourceMappingURL=render-icon.js.map","import { css } from 'lit';\nexport const cseIcon = {\n verticalAlign: css `var(--cse-icon-vertical-align, text-top)`,\n size: css `var(--cse-icon-size, initial)`,\n color: css `var(--cse-icon-color, inherit)`,\n};\nexport const cseIconSizes = {\n sizeXxs: css `var(--cse-icon-size, var(--cse-icon-size-xxs, 0.625em))`,\n sizeXs: css `var(--cse-icon-size, var(--cse-icon-size-xs, 0.75em))`,\n sizeSm: css `var(--cse-icon-size, var(--cse-icon-size-sm, 0.875em))`,\n sizeMd: css `var(--cse-icon-size, var(--cse-icon-size-md, 1em))`,\n sizeLg: css `var(--cse-icon-size, var(--cse-icon-size-lg, 1.25em))`,\n sizeXl: css `var(--cse-icon-size, var(--cse-icon-size-xl, 1.625em))`,\n};\nexport const style = css `\n :host {\n display: inline-flex;\n color: ${cseIcon.color};\n vertical-align: ${cseIcon.verticalAlign};\n }\n\n :host([size=\"xxs\"]) {\n font-size: ${cseIconSizes.sizeXxs};\n }\n\n :host([size=\"xs\"]) {\n font-size: ${cseIconSizes.sizeXs};\n }\n\n :host([size=\"sm\"]) {\n font-size: ${cseIconSizes.sizeSm};\n }\n\n :host([size=\"md\"]) {\n font-size: ${cseIconSizes.sizeMd};\n }\n\n :host([size=\"lg\"]) {\n font-size: ${cseIconSizes.sizeLg};\n }\n\n :host([size=\"xl\"]) {\n font-size: ${cseIconSizes.sizeXl};\n }\n`;\n//# sourceMappingURL=icon.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { RENDER_ICON } from './render-icon.js';\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { style } from './icon.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { inject } from '@cloudsuite/mosaic-shared/scripts/dependency-injection.js';\nimport { createAdHocIconRole, getIconByRole, iconStyles, initializeIconByRole, NO_ICON_CONFIGURED } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { createEffect } from '@cloudsuite/mosaic-shared/scripts/signals.js';\nexport const iconSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'];\nlet CSEIcon = class CSEIcon extends LitElement {\n constructor() {\n super(...arguments);\n this.size = 'md';\n this.iconRole = null;\n this.iconName = null;\n this.iconStyle = null;\n this.icon = NO_ICON_CONFIGURED;\n this.isValidIconName = (iconName) => iconName !== null;\n this.isValidIconStyle = (iconStyle) => iconStyle !== null && iconStyles.includes(iconStyle);\n this.destroyEffect = () => { };\n this.isValidIconRole = (iconRole) => iconRole !== null;\n this.updateEffectForRole = () => {\n this.destroyEffect();\n if (this.isValidIconRole(this.iconRole)) {\n const iconSignal = getIconByRole(this.iconRole);\n this.destroyEffect = createEffect(() => {\n this.icon = iconSignal();\n });\n }\n else {\n this.icon = NO_ICON_CONFIGURED;\n }\n };\n this.renderIcon = () => {\n if (this.icon === NO_ICON_CONFIGURED) {\n return nothing;\n }\n return this.iconService.renderIcon(this.icon);\n };\n }\n connectedCallback() {\n super.connectedCallback();\n this.initializeAdHocIcon();\n this.updateEffectForRole();\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n this.destroyEffect();\n }\n update(changedProperties) {\n if (changedProperties.has('iconRole')) {\n this.updateEffectForRole();\n }\n super.update(changedProperties);\n }\n initializeAdHocIcon() {\n if (this.isValidIconName(this.iconName) && this.isValidIconStyle(this.iconStyle)) {\n const iconRole = createAdHocIconRole();\n initializeIconByRole(iconRole, { name: this.iconName, style: this.iconStyle });\n this.iconRole = iconRole;\n }\n }\n render() {\n return html `${this.renderIcon()}`;\n }\n};\nCSEIcon.styles = [hostStyle, style];\n__decorate([\n inject(RENDER_ICON)\n], CSEIcon.prototype, \"iconService\", void 0);\n__decorate([\n property({ reflect: true })\n], CSEIcon.prototype, \"size\", void 0);\n__decorate([\n property({ attribute: 'role', reflect: true, converter: (value) => value || null })\n], CSEIcon.prototype, \"iconRole\", void 0);\n__decorate([\n property({ attribute: 'icon-name' })\n], CSEIcon.prototype, \"iconName\", void 0);\n__decorate([\n property({ attribute: 'icon-style' })\n], CSEIcon.prototype, \"iconStyle\", void 0);\n__decorate([\n state()\n], CSEIcon.prototype, \"icon\", void 0);\nCSEIcon = __decorate([\n customElement('cse-icon')\n], CSEIcon);\nexport { CSEIcon };\n//# sourceMappingURL=icon.js.map","import { css } from 'lit';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseImage = {\n width: css `var(--cse-image-width, auto)`,\n maxWidth: css `var(--cse-image-max-width, auto)`,\n height: css `var(--cse-image-height, auto)`,\n maxHeight: css `var(--cse-image-max-height, auto)`,\n borderRadius: css `var(--cse-image-border-radius, ${csBorder.radiusNone})`\n};\nexport const style = css `\n .cse-image {\n display: block;\n border-radius: ${cseImage.borderRadius};\n }\n \n .auto-size {\n width: 100%;\n height: auto;\n }\n \n .fit-cover {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n\n .fit-contain {\n height: 100%;\n object-fit: contain;\n object-position: center;\n width: 100%;\n }\n\n .fit-fill {\n object-fit: fill;\n }\n\n .fit-scale-down {\n object-fit: scale-down;\n }\n`;\n//# sourceMappingURL=image.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './image.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nexport const fitVariants = ['cover', 'contain', 'fill', 'none', 'scale-down'];\nlet CSEImage = class CSEImage extends LitElement {\n constructor() {\n super(...arguments);\n this.source = '';\n this.alt = '';\n this.loading = 'lazy';\n this.width = null;\n this.noAutoSize = false;\n this.fit = 'none';\n this.height = null;\n this.sourceSet = null;\n this.setSizes = null;\n this.imageTitle = null;\n this.fallbackSource = null;\n this.url = '';\n this.renderImage = () => {\n let autoSize = false;\n if (!this.noAutoSize) {\n autoSize = this.height == null && this.width == null;\n }\n return html `\n \n `;\n };\n }\n validateProperties() {\n if (this.source.trim() === '') {\n console.warn('cse-image source is not provided', this);\n }\n if (this.alt.trim() === '') {\n console.warn('cse-image alternative text is not provided', this);\n }\n }\n _onerror() {\n if (this.fallbackSource !== null) {\n this.source = this.fallbackSource;\n }\n }\n firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.validateProperties();\n }\n render() {\n return (this.url && this.url.length > 0\n ? html `\n \n ${this.renderImage()}\n \n `\n : this.renderImage());\n }\n};\nCSEImage.styles = [hostStyle, style, fontStyles];\n__decorate([\n property({ type: String })\n], CSEImage.prototype, \"source\", void 0);\n__decorate([\n property({ type: String })\n], CSEImage.prototype, \"alt\", void 0);\n__decorate([\n property({ type: String })\n], CSEImage.prototype, \"loading\", void 0);\n__decorate([\n property({ type: Number })\n], CSEImage.prototype, \"width\", void 0);\n__decorate([\n property({ type: Boolean, attribute: 'no-auto-size' })\n], CSEImage.prototype, \"noAutoSize\", void 0);\n__decorate([\n property({ type: String })\n], CSEImage.prototype, \"fit\", void 0);\n__decorate([\n property({ type: Number })\n], CSEImage.prototype, \"height\", void 0);\n__decorate([\n property({ type: String, attribute: 'source-set' })\n], CSEImage.prototype, \"sourceSet\", void 0);\n__decorate([\n property({ type: String, attribute: 'set-sizes' })\n], CSEImage.prototype, \"setSizes\", void 0);\n__decorate([\n property({ type: String, attribute: 'title' })\n], CSEImage.prototype, \"imageTitle\", void 0);\n__decorate([\n property({ type: String, attribute: 'fallback-source' })\n], CSEImage.prototype, \"fallbackSource\", void 0);\n__decorate([\n property({ type: String })\n], CSEImage.prototype, \"url\", void 0);\nCSEImage = __decorate([\n customElement('cse-image')\n], CSEImage);\nexport { CSEImage };\n//# sourceMappingURL=image.js.map","import { css } from 'lit';\nimport { csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const cseLabel = {\n color: css `var(--cse-label-color, ${csColorText.body})`,\n gap: css `var(--cse-label-gap, ${csSpacing.spacing04})`,\n optionalColor: css `var(--cse-label-optional-color, ${csColorText.muted})`,\n requiredColor: css `var(--cse-label-required-color, ${csColorFunctional.error})`\n};\nexport const style = css `\n label {\n --cse-text-color: ${cseLabel.color};\n align-items: baseline;\n column-gap: ${cseLabel.gap};\n display: inline-flex;\n }\n\n .required {\n color: ${cseLabel.requiredColor};\n }\n\n .suffix {\n color: ${cseLabel.optionalColor};\n }\n`;\n//# sourceMappingURL=label.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './label.style.js';\nlet CSELabel = class CSELabel extends LitElement {\n constructor() {\n super(...arguments);\n this.for = '';\n this.optional = false;\n this.required = false;\n this.requiredSlot = () => html `\n \n \n *\n \n `;\n this.optionalSlot = () => html `\n \n \n Optioneel\n \n `;\n }\n render() {\n return html `\n `;\n }\n};\nCSELabel.styles = [fontStyles, hostStyle, style];\n__decorate([\n property({ type: String })\n], CSELabel.prototype, \"for\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSELabel.prototype, \"optional\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSELabel.prototype, \"required\", void 0);\nCSELabel = __decorate([\n customElement('cse-label')\n], CSELabel);\nexport { CSELabel };\n//# sourceMappingURL=label.js.map","import { css } from 'lit';\nimport { csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csColorAction } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseLink = {\n gap: css `var(--cse-link-gap, ${csSpacing.spacing03})`,\n primaryColor: css `var(--cse-link-primary-color, ${csColorAction.linkPrimary})`,\n primaryColorHover: css `var(--cse-link-primary-color-hover, ${csColorAction.linkPrimaryHover})`,\n secondaryColor: css `var(--cse-link-secondary-color, ${csColorAction.linkSecondary})`,\n secondaryColorHover: css `var(--cse-link-secondary-color-hover, ${csColorAction.linkSecondaryHover})`,\n whiteColor: css `var(--cse-link-white-color, ${csColorAction.linkWhite})`,\n whiteColorHover: css `var(--cse-link-white-color-hover, ${csColorAction.linkWhiteHover})`,\n textDecorationLine: css `var(--cse-link-text-decoration-line, underline)`\n};\nexport const style = css `\n .cse-link {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n gap: ${cseLink.gap};\n transition-duration: ${csTransition.duration};\n transition-property: color, text-decoration;\n transition-timing-function: ${csTransition.timingFunction};\n cursor: pointer;\n }\n\n .link-text {\n display: inline;\n }\n\n .font-body .link-text,\n .font-body-s .link-text {\n text-decoration-line: ${cseLink.textDecorationLine};\n text-decoration-style: solid;\n }\n\n .variant-primary {\n color: ${cseLink.primaryColor};\n text-decoration-color: ${cseLink.primaryColor};\n }\n\n .variant-secondary {\n color: ${cseLink.secondaryColor};\n text-decoration-color: ${cseLink.secondaryColor};\n }\n\n .variant-white {\n color: ${cseLink.whiteColor};\n text-decoration-color: ${cseLink.whiteColor};\n }\n\n .variant-primary:hover {\n color: ${cseLink.primaryColorHover};\n text-decoration-color: ${cseLink.primaryColorHover};\n }\n\n .variant-secondary:hover {\n color: ${cseLink.secondaryColorHover};\n text-decoration-color: ${cseLink.secondaryColorHover};\n }\n\n .variant-white:hover {\n color: ${cseLink.whiteColorHover};\n text-decoration-color: ${cseLink.whiteColorHover};\n }\n`;\n//# sourceMappingURL=link.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './link.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nexport const linkTargets = ['_self', '_blank', '_parent', '_top'];\nexport const linkVariants = ['primary', 'secondary', 'white'];\nlet CSELink = class CSELink extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'primary';\n this.fontVariant = 'body';\n this.url = '';\n this.target = '_self';\n }\n render() {\n const isLink = this.url !== '';\n return html `\n \n \n \n \n \n `;\n }\n};\nCSELink.styles = [fontStyles, hostStyle, style];\n__decorate([\n property({ type: String })\n], CSELink.prototype, \"variant\", void 0);\n__decorate([\n property({ type: String, attribute: 'font-variant' })\n], CSELink.prototype, \"fontVariant\", void 0);\n__decorate([\n property()\n], CSELink.prototype, \"url\", void 0);\n__decorate([\n property()\n], CSELink.prototype, \"target\", void 0);\nCSELink = __decorate([\n customElement('cse-link')\n], CSELink);\nexport { CSELink };\n//# sourceMappingURL=link.js.map","import { css } from 'lit';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseList = {\n gap: css `var(--cse-list-gap, ${csSpacing.spacing05})`,\n};\nexport const cseListItemStyles = {\n itemGap: css `var(--cse-list-item-gap, ${csSpacing.spacing05})`,\n bulletSize: css `var(--cse-list-bullet-size, ${csSpacing.spacing03})`,\n iconColor: css `var(--cse-list-icon-color, ${csColorText.body})`,\n};\nexport const listStyle = css `\n .cse-list {\n display: flex;\n flex-direction: column;\n gap: ${cseList.gap};\n list-style-type: none;\n padding: 0;\n margin: 0;\n }\n\n .cse-list.inline {\n flex-direction: row;\n }\n`;\nexport const listItemStyle = css `\n .item {\n align-items: center;\n display: flex;\n gap: ${cseListItemStyles.itemGap};\n }\n\n .bullet, .custom-icon {\n color: ${cseListItemStyles.iconColor};\n }\n\n .bullet {\n font-size: ${cseListItemStyles.bulletSize};\n }\n`;\n//# sourceMappingURL=list.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { listItemStyle, listStyle } from './list.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\ninitializeIconsByRole({\n 'cse-list-item.bullet': { name: 'circle', style: 'solid' },\n});\nexport const listVariants = ['unstyled', 'bullet', 'custom-icon'];\nlet CSEListItem = class CSEListItem extends LitElement {\n constructor() {\n super(...arguments);\n this.inline = false;\n this.variant = 'unstyled';\n this.iconName = 'star';\n this.iconStyle = 'regular';\n this.renderIcon = () => {\n if (this.parentElement) {\n if (this.inline && this === this.parentElement.firstElementChild) {\n return nothing;\n }\n if (this.variant === 'bullet') {\n return html ``;\n }\n if (this.variant === 'custom-icon') {\n return html `\n \n `;\n }\n }\n return nothing;\n };\n }\n render() {\n return html `\n
  • \n
    \n ${this.renderIcon()}\n \n
    \n
  • \n `;\n }\n};\nCSEListItem.styles = [hostStyle, fontStyles, listItemStyle];\n__decorate([\n property({ type: Boolean })\n], CSEListItem.prototype, \"inline\", void 0);\n__decorate([\n property({ type: String })\n], CSEListItem.prototype, \"variant\", void 0);\n__decorate([\n property({ type: String })\n], CSEListItem.prototype, \"iconName\", void 0);\n__decorate([\n property({ type: String })\n], CSEListItem.prototype, \"iconStyle\", void 0);\nCSEListItem = __decorate([\n customElement('cse-list-item')\n], CSEListItem);\nexport { CSEListItem };\nlet CSEList = class CSEList extends LitElement {\n constructor() {\n super(...arguments);\n this.inline = false;\n this.variant = 'unstyled';\n this.iconName = 'star';\n this.iconStyle = 'regular';\n }\n updated(changedProperties) {\n super.updated(changedProperties);\n const assignedNodesDefault = this.defaultSlot.assignedNodes({ flatten: true });\n const assignedListItems = assignedNodesDefault.map(this.findListItem).filter(this.isListItem);\n if (assignedListItems.length > 0) {\n assignedListItems.forEach(listItem => {\n listItem.variant = this.variant;\n listItem.inline = this.inline;\n listItem.iconName = this.iconName;\n listItem.iconStyle = this.iconStyle;\n });\n }\n }\n findListItem(node) {\n const selector = 'cse-list-item';\n return node instanceof HTMLElement ? node.closest(selector) ?? node.querySelector(selector) : null;\n }\n isListItem(listItem) {\n return listItem !== null;\n }\n render() {\n return html `\n
      \n \n
    \n `;\n }\n};\nCSEList.styles = [hostStyle, fontStyles, listStyle];\n__decorate([\n property({ type: Boolean })\n], CSEList.prototype, \"inline\", void 0);\n__decorate([\n property({ type: String })\n], CSEList.prototype, \"variant\", void 0);\n__decorate([\n property({ type: String, attribute: 'icon-name' })\n], CSEList.prototype, \"iconName\", void 0);\n__decorate([\n property({ type: String, attribute: 'icon-style' })\n], CSEList.prototype, \"iconStyle\", void 0);\n__decorate([\n query('slot')\n], CSEList.prototype, \"defaultSlot\", void 0);\nCSEList = __decorate([\n customElement('cse-list')\n], CSEList);\nexport { CSEList };\n//# sourceMappingURL=list.js.map","import { css } from 'lit';\nimport { csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseLoader = {\n animationName: css `var(--cse-loader-animation-name, rotate)`,\n animationDuration: css `var(--cse-loader-animation-duration, 2s)`,\n color: css `var(--cse-loader-color, ${csColorText.body})`\n};\nexport const style = css `\n .cse-loader {\n color: ${cseLoader.color};\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .animated {\n display: inline-flex;\n animation-name: ${cseLoader.animationName};\n animation-duration: ${cseLoader.animationDuration};\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n\n @keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(359deg);\n }\n }\n`;\n//# sourceMappingURL=loader.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './loader.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nlet CSELoader = class CSELoader extends LitElement {\n constructor() {\n super(...arguments);\n this.animated = true;\n }\n render() {\n const classes = classMap({\n 'animated': this.animated\n });\n return html `\n
    \n
    \n \n \n \n
    \n
    \n `;\n }\n};\nCSELoader.styles = [hostStyle, style];\n__decorate([\n property({ type: Boolean })\n], CSELoader.prototype, \"animated\", void 0);\nCSELoader = __decorate([\n customElement('cse-loader')\n], CSELoader);\nexport { CSELoader };\ninitializeIconsByRole({\n 'cse-loader.spinner': { name: 'spinner', style: 'solid' },\n});\n//# sourceMappingURL=loader.js.map","import { css } from 'lit';\nimport { csColorBackground, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const cseMenu = {\n groupGap: css `var(--cse-menu-group-gap, ${csSpacing.spacing04})`,\n};\nexport const cseMenuItem = {\n backgroundColor: css `var(--cse-menu-item-background-color, ${csColorBackground.primary})`,\n backgroundColorDisabled: css `var(--cse-menu-item-background-color-disabled, ${csColorBackground.disabled})`,\n backgroundColorHover: css `var(--cse-menu-item-background-color-hover, ${csColorBackground.inverted})`,\n borderRadius: css `var(--cse-menu-item-border-radius, ${csBorder.radiusMinimal})`,\n color: css `var(--cse-menu-item-color, ${csColorText.body})`,\n colorDisabled: css `var(--cse-menu-item-color-disabled, ${csColorText.muted})`,\n colorHover: css `var(--cse-menu-item-color-hover, ${csColorText.white})`,\n gap: css `var(--cse-menu-item-gap, ${csSpacing.spacing04})`,\n paddingInline: css `var(--cse-menu-item-padding-x, ${csSpacing.spacing05})`,\n paddingBlock: css `var(--cse-menu-item-padding-y, ${csSpacing.spacing05})`,\n};\nexport const itemStyle = css `\n .cse-menu-item {\n align-items: center;\n background-color: ${cseMenuItem.backgroundColor};\n border-radius: ${cseMenuItem.borderRadius};\n color: ${cseMenuItem.color};\n gap: ${cseMenuItem.gap};\n display: flex;\n padding-block: ${cseMenuItem.paddingBlock};\n padding-inline: ${cseMenuItem.paddingInline};\n text-decoration: none;\n user-select: none;\n\n @media (max-width: 992px) {\n flex-direction: column;\n }\n }\n\n .cse-menu-item.selected, .cse-menu-item:hover {\n background-color: ${cseMenuItem.backgroundColorHover};\n color: ${cseMenuItem.colorHover};\n }\n\n .cse-menu-item.disabled {\n background-color: ${cseMenuItem.backgroundColorDisabled};\n color: ${cseMenuItem.colorDisabled};\n }\n`;\nexport const style = css `\n .cse-menu {\n display: flex;\n flex-direction: column;\n gap: ${cseMenu.groupGap};\n\n @media (max-width: 992px) {\n flex-direction: row;\n overflow-x: auto;\n }\n }\n`;\n//# sourceMappingURL=menu.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { itemStyle, style } from './menu.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nlet CSEMenuItem = class CSEMenuItem extends LitElement {\n constructor() {\n super(...arguments);\n this.selected = false;\n this.disabled = false;\n this.url = '';\n this.target = '_self';\n }\n render() {\n const classes = classMap({\n 'cse-menu-item': true,\n 'selected': this.selected,\n 'disabled': this.disabled,\n 'font-body': true,\n });\n if (this.disabled) {\n return html `\n \n \n \n \n `;\n }\n return html `\n \n \n \n \n `;\n }\n};\nCSEMenuItem.styles = [hostStyle, fontStyles, itemStyle];\n__decorate([\n property({ type: Boolean })\n], CSEMenuItem.prototype, \"selected\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEMenuItem.prototype, \"disabled\", void 0);\n__decorate([\n property()\n], CSEMenuItem.prototype, \"url\", void 0);\n__decorate([\n property()\n], CSEMenuItem.prototype, \"target\", void 0);\nCSEMenuItem = __decorate([\n customElement('cse-menu-item')\n], CSEMenuItem);\nexport { CSEMenuItem };\nlet CSEMenu = class CSEMenu extends LitElement {\n render() {\n return html `\n
    \n \n
    \n `;\n }\n};\nCSEMenu.styles = [hostStyle, style];\nCSEMenu = __decorate([\n customElement('cse-menu')\n], CSEMenu);\nexport { CSEMenu };\n//# sourceMappingURL=menu.js.map","import { css } from 'lit';\nimport { csColorBackground, csColorFunctional, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csBorder, csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csShadow } from '@cloudsuite/mosaic-shared/styles/shadows.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { SCREENS } from '@cloudsuite/mosaic-shared/styles/breakpoints.js';\nexport const cseModal = {\n backgroundColor: css `var(--cse-modal-background-color, ${csColorBackground.primary})`,\n borderRadius: css `var(--cse-modal-border-radius, ${csBorder.radiusMinimal})`,\n boxShadow: css `var(--cse-modal-box-shadow, ${csShadow.default})`,\n transitionDuration: css `var(--cse-modal-transition-duration, ${csTransition.duration})`,\n transitionTimingFunction: css `var(--cse-modal-transition-timing-function, ${csTransition.timingFunction})`,\n width: css `var(--cse-modal-width, 384px)`,\n largeWidth: css `var(--cse-modal-large-width, 600px)`,\n headerBackgroundColor: css `var(--cse-modal-header-background-color, ${csColorBackground.secondary})`,\n headerPaddingBlock: css `var(--cse-modal-header-padding-y, ${csSpacing.spacing06})`,\n headerPaddingInline: css `var(--cse-modal-header-padding-x, ${csSpacing.spacing06})`,\n iconColor: css `var(--cse-modal-icon-color, ${csColorText.white})`,\n iconBackgroundColorError: css `var(--cse-modal-icon-background-color-error, ${csColorFunctional.error})`,\n iconBackgroundColorInfo: css `var(--cse-modal-icon-background-color-info, ${csColorFunctional.info})`,\n iconBackgroundColorSuccess: css `var(--cse-modal-icon-background-color-success, ${csColorFunctional.success})`,\n iconBackgroundColorWarning: css `var(--cse-modal-icon-background-color-warning, ${csColorFunctional.warning})`,\n bodyGap: css `var(--cse-modal-body-gap, ${csSpacing.spacing06})`,\n bodyPaddingBlock: css `var(--cse-modal-body-padding-y, ${csSpacing.spacing06})`,\n bodyPaddingInline: css `var(--cse-modal-body-padding-x, ${csSpacing.spacing06})`,\n footerGap: css `var(--cse-modal-footer-gap, ${csSpacing.spacing05})`,\n footerPaddingInline: css `var(--cse-modal-footer-padding-x, ${csSpacing.spacing06})`,\n footerPaddingBlock: css `var(--cse-modal-footer-padding-y, ${csSpacing.spacing06})`,\n};\nexport const style = css `\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n dialog {\n background-color: ${cseModal.backgroundColor};\n border: none;\n border-radius: ${cseModal.borderRadius};\n box-shadow: ${cseModal.boxShadow};\n padding: 0;\n position: fixed;\n width: ${cseModal.width};\n }\n \n @media (max-width: ${SCREENS.small}) {\n dialog {\n width: 100vw;\n max-width: 100vw;\n }\n }\n\n .size-large {\n width: ${cseModal.largeWidth};\n }\n\n .header {\n display: block;\n background-color: ${cseModal.headerBackgroundColor};\n padding-block: ${cseModal.headerPaddingBlock};\n padding-inline: ${cseModal.headerPaddingInline};\n text-align: center;\n }\n\n .body {\n display: flex;\n gap: ${cseModal.bodyGap};\n padding-block: ${cseModal.bodyPaddingBlock};\n padding-inline: ${cseModal.bodyPaddingInline};\n flex-direction: column;\n align-items: center;\n }\n\n .footer {\n display: flex;\n gap: ${cseModal.footerGap};\n padding-block: ${cseModal.footerPaddingBlock};\n padding-inline: ${cseModal.footerPaddingInline};\n }\n\n .size-large .footer {\n justify-content: space-around;\n }\n\n .size-default cse-button,\n .size-default ::slotted(cse-button) {\n flex: 1;\n }\n\n dialog::backdrop {\n position: fixed;\n inset: 0;\n background: #00000059; /* NOTE: does not work with CSS variable */\n }\n\n dialog.no-backdrop::backdrop {\n opacity: 0;\n }\n\n .icon {\n align-items: center;\n background-color: transparent;\n border-radius: ${csBorder.radiusFull};\n color: ${cseModal.iconColor};\n display: flex;\n font-weight: 300;\n justify-content: center;\n height: 60px;\n width: 60px;\n }\n\n .variant-error .icon {\n background-color: ${cseModal.iconBackgroundColorError};\n }\n\n .variant-info .icon {\n background-color: ${cseModal.iconBackgroundColorInfo};\n }\n\n .variant-success .icon {\n background-color: ${cseModal.iconBackgroundColorSuccess};\n }\n\n .variant-warning .icon {\n background-color: ${cseModal.iconBackgroundColorWarning};\n }\n`;\n//# sourceMappingURL=modal.style.js.map","const locked = new Set();\nexport const scrollLock = (lockElement) => {\n locked.add(lockElement);\n document.body.style.setProperty('overflow', 'hidden');\n};\nexport const scrollUnlock = (lockElement) => {\n locked.delete(lockElement);\n if (locked.size === 0) {\n document.body.style.removeProperty('overflow');\n }\n};\n//# sourceMappingURL=scroll-lock.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './modal.style.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { scrollLock, scrollUnlock } from \"../_shared/scroll-lock.js\";\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { animateTo } from \"../_shared/animations.js\";\ninitializeIconsByRole({\n 'cse-modal.error': { name: 'xmark', style: 'light' },\n 'cse-modal.info': { name: 'info', style: 'light' },\n 'cse-modal.success': { name: 'check', style: 'light' },\n 'cse-modal.warning': { name: 'exclamation', style: 'light' },\n});\nexport const modalSizes = ['default', 'large'];\nexport const modalVariants = ['default', 'error', 'info', 'success', 'warning'];\nlet CSEModal = class CSEModal extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'default';\n this.size = 'default';\n this.noBackdrop = false;\n this.isOpen = false;\n this.isAnimating = false;\n this.animations = {\n open: {\n keyframes: [\n { opacity: 0, scale: 0.8 },\n { opacity: 1, scale: 1 }\n ],\n options: { duration: 300, easing: 'ease-in-out' }\n },\n close: {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.8 }\n ],\n options: { duration: 300, easing: 'ease-in-out' }\n }\n };\n this.animationComplete = Promise.resolve();\n this.open = async () => {\n if (this.isOpen || this.isAnimating) {\n return;\n }\n let resolveAnimation;\n this.animationComplete = new Promise((resolve) => { resolveAnimation = resolve; });\n this.dialog.showModal();\n this.isAnimating = true;\n const animation = this.animations.open;\n await animateTo(this.dialog, animation.keyframes, animation.options).then(() => {\n this.isAnimating = false;\n this.isOpen = true;\n resolveAnimation();\n scrollLock(this.dialog);\n });\n };\n this.close = async () => {\n if (!this.isOpen || this.isAnimating) {\n return;\n }\n let resolveAnimation;\n this.animationComplete = new Promise((resolve) => { resolveAnimation = resolve; });\n scrollUnlock(this.dialog);\n this.isAnimating = true;\n const animation = this.animations.close;\n await animateTo(this.dialog, animation.keyframes, animation.options).then(() => {\n this.isAnimating = false;\n this.isOpen = false;\n this.dialog.close();\n resolveAnimation();\n });\n };\n this.renderHeader = () => html `\n \n `;\n this.renderBody = () => html `\n
    \n ${this.variant !== 'default' ? html `\n \n \n \n ` : nothing}\n \n
    \n `;\n this.renderFooter = () => html `\n \n Close\n \n `;\n }\n firstUpdated() {\n this.dialog.addEventListener('cancel', (event) => {\n event.preventDefault();\n });\n }\n async getUpdateComplete() {\n const result = await super.getUpdateComplete();\n await this.animationComplete;\n return result;\n }\n render() {\n return html `\n \n ${this.renderHeader()}\n ${this.renderBody()}\n ${this.renderFooter()}\n \n `;\n }\n};\nCSEModal.styles = [hostStyle, style, fontStyles];\n__decorate([\n property({ type: String })\n], CSEModal.prototype, \"variant\", void 0);\n__decorate([\n property({ type: String })\n], CSEModal.prototype, \"size\", void 0);\n__decorate([\n property({ type: Boolean, attribute: 'no-backdrop' })\n], CSEModal.prototype, \"noBackdrop\", void 0);\n__decorate([\n property({ type: Boolean, reflect: true, attribute: 'open' })\n], CSEModal.prototype, \"isOpen\", void 0);\n__decorate([\n query('dialog')\n], CSEModal.prototype, \"dialog\", void 0);\nCSEModal = __decorate([\n customElement('cse-modal')\n], CSEModal);\nexport { CSEModal };\n//# sourceMappingURL=modal.js.map","import { css } from 'lit';\nimport { csFormControl } from \"../_shared/form.style.js\";\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csColorBackground } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nexport const cseOption = {\n backgroundColor: css `var(--cse-option-background-color, ${csFormControl.backgroundColor})`,\n color: css `var(--cse-option-color, ${csFormControl.color})`,\n colorHover: css `var(--cse-option-color-hover, ${csFormControl.colorHover})`,\n fontFamily: css `var(--cse-option-font-family, ${csFormControl.fontFamily})`,\n columnGap: css `var(--cse-option-column-gap, ${csSpacing.spacing05})`,\n selectPaddingBlock: css `var(--cse-option-select-padding-y, 0)`,\n selectPaddingInline: css `var(--cse-option-select-padding-x, ${csSpacing.spacing05})`,\n searchBackgroundColorHover: css `var(--cse-option-search-background-color-hover, ${csColorBackground.info})`,\n searchPaddingBlock: css `var(--cse-option-search-padding-y, ${csSpacing.spacing05})`,\n searchPaddingInline: css `var(--cse-option-search-padding-x, ${csSpacing.spacing05})`,\n selectedBackgroundColor: css `var(--cse-option-selected-background-color, ${csFormControl.backgroundColorSelected})`,\n colorDisabled: css `var(--cse-option-color-disabled, ${csFormControl.colorDisabled})`,\n};\nexport const style = css `\n .cse-option {\n align-items: center;\n background-color: ${cseOption.backgroundColor};\n color: ${cseOption.color};\n column-gap: ${cseOption.columnGap};\n display: flex;\n font-family: ${cseOption.fontFamily};\n justify-content: space-between;\n user-select: none;\n width: 100%;\n }\n\n [role=\"cse-option.arrow\"] {\n opacity: 0;\n }\n\n .variant-select {\n padding-block: ${cseOption.selectPaddingBlock};\n padding-inline: ${cseOption.selectPaddingInline};\n }\n\n .variant-select:hover {\n --cse-text-color: ${cseOption.colorHover};\n color: ${cseOption.colorHover};\n }\n\n .variant-search {\n padding-block: ${cseOption.searchPaddingBlock};\n padding-inline: ${cseOption.searchPaddingInline};\n }\n\n .variant-search:hover:not(.disabled) {\n background-color: ${cseOption.searchBackgroundColorHover};\n }\n\n .variant-search:hover [role=\"cse-option.arrow\"] {\n color: ${cseOption.colorHover};\n }\n\n .cse-option:hover:not(.disabled) [role=\"cse-option.arrow\"] {\n opacity: 1;\n }\n \n .cse-option.selected {\n background-color: ${cseOption.selectedBackgroundColor};\n }\n\n .cse-option:not(.disabled) {\n cursor: pointer;\n }\n\n .cse-option.disabled {\n --cse-text-color: ${cseOption.colorDisabled};\n color: ${cseOption.colorDisabled};\n }\n\n #label-text {\n display: block;\n margin-right: auto;\n }\n\n .icon {\n pointer-events: none;\n }\n`;\n//# sourceMappingURL=option.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './option.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\ninitializeIconsByRole({\n 'cse-option.check': { name: 'check', style: 'regular' },\n 'cse-option.arrow': { name: 'angle-right', style: 'regular' },\n});\nexport const optionVariants = ['select', 'search'];\nlet CSEOption = class CSEOption extends LitElement {\n constructor() {\n super();\n this.value = '';\n this.selected = false;\n this.disabled = false;\n this.variant = 'select';\n this.handleOptionClick = () => {\n if (this.disabled) {\n return;\n }\n this.dispatchEvent(new CSEOptionClickedEvent(this));\n };\n this.renderSuffix = () => html `\n \n ${this.selected ? html `\n \n ` : ''}\n ${this.variant === 'search' ? html `\n \n ` : ''}\n \n `;\n this.addEventListener('click', this.handleOptionClick);\n }\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', 'false');\n }\n get labelText() {\n if (this.textContent !== null) {\n return this.textContent.trim();\n }\n throw new Error('no label text found for cse-option');\n }\n handleSelectedChange() {\n this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n }\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n render() {\n const classes = {\n 'cse-option': true,\n 'selected': this.selected,\n 'disabled': this.disabled,\n [`variant-${this.variant}`]: true\n };\n return html `\n
    \n \n \n ${this.renderSuffix()}\n
    \n `;\n }\n update(changedProperties) {\n super.update(changedProperties);\n if (changedProperties.has('disabled')) {\n this.handleDisabledChange();\n }\n if (changedProperties.has('selected')) {\n this.handleSelectedChange();\n }\n }\n};\nCSEOption.styles = [hostStyle, style, fontStyles];\n__decorate([\n property({ reflect: true })\n], CSEOption.prototype, \"value\", void 0);\n__decorate([\n property({ type: Boolean, reflect: true })\n], CSEOption.prototype, \"selected\", void 0);\n__decorate([\n property({ type: Boolean, reflect: true })\n], CSEOption.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: String })\n], CSEOption.prototype, \"variant\", void 0);\nCSEOption = __decorate([\n customElement('cse-option')\n], CSEOption);\nexport { CSEOption };\nexport class CSEOptionClickedEvent extends Event {\n constructor(option) {\n super(CSEOptionClickedEvent.type, { bubbles: true, composed: true });\n this.option = option;\n }\n}\nCSEOptionClickedEvent.type = 'cse-option-clicked';\n//# sourceMappingURL=option.js.map","/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction*oo(o,f){if(void 0!==o){let i=0;for(const t of o)yield f(t,i++)}}export{oo as map};\n//# sourceMappingURL=map.js.map\n","/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction*oo(o,t,e=1){const i=void 0===t?0:o;t??=o;for(let o=i;e>0?o= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { range } from 'lit/directives/range.js';\nexport class PaginationOnNavigateEvent extends Event {\n constructor(pageNumber) {\n super(PaginationOnNavigateEvent.type, { bubbles: true, composed: true });\n this.pageNumber = pageNumber;\n }\n}\nPaginationOnNavigateEvent.type = 'pagination-on-navigate';\nlet CSEPaginationSection = class CSEPaginationSection extends LitElement {\n constructor() {\n super(...arguments);\n this.currentPage = 1;\n this.numberOfPages = undefined;\n this.surroundingPages = undefined;\n this.squash = false;\n this.onNextClick = (event) => {\n const target = event.target;\n this.gotoPage(this.currentPage + 1, target);\n };\n this.onPreviousClick = (event) => {\n const target = event.target;\n this.gotoPage(this.currentPage - 1, target);\n };\n }\n gotoPage(pageNumber, target) {\n if (target.disabled) {\n return;\n }\n this.dispatchEvent(new PaginationOnNavigateEvent(pageNumber));\n this.currentPage = pageNumber;\n }\n doSquashLeft(first, last) {\n const numberOfRenderedSurroundingPages = this.surroundingPages || 3;\n if (last - first > numberOfRenderedSurroundingPages) {\n const numberOfFlexibleElements = numberOfRenderedSurroundingPages - 2;\n return html `\n this.gotoPage(1, event.target)}\">${first}\n ...\n ${this.renderPageRange(last - numberOfFlexibleElements, last)}\n `;\n }\n return this.renderPageRange(first, last);\n }\n doSquashRight(first, last) {\n const numberOfRenderedSurroundingPages = this.surroundingPages || 3;\n if (last - first > numberOfRenderedSurroundingPages) {\n const numberOfFlexibleElements = numberOfRenderedSurroundingPages - 2;\n return html `\n ${this.renderPageRange(first, first + numberOfFlexibleElements)}\n ...\n this.gotoPage(last - 1, event.target)}\">${last - 1}\n `;\n }\n return this.renderPageRange(first, last);\n }\n leftSurroundingPages() {\n let range_start = 1;\n const range_end = this.currentPage;\n if (this.surroundingPages !== undefined) {\n range_start = this.currentPage - this.surroundingPages;\n }\n if (this.squash) {\n return this.doSquashLeft(1, range_end);\n }\n return this.renderPageRange(range_start, range_end);\n }\n rightSurroundingPages() {\n const range_start = this.currentPage + 1;\n let range_end = (this.numberOfPages || this.currentPage) + 1;\n if (this.surroundingPages !== undefined) {\n range_end = range_start + this.surroundingPages;\n }\n if (this.squash && this.numberOfPages) {\n return this.doSquashRight(range_start, this.numberOfPages + 1);\n }\n return this.renderPageRange(range_start, range_end);\n }\n renderPageRange(range_start, range_end) {\n return html `\n ${map(range(range_start, range_end), (page) => {\n return html ` this.gotoPage(page, event.target)}\">${page}`;\n })}\n `;\n }\n render() {\n const last_known_page = this.numberOfPages !== undefined && this.currentPage >= this.numberOfPages;\n return html `\n \n \n \n ${this.leftSurroundingPages()}\n \n ${this.currentPage}\n \n ${this.rightSurroundingPages()}\n \n \n \n `;\n }\n};\n__decorate([\n property({ type: Number, attribute: 'current-page' })\n], CSEPaginationSection.prototype, \"currentPage\", void 0);\n__decorate([\n property({\n converter: (value) => parseInt(value || '') || undefined,\n attribute: 'number-of-pages'\n })\n], CSEPaginationSection.prototype, \"numberOfPages\", void 0);\n__decorate([\n property({\n converter: (value) => {\n if (value === '0') {\n return 0;\n }\n return parseInt(value || '') || undefined;\n },\n attribute: 'surrounding-pages'\n })\n], CSEPaginationSection.prototype, \"surroundingPages\", void 0);\n__decorate([\n property(({ type: Boolean, attribute: 'squash' }))\n], CSEPaginationSection.prototype, \"squash\", void 0);\nCSEPaginationSection = __decorate([\n customElement('cse-pagination')\n], CSEPaginationSection);\nexport { CSEPaginationSection };\n//# sourceMappingURL=pagination-section.js.map","import { css } from 'lit';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nimport { csColorAction, csColorBackground, csColorBorder, csColorText } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csFocus } from '@cloudsuite/mosaic-shared/styles/shadows.style.js';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const csePagination = {\n buttonBackgroundColor: css `var(--cse-pagination-button-background-color, ${csColorBackground.primary})`,\n buttonBackgroundColorDisabled: css `var(--cse-pagination-button-background-color-disabled, ${csColorBackground.primary})`,\n buttonBackgroundColorHover: css `var(--cse-pagination-button-background-color-hover, ${csColorBackground.secondary})`,\n buttonBorderRadius: css `var(--cse-pagination-button-border-radius, ${csBorder.radiusFull})`,\n buttonBoxShadowFocus: css `var(--cse-pagination-button-box-shadow-focus, ${csFocus.default})`,\n buttonColor: css `var(--cse-pagination-button-color, ${csColorText.body})`,\n buttonColorDisabled: css `var(--cse-pagination-button-color-disabled, ${csColorText.muted})`,\n buttonColorHover: css `var(--cse-pagination-button-color-hover, ${csColorAction.linkPrimary})`,\n buttonColumnGap: css `var(--cse-pagination-button-column-gap, ${csSpacing.spacing04})`,\n buttonHeight: css `var(--cse-pagination-button-height, ${csSpacing.spacing08})`,\n buttonMinWidth: css `var(--cse-pagination-button-min-width, ${csSpacing.spacing08})`,\n buttonPaddingBlock: css `var(--cse-pagination-button-padding-y, 0)`,\n buttonPaddingInline: css `var(--cse-pagination-button-padding-x, ${csSpacing.spacing05})`,\n buttonActiveBackgroundColor: css `var(--cse-pagination-button-active-background-color, ${csColorAction.secondary})`,\n buttonActiveBackgroundColorDisabled: css `var(--cse-pagination-button-active-background-color-disabled, ${csColorBorder.light})`,\n buttonActiveBackgroundColorHover: css `var(--cse-pagination-button-active-background-color-hover, ${csColorAction.secondaryHover})`,\n buttonActiveColor: css `var(--cse-pagination-button-active-color, ${csColorText.white})`,\n buttonActiveColorDisabled: css `var(--cse-pagination-button-active-color-disabled, ${csColorText.muted})`,\n buttonActiveColorHover: css `var(--cse-pagination-button-active-color-hover, ${csColorText.white})`,\n};\nexport const buttonStyle = css `\n .cse-pagination-button {\n align-items: center;\n background-color: ${csePagination.buttonBackgroundColor};\n border: none;\n border-radius: ${csePagination.buttonBorderRadius};\n color: ${csePagination.buttonColor};\n display: flex;\n height: ${csePagination.buttonHeight};\n justify-content: center;\n min-width: ${csePagination.buttonMinWidth};\n padding-block: ${csePagination.buttonPaddingBlock};\n padding-inline: ${csePagination.buttonPaddingInline};\n text-decoration: none;\n user-select: none;\n }\n\n .disabled {\n pointer-events: none;\n }\n\n .navigation {\n column-gap: ${csePagination.buttonColumnGap};\n }\n\n @media (max-width: 992px) {\n .navigation > ::slotted(*) {\n display: none;\n }\n }\n\n .cse-pagination-button:not(.disabled, .active) {\n cursor: pointer;\n }\n\n .cse-pagination-button:hover {\n background-color: ${csePagination.buttonBackgroundColorHover};\n color: ${csePagination.buttonColorHover};\n }\n\n .cse-pagination-button:focus {\n box-shadow: ${csePagination.buttonBoxShadowFocus};\n }\n\n .cse-pagination-button.disabled {\n background-color: ${csePagination.buttonBackgroundColorDisabled};\n color: ${csePagination.buttonColorDisabled};\n cursor: default;\n }\n\n .cse-pagination-button.active {\n background-color: ${csePagination.buttonActiveBackgroundColor};\n color: ${csePagination.buttonActiveColor};\n }\n\n .cse-pagination-button.active:hover {\n background-color: ${csePagination.buttonActiveBackgroundColorHover};\n color: ${csePagination.buttonActiveColorHover};\n }\n\n .cse-pagination-button.active.disabled {\n background-color: ${csePagination.buttonActiveBackgroundColorDisabled};\n color: ${csePagination.buttonActiveColorDisabled};\n }\n`;\n//# sourceMappingURL=pagination.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { buttonStyle } from './pagination.style.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\ninitializeIconsByRole({\n 'cse-pagination-button.previous': { name: 'angle-left', style: 'regular' },\n 'cse-pagination-button.next': { name: 'angle-right', style: 'regular' },\n});\nlet CSEPaginationButton = class CSEPaginationButton extends LitElement {\n constructor() {\n super(...arguments);\n this.url = '';\n this.previous = false;\n this.next = false;\n this.active = false;\n this.disabled = false;\n this.renderIcon = (shouldRender, role) => {\n if (shouldRender) {\n return html ``;\n }\n return nothing;\n };\n this.renderButtonContents = () => html `\n ${this.renderIcon(this.previous, 'previous')}\n \n ${this.renderIcon(this.next, 'next')}\n `;\n }\n render() {\n const classes = classMap({\n 'cse-pagination-button': true,\n 'active': this.active,\n 'disabled': this.disabled,\n 'navigation': this.previous || this.next,\n 'font-body-s': this.previous || this.next,\n 'font-body': !this.previous && !this.next,\n });\n if (this.url) {\n return html `\n \n ${this.renderButtonContents()}\n \n `;\n }\n return html `\n \n `;\n }\n};\nCSEPaginationButton.styles = [fontStyles, hostStyle, buttonStyle];\n__decorate([\n property()\n], CSEPaginationButton.prototype, \"url\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEPaginationButton.prototype, \"previous\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEPaginationButton.prototype, \"next\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEPaginationButton.prototype, \"active\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEPaginationButton.prototype, \"disabled\", void 0);\nCSEPaginationButton = __decorate([\n customElement('cse-pagination-button')\n], CSEPaginationButton);\nexport { CSEPaginationButton };\nexport const paginationAlignments = ['start', 'end', 'center'];\n//# sourceMappingURL=pagination.js.map","import { css } from 'lit';\nimport { csBorder } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nimport { csColorBackground, csColorBorder } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csSpacing } from '@cloudsuite/mosaic-shared/styles/spacing.style.js';\nexport const csePaper = {\n borderColor: css `var(--cse-paper-border-color, ${csColorBorder.light})`,\n borderRadius: css `var(--cse-paper-border-radius, ${csBorder.radiusMinimal})`,\n borderWidth: css `var(--cse-paper-border-width, 0)`,\n rowGap: css `var(--cse-paper-row-gap, ${csSpacing.spacing05})`,\n headingGap: css `var(--cse-paper-heading-gap, ${csSpacing.spacing04})`,\n paddingBlock: css `var(--cse-paper-padding-y, ${csSpacing.spacing06})`,\n paddingInline: css `var(--cse-paper-padding-x, ${csSpacing.spacing06})`,\n primaryBackgroundColor: css `var(--cse-paper-primary-background-color, ${csColorBackground.primary})`,\n secondaryBackgroundColor: css `var(--cse-paper-secondary-background-color, ${csColorBackground.secondary})`,\n errorBackgroundColor: css `var(--cse-paper-error-background-color, ${csColorBackground.error})`,\n infoBackgroundColor: css `var(--cse-paper-info-background-color, ${csColorBackground.info})`,\n successBackgroundColor: css `var(--cse-paper-success-background-color, ${csColorBackground.success})`,\n warningBackgroundColor: css `var(--cse-paper-warning-background-color, ${csColorBackground.warning})`,\n};\nexport const style = css `\n .cse-paper {\n border-color: ${csePaper.borderColor};\n border-radius: ${csePaper.borderRadius};\n border-style: solid;\n border-width: ${csePaper.borderWidth};\n display: flex;\n flex-direction: column;\n row-gap: ${csePaper.rowGap};\n padding-block: ${csePaper.paddingBlock};\n padding-inline: ${csePaper.paddingInline};\n }\n \n .heading {\n align-items: center;\n display: flex;\n gap: ${csePaper.headingGap};\n }\n\n .hidden {\n display: none;\n }\n\n /* VARIANTS */\n .variant-primary {\n background-color: ${csePaper.primaryBackgroundColor};\n }\n\n .variant-secondary {\n background-color: ${csePaper.secondaryBackgroundColor};\n }\n\n .variant-error {\n background-color: ${csePaper.errorBackgroundColor};\n }\n\n .variant-info {\n background-color: ${csePaper.infoBackgroundColor};\n }\n\n .variant-success {\n background-color: ${csePaper.successBackgroundColor};\n }\n\n .variant-warning {\n background-color: ${csePaper.warningBackgroundColor};\n }\n`;\n//# sourceMappingURL=paper.style.js.map","export const getHost = (element) => {\n return element.shadowRoot ?? element;\n};\nconst internalGetElement = (element, selectors) => {\n const host = getHost(element);\n const child = host.querySelector(selectors);\n if (child === null) {\n throw new Error(`No element found for selectors '${selectors}'.`);\n }\n return child;\n};\nexport const getElement = (element, ...selectors) => {\n return selectors.reduce((targetElement, selector) => internalGetElement(targetElement, selector), element);\n};\nexport const getAllElements = (element, selectors) => {\n const host = getHost(element);\n const children = host.querySelectorAll(selectors);\n if (children.length === 0) {\n throw new Error(`No elements found for selectors '${selectors}'.`);\n }\n return [...children];\n};\nconst internalQueryElement = (element, selectors) => {\n const host = getHost(element);\n return host.querySelector(selectors);\n};\nexport const queryElement = (element, ...selectors) => {\n return selectors.reduce((targetElement, selector) => {\n if (targetElement === null) {\n return null;\n }\n return internalQueryElement(targetElement, selector);\n }, element);\n};\nexport const queryAllElements = (element, selectors) => {\n const host = getHost(element);\n return [...host.querySelectorAll(selectors)];\n};\nexport const getAssignedNodes = (slot) => {\n return slot.assignedNodes({ flatten: true });\n};\nexport const getAssignedText = (slot) => {\n return slot.assignedNodes({ flatten: true })\n .map(node => node.textContent ? node.textContent.trim() : '')\n .filter(text => !!text);\n};\nexport const getAssignedElements = (slot) => {\n const isElement = (node) => node instanceof Element;\n return slot.assignedNodes({ flatten: true }).filter(isElement);\n};\n//# sourceMappingURL=get-elements.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { style } from './paper.style.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\nimport { getAssignedNodes, } from '@cloudsuite/mosaic-shared/testing/get-elements.js';\nimport { fontStyles } from \"../_shared/fonts.style.js\";\nexport const paperVariants = ['primary', 'secondary', 'error', 'info', 'success', 'warning'];\nlet CSEPaper = class CSEPaper extends LitElement {\n constructor() {\n super(...arguments);\n this.variant = 'secondary';\n this.headingSlotIsFilled = false;\n }\n firstUpdated() {\n this.hasSlotContent();\n }\n hasSlotContent() {\n this.headingSlotIsFilled = getAssignedNodes(this.headingSlot).length > 0;\n }\n render() {\n return html `\n
    \n \n \n
    \n `;\n }\n};\nCSEPaper.styles = [hostStyle, fontStyles, style];\n__decorate([\n property({ type: String })\n], CSEPaper.prototype, \"variant\", void 0);\n__decorate([\n state()\n], CSEPaper.prototype, \"headingSlotIsFilled\", void 0);\n__decorate([\n query('slot[name=\"heading\"]')\n], CSEPaper.prototype, \"headingSlot\", void 0);\nCSEPaper = __decorate([\n customElement('cse-paper')\n], CSEPaper);\nexport { CSEPaper };\n//# sourceMappingURL=paper.js.map","import { css } from 'lit';\nimport { csFormControl } from \"../_shared/form.style.js\";\nimport { csColorFunctional } from '@cloudsuite/mosaic-shared/styles/colors.style.js';\nimport { csTransition } from '@cloudsuite/mosaic-shared/styles/globals.style.js';\nexport const csePasswordInput = {\n backgroundColor: css `var(--cse-password-input-background-color, ${csFormControl.backgroundColor})`,\n backgroundColorDisabled: css `var(--cse-password-input-background-color-disabled, ${csFormControl.backgroundColorDisabled})`,\n borderWidth: css `var(--cse-password-input-border-width, ${csFormControl.borderWidth})`,\n borderColor: css `var(--cse-password-input-border-color, ${csFormControl.borderColor})`,\n borderColorError: css `var(--cse-password-input-border-color-error, ${csFormControl.borderColorError})`,\n borderColorSuccess: css `var(--cse-password-input-border-color-success, ${csFormControl.borderColorSuccess})`,\n borderRadius: css `var(--cse-password-input-border-radius, ${csFormControl.borderRadius})`,\n color: css `var(--cse-password-input-color, ${csFormControl.color})`,\n colorDisabled: css `var(--cse-password-input-color-disabled, ${csFormControl.colorDisabled})`,\n height: css `var(--cse-password-input-height, ${csFormControl.height})`,\n fontSize: css `var(--cse-password-input-font-size, ${csFormControl.fontSize})`,\n fontFamily: css `var(--cse-password-input-font-family, ${csFormControl.fontFamily})`,\n paddingInline: css `var(--cse-password-input-padding-x, ${csFormControl.paddingInline})`,\n paddingBlock: css `var(--cse-password-input-padding-y, ${csFormControl.paddingBlock})`,\n outlineFocus: css `var(--cse-password-input-outline-focus, ${csFormControl.outlineFocus})`,\n placeholderColor: css `var(--cse-password-input-placeholder-color, ${csFormControl.placeholderColor})`,\n buttonColor: css `var(--cse-password-input-button-color, ${csColorFunctional.info})`,\n buttonBackgroundColorDisabled: css `var(--cse-password-input-button-background-color-disabled, transparent)`,\n};\nexport const style = css `\n .cse-password-input {\n align-items: center;\n background-color: ${csePasswordInput.backgroundColor};\n border-width: ${csePasswordInput.borderWidth};\n border-color: ${csePasswordInput.borderColor};\n border-style: solid;\n border-radius: ${csePasswordInput.borderRadius};\n display: flex;\n padding-block: ${csePasswordInput.paddingBlock};\n padding-right: 0;\n padding-left: ${csePasswordInput.paddingInline};\n transition-duration: ${csTransition.duration};\n transition-timing-function: ${csTransition.timingFunction};\n transition-property: color, border-color;\n }\n\n .disabled {\n background-color: ${csePasswordInput.backgroundColorDisabled};\n }\n\n input {\n all: unset;\n color: ${csePasswordInput.color};\n height: ${csePasswordInput.height};\n font-size: ${csePasswordInput.fontSize};\n font-family: ${csePasswordInput.fontFamily};\n flex: 1;\n }\n\n cse-icon-button {\n --cse-icon-button-primary-color: ${csePasswordInput.buttonColor};\n --cse-icon-button-background-color-disabled: ${csePasswordInput.buttonBackgroundColorDisabled};\n }\n\n input::placeholder {\n color: ${csePasswordInput.placeholderColor};\n }\n\n .cse-password-input.disabled input {\n color: ${csePasswordInput.colorDisabled};\n }\n\n .cse-password-input:has(input:focus-visible) {\n outline: ${csePasswordInput.outlineFocus};\n }\n\n .valid-error {\n border-color: ${csePasswordInput.borderColorError};\n }\n\n .valid-success {\n border-color: ${csePasswordInput.borderColorSuccess};\n }\n`;\n//# sourceMappingURL=password-input.style.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { style } from './password-input.style.js';\nimport { ValueFormElement } from \"../_shared/formElement.js\";\nimport { classMap } from 'lit/directives/class-map.js';\nimport { initializeIconsByRole } from '@cloudsuite/mosaic-shared/icons/library.js';\nimport { hostStyle } from '@cloudsuite/mosaic-shared/styles/host.style.js';\ninitializeIconsByRole({\n 'cse-password-input.eye': { name: 'eye', style: 'regular' },\n 'cse-password-input.eye-slash': { name: 'eye-slash', style: 'regular' },\n});\nlet CSEPasswordInput = class CSEPasswordInput extends ValueFormElement {\n constructor() {\n super(...arguments);\n this.name = '';\n this.value = '';\n this.disabled = false;\n this.inputType = 'password';\n this.valid = 'none';\n this.autofocus = false;\n }\n focus() {\n this.input.focus();\n }\n render() {\n return html `\n
    \n \n ${this.inputType === 'password' ?\n html `\n \n \n `\n :\n html `\n \n \n `}\n
    \n `;\n }\n togglePasswordVisible() {\n if (this.disabled)\n return;\n this.inputType = 'text';\n }\n togglePasswordInvisible() {\n if (this.disabled)\n return;\n this.inputType = 'password';\n }\n};\nCSEPasswordInput.styles = [hostStyle, style];\n__decorate([\n property({ type: String })\n], CSEPasswordInput.prototype, \"name\", void 0);\n__decorate([\n property({ type: String })\n], CSEPasswordInput.prototype, \"value\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEPasswordInput.prototype, \"disabled\", void 0);\n__decorate([\n state()\n], CSEPasswordInput.prototype, \"inputType\", void 0);\n__decorate([\n property({ type: String })\n], CSEPasswordInput.prototype, \"valid\", void 0);\n__decorate([\n property({ type: Boolean })\n], CSEPasswordInput.prototype, \"autofocus\", void 0);\n__decorate([\n query('input')\n], CSEPasswordInput.prototype, \"input\", void 0);\nCSEPasswordInput = __decorate([\n customElement('cse-password-input')\n], CSEPasswordInput);\nexport { CSEPasswordInput };\n//# sourceMappingURL=password-input.js.map","/**\n * Custom positioning reference element.\n * @see https://floating-ui.com/docs/virtual-elements\n */\n\nconst sides = ['top', 'right', 'bottom', 'left'];\nconst alignments = ['start', 'end'];\nconst placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + \"-\" + alignments[0], side + \"-\" + alignments[1]), []);\nconst min = Math.min;\nconst max = Math.max;\nconst round = Math.round;\nconst floor = Math.floor;\nconst createCoords = v => ({\n x: v,\n y: v\n});\nconst oppositeSideMap = {\n left: 'right',\n right: 'left',\n bottom: 'top',\n top: 'bottom'\n};\nconst oppositeAlignmentMap = {\n start: 'end',\n end: 'start'\n};\nfunction clamp(start, value, end) {\n return max(start, min(value, end));\n}\nfunction evaluate(value, param) {\n return typeof value === 'function' ? value(param) : value;\n}\nfunction getSide(placement) {\n return placement.split('-')[0];\n}\nfunction getAlignment(placement) {\n return placement.split('-')[1];\n}\nfunction getOppositeAxis(axis) {\n return axis === 'x' ? 'y' : 'x';\n}\nfunction getAxisLength(axis) {\n return axis === 'y' ? 'height' : 'width';\n}\nfunction getSideAxis(placement) {\n return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';\n}\nfunction getAlignmentAxis(placement) {\n return getOppositeAxis(getSideAxis(placement));\n}\nfunction getAlignmentSides(placement, rects, rtl) {\n if (rtl === void 0) {\n rtl = false;\n }\n const alignment = getAlignment(placement);\n const alignmentAxis = getAlignmentAxis(placement);\n const length = getAxisLength(alignmentAxis);\n let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';\n if (rects.reference[length] > rects.floating[length]) {\n mainAlignmentSide = getOppositePlacement(mainAlignmentSide);\n }\n return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];\n}\nfunction getExpandedPlacements(placement) {\n const oppositePlacement = getOppositePlacement(placement);\n return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];\n}\nfunction getOppositeAlignmentPlacement(placement) {\n return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);\n}\nfunction getSideList(side, isStart, rtl) {\n const lr = ['left', 'right'];\n const rl = ['right', 'left'];\n const tb = ['top', 'bottom'];\n const bt = ['bottom', 'top'];\n switch (side) {\n case 'top':\n case 'bottom':\n if (rtl) return isStart ? rl : lr;\n return isStart ? lr : rl;\n case 'left':\n case 'right':\n return isStart ? tb : bt;\n default:\n return [];\n }\n}\nfunction getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {\n const alignment = getAlignment(placement);\n let list = getSideList(getSide(placement), direction === 'start', rtl);\n if (alignment) {\n list = list.map(side => side + \"-\" + alignment);\n if (flipAlignment) {\n list = list.concat(list.map(getOppositeAlignmentPlacement));\n }\n }\n return list;\n}\nfunction getOppositePlacement(placement) {\n return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);\n}\nfunction expandPaddingObject(padding) {\n return {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...padding\n };\n}\nfunction getPaddingObject(padding) {\n return typeof padding !== 'number' ? expandPaddingObject(padding) : {\n top: padding,\n right: padding,\n bottom: padding,\n left: padding\n };\n}\nfunction rectToClientRect(rect) {\n const {\n x,\n y,\n width,\n height\n } = rect;\n return {\n width,\n height,\n top: y,\n left: x,\n right: x + width,\n bottom: y + height,\n x,\n y\n };\n}\n\nexport { alignments, clamp, createCoords, evaluate, expandPaddingObject, floor, getAlignment, getAlignmentAxis, getAlignmentSides, getAxisLength, getExpandedPlacements, getOppositeAlignmentPlacement, getOppositeAxis, getOppositeAxisPlacements, getOppositePlacement, getPaddingObject, getSide, getSideAxis, max, min, placements, rectToClientRect, round, sides };\n","import { getSideAxis, getAlignmentAxis, getAxisLength, getSide, getAlignment, evaluate, getPaddingObject, rectToClientRect, min, clamp, placements, getAlignmentSides, getOppositeAlignmentPlacement, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, sides, max, getOppositeAxis } from '@floating-ui/utils';\nexport { rectToClientRect } from '@floating-ui/utils';\n\nfunction computeCoordsFromPlacement(_ref, placement, rtl) {\n let {\n reference,\n floating\n } = _ref;\n const sideAxis = getSideAxis(placement);\n const alignmentAxis = getAlignmentAxis(placement);\n const alignLength = getAxisLength(alignmentAxis);\n const side = getSide(placement);\n const isVertical = sideAxis === 'y';\n const commonX = reference.x + reference.width / 2 - floating.width / 2;\n const commonY = reference.y + reference.height / 2 - floating.height / 2;\n const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;\n let coords;\n switch (side) {\n case 'top':\n coords = {\n x: commonX,\n y: reference.y - floating.height\n };\n break;\n case 'bottom':\n coords = {\n x: commonX,\n y: reference.y + reference.height\n };\n break;\n case 'right':\n coords = {\n x: reference.x + reference.width,\n y: commonY\n };\n break;\n case 'left':\n coords = {\n x: reference.x - floating.width,\n y: commonY\n };\n break;\n default:\n coords = {\n x: reference.x,\n y: reference.y\n };\n }\n switch (getAlignment(placement)) {\n case 'start':\n coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);\n break;\n case 'end':\n coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);\n break;\n }\n return coords;\n}\n\n/**\n * Computes the `x` and `y` coordinates that will place the floating element\n * next to a given reference element.\n *\n * This export does not have any `platform` interface logic. You will need to\n * write one for the platform you are using Floating UI with.\n */\nconst computePosition = async (reference, floating, config) => {\n const {\n placement = 'bottom',\n strategy = 'absolute',\n middleware = [],\n platform\n } = config;\n const validMiddleware = middleware.filter(Boolean);\n const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));\n let rects = await platform.getElementRects({\n reference,\n floating,\n strategy\n });\n let {\n x,\n y\n } = computeCoordsFromPlacement(rects, placement, rtl);\n let statefulPlacement = placement;\n let middlewareData = {};\n let resetCount = 0;\n for (let i = 0; i < validMiddleware.length; i++) {\n const {\n name,\n fn\n } = validMiddleware[i];\n const {\n x: nextX,\n y: nextY,\n data,\n reset\n } = await fn({\n x,\n y,\n initialPlacement: placement,\n placement: statefulPlacement,\n strategy,\n middlewareData,\n rects,\n platform,\n elements: {\n reference,\n floating\n }\n });\n x = nextX != null ? nextX : x;\n y = nextY != null ? nextY : y;\n middlewareData = {\n ...middlewareData,\n [name]: {\n ...middlewareData[name],\n ...data\n }\n };\n if (reset && resetCount <= 50) {\n resetCount++;\n if (typeof reset === 'object') {\n if (reset.placement) {\n statefulPlacement = reset.placement;\n }\n if (reset.rects) {\n rects = reset.rects === true ? await platform.getElementRects({\n reference,\n floating,\n strategy\n }) : reset.rects;\n }\n ({\n x,\n y\n } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));\n }\n i = -1;\n }\n }\n return {\n x,\n y,\n placement: statefulPlacement,\n strategy,\n middlewareData\n };\n};\n\n/**\n * Resolves with an object of overflow side offsets that determine how much the\n * element is overflowing a given clipping boundary on each side.\n * - positive = overflowing the boundary by that number of pixels\n * - negative = how many pixels left before it will overflow\n * - 0 = lies flush with the boundary\n * @see https://floating-ui.com/docs/detectOverflow\n */\nasync function detectOverflow(state, options) {\n var _await$platform$isEle;\n if (options === void 0) {\n options = {};\n }\n const {\n x,\n y,\n platform,\n rects,\n elements,\n strategy\n } = state;\n const {\n boundary = 'clippingAncestors',\n rootBoundary = 'viewport',\n elementContext = 'floating',\n altBoundary = false,\n padding = 0\n } = evaluate(options, state);\n const paddingObject = getPaddingObject(padding);\n const altContext = elementContext === 'floating' ? 'reference' : 'floating';\n const element = elements[altBoundary ? altContext : elementContext];\n const clippingClientRect = rectToClientRect(await platform.getClippingRect({\n element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),\n boundary,\n rootBoundary,\n strategy\n }));\n const rect = elementContext === 'floating' ? {\n x,\n y,\n width: rects.floating.width,\n height: rects.floating.height\n } : rects.reference;\n const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));\n const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {\n x: 1,\n y: 1\n } : {\n x: 1,\n y: 1\n };\n const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({\n elements,\n rect,\n offsetParent,\n strategy\n }) : rect);\n return {\n top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,\n bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,\n left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,\n right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x\n };\n}\n\n/**\n * Provides data to position an inner element of the floating element so that it\n * appears centered to the reference element.\n * @see https://floating-ui.com/docs/arrow\n */\nconst arrow = options => ({\n name: 'arrow',\n options,\n async fn(state) {\n const {\n x,\n y,\n placement,\n rects,\n platform,\n elements,\n middlewareData\n } = state;\n // Since `element` is required, we don't Partial<> the type.\n const {\n element,\n padding = 0\n } = evaluate(options, state) || {};\n if (element == null) {\n return {};\n }\n const paddingObject = getPaddingObject(padding);\n const coords = {\n x,\n y\n };\n const axis = getAlignmentAxis(placement);\n const length = getAxisLength(axis);\n const arrowDimensions = await platform.getDimensions(element);\n const isYAxis = axis === 'y';\n const minProp = isYAxis ? 'top' : 'left';\n const maxProp = isYAxis ? 'bottom' : 'right';\n const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';\n const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];\n const startDiff = coords[axis] - rects.reference[axis];\n const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));\n let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;\n\n // DOM platform can return `window` as the `offsetParent`.\n if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {\n clientSize = elements.floating[clientProp] || rects.floating[length];\n }\n const centerToReference = endDiff / 2 - startDiff / 2;\n\n // If the padding is large enough that it causes the arrow to no longer be\n // centered, modify the padding so that it is centered.\n const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;\n const minPadding = min(paddingObject[minProp], largestPossiblePadding);\n const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);\n\n // Make sure the arrow doesn't overflow the floating element if the center\n // point is outside the floating element's bounds.\n const min$1 = minPadding;\n const max = clientSize - arrowDimensions[length] - maxPadding;\n const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;\n const offset = clamp(min$1, center, max);\n\n // If the reference is small enough that the arrow's padding causes it to\n // to point to nothing for an aligned placement, adjust the offset of the\n // floating element itself. To ensure `shift()` continues to take action,\n // a single reset is performed when this is true.\n const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;\n const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;\n return {\n [axis]: coords[axis] + alignmentOffset,\n data: {\n [axis]: offset,\n centerOffset: center - offset - alignmentOffset,\n ...(shouldAddOffset && {\n alignmentOffset\n })\n },\n reset: shouldAddOffset\n };\n }\n});\n\nfunction getPlacementList(alignment, autoAlignment, allowedPlacements) {\n const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);\n return allowedPlacementsSortedByAlignment.filter(placement => {\n if (alignment) {\n return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);\n }\n return true;\n });\n}\n/**\n * Optimizes the visibility of the floating element by choosing the placement\n * that has the most space available automatically, without needing to specify a\n * preferred placement. Alternative to `flip`.\n * @see https://floating-ui.com/docs/autoPlacement\n */\nconst autoPlacement = function (options) {\n if (options === void 0) {\n options = {};\n }\n return {\n name: 'autoPlacement',\n options,\n async fn(state) {\n var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;\n const {\n rects,\n middlewareData,\n placement,\n platform,\n elements\n } = state;\n const {\n crossAxis = false,\n alignment,\n allowedPlacements = placements,\n autoAlignment = true,\n ...detectOverflowOptions\n } = evaluate(options, state);\n const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;\n const overflow = await detectOverflow(state, detectOverflowOptions);\n const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;\n const currentPlacement = placements$1[currentIndex];\n if (currentPlacement == null) {\n return {};\n }\n const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));\n\n // Make `computeCoords` start from the right place.\n if (placement !== currentPlacement) {\n return {\n reset: {\n placement: placements$1[0]\n }\n };\n }\n const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];\n const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {\n placement: currentPlacement,\n overflows: currentOverflows\n }];\n const nextPlacement = placements$1[currentIndex + 1];\n\n // There are more placements to check.\n if (nextPlacement) {\n return {\n data: {\n index: currentIndex + 1,\n overflows: allOverflows\n },\n reset: {\n placement: nextPlacement\n }\n };\n }\n const placementsSortedByMostSpace = allOverflows.map(d => {\n const alignment = getAlignment(d.placement);\n return [d.placement, alignment && crossAxis ?\n // Check along the mainAxis and main crossAxis side.\n d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :\n // Check only the mainAxis.\n d.overflows[0], d.overflows];\n }).sort((a, b) => a[1] - b[1]);\n const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,\n // Aligned placements should not check their opposite crossAxis\n // side.\n getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));\n const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];\n if (resetPlacement !== placement) {\n return {\n data: {\n index: currentIndex + 1,\n overflows: allOverflows\n },\n reset: {\n placement: resetPlacement\n }\n };\n }\n return {};\n }\n };\n};\n\n/**\n * Optimizes the visibility of the floating element by flipping the `placement`\n * in order to keep it in view when the preferred placement(s) will overflow the\n * clipping boundary. Alternative to `autoPlacement`.\n * @see https://floating-ui.com/docs/flip\n */\nconst flip = function (options) {\n if (options === void 0) {\n options = {};\n }\n return {\n name: 'flip',\n options,\n async fn(state) {\n var _middlewareData$arrow, _middlewareData$flip;\n const {\n placement,\n middlewareData,\n rects,\n initialPlacement,\n platform,\n elements\n } = state;\n const {\n mainAxis: checkMainAxis = true,\n crossAxis: checkCrossAxis = true,\n fallbackPlacements: specifiedFallbackPlacements,\n fallbackStrategy = 'bestFit',\n fallbackAxisSideDirection = 'none',\n flipAlignment = true,\n ...detectOverflowOptions\n } = evaluate(options, state);\n\n // If a reset by the arrow was caused due to an alignment offset being\n // added, we should skip any logic now since `flip()` has already done its\n // work.\n // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643\n if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {\n return {};\n }\n const side = getSide(placement);\n const initialSideAxis = getSideAxis(initialPlacement);\n const isBasePlacement = getSide(initialPlacement) === initialPlacement;\n const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));\n const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));\n const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';\n if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {\n fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));\n }\n const placements = [initialPlacement, ...fallbackPlacements];\n const overflow = await detectOverflow(state, detectOverflowOptions);\n const overflows = [];\n let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];\n if (checkMainAxis) {\n overflows.push(overflow[side]);\n }\n if (checkCrossAxis) {\n const sides = getAlignmentSides(placement, rects, rtl);\n overflows.push(overflow[sides[0]], overflow[sides[1]]);\n }\n overflowsData = [...overflowsData, {\n placement,\n overflows\n }];\n\n // One or more sides is overflowing.\n if (!overflows.every(side => side <= 0)) {\n var _middlewareData$flip2, _overflowsData$filter;\n const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;\n const nextPlacement = placements[nextIndex];\n if (nextPlacement) {\n // Try next placement and re-run the lifecycle.\n return {\n data: {\n index: nextIndex,\n overflows: overflowsData\n },\n reset: {\n placement: nextPlacement\n }\n };\n }\n\n // First, find the candidates that fit on the mainAxis side of overflow,\n // then find the placement that fits the best on the main crossAxis side.\n let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;\n\n // Otherwise fallback.\n if (!resetPlacement) {\n switch (fallbackStrategy) {\n case 'bestFit':\n {\n var _overflowsData$filter2;\n const placement = (_overflowsData$filter2 = overflowsData.filter(d => {\n if (hasFallbackAxisSideDirection) {\n const currentSideAxis = getSideAxis(d.placement);\n return currentSideAxis === initialSideAxis ||\n // Create a bias to the `y` side axis due to horizontal\n // reading directions favoring greater width.\n currentSideAxis === 'y';\n }\n return true;\n }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];\n if (placement) {\n resetPlacement = placement;\n }\n break;\n }\n case 'initialPlacement':\n resetPlacement = initialPlacement;\n break;\n }\n }\n if (placement !== resetPlacement) {\n return {\n reset: {\n placement: resetPlacement\n }\n };\n }\n }\n return {};\n }\n };\n};\n\nfunction getSideOffsets(overflow, rect) {\n return {\n top: overflow.top - rect.height,\n right: overflow.right - rect.width,\n bottom: overflow.bottom - rect.height,\n left: overflow.left - rect.width\n };\n}\nfunction isAnySideFullyClipped(overflow) {\n return sides.some(side => overflow[side] >= 0);\n}\n/**\n * Provides data to hide the floating element in applicable situations, such as\n * when it is not in the same clipping context as the reference element.\n * @see https://floating-ui.com/docs/hide\n */\nconst hide = function (options) {\n if (options === void 0) {\n options = {};\n }\n return {\n name: 'hide',\n options,\n async fn(state) {\n const {\n rects\n } = state;\n const {\n strategy = 'referenceHidden',\n ...detectOverflowOptions\n } = evaluate(options, state);\n switch (strategy) {\n case 'referenceHidden':\n {\n const overflow = await detectOverflow(state, {\n ...detectOverflowOptions,\n elementContext: 'reference'\n });\n const offsets = getSideOffsets(overflow, rects.reference);\n return {\n data: {\n referenceHiddenOffsets: offsets,\n referenceHidden: isAnySideFullyClipped(offsets)\n }\n };\n }\n case 'escaped':\n {\n const overflow = await detectOverflow(state, {\n ...detectOverflowOptions,\n altBoundary: true\n });\n const offsets = getSideOffsets(overflow, rects.floating);\n return {\n data: {\n escapedOffsets: offsets,\n escaped: isAnySideFullyClipped(offsets)\n }\n };\n }\n default:\n {\n return {};\n }\n }\n }\n };\n};\n\nfunction getBoundingRect(rects) {\n const minX = min(...rects.map(rect => rect.left));\n const minY = min(...rects.map(rect => rect.top));\n const maxX = max(...rects.map(rect => rect.right));\n const maxY = max(...rects.map(rect => rect.bottom));\n return {\n x: minX,\n y: minY,\n width: maxX - minX,\n height: maxY - minY\n };\n}\nfunction getRectsByLine(rects) {\n const sortedRects = rects.slice().sort((a, b) => a.y - b.y);\n const groups = [];\n let prevRect = null;\n for (let i = 0; i < sortedRects.length; i++) {\n const rect = sortedRects[i];\n if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {\n groups.push([rect]);\n } else {\n groups[groups.length - 1].push(rect);\n }\n prevRect = rect;\n }\n return groups.map(rect => rectToClientRect(getBoundingRect(rect)));\n}\n/**\n * Provides improved positioning for inline reference elements that can span\n * over multiple lines, such as hyperlinks or range selections.\n * @see https://floating-ui.com/docs/inline\n */\nconst inline = function (options) {\n if (options === void 0) {\n options = {};\n }\n return {\n name: 'inline',\n options,\n async fn(state) {\n const {\n placement,\n elements,\n rects,\n platform,\n strategy\n } = state;\n // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a\n // ClientRect's bounds, despite the event listener being triggered. A\n // padding of 2 seems to handle this issue.\n const {\n padding = 2,\n x,\n y\n } = evaluate(options, state);\n const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);\n const clientRects = getRectsByLine(nativeClientRects);\n const fallback = rectToClientRect(getBoundingRect(nativeClientRects));\n const paddingObject = getPaddingObject(padding);\n function getBoundingClientRect() {\n // There are two rects and they are disjoined.\n if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {\n // Find the first rect in which the point is fully inside.\n return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;\n }\n\n // There are 2 or more connected rects.\n if (clientRects.length >= 2) {\n if (getSideAxis(placement) === 'y') {\n const firstRect = clientRects[0];\n const lastRect = clientRects[clientRects.length - 1];\n const isTop = getSide(placement) === 'top';\n const top = firstRect.top;\n const bottom = lastRect.bottom;\n const left = isTop ? firstRect.left : lastRect.left;\n const right = isTop ? firstRect.right : lastRect.right;\n const width = right - left;\n const height = bottom - top;\n return {\n top,\n bottom,\n left,\n right,\n width,\n height,\n x: left,\n y: top\n };\n }\n const isLeftSide = getSide(placement) === 'left';\n const maxRight = max(...clientRects.map(rect => rect.right));\n const minLeft = min(...clientRects.map(rect => rect.left));\n const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);\n const top = measureRects[0].top;\n const bottom = measureRects[measureRects.length - 1].bottom;\n const left = minLeft;\n const right = maxRight;\n const width = right - left;\n const height = bottom - top;\n return {\n top,\n bottom,\n left,\n right,\n width,\n height,\n x: left,\n y: top\n };\n }\n return fallback;\n }\n const resetRects = await platform.getElementRects({\n reference: {\n getBoundingClientRect\n },\n floating: elements.floating,\n strategy\n });\n if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {\n return {\n reset: {\n rects: resetRects\n }\n };\n }\n return {};\n }\n };\n};\n\n// For type backwards-compatibility, the `OffsetOptions` type was also\n// Derivable.\n\nasync function convertValueToCoords(state, options) {\n const {\n placement,\n platform,\n elements\n } = state;\n const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));\n const side = getSide(placement);\n const alignment = getAlignment(placement);\n const isVertical = getSideAxis(placement) === 'y';\n const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;\n const crossAxisMulti = rtl && isVertical ? -1 : 1;\n const rawValue = evaluate(options, state);\n\n // eslint-disable-next-line prefer-const\n let {\n mainAxis,\n crossAxis,\n alignmentAxis\n } = typeof rawValue === 'number' ? {\n mainAxis: rawValue,\n crossAxis: 0,\n alignmentAxis: null\n } : {\n mainAxis: rawValue.mainAxis || 0,\n crossAxis: rawValue.crossAxis || 0,\n alignmentAxis: rawValue.alignmentAxis\n };\n if (alignment && typeof alignmentAxis === 'number') {\n crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;\n }\n return isVertical ? {\n x: crossAxis * crossAxisMulti,\n y: mainAxis * mainAxisMulti\n } : {\n x: mainAxis * mainAxisMulti,\n y: crossAxis * crossAxisMulti\n };\n}\n\n/**\n * Modifies the placement by translating the floating element along the\n * specified axes.\n * A number (shorthand for `mainAxis` or distance), or an axes configuration\n * object may be passed.\n * @see https://floating-ui.com/docs/offset\n */\nconst offset = function (options) {\n if (options === void 0) {\n options = 0;\n }\n return {\n name: 'offset',\n options,\n async fn(state) {\n var _middlewareData$offse, _middlewareData$arrow;\n const {\n x,\n y,\n placement,\n middlewareData\n } = state;\n const diffCoords = await convertValueToCoords(state, options);\n\n // If the placement is the same and the arrow caused an alignment offset\n // then we don't need to change the positioning coordinates.\n if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {\n return {};\n }\n return {\n x: x + diffCoords.x,\n y: y + diffCoords.y,\n data: {\n ...diffCoords,\n placement\n }\n };\n }\n };\n};\n\n/**\n * Optimizes the visibility of the floating element by shifting it in order to\n * keep it in view when it will overflow the clipping boundary.\n * @see https://floating-ui.com/docs/shift\n */\nconst shift = function (options) {\n if (options === void 0) {\n options = {};\n }\n return {\n name: 'shift',\n options,\n async fn(state) {\n const {\n x,\n y,\n placement\n } = state;\n const {\n mainAxis: checkMainAxis = true,\n crossAxis: checkCrossAxis = false,\n limiter = {\n fn: _ref => {\n let {\n x,\n y\n } = _ref;\n return {\n x,\n y\n };\n }\n },\n ...detectOverflowOptions\n } = evaluate(options, state);\n const coords = {\n x,\n y\n };\n const overflow = await detectOverflow(state, detectOverflowOptions);\n const crossAxis = getSideAxis(getSide(placement));\n const mainAxis = getOppositeAxis(crossAxis);\n let mainAxisCoord = coords[mainAxis];\n let crossAxisCoord = coords[crossAxis];\n if (checkMainAxis) {\n const minSide = mainAxis === 'y' ? 'top' : 'left';\n const maxSide = mainAxis === 'y' ? 'bottom' : 'right';\n const min = mainAxisCoord + overflow[minSide];\n const max = mainAxisCoord - overflow[maxSide];\n mainAxisCoord = clamp(min, mainAxisCoord, max);\n }\n if (checkCrossAxis) {\n const minSide = crossAxis === 'y' ? 'top' : 'left';\n const maxSide = crossAxis === 'y' ? 'bottom' : 'right';\n const min = crossAxisCoord + overflow[minSide];\n const max = crossAxisCoord - overflow[maxSide];\n crossAxisCoord = clamp(min, crossAxisCoord, max);\n }\n const limitedCoords = limiter.fn({\n ...state,\n [mainAxis]: mainAxisCoord,\n [crossAxis]: crossAxisCoord\n });\n return {\n ...limitedCoords,\n data: {\n x: limitedCoords.x - x,\n y: limitedCoords.y - y,\n enabled: {\n [mainAxis]: checkMainAxis,\n [crossAxis]: checkCrossAxis\n }\n }\n };\n }\n };\n};\n/**\n * Built-in `limiter` that will stop `shift()` at a certain point.\n */\nconst limitShift = function (options) {\n if (options === void 0) {\n options = {};\n }\n return {\n options,\n fn(state) {\n const {\n x,\n y,\n placement,\n rects,\n middlewareData\n } = state;\n const {\n offset = 0,\n mainAxis: checkMainAxis = true,\n crossAxis: checkCrossAxis = true\n } = evaluate(options, state);\n const coords = {\n x,\n y\n };\n const crossAxis = getSideAxis(placement);\n const mainAxis = getOppositeAxis(crossAxis);\n let mainAxisCoord = coords[mainAxis];\n let crossAxisCoord = coords[crossAxis];\n const rawOffset = evaluate(offset, state);\n const computedOffset = typeof rawOffset === 'number' ? {\n mainAxis: rawOffset,\n crossAxis: 0\n } : {\n mainAxis: 0,\n crossAxis: 0,\n ...rawOffset\n };\n if (checkMainAxis) {\n const len = mainAxis === 'y' ? 'height' : 'width';\n const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;\n const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;\n if (mainAxisCoord < limitMin) {\n mainAxisCoord = limitMin;\n } else if (mainAxisCoord > limitMax) {\n mainAxisCoord = limitMax;\n }\n }\n if (checkCrossAxis) {\n var _middlewareData$offse, _middlewareData$offse2;\n const len = mainAxis === 'y' ? 'width' : 'height';\n const isOriginSide = ['top', 'left'].includes(getSide(placement));\n const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);\n const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);\n if (crossAxisCoord < limitMin) {\n crossAxisCoord = limitMin;\n } else if (crossAxisCoord > limitMax) {\n crossAxisCoord = limitMax;\n }\n }\n return {\n [mainAxis]: mainAxisCoord,\n [crossAxis]: crossAxisCoord\n };\n }\n };\n};\n\n/**\n * Provides data that allows you to change the size of the floating element —\n * for instance, prevent it from overflowing the clipping boundary or match the\n * width of the reference element.\n * @see https://floating-ui.com/docs/size\n */\nconst size = function (options) {\n if (options === void 0) {\n options = {};\n }\n return {\n name: 'size',\n options,\n async fn(state) {\n var _state$middlewareData, _state$middlewareData2;\n const {\n placement,\n rects,\n platform,\n elements\n } = state;\n const {\n apply = () => {},\n ...detectOverflowOptions\n } = evaluate(options, state);\n const overflow = await detectOverflow(state, detectOverflowOptions);\n const side = getSide(placement);\n const alignment = getAlignment(placement);\n const isYAxis = getSideAxis(placement) === 'y';\n const {\n width,\n height\n } = rects.floating;\n let heightSide;\n let widthSide;\n if (side === 'top' || side === 'bottom') {\n heightSide = side;\n widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';\n } else {\n widthSide = side;\n heightSide = alignment === 'end' ? 'top' : 'bottom';\n }\n const maximumClippingHeight = height - overflow.top - overflow.bottom;\n const maximumClippingWidth = width - overflow.left - overflow.right;\n const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);\n const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);\n const noShift = !state.middlewareData.shift;\n let availableHeight = overflowAvailableHeight;\n let availableWidth = overflowAvailableWidth;\n if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {\n availableWidth = maximumClippingWidth;\n }\n if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {\n availableHeight = maximumClippingHeight;\n }\n if (noShift && !alignment) {\n const xMin = max(overflow.left, 0);\n const xMax = max(overflow.right, 0);\n const yMin = max(overflow.top, 0);\n const yMax = max(overflow.bottom, 0);\n if (isYAxis) {\n availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));\n } else {\n availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));\n }\n }\n await apply({\n ...state,\n availableWidth,\n availableHeight\n });\n const nextDimensions = await platform.getDimensions(elements.floating);\n if (width !== nextDimensions.width || height !== nextDimensions.height) {\n return {\n reset: {\n rects: true\n }\n };\n }\n return {};\n }\n };\n};\n\nexport { arrow, autoPlacement, computePosition, detectOverflow, flip, hide, inline, limitShift, offset, shift, size };\n","function hasWindow() {\n return typeof window !== 'undefined';\n}\nfunction getNodeName(node) {\n if (isNode(node)) {\n return (node.nodeName || '').toLowerCase();\n }\n // Mocked nodes in testing environments may not be instances of Node. By\n // returning `#document` an infinite loop won't occur.\n // https://github.com/floating-ui/floating-ui/issues/2317\n return '#document';\n}\nfunction getWindow(node) {\n var _node$ownerDocument;\n return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;\n}\nfunction getDocumentElement(node) {\n var _ref;\n return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;\n}\nfunction isNode(value) {\n if (!hasWindow()) {\n return false;\n }\n return value instanceof Node || value instanceof getWindow(value).Node;\n}\nfunction isElement(value) {\n if (!hasWindow()) {\n return false;\n }\n return value instanceof Element || value instanceof getWindow(value).Element;\n}\nfunction isHTMLElement(value) {\n if (!hasWindow()) {\n return false;\n }\n return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;\n}\nfunction isShadowRoot(value) {\n if (!hasWindow() || typeof ShadowRoot === 'undefined') {\n return false;\n }\n return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;\n}\nfunction isOverflowElement(element) {\n const {\n overflow,\n overflowX,\n overflowY,\n display\n } = getComputedStyle(element);\n return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);\n}\nfunction isTableElement(element) {\n return ['table', 'td', 'th'].includes(getNodeName(element));\n}\nfunction isTopLayer(element) {\n return [':popover-open', ':modal'].some(selector => {\n try {\n return element.matches(selector);\n } catch (e) {\n return false;\n }\n });\n}\nfunction isContainingBlock(elementOrCss) {\n const webkit = isWebKit();\n const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;\n\n // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n // https://drafts.csswg.org/css-transforms-2/#individual-transforms\n return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));\n}\nfunction getContainingBlock(element) {\n let currentNode = getParentNode(element);\n while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {\n if (isContainingBlock(currentNode)) {\n return currentNode;\n } else if (isTopLayer(currentNode)) {\n return null;\n }\n currentNode = getParentNode(currentNode);\n }\n return null;\n}\nfunction isWebKit() {\n if (typeof CSS === 'undefined' || !CSS.supports) return false;\n return CSS.supports('-webkit-backdrop-filter', 'none');\n}\nfunction isLastTraversableNode(node) {\n return ['html', 'body', '#document'].includes(getNodeName(node));\n}\nfunction getComputedStyle(element) {\n return getWindow(element).getComputedStyle(element);\n}\nfunction getNodeScroll(element) {\n if (isElement(element)) {\n return {\n scrollLeft: element.scrollLeft,\n scrollTop: element.scrollTop\n };\n }\n return {\n scrollLeft: element.scrollX,\n scrollTop: element.scrollY\n };\n}\nfunction getParentNode(node) {\n if (getNodeName(node) === 'html') {\n return node;\n }\n const result =\n // Step into the shadow DOM of the parent of a slotted node.\n node.assignedSlot ||\n // DOM Element detected.\n node.parentNode ||\n // ShadowRoot detected.\n isShadowRoot(node) && node.host ||\n // Fallback.\n getDocumentElement(node);\n return isShadowRoot(result) ? result.host : result;\n}\nfunction getNearestOverflowAncestor(node) {\n const parentNode = getParentNode(node);\n if (isLastTraversableNode(parentNode)) {\n return node.ownerDocument ? node.ownerDocument.body : node.body;\n }\n if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {\n return parentNode;\n }\n return getNearestOverflowAncestor(parentNode);\n}\nfunction getOverflowAncestors(node, list, traverseIframes) {\n var _node$ownerDocument2;\n if (list === void 0) {\n list = [];\n }\n if (traverseIframes === void 0) {\n traverseIframes = true;\n }\n const scrollableAncestor = getNearestOverflowAncestor(node);\n const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);\n const win = getWindow(scrollableAncestor);\n if (isBody) {\n const frameElement = getFrameElement(win);\n return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);\n }\n return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));\n}\nfunction getFrameElement(win) {\n return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;\n}\n\nexport { getComputedStyle, getContainingBlock, getDocumentElement, getFrameElement, getNearestOverflowAncestor, getNodeName, getNodeScroll, getOverflowAncestors, getParentNode, getWindow, isContainingBlock, isElement, isHTMLElement, isLastTraversableNode, isNode, isOverflowElement, isShadowRoot, isTableElement, isTopLayer, isWebKit };\n","import { rectToClientRect, detectOverflow as detectOverflow$1, offset as offset$1, autoPlacement as autoPlacement$1, shift as shift$1, flip as flip$1, size as size$1, hide as hide$1, arrow as arrow$1, inline as inline$1, limitShift as limitShift$1, computePosition as computePosition$1 } from '@floating-ui/core';\nimport { round, createCoords, max, min, floor } from '@floating-ui/utils';\nimport { getComputedStyle, isHTMLElement, isElement, getWindow, isWebKit, getFrameElement, getNodeScroll, getDocumentElement, isTopLayer, getNodeName, isOverflowElement, getOverflowAncestors, getParentNode, isLastTraversableNode, isContainingBlock, isTableElement, getContainingBlock } from '@floating-ui/utils/dom';\nexport { getOverflowAncestors } from '@floating-ui/utils/dom';\n\nfunction getCssDimensions(element) {\n const css = getComputedStyle(element);\n // In testing environments, the `width` and `height` properties are empty\n // strings for SVG elements, returning NaN. Fallback to `0` in this case.\n let width = parseFloat(css.width) || 0;\n let height = parseFloat(css.height) || 0;\n const hasOffset = isHTMLElement(element);\n const offsetWidth = hasOffset ? element.offsetWidth : width;\n const offsetHeight = hasOffset ? element.offsetHeight : height;\n const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;\n if (shouldFallback) {\n width = offsetWidth;\n height = offsetHeight;\n }\n return {\n width,\n height,\n $: shouldFallback\n };\n}\n\nfunction unwrapElement(element) {\n return !isElement(element) ? element.contextElement : element;\n}\n\nfunction getScale(element) {\n const domElement = unwrapElement(element);\n if (!isHTMLElement(domElement)) {\n return createCoords(1);\n }\n const rect = domElement.getBoundingClientRect();\n const {\n width,\n height,\n $\n } = getCssDimensions(domElement);\n let x = ($ ? round(rect.width) : rect.width) / width;\n let y = ($ ? round(rect.height) : rect.height) / height;\n\n // 0, NaN, or Infinity should always fallback to 1.\n\n if (!x || !Number.isFinite(x)) {\n x = 1;\n }\n if (!y || !Number.isFinite(y)) {\n y = 1;\n }\n return {\n x,\n y\n };\n}\n\nconst noOffsets = /*#__PURE__*/createCoords(0);\nfunction getVisualOffsets(element) {\n const win = getWindow(element);\n if (!isWebKit() || !win.visualViewport) {\n return noOffsets;\n }\n return {\n x: win.visualViewport.offsetLeft,\n y: win.visualViewport.offsetTop\n };\n}\nfunction shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {\n if (isFixed === void 0) {\n isFixed = false;\n }\n if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {\n return false;\n }\n return isFixed;\n}\n\nfunction getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {\n if (includeScale === void 0) {\n includeScale = false;\n }\n if (isFixedStrategy === void 0) {\n isFixedStrategy = false;\n }\n const clientRect = element.getBoundingClientRect();\n const domElement = unwrapElement(element);\n let scale = createCoords(1);\n if (includeScale) {\n if (offsetParent) {\n if (isElement(offsetParent)) {\n scale = getScale(offsetParent);\n }\n } else {\n scale = getScale(element);\n }\n }\n const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);\n let x = (clientRect.left + visualOffsets.x) / scale.x;\n let y = (clientRect.top + visualOffsets.y) / scale.y;\n let width = clientRect.width / scale.x;\n let height = clientRect.height / scale.y;\n if (domElement) {\n const win = getWindow(domElement);\n const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;\n let currentWin = win;\n let currentIFrame = getFrameElement(currentWin);\n while (currentIFrame && offsetParent && offsetWin !== currentWin) {\n const iframeScale = getScale(currentIFrame);\n const iframeRect = currentIFrame.getBoundingClientRect();\n const css = getComputedStyle(currentIFrame);\n const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;\n const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;\n x *= iframeScale.x;\n y *= iframeScale.y;\n width *= iframeScale.x;\n height *= iframeScale.y;\n x += left;\n y += top;\n currentWin = getWindow(currentIFrame);\n currentIFrame = getFrameElement(currentWin);\n }\n }\n return rectToClientRect({\n width,\n height,\n x,\n y\n });\n}\n\n// If has a CSS width greater than the viewport, then this will be\n// incorrect for RTL.\nfunction getWindowScrollBarX(element, rect) {\n const leftScroll = getNodeScroll(element).scrollLeft;\n if (!rect) {\n return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;\n }\n return rect.left + leftScroll;\n}\n\nfunction getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {\n if (ignoreScrollbarX === void 0) {\n ignoreScrollbarX = false;\n }\n const htmlRect = documentElement.getBoundingClientRect();\n const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :\n // RTL scrollbar.\n getWindowScrollBarX(documentElement, htmlRect));\n const y = htmlRect.top + scroll.scrollTop;\n return {\n x,\n y\n };\n}\n\nfunction convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {\n let {\n elements,\n rect,\n offsetParent,\n strategy\n } = _ref;\n const isFixed = strategy === 'fixed';\n const documentElement = getDocumentElement(offsetParent);\n const topLayer = elements ? isTopLayer(elements.floating) : false;\n if (offsetParent === documentElement || topLayer && isFixed) {\n return rect;\n }\n let scroll = {\n scrollLeft: 0,\n scrollTop: 0\n };\n let scale = createCoords(1);\n const offsets = createCoords(0);\n const isOffsetParentAnElement = isHTMLElement(offsetParent);\n if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {\n if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {\n scroll = getNodeScroll(offsetParent);\n }\n if (isHTMLElement(offsetParent)) {\n const offsetRect = getBoundingClientRect(offsetParent);\n scale = getScale(offsetParent);\n offsets.x = offsetRect.x + offsetParent.clientLeft;\n offsets.y = offsetRect.y + offsetParent.clientTop;\n }\n }\n const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);\n return {\n width: rect.width * scale.x,\n height: rect.height * scale.y,\n x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,\n y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y\n };\n}\n\nfunction getClientRects(element) {\n return Array.from(element.getClientRects());\n}\n\n// Gets the entire size of the scrollable document area, even extending outside\n// of the `` and `` rect bounds if horizontally scrollable.\nfunction getDocumentRect(element) {\n const html = getDocumentElement(element);\n const scroll = getNodeScroll(element);\n const body = element.ownerDocument.body;\n const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);\n const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);\n let x = -scroll.scrollLeft + getWindowScrollBarX(element);\n const y = -scroll.scrollTop;\n if (getComputedStyle(body).direction === 'rtl') {\n x += max(html.clientWidth, body.clientWidth) - width;\n }\n return {\n width,\n height,\n x,\n y\n };\n}\n\nfunction getViewportRect(element, strategy) {\n const win = getWindow(element);\n const html = getDocumentElement(element);\n const visualViewport = win.visualViewport;\n let width = html.clientWidth;\n let height = html.clientHeight;\n let x = 0;\n let y = 0;\n if (visualViewport) {\n width = visualViewport.width;\n height = visualViewport.height;\n const visualViewportBased = isWebKit();\n if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {\n x = visualViewport.offsetLeft;\n y = visualViewport.offsetTop;\n }\n }\n return {\n width,\n height,\n x,\n y\n };\n}\n\n// Returns the inner client rect, subtracting scrollbars if present.\nfunction getInnerBoundingClientRect(element, strategy) {\n const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');\n const top = clientRect.top + element.clientTop;\n const left = clientRect.left + element.clientLeft;\n const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);\n const width = element.clientWidth * scale.x;\n const height = element.clientHeight * scale.y;\n const x = left * scale.x;\n const y = top * scale.y;\n return {\n width,\n height,\n x,\n y\n };\n}\nfunction getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {\n let rect;\n if (clippingAncestor === 'viewport') {\n rect = getViewportRect(element, strategy);\n } else if (clippingAncestor === 'document') {\n rect = getDocumentRect(getDocumentElement(element));\n } else if (isElement(clippingAncestor)) {\n rect = getInnerBoundingClientRect(clippingAncestor, strategy);\n } else {\n const visualOffsets = getVisualOffsets(element);\n rect = {\n x: clippingAncestor.x - visualOffsets.x,\n y: clippingAncestor.y - visualOffsets.y,\n width: clippingAncestor.width,\n height: clippingAncestor.height\n };\n }\n return rectToClientRect(rect);\n}\nfunction hasFixedPositionAncestor(element, stopNode) {\n const parentNode = getParentNode(element);\n if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {\n return false;\n }\n return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);\n}\n\n// A \"clipping ancestor\" is an `overflow` element with the characteristic of\n// clipping (or hiding) child elements. This returns all clipping ancestors\n// of the given element up the tree.\nfunction getClippingElementAncestors(element, cache) {\n const cachedResult = cache.get(element);\n if (cachedResult) {\n return cachedResult;\n }\n let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');\n let currentContainingBlockComputedStyle = null;\n const elementIsFixed = getComputedStyle(element).position === 'fixed';\n let currentNode = elementIsFixed ? getParentNode(element) : element;\n\n // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {\n const computedStyle = getComputedStyle(currentNode);\n const currentNodeIsContaining = isContainingBlock(currentNode);\n if (!currentNodeIsContaining && computedStyle.position === 'fixed') {\n currentContainingBlockComputedStyle = null;\n }\n const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);\n if (shouldDropCurrentNode) {\n // Drop non-containing blocks.\n result = result.filter(ancestor => ancestor !== currentNode);\n } else {\n // Record last containing block for next iteration.\n currentContainingBlockComputedStyle = computedStyle;\n }\n currentNode = getParentNode(currentNode);\n }\n cache.set(element, result);\n return result;\n}\n\n// Gets the maximum area that the element is visible in due to any number of\n// clipping ancestors.\nfunction getClippingRect(_ref) {\n let {\n element,\n boundary,\n rootBoundary,\n strategy\n } = _ref;\n const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);\n const clippingAncestors = [...elementClippingAncestors, rootBoundary];\n const firstClippingAncestor = clippingAncestors[0];\n const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {\n const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);\n accRect.top = max(rect.top, accRect.top);\n accRect.right = min(rect.right, accRect.right);\n accRect.bottom = min(rect.bottom, accRect.bottom);\n accRect.left = max(rect.left, accRect.left);\n return accRect;\n }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));\n return {\n width: clippingRect.right - clippingRect.left,\n height: clippingRect.bottom - clippingRect.top,\n x: clippingRect.left,\n y: clippingRect.top\n };\n}\n\nfunction getDimensions(element) {\n const {\n width,\n height\n } = getCssDimensions(element);\n return {\n width,\n height\n };\n}\n\nfunction getRectRelativeToOffsetParent(element, offsetParent, strategy) {\n const isOffsetParentAnElement = isHTMLElement(offsetParent);\n const documentElement = getDocumentElement(offsetParent);\n const isFixed = strategy === 'fixed';\n const rect = getBoundingClientRect(element, true, isFixed, offsetParent);\n let scroll = {\n scrollLeft: 0,\n scrollTop: 0\n };\n const offsets = createCoords(0);\n if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {\n if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {\n scroll = getNodeScroll(offsetParent);\n }\n if (isOffsetParentAnElement) {\n const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);\n offsets.x = offsetRect.x + offsetParent.clientLeft;\n offsets.y = offsetRect.y + offsetParent.clientTop;\n } else if (documentElement) {\n // If the scrollbar appears on the left (e.g. RTL systems). Use\n // Firefox with layout.scrollbar.side = 3 in about:config to test this.\n offsets.x = getWindowScrollBarX(documentElement);\n }\n }\n const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);\n const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;\n const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;\n return {\n x,\n y,\n width: rect.width,\n height: rect.height\n };\n}\n\nfunction isStaticPositioned(element) {\n return getComputedStyle(element).position === 'static';\n}\n\nfunction getTrueOffsetParent(element, polyfill) {\n if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {\n return null;\n }\n if (polyfill) {\n return polyfill(element);\n }\n let rawOffsetParent = element.offsetParent;\n\n // Firefox returns the element as the offsetParent if it's non-static,\n // while Chrome and Safari return the element. The element must\n // be used to perform the correct calculations even if the element is\n // non-static.\n if (getDocumentElement(element) === rawOffsetParent) {\n rawOffsetParent = rawOffsetParent.ownerDocument.body;\n }\n return rawOffsetParent;\n}\n\n// Gets the closest ancestor positioned element. Handles some edge cases,\n// such as table ancestors and cross browser bugs.\nfunction getOffsetParent(element, polyfill) {\n const win = getWindow(element);\n if (isTopLayer(element)) {\n return win;\n }\n if (!isHTMLElement(element)) {\n let svgOffsetParent = getParentNode(element);\n while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {\n if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {\n return svgOffsetParent;\n }\n svgOffsetParent = getParentNode(svgOffsetParent);\n }\n return win;\n }\n let offsetParent = getTrueOffsetParent(element, polyfill);\n while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {\n offsetParent = getTrueOffsetParent(offsetParent, polyfill);\n }\n if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {\n return win;\n }\n return offsetParent || getContainingBlock(element) || win;\n}\n\nconst getElementRects = async function (data) {\n const getOffsetParentFn = this.getOffsetParent || getOffsetParent;\n const getDimensionsFn = this.getDimensions;\n const floatingDimensions = await getDimensionsFn(data.floating);\n return {\n reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),\n floating: {\n x: 0,\n y: 0,\n width: floatingDimensions.width,\n height: floatingDimensions.height\n }\n };\n};\n\nfunction isRTL(element) {\n return getComputedStyle(element).direction === 'rtl';\n}\n\nconst platform = {\n convertOffsetParentRelativeRectToViewportRelativeRect,\n getDocumentElement,\n getClippingRect,\n getOffsetParent,\n getElementRects,\n getClientRects,\n getDimensions,\n getScale,\n isElement,\n isRTL\n};\n\nfunction rectsAreEqual(a, b) {\n return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;\n}\n\n// https://samthor.au/2021/observing-dom/\nfunction observeMove(element, onMove) {\n let io = null;\n let timeoutId;\n const root = getDocumentElement(element);\n function cleanup() {\n var _io;\n clearTimeout(timeoutId);\n (_io = io) == null || _io.disconnect();\n io = null;\n }\n function refresh(skip, threshold) {\n if (skip === void 0) {\n skip = false;\n }\n if (threshold === void 0) {\n threshold = 1;\n }\n cleanup();\n const elementRectForRootMargin = element.getBoundingClientRect();\n const {\n left,\n top,\n width,\n height\n } = elementRectForRootMargin;\n if (!skip) {\n onMove();\n }\n if (!width || !height) {\n return;\n }\n const insetTop = floor(top);\n const insetRight = floor(root.clientWidth - (left + width));\n const insetBottom = floor(root.clientHeight - (top + height));\n const insetLeft = floor(left);\n const rootMargin = -insetTop + \"px \" + -insetRight + \"px \" + -insetBottom + \"px \" + -insetLeft + \"px\";\n const options = {\n rootMargin,\n threshold: max(0, min(1, threshold)) || 1\n };\n let isFirstUpdate = true;\n function handleObserve(entries) {\n const ratio = entries[0].intersectionRatio;\n if (ratio !== threshold) {\n if (!isFirstUpdate) {\n return refresh();\n }\n if (!ratio) {\n // If the reference is clipped, the ratio is 0. Throttle the refresh\n // to prevent an infinite loop of updates.\n timeoutId = setTimeout(() => {\n refresh(false, 1e-7);\n }, 1000);\n } else {\n refresh(false, ratio);\n }\n }\n if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {\n // It's possible that even though the ratio is reported as 1, the\n // element is not actually fully within the IntersectionObserver's root\n // area anymore. This can happen under performance constraints. This may\n // be a bug in the browser's IntersectionObserver implementation. To\n // work around this, we compare the element's bounding rect now with\n // what it was at the time we created the IntersectionObserver. If they\n // are not equal then the element moved, so we refresh.\n refresh();\n }\n isFirstUpdate = false;\n }\n\n // Older browsers don't support a `document` as the root and will throw an\n // error.\n try {\n io = new IntersectionObserver(handleObserve, {\n ...options,\n // Handle