@rededor/cura 1.6.0-alpha.4 → 1.6.0

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.stories.js

@@ -1,218 +0,0 @@
-import iconNames from "../../../assets/icons/iconset-default-list";
-const storybookUrl = `${window.location.origin}`;
-const renderCuraDropdownSearch = (args) => {
-    return `<cura-dropdown-search
-    style="height: 400px;"
-    size="${args.size}"
-    status="${args.status}"
-    name="${args.name}"
-    icon-name="${args.iconName}"
-    required="${args.required}"
-    selected="${args.selected}"
-    value="${args.value}"
-    placeholder="${args.placeholder}"
-    label="${args.label}"${args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px'
-        ? `
-    dropdown-max-height="${args.dropdownMaxHeight}"`
-        : ''}>
-    ${args.helperText ? `<span slot="helperText">${args.helperText}</span>` : ''}
-    <cura-dropdown-search-option-title>Mais Buscados</cura-dropdown-search-option-title>
-    ${args.options
-        .map(option => `<cura-dropdown-search-option value="${option.value}"${option.selectable === false ? ` selectable="false"` : ''}>
-    ${option.image ? `  <div slot="image">${option.image}</div>` : ''}
-      ${option.content}
-    ${option.action
-        ? `  <div slot="action">
-        ${option.action}
-      </div>`
-        : ''}
-     </cura-dropdown-search-option>
-     `)
-        .join('')}
-  </cura-dropdown-search>`;
-};
-export default {
-    title: 'Componentes/DropdownSearch/DropDownSearch',
-    tags: ['autodocs'],
-    parameters: {
-        docs: {
-            description: {
-                component: `<cura-paragraph size="small">
-
-        O \`cura-dropdown-search\` é um componente para busca rápida entre opções, com suporte a ícones, avatares, e ações customizáveis. Ele é responsivo e seu layout é ajustado dependendo do tamanho da tela.
-        <br/><br/>
-
-        Em dispositivos móveis, o componente abre em modo full-screen, facilitando a navegação e seleção de opções. Você pode visualizar esse comportamento abrindo o story dele
-       [aqui](${storybookUrl}/?path=/story/componentes-dropdownsearch-dropdownsearch--dropdown-search) e ajustando o tamanho da sua tela.
-
-      </cura-paragraph>`,
-            },
-        },
-    },
-    render: args => {
-        return renderCuraDropdownSearch(args);
-    },
-    argTypes: {
-        status: {
-            control: { type: 'inline-radio' },
-            options: ['default', 'error'],
-            description: 'Status do dropdown.',
-            table: {
-                category: 'Properties',
-                defaultValue: { summary: 'default' },
-            },
-        },
-        name: {
-            control: 'text',
-            description: 'Nome do dropdown.',
-            required: false,
-            table: {
-                category: 'Properties',
-            },
-        },
-        size: {
-            control: { type: 'inline-radio' },
-            options: ['small', 'medium', 'large'],
-            description: "Tamanho do componente. Pode ser 'small', 'medium' ou 'large'.",
-            table: {
-                category: 'Properties',
-                defaultValue: { summary: 'large' },
-            },
-        },
-        iconName: {
-            control: { type: 'select' },
-            options: ['', ...iconNames],
-            description: 'Nome do ícone no iconset a ser utilizado.',
-            table: {
-                category: 'Icons',
-            },
-            name: 'icon-name',
-        },
-        required: {
-            control: 'boolean',
-            description: 'Define se o campo é obrigatório.',
-            table: {
-                category: 'Properties',
-                defaultValue: { summary: false },
-            },
-        },
-        value: {
-            control: 'text',
-            description: 'Valor atual do campo de busca.',
-            table: {
-                category: 'Properties',
-            },
-        },
-        placeholder: {
-            control: 'text',
-            description: 'Texto do placeholder.',
-            required: false,
-            table: {
-                category: 'Properties',
-            },
-        },
-        label: {
-            control: 'text',
-            description: 'Texto da label do input.',
-            required: false,
-            table: {
-                category: 'Properties',
-            },
-        },
-        dropdownMaxHeight: {
-            control: 'text',
-            description: 'Altura máxima para o dropdown.',
-            table: {
-                category: 'Properties',
-                defaultValue: { summary: '630px' },
-            },
-            name: 'dropdown-max-height',
-        },
-        helperText: {
-            control: 'text',
-            description: 'Texto de ajuda para o dropdown.',
-            table: {
-                category: 'Slots',
-            },
-        },
-        oninput: {
-            control: 'none',
-            description: 'Evento via Listener quando o estado do value do dropdown é alterado',
-            table: {
-                category: 'Events',
-            },
-        },
-        options: {
-            control: { type: 'object' },
-            description: 'Um slot name=dropdown-search-option para herdar as opções do dropdown. Pensado para usar o componente `<cura-dropdown-search-option>`',
-            table: {
-                category: 'Slots',
-                defaultValue: { summary: [] },
-            },
-        },
-    },
-};
-export const DropdownSearch = {
-    args: {
-        size: 'large',
-        status: 'default',
-        name: 'cura-dropdown',
-        iconName: '',
-        required: false,
-        value: '',
-        placeholder: 'Faça a sua busca',
-        label: 'Busca',
-        dropdownMaxHeight: '630px',
-        helperText: 'Digite o que você deseja buscar.',
-        options: [
-            {
-                value: 'Clinica Médica Geral',
-                image: '<cura-icon size="24" name="medical"></cura-icon>',
-                content: 'Clinica Médica Geral',
-                action: `<cura-button-transparent font-color="dark" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,
-            },
-            {
-                value: 'Dora Martins de Souza',
-                image: '<cura-avatar size="32" imageSrc=""></cura-avatar>',
-                content: `Not Selectable Dora Martins de Souza
-        <cura-paragraph color="neutral-dark" margin-block="0" size="xsmall">Ortopedista Cirúrgico</cura-paragraph>`,
-                action: '',
-                selectable: false,
-            },
-            {
-                value: 'Copa D’Or - Centro Cardiológico',
-                image: `
-        <div slot="image">
-          <div
-            style="
-              display: flex;
-              align-content: center;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-              letter-spacing: 0.72px;
-              width: 32px;
-              height: 32px;
-              border-radius: 4px;
-              background-color: #E9E9E9;
-            "
-          >
-            <cura-label size="xsmall" margin-block="0" lineHeight="0" color="neutral-black" weight="bold">
-              1 <br />
-              KM
-            </cura-label>
-          </div>
-        </div>
-      `,
-                content: `<div style="line-height='0';">
-          Copa D’Or - Centro Cardiológico
-            <cura-paragraph color="neutral-dark" margin-block="0" size="xsmall">
-              Rua Siqueira Campos, 93 Copacabana, Rio de Janeiro
-            </cura-paragraph>
-          </div>`,
-                action: '',
-            },
-        ],
-    },
-};
-//# sourceMappingURL=cura-dropdown-search.stories.js.map

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cura-dropdown-search.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst storybookUrl = `${window.location.origin}`;\nconst renderCuraDropdownSearch = (args: any) => {\n  return `<cura-dropdown-search\n    style=\"height: 400px;\"\n    size=\"${args.size}\"\n    status=\"${args.status}\"\n    name=\"${args.name}\"\n    icon-name=\"${args.iconName}\"\n    required=\"${args.required}\"\n    selected=\"${args.selected}\"\n    value=\"${args.value}\"\n    placeholder=\"${args.placeholder}\"\n    label=\"${args.label}\"${\n    args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px'\n      ? `\n    dropdown-max-height=\"${args.dropdownMaxHeight}\"`\n      : ''\n  }>\n    ${args.helperText ? `<span slot=\"helperText\">${args.helperText}</span>` : ''}\n    <cura-dropdown-search-option-title>Mais Buscados</cura-dropdown-search-option-title>\n    ${args.options\n      .map(\n        option => `<cura-dropdown-search-option value=\"${option.value}\"${option.selectable === false ? ` selectable=\"false\"` : ''}>\n    ${option.image ? `  <div slot=\"image\">${option.image}</div>` : ''}\n      ${option.content}\n    ${\n      option.action\n        ? `  <div slot=\"action\">\n        ${option.action}\n      </div>`\n        : ''\n    }\n     </cura-dropdown-search-option>\n     `,\n      )\n      .join('')}\n  </cura-dropdown-search>`;\n};\n\nexport default {\n  title: 'Componentes/DropdownSearch/DropDownSearch',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `<cura-paragraph size=\"small\">\n\n        O \\`cura-dropdown-search\\` é um componente para busca rápida entre opções, com suporte a ícones, avatares, e ações customizáveis. Ele é responsivo e seu layout é ajustado dependendo do tamanho da tela.\n        <br/><br/>\n\n        Em dispositivos móveis, o componente abre em modo full-screen, facilitando a navegação e seleção de opções. Você pode visualizar esse comportamento abrindo o story dele\n       [aqui](${storybookUrl}/?path=/story/componentes-dropdownsearch-dropdownsearch--dropdown-search) e ajustando o tamanho da sua tela.\n\n      </cura-paragraph>`,\n      },\n    },\n  },\n  render: args => {\n    return renderCuraDropdownSearch(args);\n  },\n  argTypes: {\n    status: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'error'],\n      description: 'Status do dropdown.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    name: {\n      control: 'text',\n      description: 'Nome do dropdown.',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: \"Tamanho do componente. Pode ser 'small', 'medium' ou 'large'.\",\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'large' },\n      },\n    },\n    iconName: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone no iconset a ser utilizado.',\n      table: {\n        category: 'Icons',\n      },\n      name: 'icon-name',\n    },\n    required: {\n      control: 'boolean',\n      description: 'Define se o campo é obrigatório.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    value: {\n      control: 'text',\n      description: 'Valor atual do campo de busca.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    placeholder: {\n      control: 'text',\n      description: 'Texto do placeholder.',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    label: {\n      control: 'text',\n      description: 'Texto da label do input.',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    dropdownMaxHeight: {\n      control: 'text',\n      description: 'Altura máxima para o dropdown.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '630px' },\n      },\n      name: 'dropdown-max-height',\n    },\n    helperText: {\n      control: 'text',\n      description: 'Texto de ajuda para o dropdown.',\n      table: {\n        category: 'Slots',\n      },\n    },\n    oninput: {\n      control: 'none',\n      description: 'Evento via Listener quando o estado do value do dropdown é alterado',\n      table: {\n        category: 'Events',\n      },\n    },\n    options: {\n      control: { type: 'object' },\n      description: 'Um slot name=dropdown-search-option para herdar as opções do dropdown. Pensado para usar o componente `<cura-dropdown-search-option>`',\n      table: {\n        category: 'Slots',\n        defaultValue: { summary: [] },\n      },\n    },\n  },\n};\n\nexport const DropdownSearch = {\n  args: {\n    size: 'large',\n    status: 'default',\n    name: 'cura-dropdown',\n    iconName: '',\n    required: false,\n    value: '',\n    placeholder: 'Faça a sua busca',\n    label: 'Busca',\n    dropdownMaxHeight: '630px',\n    helperText: 'Digite o que você deseja buscar.',\n    options: [\n      {\n        value: 'Clinica Médica Geral',\n        image: '<cura-icon size=\"24\" name=\"medical\"></cura-icon>',\n        content: 'Clinica Médica Geral',\n        action: `<cura-button-transparent font-color=\"dark\" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,\n      },\n      {\n        value: 'Dora Martins de Souza',\n        image: '<cura-avatar size=\"32\" imageSrc=\"\"></cura-avatar>',\n        content: `Not Selectable Dora Martins de Souza\n        <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">Ortopedista Cirúrgico</cura-paragraph>`,\n        action: '',\n        selectable: false,\n      },\n      {\n        value: 'Copa D’Or - Centro Cardiológico',\n        image: `\n        <div slot=\"image\">\n          <div\n            style=\"\n              display: flex;\n              align-content: center;\n              align-items: center;\n              justify-content: center;\n              text-align: center;\n              letter-spacing: 0.72px;\n              width: 32px;\n              height: 32px;\n              border-radius: 4px;\n              background-color: #E9E9E9;\n            \"\n          >\n            <cura-label size=\"xsmall\" margin-block=\"0\" lineHeight=\"0\" color=\"neutral-black\" weight=\"bold\">\n              1 <br />\n              KM\n            </cura-label>\n          </div>\n        </div>\n      `,\n        content: `<div style=\"line-height='0';\">\n          Copa D’Or - Centro Cardiológico\n            <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">\n              Rua Siqueira Campos, 93 Copacabana, Rio de Janeiro\n            </cura-paragraph>\n          </div>`,\n        action: '',\n      },\n    ],\n  },\n};\n"]}

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

@@ -1,11 +0,0 @@
-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

@@ -1,400 +0,0 @@
-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;
-        this.status = hasNotFound ? 'error' : 'default';
-    }
-    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: '10bfe6693cbad85caedd053c7804c66e16b63b9b', style: this.getHostCSSProperties() }, h("div", { key: 'b6ed23ac2bd6dd19709bb1525b88c10973382f3c', class: this.getClasses(), style: this.styles }, h("div", { key: '89eb60826cb1d3e2d77493da91891d5095f9e732', 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: 'cfb55f46fa33ac08c2b64fb47708153c7e0dbb41', 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: '4de246df633b7b3c5820dcc8200b0315a74d6988', name: "helperText" }))), h("div", { key: 'f5dd97d36299433265ed85e42c1ed7dbf2b157e5', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: '6001f5ab4aec1b74ad817e17605d45525a536d4a', 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