@rededor/cura 1.5.1 → 1.6.0-alpha.1

package/dist/components/cura-checkbox.js

@@ -159,7 +159,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: 'c589b642a730e09b8d5ba60b69b45f131560ffda' }, h("div", { key: '85ee55dc52042e513e070d68af348dc78d1990e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '59e78d3b717b0bbd77d98da09ab7f1da30d02f14', class: "info" }, h("div", { key: '64d683966633a625e7e477fcf1b00364d5fd3fa7', class: "label-wrapper" }, h("cura-label", { key: '76d34006ffd837285cb899278f759d95862097c5', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '01394587736d7402d5c6729e9f7e93f7b08ad742', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'fcbbea9a05b9299a814111ea36d7412df6f54e92', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '99c46ed2eb8492cbebb114d828935f1ec0bf7796' }))), h("div", { key: '6291780f613af4e320c486b46697df6f19bdce0e', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'b922e6498ecfd28391843cdfa45c850f045f3ab6', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '8c4fdab5276ff9eb200299a5584ac8e96ef11974' }, h("div", { key: '3074370b481f50e7c3b8183e1aa643a37992f05b', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'adb656d2d5dc3212735c427e08c7d03d8c94f83e', class: "info" }, h("div", { key: '55747701dd4ed57a6ed3132d996639219ba950e1', class: "label-wrapper" }, h("cura-label", { key: 'b5224ec0a274789c03f6b8e0a5c5ed7fda911c58', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '188a2ed6c915cec53d495edd77ec2dd88fafe714', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '6b63e628f4aeb066dc73feaca720edb12dc207f1', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '880c28c63878169f84a14c96d12c925edc3611bb' }))), h("div", { key: '01dd5e638a5043c4349193c97dd7acfe57dc4498', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '5ff82da2b58e7bd88f2866a2677151fb49814b3c', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/cura-display.js

@@ -67,7 +67,7 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '01876449797c600a4fa37c9b4addd80855e6fc83', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '7e0a43f434bce1797cebbe4d6d2565e64d64bab7', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-dropdown-search-category.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraDropdownSearchCategory extends Components.CuraDropdownSearchCategory, HTMLElement {}
+export const CuraDropdownSearchCategory: {
+    prototype: CuraDropdownSearchCategory;
+    new (): CuraDropdownSearchCategory;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-dropdown-search-category.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './cura-heading2.js';
+
+const curaDropdownSearchCategoryCss = ":host{display:block;box-sizing:border-box}:host .component-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;min-height:calc(var(--cura-spacing-base) * 10px);padding:0 calc(var(--cura-spacing-base) * 1px);border-bottom:1px solid var(--neutral-light);padding:calc(var(--cura-spacing-base) * 3px) 0}:host(:last-child) .component-container{border-bottom:none !important}";
+const CuraDropdownSearchCategoryStyle0 = curaDropdownSearchCategoryCss;
+
+const CuraDropdownSearchCategory$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchCategory extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.styles = {};
+        this.theme = window.CuraAPI.theme;
+    }
+    connectedCallback() {
+        this.styles = {
+            '--neutral-light': this.theme.colors.getColor('neutral-light')
+        };
+    }
+    render() {
+        return (h(Host, { key: '511391a8c6c1c998b04e3093838173ae76549715' }, h("div", { key: '63da720bb3d2cc354ef5f1e9ceaf0f2f9c396f4e', class: "component-container", style: this.styles }, h("cura-heading", { key: 'ba003607e581d4abaf2e6d617f94e3174d04a4b3', size: 'xsmall', weight: 'bold', color: 'neutral-dark', marginBlock: '0', lineHeight: '1em' }, h("slot", { key: '80b14ff99b42a64082895db81b4dbe78cd7545a3' })))));
+    }
+    static get style() { return CuraDropdownSearchCategoryStyle0; }
+}, [1, "cura-dropdown-search-category"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-dropdown-search-category", "cura-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-dropdown-search-category":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraDropdownSearchCategory$1);
+            }
+            break;
+        case "cura-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraDropdownSearchCategory = CuraDropdownSearchCategory$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraDropdownSearchCategory, defineCustomElement };
+
+//# sourceMappingURL=cura-dropdown-search-category.js.map

package/dist/components/cura-dropdown-search-category.js.map

@@ -0,0 +1 @@
+{"file":"cura-dropdown-search-category.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,mdAAmd,CAAC;AAC1f,yCAAe,6BAA6B;;MCM/BA,4BAA0B;IALvC;;;;QAOE,WAAM,GAAG,EAAE,CAAC;QACZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;KAmB9B;IAjBC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;SAC/D,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,qEAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,KAAK,IAC7F,8DAAa,CACA,CACX,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchCategory"],"sources":["src/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.scss?tag=cura-dropdown-search-category&encapsulation=shadow","src/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/dropdown-search-options.scss';\n\n:host {\n  @include host-component();\n\n  .component-container {\n    @include component-container() {\n      padding: #{$spacing-xxxs} 0;\n    };\n  }\n}\n\n:host(:last-child) {\n  @include host-last-child();\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-category',\n  styleUrl: 'cura-dropdown-search-category.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchCategory {\n\n  styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      '--neutral-light': this.theme.colors.getColor('neutral-light')\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"component-container\" style={this.styles}>\n          <cura-heading size='xsmall' weight='bold' color='neutral-dark' marginBlock='0' lineHeight='1em'>\n            <slot></slot>\n          </cura-heading>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-dropdown-search-new.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraDropdownSearchNew extends Components.CuraDropdownSearchNew, HTMLElement {}
+export const CuraDropdownSearchNew: {
+    prototype: CuraDropdownSearchNew;
+    new (): CuraDropdownSearchNew;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-dropdown-search-new.js

@@ -0,0 +1,401 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as addBodyScrollLockClass, r as removeBodyScrollLockClass, c as checkMobile, d as defineCustomElement$4, b as checkIOS } from './cura-input-text2.js';
+import { d as defineCustomElement$6 } from './cura-button-transparent2.js';
+import { d as defineCustomElement$5 } from './cura-icon2.js';
+import { d as defineCustomElement$3 } from './cura-label2.js';
+import { d as defineCustomElement$2 } from './cura-loader-circle2.js';
+
+class FixedElementScrollBehavior {
+    constructor(hostElement, scrollableElement) {
+        this._stopPropagationEvent = (e) => {
+            if (this.scrollableElement.scrollHeight <= this.scrollableElement.clientHeight) {
+                e.preventDefault();
+            }
+            e.stopPropagation();
+        };
+        this._preventEvent = (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+        if (!hostElement || !scrollableElement) {
+            console.error("Componentes host ou scrollable não foram informados corretamente ou não existem.");
+        }
+        else {
+            this.hostElement = hostElement;
+            this.scrollableElement = scrollableElement;
+        }
+    }
+    disableScroll() {
+        this.scrollPosition = window.scrollY;
+        window.scrollTo({ top: 0, behavior: 'instant' });
+        addBodyScrollLockClass();
+        this._addEvents();
+    }
+    enableScroll() {
+        removeBodyScrollLockClass();
+        window.scrollTo({ top: this.scrollPosition, behavior: 'instant' });
+        this._removeEvents();
+    }
+    _addEvents() {
+        this.hostElement.addEventListener('wheel', this._preventEvent, { passive: false });
+        this.hostElement.addEventListener('mousewheel', this._preventEvent, { passive: false });
+        this.hostElement.addEventListener('touchmove', this._preventEvent, { passive: false });
+        this.hostElement.addEventListener('scroll', this._preventEvent, { passive: false });
+        this.scrollableElement.addEventListener('wheel', this._stopPropagationEvent, { passive: false });
+        this.scrollableElement.addEventListener('mousewheel', this._stopPropagationEvent, { passive: false });
+        this.scrollableElement.addEventListener('touchmove', this._stopPropagationEvent, { passive: false });
+        this.scrollableElement.addEventListener('scroll', this._stopPropagationEvent, { passive: false });
+    }
+    _removeEvents() {
+        this.hostElement.removeEventListener('wheel', this._preventEvent);
+        this.hostElement.removeEventListener('mousewheel', this._preventEvent);
+        this.hostElement.removeEventListener('touchmove', this._preventEvent);
+        this.hostElement.removeEventListener('scroll', this._preventEvent);
+        this.scrollableElement.removeEventListener('wheel', this._stopPropagationEvent);
+        this.scrollableElement.removeEventListener('mousewheel', this._stopPropagationEvent);
+        this.scrollableElement.removeEventListener('touchmove', this._stopPropagationEvent);
+        this.scrollableElement.removeEventListener('scroll', this._stopPropagationEvent);
+    }
+}
+
+const curaDropdownSearchNewCss = ":host{display:block;box-sizing:border-box;position:relative}:host .component-controls{display:flex;align-items:center;justify-content:center;gap:calc(var(--cura-spacing-base) * 1px)}:host .component-controls #button-back{padding:0 0 0 calc(var(--cura-spacing-base) * 3px);width:max-content}:host .component-container{box-sizing:border-box;width:100%;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:min-content 1fr}:host .component-container.zoom{position:fixed;top:0;left:0;width:100vw;background:var(--purewhite);height:var(--height);z-index:9999;overscroll-behavior:contain}:host .component-container.zoom .component-controls{border-bottom:2px solid var(--primary);padding:calc(var(--cura-spacing-base) * 3px) 0}:host .component-container.zoom.error .component-controls{border-bottom:2px solid var(--error-dark);background-color:var(--error-lighter)}:host .component-container .dropdown-container{box-sizing:border-box;width:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:calc(var(--cura-spacing-base) * 3px);overscroll-behavior:contain}:host .component-container:not(.zoom) .dropdown-container{box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));position:absolute;bottom:0;left:0;transform:translateY(100%);max-height:var(--max-height);background-color:var(--purewhite);border-radius:0px 0px calc(var(--cura-spacing-base) * 1px) calc(var(--cura-spacing-base) * 1px);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);border-right:2px solid var(--neutral-light);display:none;z-index:9997}:host .component-container:not(.zoom).dropdown-visible ::part(cura-input-field){border-radius:4px 4px 0px 0px}:host .component-container:not(.zoom).dropdown-visible ::part(cura-input-text-helper){height:0px;overflow:hidden;margin-top:0px}:host .component-container:not(.zoom).dropdown-visible .dropdown-container{display:block}";
+const CuraDropdownSearchNewStyle0 = curaDropdownSearchNewCss;
+
+const CuraDropdownSearchNew$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchNew extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.termchange = createEvent(this, "termchange", 7);
+        this.optionselect = createEvent(this, "optionselect", 7);
+        this.resizeTimeoutMs = 66;
+        this.focusTimeoutMs = 300;
+        this.blurTimeoutMs = 300;
+        this.highlightedIndex = -1;
+        this.dropdownSelectableItems = [];
+        this.handleSlotChange = () => { this.getSlotElements(); };
+        this.handleWindowResize = () => {
+            if (this.resizeTimeout)
+                clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = setTimeout(() => {
+                this.isMobile = checkMobile();
+                this.setZoomHeight();
+            }, this.resizeTimeoutMs);
+        };
+        this.handleFocus = () => {
+            if (this.focusTimeout)
+                clearTimeout(this.focusTimeout);
+            this.focusTimeout = setTimeout(() => {
+                this.isOnFocus = true;
+                this.clearHighlight();
+                if (this.isMobile && !this.zoomState)
+                    this.enterZoom();
+                if (this.zoomState)
+                    this.setZoomHeight();
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.selectedOptionElement) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
+                }, 10);
+            }, this.focusTimeoutMs);
+        };
+        this.handleBlur = () => {
+            if (this.blurTimeout)
+                clearTimeout(this.blurTimeout);
+            this.blurTimeout = setTimeout(() => {
+                if (this.zoomState) {
+                    const delay = checkIOS ? 500 : 100;
+                    setTimeout(() => this.setZoomHeight(), delay);
+                }
+                this.isOnFocus = false;
+            }, this.blurTimeoutMs);
+        };
+        this.handleFocusout = () => {
+            if (this.zoomState)
+                this.setZoomHeight();
+        };
+        this.handleBackClick = () => { this.exitZoom(); };
+        this.handleOptionActionClick = (ev) => {
+            this.getInputElement().setFocus();
+            this._preventEvent(ev);
+        };
+        this.handleInputClear = (ev) => {
+            this.setValue('');
+            this.clearSelectedOptions();
+            this._preventEvent(ev);
+        };
+        this.handleSelectOption = (ev) => {
+            this._selectOption(ev.detail);
+            this._preventEvent(ev);
+        };
+        this.handleInputValueChange = (ev) => {
+            this.setValue(ev.detail);
+            if (this.selectedOptionElement && ev.detail !== this.selectedOptionElement.value) {
+                this.clearSelectedOptions();
+            }
+            this._preventEvent(ev);
+        };
+        this.handleDropdownMouseOver = () => {
+            if (this.highlightedElement || this.highlightedIndex >= 0)
+                this.clearHighlight();
+        };
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'ArrowDown')
+                this.moveHighlight('next');
+            if (ev.key === 'ArrowUp')
+                this.moveHighlight('prev');
+            if (ev.key === 'Enter')
+                this.selectHighlight();
+        };
+        this.getInputElement = () => { var _a; return (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('cura-input-text'); };
+        this._preventEvent = (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+        this.name = undefined;
+        this.size = 'large';
+        this.status = 'default';
+        this.disabled = false;
+        this.required = false;
+        this.placeholder = '';
+        this.label = '';
+        this.icon = 'search';
+        this.maxheight = '400px';
+        this.value = '';
+        this.searchdelay = 400;
+        this.searchminchars = 3;
+        this.styles = {};
+        this.zoomState = false;
+        this.isOnFocus = false;
+        this.dropdownItems = [];
+    }
+    /**
+     * Set focus to input field.
+     */
+    async setFocus() {
+        this.getInputElement().setFocus();
+    }
+    /**
+     * Select by optionid property of a selectable option component.
+     */
+    async selectOption(optionid) {
+        this._selectOption(optionid);
+    }
+    connectedCallback() {
+        this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.breakpoints = window.CuraAPI.theme.breakpoints.get();
+        this.styles['--info'] = window.CuraAPI.theme.colors.getColor('info-base');
+        this.styles['--purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');
+        this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');
+        this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');
+        this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);
+        this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');
+        this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');
+        this.styles['--primary'] = window.CuraAPI.theme.colors.getColor('primary');
+        this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+        this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+        this.styles['--font-weight-medium'] = this.weights.medium;
+        window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.handleWindowResize);
+        window === null || window === void 0 ? void 0 : window.addEventListener('orientationchange', this.handleWindowResize);
+        this.isMobile = checkMobile();
+    }
+    componentDidLoad() {
+        var _a;
+        this.dropdownElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-container');
+        this.host.addEventListener('actionclick', this.handleOptionActionClick);
+        this.host.addEventListener('selectoption', this.handleSelectOption);
+        this.scrollBehavior = new FixedElementScrollBehavior(this.host, this.dropdownElement);
+        setTimeout(() => this.getSlotElements(), 10);
+    }
+    disconnectedCallback() {
+        window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.handleWindowResize);
+        window === null || window === void 0 ? void 0 : window.removeEventListener('orientationchange', this.handleWindowResize);
+    }
+    moveHighlight(direction) {
+        if (!this.dropdownSelectableItems.length)
+            return;
+        let position = direction === 'next' ? this.highlightedIndex + 1 : this.highlightedIndex - 1;
+        if (position < 0) {
+            this.clearHighlight();
+            return;
+        }
+        if (position > this.dropdownSelectableItems.length - 1)
+            position = this.dropdownSelectableItems.length - 1;
+        if (this.highlightedElement)
+            this.highlightedElement.highlighted = false;
+        this.highlightedIndex = position;
+        this.highlightedElement = this.dropdownSelectableItems[position];
+        if (this.highlightedElement.selected) {
+            this.moveHighlight(direction);
+            return;
+        }
+        this.highlightedElement.highlighted = true;
+        this.highlightedElement.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
+    }
+    clearHighlight() {
+        if (this.highlightedElement) {
+            this.highlightedElement.highlighted = false;
+            this.highlightedElement = null;
+        }
+        this.highlightedIndex = -1;
+    }
+    selectHighlight() {
+        if (this.highlightedElement) {
+            this._selectOption(this.highlightedElement.optionid);
+            this.clearHighlight();
+            this.getInputElement().blur();
+        }
+    }
+    setValue(value) {
+        if (this.value !== value) {
+            this.value = value;
+            if (this.valueTimeout)
+                clearTimeout(this.valueTimeout);
+            this.valueTimeout = setTimeout(() => {
+                this.termchange.emit(this.value === '' || this.value.length < this.searchminchars ? '' : this.value);
+            }, this.searchdelay || 300);
+        }
+    }
+    _selectOption(optionid) {
+        if (!optionid) {
+            this.clearSelectedOptions();
+            this.setValue('');
+            return;
+        }
+        const optionElement = this.dropdownSelectableItems.find(option => option.optionid === optionid);
+        if (optionElement && !optionElement.selected) {
+            this.clearSelectedOptions();
+            this.selectedOptionElement = optionElement;
+            this.selectedOptionElement.selected = true;
+            this.setValue(this.selectedOptionElement.value);
+            this.optionselect.emit(this.selectedOptionElement.optionid);
+            if (this.zoomState)
+                setTimeout(() => this.exitZoom(), this.blurTimeoutMs);
+        }
+    }
+    clearSelectedOptions() {
+        this.dropdownSelectableItems.forEach(option => {
+            if (option.selected)
+                option.selected = false;
+        });
+        this.selectedOptionElement = null;
+    }
+    getSlotElements() {
+        const elements = [];
+        const selectable = [];
+        let hasNotFound = false;
+        if (this.dropdownElement) {
+            this.dropdownElement
+                .querySelector('slot')
+                .assignedElements()
+                .forEach(item => {
+                elements.push(item);
+                if (item.localName === 'cura-dropdown-search-option-new' && item["selectable"])
+                    selectable.push(item);
+                if (item.localName === 'cura-dropdown-search-not-found')
+                    hasNotFound = true;
+            });
+        }
+        this.dropdownSelectableItems = selectable;
+        this.dropdownItems = elements;
+        if (hasNotFound)
+            this.status = 'error';
+    }
+    enterZoom() {
+        this.scrollBehavior.disableScroll();
+        this.setZoomHeight();
+        this.zoomState = true;
+    }
+    exitZoom() {
+        this.scrollBehavior.enableScroll();
+        this.setZoomHeight();
+        this.zoomState = false;
+    }
+    setZoomHeight() {
+        var _a;
+        const h = window ? `${((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight}px` : '100vh';
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--height': h });
+    }
+    getClasses() {
+        return {
+            "component-container": true,
+            "mobile": this.isMobile,
+            "zoom": this.zoomState,
+            "dropdown-visible": this.isOnFocus && (this.dropdownItems.length > 0 && !this.zoomState),
+            "error": this.status === 'error'
+        };
+    }
+    getHostCSSProperties() {
+        return {
+            '--max-height': this.maxheight || '400px'
+        };
+    }
+    render() {
+        return (h(Host, { key: '1ebfc600579b7a386966dcf00cf7136085e13709', style: this.getHostCSSProperties() }, h("div", { key: '80dcb14a6abaa3128197884188ef1f1ebd08d019', class: this.getClasses(), style: this.styles }, h("div", { key: '1255e6429cad5132e46c6492e379393632d30297', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: 'e603b95729405c50726a68897d543355cb131f3f', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: 'a5a0f6df5162929eba35f75db09b2f7bf2f25636', name: "helperText" }))), h("div", { key: 'c39b6cf44904bbd755bb43791055d925ffb78d2b', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: 'd0fc526af6d27f793d195030165be8224ebd356c', onSlotchange: () => this.handleSlotChange() })))));
+    }
+    get host() { return this; }
+    static get style() { return CuraDropdownSearchNewStyle0; }
+}, [1, "cura-dropdown-search-new", {
+        "name": [513],
+        "size": [513],
+        "status": [1537],
+        "disabled": [516],
+        "required": [516],
+        "placeholder": [513],
+        "label": [513],
+        "icon": [513],
+        "maxheight": [513],
+        "value": [1025],
+        "searchdelay": [514],
+        "searchminchars": [514],
+        "styles": [32],
+        "zoomState": [32],
+        "isOnFocus": [32],
+        "dropdownItems": [32],
+        "setFocus": [64],
+        "selectOption": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-dropdown-search-new", "cura-button-transparent", "cura-icon", "cura-input-text", "cura-label", "cura-loader-circle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-dropdown-search-new":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraDropdownSearchNew$1);
+            }
+            break;
+        case "cura-button-transparent":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "cura-input-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-loader-circle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraDropdownSearchNew = CuraDropdownSearchNew$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraDropdownSearchNew, defineCustomElement };
+
+//# sourceMappingURL=cura-dropdown-search-new.js.map

package/dist/components/cura-dropdown-search-new.js.map

@@ -0,0 +1 @@
+{"file":"cura-dropdown-search-new.js","mappings":"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","names":["CuraDropdownSearchNew"],"sources":["src/utils/FixedElementScrollBehavior.ts","src/components/cura-dropdown-search-new/cura-dropdown-search-new.scss?tag=cura-dropdown-search-new&encapsulation=shadow","src/components/cura-dropdown-search-new/cura-dropdown-search-new.tsx"],"sourcesContent":["import { addBodyScrollLockClass, removeBodyScrollLockClass } from './utils';\n\nexport class FixedElementScrollBehavior {\n\n  hostElement: any;\n  scrollableElement: any;\n  scrollPosition: number;\n\n  constructor(hostElement: any, scrollableElement: any) {\n    if( !hostElement || !scrollableElement ) {\n      console.error(\"Componentes host ou scrollable não foram informados corretamente ou não existem.\");\n    } else {\n      this.hostElement = hostElement;\n      this.scrollableElement = scrollableElement;\n    }\n  }\n\n  disableScroll() {\n    this.scrollPosition = window.scrollY;\n    window.scrollTo({ top: 0, behavior: 'instant' });\n    addBodyScrollLockClass();\n    this._addEvents();\n  }\n\n  enableScroll() {\n    removeBodyScrollLockClass();\n    window.scrollTo({ top: this.scrollPosition, behavior: 'instant' });\n    this._removeEvents();\n  }\n\n  _addEvents() {\n    this.hostElement.addEventListener('wheel', this._preventEvent, {passive: false});\n    this.hostElement.addEventListener('mousewheel', this._preventEvent, {passive: false});\n    this.hostElement.addEventListener('touchmove', this._preventEvent, {passive: false});\n    this.hostElement.addEventListener('scroll', this._preventEvent, {passive: false});\n    this.scrollableElement.addEventListener('wheel', this._stopPropagationEvent, {passive: false});\n    this.scrollableElement.addEventListener('mousewheel', this._stopPropagationEvent, {passive: false});\n    this.scrollableElement.addEventListener('touchmove', this._stopPropagationEvent, {passive: false});\n    this.scrollableElement.addEventListener('scroll', this._stopPropagationEvent, {passive: false});\n  }\n\n  _removeEvents() {\n    this.hostElement.removeEventListener('wheel', this._preventEvent);\n    this.hostElement.removeEventListener('mousewheel', this._preventEvent);\n    this.hostElement.removeEventListener('touchmove', this._preventEvent);\n    this.hostElement.removeEventListener('scroll', this._preventEvent);\n    this.scrollableElement.removeEventListener('wheel', this._stopPropagationEvent);\n    this.scrollableElement.removeEventListener('mousewheel', this._stopPropagationEvent);\n    this.scrollableElement.removeEventListener('touchmove', this._stopPropagationEvent);\n    this.scrollableElement.removeEventListener('scroll', this._stopPropagationEvent);\n  }\n\n  _stopPropagationEvent = (e: Event) => {\n    if( this.scrollableElement.scrollHeight <= this.scrollableElement.clientHeight ) {\n      e.preventDefault();\n    }\n    e.stopPropagation();\n  }\n\n  _preventEvent = (ev: Event) => {\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n}","@import '../../scss/mixins/spacing.scss';\n@import '../../scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  position: relative;\n\n  .component-controls {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: #{$spacing-tiny};\n\n    #button-back {\n      padding: 0 0 0 #{$spacing-xxxs};\n      width: max-content;\n    }\n  }\n\n  .component-container {\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n    display: grid;\n    grid-template-columns: 1fr;\n    grid-template-rows: min-content 1fr;\n\n    &.zoom {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100vw;\n      background: var(--purewhite);\n      height: var(--height);\n      z-index: 9999;\n      overscroll-behavior: contain;\n\n      .component-controls {\n        border-bottom: 2px solid var(--primary);\n        padding: #{$spacing-xxxs} 0;\n      }\n\n      &.error .component-controls {\n        border-bottom: 2px solid var(--error-dark);\n        background-color: var(--error-lighter);\n      }\n    }\n\n    .dropdown-container {\n      box-sizing: border-box;\n      width: 100%;\n      overflow-y: auto;\n      overflow-x: hidden;\n      display: flex;\n      flex-direction: column;\n      padding: #{$spacing-xxxs};\n      overscroll-behavior: contain;\n    }\n\n    &:not(.zoom) {\n      .dropdown-container {\n        @include shadow-level3(--neutral-black-shadow);\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        transform: translateY(100%);\n        max-height: var(--max-height);\n        background-color: var(--purewhite);\n        border-radius: 0px 0px #{$spacing-tiny} #{$spacing-tiny};\n        border-bottom: 2px solid var(--neutral-light);\n        border-left: 2px solid var(--neutral-light);\n        border-right: 2px solid var(--neutral-light);\n        display: none;\n        z-index: 9997;\n      }\n\n      &.dropdown-visible {\n        ::part(cura-input-field) {\n          border-radius: 4px 4px 0px 0px;\n        }\n        ::part(cura-input-text-helper) {\n          height: 0px;\n          overflow: hidden;\n          margin-top: 0px;\n        }\n        .dropdown-container {\n          display: block;\n        }\n      }\n    }\n\n  }\n\n}\n","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\nimport { checkMobile, checkIOS } from '../../utils/utils';\nimport { FixedElementScrollBehavior } from '../../utils/FixedElementScrollBehavior';\n\n@Component({\n  tag: 'cura-dropdown-search-new',\n  styleUrl: 'cura-dropdown-search-new.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchNew {\n  @Element() host: HTMLElement;\n  /**\n   * Name of the field.\n   * Required.\n   */\n  @Prop({ reflect: true }) name!: string;\n  /**\n   * Size of the dropdown search component\n   * Values: 'small', 'medium' or 'large' (default).\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' | string = 'large';\n  /**\n   * Define component status.\n   * Values: 'error' or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'default' | string = 'default';\n  /**\n   * Disabled state. Default: false.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Field is required. Default: false.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * The placeholder text.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n  /**\n   * The label.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) icon: string = 'search';\n  /**\n   * CSS max-height property for dropdown item.\n   * Can also be used by css property --max-height.\n   * Default: 400px\n   */\n  @Prop({ reflect: true }) maxheight: string = '400px';\n  /**\n   * Readonly property value.\n   * Represents the term on the search input field.\n   */\n  @Prop({ mutable: true }) value: string = '';\n  /**\n   * Delay in milliseconds to dispatch search events.\n   * Default: 400\n   */\n  @Prop({ reflect: true }) searchdelay: number = 400;\n  /**\n   * Min chars to dispatch search events.\n   * Default: 3\n   */\n  @Prop({ reflect: true }) searchminchars: number = 3;\n\n  /**\n   * Set focus to input field.\n   */\n  @Method()\n  async setFocus() {\n    this.getInputElement().setFocus();\n  }\n  /**\n   * Select by optionid property of a selectable option component.\n   */\n  @Method()\n  async selectOption(optionid: string) {\n    this._selectOption(optionid);\n  }\n\n  @Event() termchange: EventEmitter<string>;\n  @Event() optionselect: EventEmitter<string>;\n\n  @State() styles = {};\n  @State() zoomState = false;\n  @State() isOnFocus: boolean = false;\n\n  scrollBehavior: FixedElementScrollBehavior;\n\n  weights: any;\n  breakpoints: any;\n  isMobile: boolean;\n\n  resizeTimeout: any;\n  resizeTimeoutMs = 66;\n  focusTimeout: any;\n  focusTimeoutMs = 300;\n  blurTimeout: any;\n  blurTimeoutMs = 300;\n  valueTimeout: any;\n\n  dropdownElement: HTMLDivElement;\n  selectedOptionElement: any;\n  highlightedElement: any;\n  highlightedIndex: number = -1;\n  @State() dropdownItems = [];\n  dropdownSelectableItems = [];\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.breakpoints = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--info'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n    this.styles['--primary'] = window.CuraAPI.theme.colors.getColor('primary');\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    window?.addEventListener('resize', this.handleWindowResize);\n    window?.addEventListener('orientationchange', this.handleWindowResize);\n    this.isMobile = checkMobile();\n  }\n\n  componentDidLoad() {\n    this.dropdownElement = this.host.shadowRoot?.querySelector('.dropdown-container');\n    this.host.addEventListener('actionclick', this.handleOptionActionClick);\n    this.host.addEventListener('selectoption', this.handleSelectOption);\n    this.scrollBehavior = new FixedElementScrollBehavior(this.host, this.dropdownElement);\n    setTimeout(() => this.getSlotElements(), 10);\n  }\n\n  disconnectedCallback() {\n    window?.removeEventListener('resize', this.handleWindowResize);\n    window?.removeEventListener('orientationchange', this.handleWindowResize);\n  }\n\n  handleSlotChange = () => { this.getSlotElements(); }\n\n  handleWindowResize = () => {\n    if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n    this.resizeTimeout = setTimeout(() => {\n      this.isMobile = checkMobile();\n      this.setZoomHeight();\n    }, this.resizeTimeoutMs);\n  }\n\n  handleFocus = () => {\n    if (this.focusTimeout) clearTimeout(this.focusTimeout);\n    this.focusTimeout = setTimeout(() => {\n      this.isOnFocus = true;\n      this.clearHighlight();\n      if (this.isMobile && !this.zoomState) this.enterZoom();\n      if (this.zoomState) this.setZoomHeight();\n      setTimeout(() => {\n          this.selectedOptionElement?.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest'});\n      }, 10);\n    }, this.focusTimeoutMs);\n  }\n\n  handleBlur = () => {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.zoomState) {\n        const delay = checkIOS ? 500 : 100;\n        setTimeout(() => this.setZoomHeight(), delay);\n      }\n      this.isOnFocus = false;\n    }, this.blurTimeoutMs);\n  }\n\n  handleFocusout = () => {\n    if( this.zoomState ) this.setZoomHeight();\n  }\n\n  handleBackClick = () => { this.exitZoom(); }\n\n  handleOptionActionClick = (ev: CustomEvent) => {\n    this.getInputElement().setFocus();\n    this._preventEvent(ev);\n  }\n\n  handleInputClear = (ev: CustomEvent) => {\n    this.setValue('');\n    this.clearSelectedOptions();\n    this._preventEvent(ev);\n  }\n\n  handleSelectOption = (ev: CustomEvent) => {\n    this._selectOption(ev.detail);\n    this._preventEvent(ev);\n  }\n\n  handleInputValueChange = (ev: CustomEvent) => {\n    this.setValue(ev.detail);\n    if( this.selectedOptionElement && ev.detail !== this.selectedOptionElement.value) {\n      this.clearSelectedOptions();\n    }\n    this._preventEvent(ev);\n  }\n\n  handleDropdownMouseOver = () => {\n    if( this.highlightedElement || this.highlightedIndex >= 0 ) this.clearHighlight();\n  }\n\n  handleKeyDown = (ev: KeyboardEvent) => {\n    if( ev.key === 'ArrowDown' ) this.moveHighlight('next');\n    if( ev.key === 'ArrowUp' ) this.moveHighlight('prev');\n    if( ev.key === 'Enter' ) this.selectHighlight();\n  }\n\n  moveHighlight(direction: 'next' | 'prev') {\n    if (!this.dropdownSelectableItems.length) return;\n    let position = direction === 'next' ? this.highlightedIndex + 1 : this.highlightedIndex - 1;\n    if( position < 0) {\n      this.clearHighlight();\n      return;\n    }\n    if( position > this.dropdownSelectableItems.length - 1 ) position = this.dropdownSelectableItems.length - 1;\n    if( this.highlightedElement ) this.highlightedElement.highlighted = false;\n    this.highlightedIndex = position;\n    this.highlightedElement = this.dropdownSelectableItems[position];\n    if( this.highlightedElement.selected ) {\n      this.moveHighlight(direction);\n      return;\n    }\n    this.highlightedElement.highlighted = true;\n    this.highlightedElement.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest' });\n  }\n\n  clearHighlight() {\n    if( this.highlightedElement ) {\n      this.highlightedElement.highlighted = false;\n      this.highlightedElement = null;\n    }\n    this.highlightedIndex = -1;\n  }\n\n  selectHighlight() {\n    if( this.highlightedElement ) {\n      this._selectOption(this.highlightedElement.optionid);\n      this.clearHighlight();\n      this.getInputElement().blur();\n    }\n  }\n\n  setValue(value: string) {\n    if (this.value !== value) {\n      this.value = value;\n      if( this.valueTimeout) clearTimeout(this.valueTimeout);\n      this.valueTimeout = setTimeout(() => {\n        this.termchange.emit(this.value === '' || this.value.length < this.searchminchars ? '' : this.value);\n      }, this.searchdelay || 300);\n    }\n  }\n\n  _selectOption(optionid: string) {\n    if (!optionid) {\n      this.clearSelectedOptions();\n      this.setValue('');\n      return;\n    }\n    const optionElement = this.dropdownSelectableItems.find(option => option.optionid === optionid);\n    if( optionElement && !optionElement.selected ) {\n      this.clearSelectedOptions();\n      this.selectedOptionElement = optionElement;\n      this.selectedOptionElement.selected = true;\n      this.setValue(this.selectedOptionElement.value);\n      this.optionselect.emit(this.selectedOptionElement.optionid);\n      if (this.zoomState) setTimeout(() => this.exitZoom(), this.blurTimeoutMs);\n    }\n  }\n\n  clearSelectedOptions() {\n    this.dropdownSelectableItems.forEach(option => {\n      if( option.selected ) option.selected = false;\n    });\n    this.selectedOptionElement = null;\n  }\n\n  getSlotElements()  {\n    const elements = [];\n    const selectable = [];\n    let hasNotFound = false;\n    if( this.dropdownElement ) {\n      this.dropdownElement\n        .querySelector('slot')\n        .assignedElements()\n        .forEach(item => {\n          elements.push(item);\n          if( item.localName === 'cura-dropdown-search-option-new' && item[\"selectable\"] ) selectable.push(item);\n          if( item.localName === 'cura-dropdown-search-not-found' ) hasNotFound = true;\n        });\n    }\n    this.dropdownSelectableItems = selectable;\n    this.dropdownItems = elements;\n    if( hasNotFound ) this.status = 'error';\n  }\n\n\n  enterZoom() {\n    this.scrollBehavior.disableScroll();\n    this.setZoomHeight();\n    this.zoomState = true;\n  }\n\n  exitZoom() {\n    this.scrollBehavior.enableScroll();\n    this.setZoomHeight();\n    this.zoomState = false;\n  }\n\n  getInputElement = () => this.host.shadowRoot?.querySelector('cura-input-text');\n\n  setZoomHeight() {\n    const h = window ? `${window.visualViewport?.height || window.innerHeight}px` : '100vh';\n    this.styles = { ...this.styles, '--height': h };\n  }\n\n  getClasses() {\n    return {\n      \"component-container\": true,\n      \"mobile\": this.isMobile,\n      \"zoom\": this.zoomState,\n      \"dropdown-visible\": this.isOnFocus && (this.dropdownItems.length > 0 && !this.zoomState),\n      \"error\": this.status === 'error'\n    }\n  }\n\n  _preventEvent = (ev: Event) => {\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  getHostCSSProperties() {\n    return {\n      '--max-height': this.maxheight || '400px'\n    };\n  }\n\n  render() {\n    return (\n      <Host style={ this.getHostCSSProperties() }>\n        <div class={ this.getClasses() } style={ this.styles }>\n          <div class=\"component-controls\">\n            { this.isMobile && this.zoomState ? (\n              <cura-button-transparent\n                fontColor=\"dark\"\n                onClick={ () => this.handleBackClick() }\n                iconName=\"arrowLeft\"\n                size=\"large\"\n                iconOnly\n                color=\"primary\"\n                id=\"button-back\">\n              </cura-button-transparent>\n            ) : '' }\n            <cura-input-text\n              disabled={ this.disabled }\n              label={ this.label }\n              part=\"cura-input-field\"\n              mode={ this.zoomState ? 'transparent' : 'default' }\n              required={ this.required }\n              iconName={ this.icon || 'search' }\n              value={ this.value }\n              status={ this.status }\n              onValueChange={ (ev) => this.handleInputValueChange(ev) }\n              onInput={ (ev) => this._preventEvent(ev) }\n              onFocus={ () => this.handleFocus() }\n              onClick={ (ev) => this._preventEvent(ev) }\n              onBlur={ () => this.handleBlur() }\n              onFocusout={ () => this.handleFocusout() }\n              onInputClear={ (ev) => this.handleInputClear(ev) }\n              placeholder={ this.placeholder }\n              size={ this.size }\n              onKeyDown={ (ev) => this.handleKeyDown(ev) }\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div class=\"dropdown-container\" onMouseOver={ () => this.handleDropdownMouseOver() }>\n            <slot onSlotchange={ () => this.handleSlotChange() }></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-dropdown-search-not-found.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraDropdownSearchNotFound extends Components.CuraDropdownSearchNotFound, HTMLElement {}
+export const CuraDropdownSearchNotFound: {
+    prototype: CuraDropdownSearchNotFound;
+    new (): CuraDropdownSearchNotFound;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-dropdown-search-not-found.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './cura-heading2.js';
+
+const curaDropdownSearchNotFoundCss = ":host{display:block;box-sizing:border-box}:host .component-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;min-height:calc(var(--cura-spacing-base) * 10px);padding:0 calc(var(--cura-spacing-base) * 1px);border-bottom:1px solid var(--neutral-light);border-bottom:none;cursor:default}:host .component-container cura-heading{--margin-block:0 !important;flex:1}";
+const CuraDropdownSearchNotFoundStyle0 = curaDropdownSearchNotFoundCss;
+
+const CuraDropdownSearchNotFound$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchNotFound extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.actionclick = createEvent(this, "actionclick", 7);
+        this.handleClick = (ev) => {
+            this.actionclick.emit();
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+    }
+    render() {
+        return (h(Host, { key: '899559f0e05394638cd9c6dd61897383453ed176' }, h("div", { key: '0b1ed35b82f1df7feac928ab84e08149a38a79a3', class: "component-container", onClick: this.handleClick }, h("cura-heading", { key: '49f423b01e6719790bf7f3bcda6f3239042c0c9f', size: "xsmall", weight: "bold", color: "error-dark" }, h("slot", { key: '4fbcfb5602729f92f84a22d003d5b2e66e481b6c' })))));
+    }
+    static get style() { return CuraDropdownSearchNotFoundStyle0; }
+}, [1, "cura-dropdown-search-not-found"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-dropdown-search-not-found", "cura-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-dropdown-search-not-found":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraDropdownSearchNotFound$1);
+            }
+            break;
+        case "cura-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraDropdownSearchNotFound = CuraDropdownSearchNotFound$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraDropdownSearchNotFound, defineCustomElement };
+
+//# sourceMappingURL=cura-dropdown-search-not-found.js.map