@rededor/cura 1.6.0-alpha.0 → 1.6.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/cura-accordion_18.cjs.entry.js +12 -15
- package/dist/cjs/cura-accordion_18.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-alert.cjs.entry.js +1 -1
- package/dist/cjs/cura-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-calendar.cjs.entry.js +8 -4
- package/dist/cjs/cura-calendar.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-toast.cjs.entry.js +7 -1
- package/dist/cjs/cura-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/cura-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/cura.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cura-alert/cura-alert.js +1 -1
- package/dist/collection/components/cura-alert/cura-alert.js.map +1 -1
- package/dist/collection/components/cura-avatar/cura-avatar.js +4 -4
- package/dist/collection/components/cura-avatar/cura-avatar.js.map +1 -1
- package/dist/collection/components/cura-calendar/cura-calendar.css +17 -16
- package/dist/collection/components/cura-calendar/cura-calendar.js +25 -3
- package/dist/collection/components/cura-calendar/cura-calendar.js.map +1 -1
- package/dist/collection/components/cura-calendar/cura-calendar.stories.js +12 -0
- package/dist/collection/components/cura-calendar/cura-calendar.stories.js.map +1 -1
- package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.js +7 -13
- package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.js.map +1 -1
- package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.stories.js +14 -3
- package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.stories.js.map +1 -1
- package/dist/collection/components/cura-icon/cura-icon.css +1 -0
- package/dist/collection/components/cura-toast/cura-toast.js +28 -1
- package/dist/collection/components/cura-toast/cura-toast.js.map +1 -1
- package/dist/collection/components/cura-toast/cura-toast.stories.js +7 -0
- package/dist/collection/components/cura-toast/cura-toast.stories.js.map +1 -1
- package/dist/collection/components/cura-tooltip/cura-tooltip.css +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.css +13 -8
- package/dist/components/cura-alert.js +6 -6
- package/dist/components/cura-alert.js.map +1 -1
- package/dist/components/cura-avatar.js +4 -4
- package/dist/components/cura-avatar.js.map +1 -1
- package/dist/components/cura-calendar2.js +9 -4
- package/dist/components/cura-calendar2.js.map +1 -1
- package/dist/components/cura-dropdown-search-new.js +7 -12
- package/dist/components/cura-dropdown-search-new.js.map +1 -1
- package/dist/components/cura-heading2.js +1 -1
- package/dist/components/cura-heading2.js.map +1 -1
- package/dist/components/cura-icon2.js +1 -1
- package/dist/components/cura-icon2.js.map +1 -1
- package/dist/components/cura-toast.js +9 -2
- package/dist/components/cura-toast.js.map +1 -1
- package/dist/components/cura-tooltip.js +1 -1
- package/dist/components/cura-tooltip.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/cura.esm.js.map +1 -1
- package/dist/cura/p-02c2b948.entry.js +2 -0
- package/dist/cura/p-02c2b948.entry.js.map +1 -0
- package/dist/cura/p-56ca01a1.entry.js +2 -0
- package/dist/cura/p-56ca01a1.entry.js.map +1 -0
- package/dist/cura/{p-e98a1ad2.entry.js → p-89671cd4.entry.js} +2 -2
- package/dist/cura/{p-e98a1ad2.entry.js.map → p-89671cd4.entry.js.map} +1 -1
- package/dist/cura/{p-c0f445b5.entry.js → p-bf69b32f.entry.js} +2 -2
- package/dist/cura/p-bf69b32f.entry.js.map +1 -0
- package/dist/cura/p-efce98a2.entry.js +2 -0
- package/dist/cura/p-efce98a2.entry.js.map +1 -0
- package/dist/esm/cura-accordion_18.entry.js +12 -15
- package/dist/esm/cura-accordion_18.entry.js.map +1 -1
- package/dist/esm/cura-alert.entry.js +1 -1
- package/dist/esm/cura-alert.entry.js.map +1 -1
- package/dist/esm/cura-calendar.entry.js +8 -4
- package/dist/esm/cura-calendar.entry.js.map +1 -1
- package/dist/esm/cura-toast.entry.js +7 -1
- package/dist/esm/cura-toast.entry.js.map +1 -1
- package/dist/esm/cura-tooltip.entry.js +1 -1
- package/dist/esm/cura-tooltip.entry.js.map +1 -1
- package/dist/esm/cura.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cura-avatar/cura-avatar.d.ts +1 -0
- package/dist/types/components/cura-calendar/cura-calendar.d.ts +1 -0
- package/dist/types/components/cura-calendar/cura-calendar.stories.d.ts +15 -0
- package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-new.d.ts +3 -1
- package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-new.stories.d.ts +12 -0
- package/dist/types/components/cura-toast/cura-toast.d.ts +4 -0
- package/dist/types/components/cura-toast/cura-toast.stories.d.ts +7 -0
- package/dist/types/components.d.ts +6 -0
- package/package.json +2 -2
- package/dist/cura/p-24d9f1f4.entry.js +0 -2
- package/dist/cura/p-24d9f1f4.entry.js.map +0 -1
- package/dist/cura/p-2afb14e9.entry.js +0 -2
- package/dist/cura/p-2afb14e9.entry.js.map +0 -1
- package/dist/cura/p-3576b633.entry.js +0 -2
- package/dist/cura/p-3576b633.entry.js.map +0 -1
- package/dist/cura/p-c0f445b5.entry.js.map +0 -1
package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.stories.js
CHANGED
|
@@ -85,7 +85,8 @@ const renderDropDownSearchOptions = (args) => {
|
|
|
85
85
|
};
|
|
86
86
|
const renderDropDownSearch = (args) => {
|
|
87
87
|
const style = `<style>
|
|
88
|
-
.comp-container { min-height: 500px; }
|
|
88
|
+
.comp-container { min-height: 500px; }${args.cssMaxHeight ? `
|
|
89
|
+
cura-dropdown-search-new { --max-height: ${args.cssMaxHeight} !important; }` : ''}
|
|
89
90
|
</style>`;
|
|
90
91
|
const comp = `
|
|
91
92
|
<div class="comp-container">
|
|
@@ -126,7 +127,7 @@ export default {
|
|
|
126
127
|
argTypes: {
|
|
127
128
|
name: {
|
|
128
129
|
control: 'text',
|
|
129
|
-
description: 'Nome do dropdown que reflete automaticamente no input de texto utilizado
|
|
130
|
+
description: 'Nome do dropdown que reflete automaticamente no input de texto utilizado.<br/><b>É uma propriedade obrigatória</b>.',
|
|
130
131
|
required: true,
|
|
131
132
|
table: {
|
|
132
133
|
category: 'Properties',
|
|
@@ -257,6 +258,15 @@ export default {
|
|
|
257
258
|
category: 'Methods',
|
|
258
259
|
},
|
|
259
260
|
},
|
|
261
|
+
cssMaxHeight: {
|
|
262
|
+
control: 'text',
|
|
263
|
+
description: 'Altura máxima para o dropdown em desktop.',
|
|
264
|
+
table: {
|
|
265
|
+
category: 'CSS Properties',
|
|
266
|
+
defaultValue: { summary: '400px' }
|
|
267
|
+
},
|
|
268
|
+
name: '--max-height'
|
|
269
|
+
},
|
|
260
270
|
},
|
|
261
271
|
};
|
|
262
272
|
export const DropdownSearchNew = {
|
|
@@ -272,7 +282,8 @@ export const DropdownSearchNew = {
|
|
|
272
282
|
maxheight: "400px",
|
|
273
283
|
searchdelay: "400",
|
|
274
284
|
searchminchars: "3",
|
|
275
|
-
helperText: "Texto de ajuda do componente"
|
|
285
|
+
helperText: "Texto de ajuda do componente",
|
|
286
|
+
cssMaxHeight: ''
|
|
276
287
|
}
|
|
277
288
|
};
|
|
278
289
|
//# sourceMappingURL=cura-dropdown-search-new.stories.js.map
|
package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.stories.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"]}
|
|
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; }${ args.cssMaxHeight ? `\n cura-dropdown-search-new { --max-height: ${args.cssMaxHeight} !important; }` : ''}\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.<br/><b>É uma propriedade obrigatória</b>.',\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 cssMaxHeight: {\n control: 'text',\n description: 'Altura máxima para o dropdown em desktop.',\n table: {\n category: 'CSS Properties',\n defaultValue: { summary: '400px'}\n },\n name: '--max-height'\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 cssMaxHeight: ''\n }\n};\n"]}
|
|
@@ -14,6 +14,12 @@ export class CuraToast {
|
|
|
14
14
|
this.styles = {};
|
|
15
15
|
this.progress = 0;
|
|
16
16
|
}
|
|
17
|
+
/**
|
|
18
|
+
* Method to close toast component
|
|
19
|
+
*/
|
|
20
|
+
async close() {
|
|
21
|
+
this.closeContainer();
|
|
22
|
+
}
|
|
17
23
|
handleChangeType() {
|
|
18
24
|
this.setStyle();
|
|
19
25
|
}
|
|
@@ -21,7 +27,7 @@ export class CuraToast {
|
|
|
21
27
|
this.setStyle();
|
|
22
28
|
}
|
|
23
29
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
30
|
+
return (h(Host, { key: 'd5869739f883147328ee08bcf6564b6cc9097851' }, h("div", { key: '367bdb7c433982902d018ec64e1372b85bbc52d2', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '35dbde1e3dfbef3ec3faf3313aa607e2f74409be', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'ca266eb0c1816f92af3468be34068c29fc4fc61f', class: "content" }, h("cura-heading", { key: '86d3dc19bd9c4fa2ed8ecd21754385fba7635212', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'dae10d64662b2681fa00e64ede122f29de49d505', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '1b969326c2e051ea34d68ba5677b3d8e0159e723' })), h("slot", { key: '2028c0a32df403290b1efcd158410563eda34bbf', name: "actions" })), this.closeButton && h("cura-icon", { key: '91afab9024300f807e1dae585cfa79543e65d579', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '89abd5c338f443d8946faaed961de31c8d1eac64', color: `${this.type}-base`, progress: this.progress }))));
|
|
25
31
|
}
|
|
26
32
|
componentDidLoad() {
|
|
27
33
|
this.openContainer();
|
|
@@ -247,6 +253,27 @@ export class CuraToast {
|
|
|
247
253
|
}
|
|
248
254
|
}];
|
|
249
255
|
}
|
|
256
|
+
static get methods() {
|
|
257
|
+
return {
|
|
258
|
+
"close": {
|
|
259
|
+
"complexType": {
|
|
260
|
+
"signature": "() => Promise<void>",
|
|
261
|
+
"parameters": [],
|
|
262
|
+
"references": {
|
|
263
|
+
"Promise": {
|
|
264
|
+
"location": "global",
|
|
265
|
+
"id": "global::Promise"
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
"return": "Promise<void>"
|
|
269
|
+
},
|
|
270
|
+
"docs": {
|
|
271
|
+
"text": "Method to close toast component",
|
|
272
|
+
"tags": []
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
}
|
|
250
277
|
static get elementRef() { return "host"; }
|
|
251
278
|
static get watchers() {
|
|
252
279
|
return [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-toast.js","sourceRoot":"","sources":["../../../src/components/cura-toast/cura-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"cura-toast.js","sourceRoot":"","sources":["../../../src/components/cura-toast/cura-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'cura-toast',\n styleUrl: 'cura-toast.scss',\n shadow: true,\n})\nexport class CuraToast {\n @Element() host: HTMLElement;\n\n @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n @Prop() position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' = 'top-right';\n @Prop({ reflect: true }) icon: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) closeButton = true;\n @Prop({ reflect: true }) loader = true;\n @Prop({ reflect: true }) autoCloseDelay = 10000;\n\n @State() styles = {};\n @State() progress = 0;\n\n @Event({ eventName: 'toastClosed' }) toastClosed: EventEmitter<void>;\n\n /**\n * Method to close toast component\n */\n @Method()\n async close() {\n this.closeContainer();\n }\n\n @Watch('type')\n @Watch('position')\n handleChangeType() {\n this.setStyle();\n }\n\n container: HTMLElement;\n\n connectedCallback() {\n this.setStyle();\n }\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <cura-icon class=\"default-icon\" name={this.getNameIcon()} size={16} color={`${this.type}-dark`}></cura-icon>\n <div class=\"content\">\n <cura-heading level={4} size=\"xsmall\" color={`${this.type}-dark`} weight=\"bold\" margin-block=\"0\">\n {this.label}\n </cura-heading>\n <cura-paragraph color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <slot></slot>\n </cura-paragraph>\n <slot name=\"actions\"></slot>\n </div>\n {this.closeButton && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n {this.loader && !!this.autoCloseDelay && <cura-loader-bar color={`${this.type}-base`} progress={this.progress}></cura-loader-bar>}\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.openContainer();\n this.startAnimation();\n }\n\n setStyle() {\n this.styles = {\n ...this.styles,\n '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2),\n '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`),\n '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`)\n }\n }\n\n getClasses() {\n const [firstPosition, secondPosition] = this.position.split('-');\n const classes = {};\n\n classes['container'] = true;\n classes[firstPosition] = true;\n classes[secondPosition] = true;\n\n if (this.loader) {\n classes['loader'] = true;\n }\n\n return classes;\n }\n\n getNameIcon() {\n const iconMapping = {\n info: 'infoCircle',\n success: 'checkCircle',\n warning: 'alertCircle',\n error: 'alertTriangle',\n };\n return this.icon ? this.icon : iconMapping[this.type];\n }\n\n openContainer() {\n this.container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n this.container.classList.add('active');\n }\n\n closeContainer() {\n this.container.classList.remove('active');\n setTimeout(() => {\n this.toastClosed.emit();\n this.host.remove();\n }, 500);\n }\n\n handleClose = () => {\n this.closeContainer();\n };\n\n startAnimation() {\n if (!!this.autoCloseDelay) {\n if (this.loader) {\n this.progress = 0;\n let intervalId = setInterval(() => {\n if (this.progress >= 100) {\n clearInterval(intervalId);\n this.closeContainer();\n } else {\n this.progress++;\n }\n }, this.autoCloseDelay/100);\n } else {\n let intervalId = setInterval(() => {\n clearInterval(intervalId);\n this.closeContainer();\n }, this.autoCloseDelay);\n }\n }\n }\n}\n"]}
|
|
@@ -121,6 +121,13 @@ export default {
|
|
|
121
121
|
table: {
|
|
122
122
|
category: 'Events',
|
|
123
123
|
},
|
|
124
|
+
},
|
|
125
|
+
close: {
|
|
126
|
+
control: 'none',
|
|
127
|
+
description: 'Método disponibilizado pelo componente para fechar e remover o toast.',
|
|
128
|
+
table: {
|
|
129
|
+
category: 'Methods',
|
|
130
|
+
},
|
|
124
131
|
}
|
|
125
132
|
},
|
|
126
133
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-toast.stories.js","sourceRoot":"","sources":["../../../src/components/cura-toast/cura-toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\n\nconst renderCuraToast = (args: any) => {\n return `<div style=\"width: 100%; height: 250px;\">\n <cura-toast\n ${args.label ? `label=\"${args.label}\"` : ''}\n ${args.type && args.type !== 'info' ? `type=\"${args.type}\"` : ''}\n ${args.position && args.position !== 'top-right' ? `position=\"${args.position}\"` : ''}\n ${args.closeButton !== true ? `close-button=\"${args.closeButton}\"` : ''}\n ${args.loader !== true ? `loader=\"${args.loader}\"` : ''}\n ${args.icon ? `icon=\"${args.icon}\"` : ''}\n ${args.autoCloseDelay !== 10000 ? `auto-close-delay=\"${args.autoCloseDelay}\"` : ''}>\n\t\t${args.content}\n\t\t${args.actions}\n </cura-toast>\n </div>`;\n}\n\nexport default {\n title: 'Componentes/Feedback/Toast',\n tags: ['autodocs'],\n render: ({ ...args }) => {\n return renderCuraToast(args);\n },\n argTypes: {\n label: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Título do toast.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t},\n\t\t\tname: 'label',\n },\n type: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'info', 'success', 'warning', 'error'],\n\t\t\tdescription: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t\t\tdefaultValue: { summary: 'info' },\n\t\t\t},\n\t\t\tname: 'type',\n },\n\t\tposition: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],\n\t\t\tdescription: 'Posição do Toast na tela',\n\t\t\ttable: {\n\t\t\t\tcategory: 'Properties',\n\t\t\t\tdefaultValue: { summary: 'top-right' },\n\t\t\t},\n\t\t\tname: 'position',\n\t\t},\n closeButton: {\n control: 'boolean',\n description: 'Define se o alerta pode ser fechado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: true },\n },\n name: 'close-button'\n },\n\t\tloader: {\n control: 'boolean',\n description: 'Define se mostra ou não a barra de progresso',\n table: {\n category: 'Properties',\n defaultValue: { summary: true },\n },\n },\n icon: {\n control: {type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone personalizado.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'De acordo com o tipo de alert.' },\n },\n name: 'icon'\n },\n\t\tautoCloseDelay: {\n control: 'number',\n description: 'Define a quantidade de tempo, em milisegundos, que o toast ficará aberto.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 10000 },\n },\n name: 'auto-close-delay'\n },\n\t\tcontent: {\n control: 'text',\n description: 'Conteúdo do texto principal do toast. É projetado automaticamente dentro do slot padrão.',\n defaultValue: '',\n table: {\n category: 'Slot',\n },\n },\n actions: {\n control: 'text',\n description: 'Conteúdo da ações de links e botões',\n defaultValue: '',\n table: {\n category: 'Slot',\n },\n },\n closeEvent: {\n control: 'text',\n description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n name: 'toastClosed',\n table: {\n category: 'Events',\n },\n }\n },\n};\n\nexport const Toast = {\n args: {\n label: 'Título do toast',\n type: 'info',\n\t\tposition: 'top-right',\n closeButton: true,\n loader: true,\n icon: '',\n\t\tautoCloseDelay: 10000,\n content: 'Texto explicativo para o toast.',\n actions: `<div slot=\"actions\">\n <cura-paragraph spot-color=\"primary\" size=\"xsmall\" margin-block=\"8px 0\">\n <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\">Link</a>\n <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"margin-left: 8px\">Link</a>\n </cura-paragraph>\n <div style=\"display: flex; justify-content: space-between; gap: 8px; margin-top: 12px;\">\n <cura-button-outline\n size=\"small\"\n color=\"primary\"\n style=\"width: 100%;\">\n Button\n </cura-button-outline>\n <cura-button\n size=\"small\"\n color=\"accent\"\n style=\"width: 100%;\">\n Button\n </cura-button>\n </div>\n </div>`\n },\n closeEvent: '-',\n};\n"]}
|
|
1
|
+
{"version":3,"file":"cura-toast.stories.js","sourceRoot":"","sources":["../../../src/components/cura-toast/cura-toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\n\nconst renderCuraToast = (args: any) => {\n return `<div style=\"width: 100%; height: 250px;\">\n <cura-toast\n ${args.label ? `label=\"${args.label}\"` : ''}\n ${args.type && args.type !== 'info' ? `type=\"${args.type}\"` : ''}\n ${args.position && args.position !== 'top-right' ? `position=\"${args.position}\"` : ''}\n ${args.closeButton !== true ? `close-button=\"${args.closeButton}\"` : ''}\n ${args.loader !== true ? `loader=\"${args.loader}\"` : ''}\n ${args.icon ? `icon=\"${args.icon}\"` : ''}\n ${args.autoCloseDelay !== 10000 ? `auto-close-delay=\"${args.autoCloseDelay}\"` : ''}>\n\t\t${args.content}\n\t\t${args.actions}\n </cura-toast>\n </div>`;\n}\n\nexport default {\n title: 'Componentes/Feedback/Toast',\n tags: ['autodocs'],\n render: ({ ...args }) => {\n return renderCuraToast(args);\n },\n argTypes: {\n label: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Título do toast.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t},\n\t\t\tname: 'label',\n },\n type: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'info', 'success', 'warning', 'error'],\n\t\t\tdescription: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t\t\tdefaultValue: { summary: 'info' },\n\t\t\t},\n\t\t\tname: 'type',\n },\n\t\tposition: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],\n\t\t\tdescription: 'Posição do Toast na tela',\n\t\t\ttable: {\n\t\t\t\tcategory: 'Properties',\n\t\t\t\tdefaultValue: { summary: 'top-right' },\n\t\t\t},\n\t\t\tname: 'position',\n\t\t},\n closeButton: {\n control: 'boolean',\n description: 'Define se o alerta pode ser fechado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: true },\n },\n name: 'close-button'\n },\n\t\tloader: {\n control: 'boolean',\n description: 'Define se mostra ou não a barra de progresso',\n table: {\n category: 'Properties',\n defaultValue: { summary: true },\n },\n },\n icon: {\n control: {type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone personalizado.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'De acordo com o tipo de alert.' },\n },\n name: 'icon'\n },\n\t\tautoCloseDelay: {\n control: 'number',\n description: 'Define a quantidade de tempo, em milisegundos, que o toast ficará aberto.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 10000 },\n },\n name: 'auto-close-delay'\n },\n\t\tcontent: {\n control: 'text',\n description: 'Conteúdo do texto principal do toast. É projetado automaticamente dentro do slot padrão.',\n defaultValue: '',\n table: {\n category: 'Slot',\n },\n },\n actions: {\n control: 'text',\n description: 'Conteúdo da ações de links e botões',\n defaultValue: '',\n table: {\n category: 'Slot',\n },\n },\n closeEvent: {\n control: 'text',\n description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n name: 'toastClosed',\n table: {\n category: 'Events',\n },\n },\n close: {\n control: 'none',\n description: 'Método disponibilizado pelo componente para fechar e remover o toast.',\n table: {\n category: 'Methods',\n },\n }\n },\n};\n\nexport const Toast = {\n args: {\n label: 'Título do toast',\n type: 'info',\n\t\tposition: 'top-right',\n closeButton: true,\n loader: true,\n icon: '',\n\t\tautoCloseDelay: 10000,\n content: 'Texto explicativo para o toast.',\n actions: `<div slot=\"actions\">\n <cura-paragraph spot-color=\"primary\" size=\"xsmall\" margin-block=\"8px 0\">\n <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\">Link</a>\n <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"margin-left: 8px\">Link</a>\n </cura-paragraph>\n <div style=\"display: flex; justify-content: space-between; gap: 8px; margin-top: 12px;\">\n <cura-button-outline\n size=\"small\"\n color=\"primary\"\n style=\"width: 100%;\">\n Button\n </cura-button-outline>\n <cura-button\n size=\"small\"\n color=\"accent\"\n style=\"width: 100%;\">\n Button\n </cura-button>\n </div>\n </div>`\n },\n closeEvent: '-',\n};\n"]}
|
|
@@ -95,16 +95,19 @@
|
|
|
95
95
|
letter-spacing: 0.28px;
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
|
-
:host ::slotted(b), :host ::slotted(strong)
|
|
98
|
+
:host ::slotted(b), :host ::slotted(strong),
|
|
99
|
+
:host ::slotted(span b), :host ::slotted(span strong) {
|
|
99
100
|
font-weight: var(--font-weight-medium);
|
|
100
101
|
}
|
|
101
|
-
:host ::slotted(a)
|
|
102
|
+
:host ::slotted(a),
|
|
103
|
+
:host ::slotted(span a) {
|
|
102
104
|
font-weight: var(--font-weight-bold);
|
|
103
105
|
color: var(--color-spot);
|
|
104
106
|
text-underline-offset: 10%;
|
|
105
107
|
cursor: pointer;
|
|
106
108
|
}
|
|
107
|
-
:host ::slotted(u)
|
|
109
|
+
:host ::slotted(u),
|
|
110
|
+
:host ::slotted(span u) {
|
|
108
111
|
text-underline-offset: 10%;
|
|
109
112
|
}
|
|
110
113
|
:host ::slotted(abbr) {
|
|
@@ -113,11 +116,13 @@
|
|
|
113
116
|
text-underline-offset: 10%;
|
|
114
117
|
cursor: default;
|
|
115
118
|
}
|
|
116
|
-
:host ::slotted(i)
|
|
119
|
+
:host ::slotted(i),
|
|
120
|
+
:host ::slotted(span i) {
|
|
117
121
|
font-weight: var(--font-weight-medium);
|
|
118
122
|
}
|
|
119
|
-
:host ::slotted(em)
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
font-
|
|
123
|
+
:host ::slotted(em),
|
|
124
|
+
:host ::slotted(span em) {
|
|
125
|
+
color: var(--color-spot) !important;
|
|
126
|
+
font-weight: var(--font-weight-bold) !important;
|
|
127
|
+
font-style: normal !important;
|
|
123
128
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { d as defineCustomElement$4 } from './cura-
|
|
3
|
-
import { d as defineCustomElement$3 } from './cura-
|
|
2
|
+
import { d as defineCustomElement$4 } from './cura-heading2.js';
|
|
3
|
+
import { d as defineCustomElement$3 } from './cura-icon2.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './cura-paragraph2.js';
|
|
5
5
|
|
|
6
6
|
const curaAlertCss = ":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:calc(var(--cura-spacing-base) * 3px);gap:calc(var(--cura-spacing-base) * 3px);flex-shrink:0;border:1px solid var(--color-base);border-radius:4px;background-color:var(--color-lighter)}:host .conteiner.floating{box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host .content{flex:1;flex-direction:column;display:flex;gap:calc(var(--cura-spacing-base) * 1px)}:host .icon-right{cursor:pointer}";
|
|
@@ -55,7 +55,7 @@ const CuraAlert$1 = /*@__PURE__*/ proxyCustomElement(class CuraAlert extends HTM
|
|
|
55
55
|
return this.icon ? this.icon : iconMapping[this.type];
|
|
56
56
|
}
|
|
57
57
|
render() {
|
|
58
|
-
return (h(Host, { key: 'a0b22404673b1568b9cb937150dda71ce4c99d50' }, h("div", { key: 'c30bf1b97d1e1ffaf334ef3bca6cdd1f081c679c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '1bd88c8a19e073d7b9d967d8df38bb74063cd110', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '0df09a27c27c7e1743f7cfb9e71c96b102ff4484', class: "content" }, this.label ? (h("cura-
|
|
58
|
+
return (h(Host, { key: 'a0b22404673b1568b9cb937150dda71ce4c99d50' }, h("div", { key: 'c30bf1b97d1e1ffaf334ef3bca6cdd1f081c679c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '1bd88c8a19e073d7b9d967d8df38bb74063cd110', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '0df09a27c27c7e1743f7cfb9e71c96b102ff4484', class: "content" }, this.label ? (h("cura-heading", { class: "title", size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "1px 0" }, this.label)) : '', h("cura-paragraph", { key: '00a039ac0b80bac62eb261c5cf8401b605e867a4', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'ba6989082e1f15337d5bb390b799b3dc3fda12eb' })), h("slot", { key: 'def5ab8aeca163432a52c9eb810f69c95d012313', name: "actions" })), this.closeable ?
|
|
59
59
|
(h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
|
|
60
60
|
: '')));
|
|
61
61
|
}
|
|
@@ -78,19 +78,19 @@ function defineCustomElement$1() {
|
|
|
78
78
|
if (typeof customElements === "undefined") {
|
|
79
79
|
return;
|
|
80
80
|
}
|
|
81
|
-
const components = ["cura-alert", "cura-
|
|
81
|
+
const components = ["cura-alert", "cura-heading", "cura-icon", "cura-paragraph"];
|
|
82
82
|
components.forEach(tagName => { switch (tagName) {
|
|
83
83
|
case "cura-alert":
|
|
84
84
|
if (!customElements.get(tagName)) {
|
|
85
85
|
customElements.define(tagName, CuraAlert$1);
|
|
86
86
|
}
|
|
87
87
|
break;
|
|
88
|
-
case "cura-
|
|
88
|
+
case "cura-heading":
|
|
89
89
|
if (!customElements.get(tagName)) {
|
|
90
90
|
defineCustomElement$4();
|
|
91
91
|
}
|
|
92
92
|
break;
|
|
93
|
-
case "cura-
|
|
93
|
+
case "cura-icon":
|
|
94
94
|
if (!customElements.get(tagName)) {
|
|
95
95
|
defineCustomElement$3();
|
|
96
96
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-alert.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,8eAA8e,CAAC;AACpgB,wBAAe,YAAY;;MCKdA,WAAS;;;;;;QAkDpB,gBAAW,GAAG;YACZ,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;SACpB,CAAC;oBAlDuD,MAAM;wBAC3B,KAAK;;yBAEJ,IAAI;;sBAGvB,EAAE;;IAKpB,SAAS;QACP,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,UAAU,EAAE;YAC1D,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,EAAE;YACnD,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,QAAQ,EAAE;YACtD,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,EAAE;SACrD,CAAC;QAEF,MAAM,CAAC,OAAO,CAAC,KAAK;YAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SAC7E,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,qBAAO,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAC1E,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;KAChB;IAED,WAAW;QACT,MAAM,WAAW,GAAG;YAClB,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,aAAa;YACtB,KAAK,EAAE,eAAe;SACvB,CAAC;QACF,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACvD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,kEAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,GAAc,EACzG,4DAAK,KAAK,EAAC,SAAS,IAChB,IAAI,CAAC,KAAK,IACZ,
|
|
1
|
+
{"file":"cura-alert.js","mappings":"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","names":["CuraAlert"],"sources":["src/components/cura-alert/cura-alert.scss?tag=cura-alert&encapsulation=shadow","src/components/cura-alert/cura-alert.tsx"],"sourcesContent":["@import \"../../scss/mixins/spacing.scss\";\n\n:host {\n display: block;\n box-sizing: border-box;\n\n .conteiner {\n display: flex;\n box-sizing: border-box;\n padding: #{$spacing-xxxs};\n gap: #{$spacing-xxxs};\n flex-shrink: 0;\n border: 1px solid var(--color-base);\n border-radius: 4px;\n background-color: var(--color-lighter);\n &.floating {\n box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n }\n }\n\n .content {\n flex: 1;\n flex-direction: column;\n display: flex;\n gap: #{$spacing-tiny};\n }\n\n .icon-right {\n cursor: pointer;\n }\n\n}\n","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n tag: 'cura-alert',\n styleUrl: 'cura-alert.scss',\n shadow: true,\n})\nexport class CuraAlert {\n @Element() host: HTMLElement;\n\n @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n @Prop({ reflect: true }) floating = false;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) closeable = true;\n @Prop({ reflect: true }) icon: string;\n\n @State() styles = {};\n\n @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n @Watch('type')\n setColors() {\n const colors = [\n { name: '--color-lighter', theme: `${this.type}-lighter` },\n { name: '--neutral-black', theme: 'neutral-black' },\n { name: '--color-light', theme: `${this.type}-light` },\n { name: '--color-base', theme: `${this.type}-base` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n });\n this.styles = {...this.styles};\n }\n\n connectedCallback() {\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes['conteiner'] = true;\n classes['floating'] = this.floating;\n return classes;\n }\n\n getNameIcon() {\n const iconMapping = {\n info: 'infoCircle',\n success: 'checkCircle',\n warning: 'alertCircle',\n error: 'alertTriangle',\n };\n return this.icon ? this.icon : iconMapping[this.type];\n }\n\n handleClose = () => {\n this.close.emit();\n this.host.remove();\n };\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n <div class=\"content\">\n { this.label ? (\n <cura-heading class=\"title\" size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"1px 0\">\n {this.label}\n </cura-heading>\n ) : ''}\n <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <slot></slot>\n </cura-paragraph>\n <slot name=\"actions\"></slot>\n </div>\n { this.closeable ?\n (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n : '' }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -27,9 +27,7 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
|
|
|
27
27
|
this.styles = {};
|
|
28
28
|
}
|
|
29
29
|
sizeHandler(size) {
|
|
30
|
-
|
|
31
|
-
this.styles['--border'] = this.border && `${avatarSize.border}px`;
|
|
32
|
-
this.styles['--size'] = `${this.size}px`;
|
|
30
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--size': `${size}px` });
|
|
33
31
|
}
|
|
34
32
|
getClasses() {
|
|
35
33
|
const classes = {};
|
|
@@ -42,17 +40,19 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
|
|
|
42
40
|
this.sizeHandler(this.size);
|
|
43
41
|
}
|
|
44
42
|
hostCSSProperties() {
|
|
43
|
+
const avatarSize = avatarSizes[this.size];
|
|
45
44
|
return {
|
|
46
45
|
'--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),
|
|
47
46
|
'--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),
|
|
48
47
|
'--border-radius': `${this.borderRadius}`,
|
|
48
|
+
'--border': this.border ? `${avatarSize.border}px` : '0',
|
|
49
49
|
};
|
|
50
50
|
}
|
|
51
51
|
onSrcError() {
|
|
52
52
|
this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
|
|
53
53
|
}
|
|
54
54
|
render() {
|
|
55
|
-
return (h(Host, { key: '
|
|
55
|
+
return (h(Host, { key: '4e81726b8f163587f37fc80a537470147ca0b8f8', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '0e844cd40171f401e51fef97a434e4ffbad1c946', class: this.getClasses(), style: this.styles }, h("img", { key: '92e0ecfb0996f822b53bcb41e91b92f619e1fbf6', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
|
|
56
56
|
}
|
|
57
57
|
get host() { return this; }
|
|
58
58
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-avatar.js","mappings":";;AAAO,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACrB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;IACnB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;CACvB;;ACLD,MAAM,aAAa,GAAG,4bAA4b,CAAC;AACnd,yBAAe,aAAa;;MCMfA,YAAU;;;;;oBAGqB,IAAI;+BACK,mBAAmB;;4BAEtB,KAAK;sBACV,KAAK;oBACQ,SAAS;;;;sBAK/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,
|
|
1
|
+
{"file":"cura-avatar.js","mappings":";;AAAO,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACrB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;IACnB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;CACvB;;ACLD,MAAM,aAAa,GAAG,4bAA4b,CAAC;AACnd,yBAAe,aAAa;;MCMfA,YAAU;;;;;oBAGqB,IAAI;+BACK,mBAAmB;;4BAEtB,KAAK;sBACV,KAAK;oBACQ,SAAS;;;;sBAK/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,IAAI,IAAI,GACtB,CAAC;KACH;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;KAChB;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;YACzC,UAAU,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,IAAI,GAAG,GAAG;SACzD,CAAC;KACH;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;KAChG;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK,IAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAvatar"],"sources":["src/components/cura-avatar/cura-avatar.definitions.tsx","src/components/cura-avatar/cura-avatar.scss?tag=cura-avatar&encapsulation=shadow","src/components/cura-avatar/cura-avatar.tsx"],"sourcesContent":["export const avatarSizes = {\n '80': { border: 2.5 },\n '40': { border: 2.25 },\n '32': { border: 2 },\n '24': { border: 1.75 },\n};\n",":host {\n display: inline-flex;\n\n .conteiner {\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n width: var(--size);\n height: var(--size);\n border: var(--border) solid var(--border-color);\n border-radius: var(--border-radius);\n background: var(--background-color);\n overflow: hidden;\n &.floating {\n box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n }\n }\n .conteiner img {\n outline: none;\n object-fit: contain;\n width: 100%;\n height: 100%;\n }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n tag: 'cura-avatar',\n styleUrl: 'cura-avatar.scss',\n shadow: true,\n})\nexport class CuraAvatar {\n @Element() host: HTMLElement;\n\n @Prop() size: '80' | '40' | '32' | '24' = '80';\n @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n @Prop({ reflect: true }) borderColor: string;\n @Prop({ reflect: true }) borderRadius: string = '50%';\n @Prop({ reflect: true }) border: boolean = false;\n @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n @Prop({ reflect: true, mutable: true }) imageSrc: string;\n @Prop({ reflect: true }) imageSrcDefault: string;\n @Prop({ reflect: true }) floating: boolean;\n\n @State() styles = {};\n\n @Watch('size')\n sizeHandler(size: string) {\n this.styles = {\n ...this.styles,\n '--size': `${size}px`,\n };\n }\n\n assetsPath: string;\n\n getClasses() {\n const classes = {};\n classes['conteiner'] = true;\n classes['floating'] = this.floating;\n return classes;\n }\n\n connectedCallback() {\n this.assetsPath = window.CuraAPI.localAssetsPath;\n this.sizeHandler(this.size);\n }\n\n hostCSSProperties() {\n const avatarSize = avatarSizes[this.size];\n\n return {\n '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n '--border-radius': `${this.borderRadius}`,\n '--border': this.border ? `${avatarSize.border}px` : '0',\n };\n }\n\n onSrcError() {\n this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()} role=\"img\">\n <div class={this.getClasses()} style={this.styles}>\n <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -3569,7 +3569,7 @@ var locale = {
|
|
|
3569
3569
|
};
|
|
3570
3570
|
const ptBR = locale;
|
|
3571
3571
|
|
|
3572
|
-
const curaCalendarCss = ":host{display:block;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);margin:0 auto}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);border-radius:4px;overflow:hidden;background:#fff;font-family:var(--font-family)}:host .calendar.embedded{border:2px solid var(--neutral-light);padding:0px 12px 12px 12px}:host .calendar.floating{box-shadow:0 4px 8px var(--neutral-light)}:host .header{position:relative;padding:12px 0}:host .header::after{content:\"\";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:7px 10px 0px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:\"\";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--
|
|
3572
|
+
const curaCalendarCss = ":host{display:block;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);margin:0 auto}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);border-radius:4px;overflow:hidden;background:#fff;font-family:var(--font-family)}:host .calendar.embedded{border:2px solid var(--neutral-light);padding:0px 12px 12px 12px}:host .calendar.floating{box-shadow:0 4px 8px var(--neutral-light)}:host .header{position:relative;padding:12px 0}:host .header::after{content:\"\";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:7px 10px 0px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:\"\";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--primary-base);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}:host .icon:active::before{transform:translate(-50%, -50%) scale(1)}:host .icon:active{transform:scale(1)}:host .collapsed-container{text-align:center;position:relative;display:flex;align-items:center;justify-content:center;padding-top:10px}:host .collapsed-container::before{content:\"\";position:absolute;bottom:0;top:0;left:2px;right:2px;border-top:2px dotted var(--neutral-light)}:host .date{display:flex;justify-content:center;align-items:center;height:auto;width:14.2857142857%;aspect-ratio:1;font-size:14px;cursor:pointer;position:relative;box-sizing:border-box;text-align:center;flex-shrink:0}:host .date.today{border:2px solid var(--primary-darker);border-radius:50%;color:var(--primary-darker)}:host .date.selected{color:var(--select-label) !important;background:var(--primary-base);border-radius:50%}:host .date.default-dates{color:var(--neutral-white);background:var(--primary-base);border-radius:50%;border:none}:host .date.invalid{color:var(--neutral-dark) !important;cursor:not-allowed}:host .date.invalid:hover{background:none;box-shadow:none}:host .date.valid{color:var(--primary-darker);font-weight:var(--font-weight-bold)}:host .date.range.start{border-radius:50% 0 0 50%;color:var(--select-label) !important;background:var(--primary-base)}:host .date.range.interval{border-radius:0;background:var(--primary-lighter);color:var(--neutral-black) !important}:host .date.range.interval.today{border:none}:host .date.range.end{border-radius:0 50% 50% 0;color:var(--select-label) !important;background:var(--primary-base)}:host .date:hover{background:var(--primary-lighter);border-radius:50%;color:var(--neutral-white)}:host select,:host input{width:60px;font-size:16px;box-shadow:0 2px 2px var(--neutral-black);padding:5px;border-radius:4px;border:1px solid #ccc;background:#f7f7f7}";
|
|
3573
3573
|
const CuraCalendarStyle0 = curaCalendarCss;
|
|
3574
3574
|
|
|
3575
3575
|
const CuraCalendar = /*@__PURE__*/ proxyCustomElement(class CuraCalendar extends HTMLElement {
|
|
@@ -3599,6 +3599,7 @@ const CuraCalendar = /*@__PURE__*/ proxyCustomElement(class CuraCalendar extends
|
|
|
3599
3599
|
this.collapsed = null;
|
|
3600
3600
|
this.floating = undefined;
|
|
3601
3601
|
this.embedded = undefined;
|
|
3602
|
+
this.selectLabelColorMode = 'light';
|
|
3602
3603
|
this.currentDate = new Date();
|
|
3603
3604
|
this.selectedDates = [];
|
|
3604
3605
|
this.rangeStart = null;
|
|
@@ -3611,12 +3612,15 @@ const CuraCalendar = /*@__PURE__*/ proxyCustomElement(class CuraCalendar extends
|
|
|
3611
3612
|
this.setFontProperties();
|
|
3612
3613
|
this.initializeDefaultDates();
|
|
3613
3614
|
const colors = [
|
|
3614
|
-
{ name: '--
|
|
3615
|
-
{ name: '--
|
|
3615
|
+
{ name: '--primary-base', theme: 'primary-base' },
|
|
3616
|
+
{ name: '--primary-lighter', theme: 'primary-lighter' },
|
|
3617
|
+
{ name: '--primary-light', theme: 'primary-light' },
|
|
3616
3618
|
{ name: '--neutral-black', theme: 'neutral-black' },
|
|
3617
3619
|
{ name: '--primary-darker', theme: 'primary-darker' },
|
|
3618
3620
|
{ name: '--neutral-dark', theme: 'neutral-dark' },
|
|
3619
3621
|
{ name: '--neutral-light', theme: 'neutral-light' },
|
|
3622
|
+
{ name: '--neutral-white', theme: 'neutral-white' },
|
|
3623
|
+
{ name: '--select-label', theme: this.selectLabelColorMode === 'dark' ? 'neutral-black' : 'neutral-white' },
|
|
3620
3624
|
];
|
|
3621
3625
|
colors.forEach(color => (this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) })));
|
|
3622
3626
|
}
|
|
@@ -4026,7 +4030,7 @@ const CuraCalendar = /*@__PURE__*/ proxyCustomElement(class CuraCalendar extends
|
|
|
4026
4030
|
}
|
|
4027
4031
|
render() {
|
|
4028
4032
|
const { months } = this.fetchMonthNames();
|
|
4029
|
-
return (h(Host, { key: '
|
|
4033
|
+
return (h(Host, { key: 'ae4a9147b11d95bbc2551b2ae090e94544e6dfff', style: this.getHostCSSProperties() }, h("div", { key: '84c22c868bbd9ccbfe6167b5162c8196ebd816a8', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, h("header", { key: 'ea6f883598de9a4ea1801c29eeaec1cf16ab74cc', class: "header" }, h("div", { key: 'e1f03e867a906d73e76245e669dbb8248e6f9d15', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: '81b9e1b8e20d611e3250bac789ed6b8ea1248d59', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (h("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), h("cura-select", { size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: '5e1b1e265ceeb4910014ea637fdd6909d8cd1076', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), h("span", { key: '3cfb73b9e65e546526f30e25e440bf9235c01213', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), h("div", { key: 'b4a4a2cfbac55a1b965b1f52e4ac06e5fef2be54', class: "dates" }, !this.collapsed
|
|
4030
4034
|
? this.fetchDaysOfMonth().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
|
|
4031
4035
|
: this.fetchDaysOfWeek().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (h("div", { class: "collapsed-container" }, h("cura-button-transparent", { onClick: () => this.showNotColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "plusCircle" }, "Veja mais datas"))) : (h("div", { class: "collapsed-container" }, h("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "minusCircle" }, "Veja menos datas")))) : null)));
|
|
4032
4036
|
}
|
|
@@ -4054,6 +4058,7 @@ const CuraCalendar = /*@__PURE__*/ proxyCustomElement(class CuraCalendar extends
|
|
|
4054
4058
|
"collapsed": [1540],
|
|
4055
4059
|
"floating": [1540],
|
|
4056
4060
|
"embedded": [1540],
|
|
4061
|
+
"selectLabelColorMode": [513, "select-label-color-mode"],
|
|
4057
4062
|
"currentDate": [32],
|
|
4058
4063
|
"selectedDates": [32],
|
|
4059
4064
|
"rangeStart": [32],
|