@rededor/cura 1.5.0 → 1.6.0-alpha.0

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

@@ -0,0 +1,278 @@
+import iconNames from "../../assets/icons/iconset-default-list";
+const renderDropDownSearchOptions = (args) => {
+    return args.status === 'error' ? `
+    <cura-dropdown-search-not-found>
+      Não há nenhum resultado para <strong>"TERMO"</strong>.
+    </cura-dropdown-search-not-found>
+  ` : `
+    <cura-dropdown-search-category>Título para Categoria 1</cura-dropdown-search-category>
+    <cura-dropdown-search-option-new
+      value="Título para opção 1"
+      optionid="option1">
+      <cura-icon slot="image" name="unity" size="20"></cura-icon>
+      <cura-heading size="xsmall" weight="bold">Título para opção 1 buscando <em>"termo"</em></cura-heading>
+      <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
+      <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
+      <cura-button-transparent slot="actions" icon-only="true" icon-name="schedule"></cura-button-transparent>
+    </cura-dropdown-search-option-new>
+    <cura-dropdown-search-option-new
+      value="Título para opção 2"
+      optionid="option2">
+      <cura-icon slot="image" name="unity" size="20"></cura-icon>
+      <cura-heading size="xsmall" weight="bold">Título para opção 2 buscando <em>"termo"</em></cura-heading>
+      <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
+      <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
+      <cura-button-transparent slot="actions" icon-only="true" icon-name="schedule"></cura-button-transparent>
+    </cura-dropdown-search-option-new>
+
+    <cura-dropdown-search-category>Título para Categoria 2</cura-dropdown-search-category>
+    <cura-dropdown-search-option-new
+      value="Título para opção 3"
+      optionid="option3">
+      <cura-badge-distance slot="image" distance="123"></cura-badge-distance>
+      <cura-heading size="xsmall" weight="bold">Título para opção 3 buscando <em>"termo"</em></cura-heading>
+      <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
+      <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
+    </cura-dropdown-search-option-new>
+    <cura-dropdown-search-option-new
+      value="Título para opção 4"
+      optionid="option4">
+      <cura-badge-distance slot="image" distance="123"></cura-badge-distance>
+      <cura-heading size="xsmall" weight="bold">Título para opção 4 buscando <em>"termo"</em></cura-heading>
+      <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
+      <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
+    </cura-dropdown-search-option-new>
+
+    <cura-dropdown-search-category>Título para Categoria 3</cura-dropdown-search-category>
+    <cura-dropdown-search-option-new
+      value="Título para opção 5"
+      optionid="option5">
+      <cura-avatar slot="image" size="32"></cura-avatar>
+      <cura-heading size="xsmall" weight="bold">Título para opção 5 buscando <em>"termo"</em></cura-heading>
+      <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
+    </cura-dropdown-search-option-new>
+    <cura-dropdown-search-option-new
+      value="Título para opção 6"
+      optionid="option6">
+      <cura-heading size="xsmall" weight="bold">Título para opção 6 buscando <em>"termo"</em></cura-heading>
+      <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
+    </cura-dropdown-search-option-new>
+    <cura-dropdown-search-option-new
+      value="Título para opção 7"
+      optionid="option7">
+      <cura-heading size="xsmall" weight="bold">Título para opção 7 buscando <em>"termo"</em></cura-heading>
+    </cura-dropdown-search-option-new>
+    <cura-dropdown-search-option-new
+      value="Título para opção 8"
+      optionid="option8">
+      <cura-heading size="xsmall" weight="bold">Título para opção 8 buscando <em>"termo"</em></cura-heading>
+    </cura-dropdown-search-option-new>
+    <cura-dropdown-search-option-new
+      value="Título para opção 9"
+      optionid="option9">
+      <cura-heading size="xsmall" weight="bold">Título para opção 9 buscando <em>"termo"</em></cura-heading>
+      <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
+      <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
+    </cura-dropdown-search-option-new>
+    <cura-dropdown-search-option-new
+      value="Título para opção 10"
+      optionid="optio10">
+      <cura-heading size="xsmall" weight="bold">Título para opção 10 buscando <em>"termo"</em></cura-heading>
+      <cura-paragraph size="xsmall">Descrição da opção em busca por <em>"termo"</em>.</cura-paragraph>
+      <cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>
+    </cura-dropdown-search-option-new>
+  `;
+};
+const renderDropDownSearch = (args) => {
+    const style = `<style>
+  .comp-container { min-height: 500px; }
+</style>`;
+    const comp = `
+<div class="comp-container">
+  <cura-dropdown-search-new
+    name="${args.name}"${args.size && args.size !== "large" ? `
+    size="${args.size}"` : ''}${args.label ? `
+    label="${args.label}"` : ''}${args.placeholder ? `
+    placeholder="${args.placeholder}"` : ''}${args.disabled ? `
+    disabled="${args.disabled}"` : ''}${args.required ? `
+    required="${args.required}"` : ''}${args.icon && args.icon !== "search" ? `
+    icon="${args.icon}"` : ''}${args.maxheight && args.maxheight !== "400px" ? `
+    maxheight="${args.maxheight}"` : ''}${args.searchdelay && args.searchdelay !== "400" ? `
+    searchdelay="${args.searchdelay}"` : ''}${args.searchminchars && args.searchminchars !== "3" ? `
+    searchminchars="${args.searchminchars}"` : ''}>${args.helperText ? `
+    <span slot="helperText">${args.helperText}</span>` : ''}
+    ${renderDropDownSearchOptions(args)}
+  </cura-dropdown-search-new>
+</div>`;
+    return `${style}${comp}`;
+};
+export default {
+    title: 'Componentes/DropdownSearchNew',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `<cura-paragraph size="small">
+        O \`cura-dropdown-search\` é um componente para busca rápida indicado para utilização com motores de busca, como o Algolia.
+        <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 visitando a documentação e ajustando o tamanho do viewport na barra de opções.
+      </cura-paragraph>`,
+            },
+        },
+    },
+    render: args => {
+        return renderDropDownSearch(args);
+    },
+    argTypes: {
+        name: {
+            control: 'text',
+            description: 'Nome do dropdown que reflete automaticamente no input de texto utilizado.',
+            required: true,
+            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' },
+            },
+        },
+        status: {
+            control: { type: 'inline-radio' },
+            options: ['default', 'error'],
+            description: 'Define o estado do componente para finalidades de validação (quando requerido, por exemplo).<br><b>Quando o componente de opção not-found está presente na listagem de opções o estado do componente é automaticamente "error"</b>.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'default' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Define se o campo está habilitado.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Define se o campo é obrigatório.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Texto do placeholder.',
+            required: false,
+            table: {
+                category: 'Properties',
+            },
+        },
+        label: {
+            control: 'text',
+            description: 'Texto de rótulo do campo input.',
+            required: false,
+            table: {
+                category: 'Properties',
+            },
+        },
+        icon: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Nome do ícone no iconset a ser utilizado.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'search' }
+            }
+        },
+        maxheight: {
+            control: 'text',
+            description: 'Altura máxima para o dropdown em desktop.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '400px' },
+            }
+        },
+        searchdelay: {
+            control: 'text',
+            description: 'Tempo de espera em milisegundos para o disparo de mudança do termo de busca em tempo de digitação.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '400' }
+            }
+        },
+        searchminchars: {
+            control: 'text',
+            description: 'Mínimo de caracteres para o disparo de mudança do termo de busca em tempo de digitação.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '3' }
+            }
+        },
+        value: {
+            control: 'none',
+            description: 'Valor atual refletido no campo de busca.<br/><b>Somente leitura</b>.',
+            table: {
+                category: 'Properties',
+            }
+        },
+        helperText: {
+            control: 'text',
+            description: 'Texto de ajuda para o input de texto.',
+            table: {
+                category: 'Slots',
+            },
+        },
+        termchange: {
+            control: 'none',
+            description: 'Evento disparado quando o termo de busca muda. Retorna o termo como string.',
+            table: {
+                category: 'Events',
+            },
+        },
+        optionselect: {
+            control: 'none',
+            description: 'Evento disparado quando uma opção é selecionada. Retorna o id da opção selecionada como string.',
+            table: {
+                category: 'Events',
+            },
+        },
+        setFocus: {
+            control: 'none',
+            description: 'Método disponibilizado pelo componente para foco.',
+            table: {
+                category: 'Methods',
+            },
+        },
+        selectOption: {
+            control: 'none',
+            description: 'Método disponibilizado pelo componente para seleção automática de uma opção existente. Recebe como parâmetro o id da opção a ser selecionada.',
+            table: {
+                category: 'Methods',
+            },
+        },
+    },
+};
+export const DropdownSearchNew = {
+    args: {
+        name: "test-component",
+        size: "large",
+        label: "Selecione um item da lista",
+        placeholder: "Faça a sua busca",
+        status: "default",
+        icon: "",
+        disabled: false,
+        required: false,
+        maxheight: "400px",
+        searchdelay: "400",
+        searchminchars: "3",
+        helperText: "Texto de ajuda do componente"
+    }
+};
+//# sourceMappingURL=cura-dropdown-search-new.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-new.stories.js","sourceRoot":"","sources":["../../../src/components/cura-dropdown-search-new/cura-dropdown-search-new.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\n\nconst renderDropDownSearchOptions = (args) => {\n  return args.status === 'error' ? `\n    <cura-dropdown-search-not-found>\n      Não há nenhum resultado para <strong>\"TERMO\"</strong>.\n    </cura-dropdown-search-not-found>\n  ` : `\n    <cura-dropdown-search-category>Título para Categoria 1</cura-dropdown-search-category>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 1\"\n      optionid=\"option1\">\n      <cura-icon slot=\"image\" name=\"unity\" size=\"20\"></cura-icon>\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 1 buscando <em>\"termo\"</em></cura-heading>\n      <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n      <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n      <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"schedule\"></cura-button-transparent>\n    </cura-dropdown-search-option-new>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 2\"\n      optionid=\"option2\">\n      <cura-icon slot=\"image\" name=\"unity\" size=\"20\"></cura-icon>\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 2 buscando <em>\"termo\"</em></cura-heading>\n      <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n      <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n      <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"schedule\"></cura-button-transparent>\n    </cura-dropdown-search-option-new>\n\n    <cura-dropdown-search-category>Título para Categoria 2</cura-dropdown-search-category>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 3\"\n      optionid=\"option3\">\n      <cura-badge-distance slot=\"image\" distance=\"123\"></cura-badge-distance>\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 3 buscando <em>\"termo\"</em></cura-heading>\n      <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n      <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n    </cura-dropdown-search-option-new>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 4\"\n      optionid=\"option4\">\n      <cura-badge-distance slot=\"image\" distance=\"123\"></cura-badge-distance>\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 4 buscando <em>\"termo\"</em></cura-heading>\n      <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n      <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n    </cura-dropdown-search-option-new>\n\n    <cura-dropdown-search-category>Título para Categoria 3</cura-dropdown-search-category>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 5\"\n      optionid=\"option5\">\n      <cura-avatar slot=\"image\" size=\"32\"></cura-avatar>\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 5 buscando <em>\"termo\"</em></cura-heading>\n      <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n    </cura-dropdown-search-option-new>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 6\"\n      optionid=\"option6\">\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 6 buscando <em>\"termo\"</em></cura-heading>\n      <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n    </cura-dropdown-search-option-new>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 7\"\n      optionid=\"option7\">\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 7 buscando <em>\"termo\"</em></cura-heading>\n    </cura-dropdown-search-option-new>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 8\"\n      optionid=\"option8\">\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 8 buscando <em>\"termo\"</em></cura-heading>\n    </cura-dropdown-search-option-new>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 9\"\n      optionid=\"option9\">\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 9 buscando <em>\"termo\"</em></cura-heading>\n      <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n      <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n    </cura-dropdown-search-option-new>\n    <cura-dropdown-search-option-new\n      value=\"Título para opção 10\"\n      optionid=\"optio10\">\n      <cura-heading size=\"xsmall\" weight=\"bold\">Título para opção 10 buscando <em>\"termo\"</em></cura-heading>\n      <cura-paragraph size=\"xsmall\">Descrição da opção em busca por <em>\"termo\"</em>.</cura-paragraph>\n      <cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>\n    </cura-dropdown-search-option-new>\n  `;\n}\n\nconst renderDropDownSearch = (args) => {\n  const style = `<style>\n  .comp-container { min-height: 500px; }\n</style>`;\n  const comp = `\n<div class=\"comp-container\">\n  <cura-dropdown-search-new\n    name=\"${args.name}\"${ args.size && args.size !== \"large\" ? `\n    size=\"${args.size}\"` : ''}${ args.label ? `\n    label=\"${args.label}\"` : ''}${ args.placeholder ? `\n    placeholder=\"${args.placeholder}\"` : ''}${ args.disabled ? `\n    disabled=\"${args.disabled}\"` : ''}${ args.required ? `\n    required=\"${args.required}\"` : ''}${ args.icon && args.icon !== \"search\" ? `\n    icon=\"${args.icon}\"` : ''}${ args.maxheight && args.maxheight !== \"400px\" ? `\n    maxheight=\"${args.maxheight}\"` : ''}${ args.searchdelay && args.searchdelay !== \"400\" ? `\n    searchdelay=\"${args.searchdelay}\"` : ''}${ args.searchminchars && args.searchminchars !== \"3\" ? `\n    searchminchars=\"${args.searchminchars}\"` : ''}>${ args.helperText ? `\n    <span slot=\"helperText\">${args.helperText}</span>` : '' }\n    ${ renderDropDownSearchOptions(args) }\n  </cura-dropdown-search-new>\n</div>`;\n  return `${style}${comp}`;\n}\n\nexport default {\n  title: 'Componentes/DropdownSearchNew',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `<cura-paragraph size=\"small\">\n        O \\`cura-dropdown-search\\` é um componente para busca rápida indicado para utilização com motores de busca, como o Algolia.\n        <br><br>\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 visitando a documentação e ajustando o tamanho do viewport na barra de opções.\n      </cura-paragraph>`,\n      },\n    },\n  },\n  render: args => {\n    return renderDropDownSearch(args);\n  },\n  argTypes: {\n    name: {\n      control: 'text',\n      description: 'Nome do dropdown que reflete automaticamente no input de texto utilizado.',\n      required: true,\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    status: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'error'],\n      description: 'Define o estado do componente para finalidades de validação (quando requerido, por exemplo).<br><b>Quando o componente de opção not-found está presente na listagem de opções o estado do componente é automaticamente \"error\"</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Define se o campo está habilitado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\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    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 de rótulo do campo input.',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    icon: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone no iconset a ser utilizado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'search' }\n      }\n    },\n    maxheight: {\n      control: 'text',\n      description: 'Altura máxima para o dropdown em desktop.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '400px' },\n      }\n    },\n    searchdelay: {\n      control: 'text',\n      description: 'Tempo de espera em milisegundos para o disparo de mudança do termo de busca em tempo de digitação.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '400'}\n      }\n    },\n    searchminchars: {\n      control: 'text',\n      description: 'Mínimo de caracteres para o disparo de mudança do termo de busca em tempo de digitação.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '3'}\n      }\n    },\n    value: {\n      control: 'none',\n      description: 'Valor atual refletido no campo de busca.<br/><b>Somente leitura</b>.',\n      table: {\n        category: 'Properties',\n      }\n    },\n    helperText: {\n      control: 'text',\n      description: 'Texto de ajuda para o input de texto.',\n      table: {\n        category: 'Slots',\n      },\n    },\n    termchange: {\n      control: 'none',\n      description: 'Evento disparado quando o termo de busca muda. Retorna o termo como string.',\n      table: {\n        category: 'Events',\n      },\n    },\n    optionselect: {\n      control: 'none',\n      description: 'Evento disparado quando uma opção é selecionada. Retorna o id da opção selecionada como string.',\n      table: {\n        category: 'Events',\n      },\n    },\n    setFocus: {\n      control: 'none',\n      description: 'Método disponibilizado pelo componente para foco.',\n      table: {\n        category: 'Methods',\n      },\n    },\n    selectOption: {\n      control: 'none',\n      description: 'Método disponibilizado pelo componente para seleção automática de uma opção existente. Recebe como parâmetro o id da opção a ser selecionada.',\n      table: {\n        category: 'Methods',\n      },\n    },\n  },\n};\n\nexport const DropdownSearchNew = {\n  args: {\n    name: \"test-component\",\n    size: \"large\",\n    label: \"Selecione um item da lista\",\n    placeholder: \"Faça a sua busca\",\n    status: \"default\",\n    icon: \"\",\n    disabled: false,\n    required: false,\n    maxheight: \"400px\",\n    searchdelay: \"400\",\n    searchminchars: \"3\",\n    helperText: \"Texto de ajuda do componente\"\n  }\n};\n"]}

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-not-found/cura-dropdown-search-not-found.css

