@rededor/cura 1.6.0-alpha.0 → 1.6.0-alpha.2
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 +12 -7
- 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 +30 -7
- 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 +26 -26
- 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 +14 -8
- 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-506747fb.entry.js +2 -0
- package/dist/cura/p-506747fb.entry.js.map +1 -0
- package/dist/cura/p-823d0bb5.entry.js +2 -0
- package/dist/cura/p-823d0bb5.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/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 +12 -7
- 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 +8 -7
- 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":"AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAEhE,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,EAAE;IAC3C,OAAO,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC;;;;GAIhC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EH,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,EAAE;IACpC,MAAM,KAAK,GAAG;;SAEP,CAAC;IACR,MAAM,IAAI,GAAG;;;YAGH,IAAI,CAAC,IAAI,IAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC;YACnD,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;aACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;mBACnC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC/C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACzC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;YACnE,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC;iBAC/D,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC;mBACzE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,GAAG,CAAC,CAAC,CAAC;sBAC9E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE,IAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;8BAC1C,IAAI,CAAC,UAAU,SAAS,CAAC,CAAC,CAAC,EAAG;MACrD,2BAA2B,CAAC,IAAI,CAAE;;OAElC,CAAC;IACN,OAAO,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC;AAC3B,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,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,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2EAA2E;YACxF,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,WAAW,EAAE,+DAA+D;YAC5E,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,WAAW,EAAE,qOAAqO;YAClP,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACrC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,oCAAoC;YACjD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uBAAuB;YACpC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iCAAiC;YAC9C,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;YAC3B,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aACpC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oGAAoG;YACjH,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAC;aAChC;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,yFAAyF;YACtG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAC;aAC9B;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sEAAsE;YACnF,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uCAAuC;YACpD,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6EAA6E;YAC1F,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iGAAiG;YAC9G,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,+IAA+I;YAC5J,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,4BAA4B;QACnC,WAAW,EAAE,kBAAkB;QAC/B,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,KAAK;QAClB,cAAc,EAAE,GAAG;QACnB,UAAU,EAAE,8BAA8B;KAC3C;CACF,CAAC","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":"AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAEhE,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,EAAE;IAC3C,OAAO,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC;;;;GAIhC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EH,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,EAAE;IACpC,MAAM,KAAK,GAAG;0CAC2B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;6CAClB,IAAI,CAAC,YAAY,gBAAgB,CAAC,CAAC,CAAC,EAAE;SAC1E,CAAC;IACR,MAAM,IAAI,GAAG;;;YAGH,IAAI,CAAC,IAAI,IAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC;YACnD,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;aACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;mBACnC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC/C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACzC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;YACnE,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC;iBAC/D,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC;mBACzE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,GAAG,CAAC,CAAC,CAAC;sBAC9E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE,IAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;8BAC1C,IAAI,CAAC,UAAU,SAAS,CAAC,CAAC,CAAC,EAAG;MACrD,2BAA2B,CAAC,IAAI,CAAE;;OAElC,CAAC;IACN,OAAO,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC;AAC3B,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,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,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qHAAqH;YAClI,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,WAAW,EAAE,+DAA+D;YAC5E,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,WAAW,EAAE,qOAAqO;YAClP,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACrC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,oCAAoC;YACjD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uBAAuB;YACpC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iCAAiC;YAC9C,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;YAC3B,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aACpC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oGAAoG;YACjH,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAC;aAChC;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,yFAAyF;YACtG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAC;aAC9B;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sEAAsE;YACnF,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uCAAuC;YACpD,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6EAA6E;YAC1F,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iGAAiG;YAC9G,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,+IAA+I;YAC5J,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;aAClC;YACD,IAAI,EAAE,cAAc;SACrB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,4BAA4B;QACnC,WAAW,EAAE,kBAAkB;QAC/B,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,KAAK;QAClB,cAAc,EAAE,GAAG;QACnB,UAAU,EAAE,8BAA8B;QAC1C,YAAY,EAAE,EAAE;KACjB;CACF,CAAC","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":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAEhE,MAAM,eAAe,GAAG,CAAC,IAAS,EAAE,EAAE;IACpC,OAAO;;MAEH,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;MACzC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MAC9D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;MACnF,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE;MACrE,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE;MACrD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MACtC,IAAI,CAAC,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE;IAClF,IAAI,CAAC,OAAO;IACZ,IAAI,CAAC,OAAO;;WAEL,CAAC;AACZ,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;YAC/B,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;YACD,IAAI,EAAE,OAAO;SACX;QACD,IAAI,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACpD,WAAW,EAAE,0FAA0F;YACvG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;aAClC;YACD,IAAI,EAAE,MAAM;SACV;QACH,QAAQ,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC;YACpG,WAAW,EAAE,0BAA0B;YACvC,KAAK,EAAE;gBACN,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACtC;YACD,IAAI,EAAE,UAAU;SAChB;QACC,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;YACD,IAAI,EAAE,cAAc;SACrB;QACH,MAAM,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;YAC1B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;YAC3B,WAAW,EAAE,8BAA8B;YAC3C,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,gCAAgC,EAAE;aAC5D;YACD,IAAI,EAAE,MAAM;SACb;QACH,cAAc,EAAE;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,2EAA2E;YACxF,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;YACD,IAAI,EAAE,kBAAkB;SACzB;QACH,OAAO,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0FAA0F;YACvG,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qCAAqC;YAClD,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4EAA4E;YACzF,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uEAAuE;YACpF,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,MAAM;QACd,QAAQ,EAAE,WAAW;QACnB,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,IAAI,EAAE,EAAE;QACV,cAAc,EAAE,KAAK;QACnB,OAAO,EAAE,iCAAiC;QAC1C,OAAO,EAAE;;;;;;;;;;;;;;;;;;;qBAmBQ;KAClB;IACD,UAAU,EAAE,GAAG;CAChB,CAAC","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"]}
|
|
@@ -58,6 +58,32 @@
|
|
|
58
58
|
:host h1.xsmall.bold-weight, :host h1.xsmall ::slotted(b), :host h1.xsmall ::slotted(strong), :host h2.xsmall.bold-weight, :host h2.xsmall ::slotted(b), :host h2.xsmall ::slotted(strong), :host h3.xsmall.bold-weight, :host h3.xsmall ::slotted(b), :host h3.xsmall ::slotted(strong), :host h4.xsmall.bold-weight, :host h4.xsmall ::slotted(b), :host h4.xsmall ::slotted(strong), :host h5.xsmall.bold-weight, :host h5.xsmall ::slotted(b), :host h5.xsmall ::slotted(strong), :host h6.xsmall.bold-weight, :host h6.xsmall ::slotted(b), :host h6.xsmall ::slotted(strong) {
|
|
59
59
|
font-weight: var(--font-weight-bold);
|
|
60
60
|
}
|
|
61
|
+
:host h1 ::slotted(b), :host h1 ::slotted(strong), :host h2 ::slotted(b), :host h2 ::slotted(strong), :host h3 ::slotted(b), :host h3 ::slotted(strong), :host h4 ::slotted(b), :host h4 ::slotted(strong), :host h5 ::slotted(b), :host h5 ::slotted(strong), :host h6 ::slotted(b), :host h6 ::slotted(strong) {
|
|
62
|
+
font-weight: var(--font-weight-medium);
|
|
63
|
+
}
|
|
64
|
+
:host h1 ::slotted(a), :host h2 ::slotted(a), :host h3 ::slotted(a), :host h4 ::slotted(a), :host h5 ::slotted(a), :host h6 ::slotted(a) {
|
|
65
|
+
font-weight: var(--font-weight-bold);
|
|
66
|
+
color: var(--color-spot);
|
|
67
|
+
text-underline-offset: 10%;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
}
|
|
70
|
+
:host h1 ::slotted(u), :host h2 ::slotted(u), :host h3 ::slotted(u), :host h4 ::slotted(u), :host h5 ::slotted(u), :host h6 ::slotted(u) {
|
|
71
|
+
text-underline-offset: 10%;
|
|
72
|
+
}
|
|
73
|
+
:host h1 ::slotted(abbr), :host h2 ::slotted(abbr), :host h3 ::slotted(abbr), :host h4 ::slotted(abbr), :host h5 ::slotted(abbr), :host h6 ::slotted(abbr) {
|
|
74
|
+
color: var(--color-spot);
|
|
75
|
+
text-decoration: underline dashed 1px var(--color-spot);
|
|
76
|
+
text-underline-offset: 10%;
|
|
77
|
+
cursor: default;
|
|
78
|
+
}
|
|
79
|
+
:host h1 ::slotted(i), :host h2 ::slotted(i), :host h3 ::slotted(i), :host h4 ::slotted(i), :host h5 ::slotted(i), :host h6 ::slotted(i) {
|
|
80
|
+
font-weight: var(--font-weight-medium);
|
|
81
|
+
}
|
|
82
|
+
:host h1 ::slotted(em), :host h2 ::slotted(em), :host h3 ::slotted(em), :host h4 ::slotted(em), :host h5 ::slotted(em), :host h6 ::slotted(em) {
|
|
83
|
+
color: var(--color-spot);
|
|
84
|
+
font-weight: var(--font-weight-bold);
|
|
85
|
+
font-style: normal;
|
|
86
|
+
}
|
|
61
87
|
@media (min-width: 769px) and (max-width: 1920px) {
|
|
62
88
|
:host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
|
|
63
89
|
font-size: 2em;
|
|
@@ -94,30 +120,4 @@
|
|
|
94
120
|
line-height: calc(var(--line-height) + 12.857%);
|
|
95
121
|
letter-spacing: 0.28px;
|
|
96
122
|
}
|
|
97
|
-
}
|
|
98
|
-
:host ::slotted(b), :host ::slotted(strong) {
|
|
99
|
-
font-weight: var(--font-weight-medium);
|
|
100
|
-
}
|
|
101
|
-
:host ::slotted(a) {
|
|
102
|
-
font-weight: var(--font-weight-bold);
|
|
103
|
-
color: var(--color-spot);
|
|
104
|
-
text-underline-offset: 10%;
|
|
105
|
-
cursor: pointer;
|
|
106
|
-
}
|
|
107
|
-
:host ::slotted(u) {
|
|
108
|
-
text-underline-offset: 10%;
|
|
109
|
-
}
|
|
110
|
-
:host ::slotted(abbr) {
|
|
111
|
-
color: var(--color-spot);
|
|
112
|
-
text-decoration: underline dashed 1px var(--color-spot);
|
|
113
|
-
text-underline-offset: 10%;
|
|
114
|
-
cursor: default;
|
|
115
|
-
}
|
|
116
|
-
:host ::slotted(i) {
|
|
117
|
-
font-weight: var(--font-weight-medium);
|
|
118
|
-
}
|
|
119
|
-
:host ::slotted(em) {
|
|
120
|
-
color: var(--color-spot);
|
|
121
|
-
font-weight: var(--font-weight-bold);
|
|
122
|
-
font-style: normal;
|
|
123
123
|
}
|
|
@@ -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}
|