@@ -0,0 +1,62 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+/**
+ * Global Dropdown Search Options Definitions.
+ * Required CSS Properties:
+ * --neutral-light
+ */
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+: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;
+}

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

@@ -0,0 +1,44 @@
+import { Host, h } from "@stencil/core";
+export class CuraDropdownSearchNotFound {
+    constructor() {
+        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 is() { return "cura-dropdown-search-not-found"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-dropdown-search-not-found.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-dropdown-search-not-found.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionclick",
+                "name": "actionclick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=cura-dropdown-search-not-found.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-not-found.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search-new/cura-dropdown-search-not-found/cura-dropdown-search-not-found.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,0BAA0B;IALvC;QASE,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;QACvB,CAAC,CAAA;KAaF;IAXC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAG,IAAI,CAAC,WAAW;gBACzD,qEAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY;oBAC1D,8DAAa,CACA,CACX,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-not-found',\n  styleUrl: 'cura-dropdown-search-not-found.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchNotFound {\n\n  @Event() actionclick: EventEmitter<any>;\n\n  handleClick = (ev: Event) => {\n    this.actionclick.emit();\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"component-container\" onClick={ this.handleClick }>\n          <cura-heading size=\"xsmall\" weight=\"bold\" color=\"error-dark\">\n            <slot></slot>\n          </cura-heading>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,38 @@
+const renderCuraDropdownSearchNotFound = (args) => {
+    return `<cura-dropdown-search-not-found>
+  ${args.content}
+</cura-dropdown-search-not-found>`;
+};
+export default {
+    title: 'Componentes/DropdownSearchNew/Options/NotFound',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `<cura-paragraph size="small">
+        É utilizado como retorno negativo de busca.<br/><br/>
+        Quando implementado como filho, o componente dropdown-search automaticamente assume 'error' como status.<br/><br/>
+        Para demais validações, quando um campo é obrigatório, por exemplo, a aplicação deverá utilizar a propriedade status e o slot helperText do componente.
+      </cura-paragraph>`,
+            },
+        },
+    },
+    render: args => {
+        return renderCuraDropdownSearchNotFound(args);
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'Mensagem de erro a ser exibida.',
+            table: {
+                category: 'Properties',
+            },
+        }
+    }
+};
+export const DropdownSearchNotFound = {
+    args: {
+        content: 'Não há resultados para <strong>"TERM"</strong>.'
+    }
+};
+//# sourceMappingURL=cura-dropdown-search-not-found.stories.js.map

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-not-found/cura-dropdown-search-not-found.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-not-found.stories.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search-new/cura-dropdown-search-not-found/cura-dropdown-search-not-found.stories.ts"],"names":[],"mappings":"AAAA,MAAM,gCAAgC,GAAG,CAAC,IAAI,EAAE,EAAE;IAChD,OAAO;IACL,IAAI,CAAC,OAAO;kCACkB,CAAA;AAClC,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,gDAAgD;IACvD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;wBAIK;aACjB;SACF;KACF;IACD,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAChD,CAAC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE;QACJ,OAAO,EAAE,iDAAiD;KAC3D;CACF,CAAA","sourcesContent":["const renderCuraDropdownSearchNotFound = (args) => {\n  return `<cura-dropdown-search-not-found>\n  ${args.content}\n</cura-dropdown-search-not-found>`\n}\n\nexport default {\n  title: 'Componentes/DropdownSearchNew/Options/NotFound',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `<cura-paragraph size=\"small\">\n        É utilizado como retorno negativo de busca.<br/><br/>\n        Quando implementado como filho, o componente dropdown-search automaticamente assume 'error' como status.<br/><br/>\n        Para demais validações, quando um campo é obrigatório, por exemplo, a aplicação deverá utilizar a propriedade status e o slot helperText do componente.\n      </cura-paragraph>`,\n      },\n    },\n  },\n  render: args => {\n    return renderCuraDropdownSearchNotFound(args);\n  },\n  argTypes: {\n    content: {\n      control: 'text',\n      description: 'Mensagem de erro a ser exibida.',\n      table: {\n        category: 'Properties',\n      },\n    }\n  }\n}\n\nexport const DropdownSearchNotFound = {\n  args: {\n    content: 'Não há resultados para <strong>\"TERM\"</strong>.'\n  }\n}\n"]}

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.css

@@ -0,0 +1,121 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+/**
+ * Global Dropdown Search Options Definitions.
+ * Required CSS Properties:
+ * --neutral-light
+ */
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+: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);
+  transition: background-color 0.15s linear;
+}
+:host .component-container:not(.selected):not(.not-selectable):has(.selectable-container:hover),
+:host .component-container:not(.selected):not(.not-selectable).highlighted {
+  background-color: var(--neutral-white);
+}
+:host .selectable-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: calc(var(--cura-spacing-base) * 3px) 0;
+  min-height: calc(var(--cura-spacing-base) * 10px);
+  gap: calc(var(--cura-spacing-base) * 1px);
+  cursor: pointer;
+}
+:host .selectable-container .content {
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: calc(var(--cura-spacing-base) * 1px);
+}
+:host .selectable-container ::slotted(cura-icon) {
+  --color: var(--neutral-dark) !important;
+  margin: 0 10px;
+}
+:host .selectable-container ::slotted(cura-avatar) {
+  margin: 0 calc(var(--cura-spacing-base) * 1px);
+}
+:host .selectable-container ::slotted(cura-heading),
+:host .selectable-container ::slotted(cura-paragraph) {
+  --margin-block: 0 !important;
+  --color-spot: var(--primary) !important;
+}
+:host .selectable-container ::slotted(cura-heading) {
+  --color-body: var(--neutral-black) !important;
+}
+:host .selectable-container ::slotted(cura-paragraph) {
+  --color-body: var(--neutral-dark) !important;
+}
+:host .selected {
+  background-color: var(--primary-lighter-50);
+  border-bottom-color: var(--primary-light);
+}
+:host .selected .selectable-container {
+  cursor: default;
+}
+:host .selected .selectable-container ::slotted(cura-icon) {
+  --color: var(--primary) !important;
+}
+:host .selected .selectable-container ::slotted(cura-heading) {
+  --color-body: var(--primary) !important;
+}
+:host .actions-container {
+  display: flex;
+}
+:host .actions-container ::slotted(*) {
+  padding-left: calc(var(--cura-spacing-base) * 1px);
+}
+:host .not-selectable .selectable-container {
+  cursor: default;
+}
+
+:host(:last-child) .component-container {
+  border-bottom: none !important;
+}