@rededor/cura 1.6.1-alpha.11 → 1.6.1-alpha.13
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/assets/assets/icons/iconset-default-list.ts +1 -1
- package/dist/assets/assets/icons/iconset-default-tmp.svg +4 -0
- package/dist/assets/assets/icons/iconset-default.svg +1 -1
- package/dist/cjs/{app-globals-28c6f5c4.js → app-globals-6d5b51b6.js} +2 -2
- package/dist/cjs/{app-globals-28c6f5c4.js.map → app-globals-6d5b51b6.js.map} +1 -1
- package/dist/cjs/{cura-accordion_18.cjs.entry.js → cura-accordion_20.cjs.entry.js} +142 -3
- package/dist/cjs/cura-accordion_20.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-display.cjs.entry.js +1 -1
- package/dist/cjs/cura-icons-view.cjs.entry.js +1 -1
- package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-tabs-button.cjs.entry.js +106 -0
- package/dist/cjs/cura-tabs-button.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-tabs-transparent.cjs.entry.js +105 -0
- package/dist/cjs/cura-tabs-transparent.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-tabs.definitions-b8955ad4.js +12 -0
- package/dist/cjs/cura-tabs.definitions-b8955ad4.js.map +1 -0
- package/dist/cjs/{cura-theme-module-f1e4a309.js → cura-theme-module-09bb63a4.js} +32 -1
- package/dist/cjs/cura-theme-module-09bb63a4.js.map +1 -0
- package/dist/cjs/cura.cjs.js +3 -3
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/collection/api/theme-presets/theme-perinatal-temporary.js +32 -0
- package/dist/collection/api/theme-presets/theme-perinatal-temporary.js.map +1 -0
- package/dist/collection/api/theme-presets/theme-presets.js +2 -0
- package/dist/collection/api/theme-presets/theme-presets.js.map +1 -1
- package/dist/collection/assets/icons/iconset-default-list.js +1 -1
- package/dist/collection/assets/icons/iconset-default-list.js.map +1 -1
- package/dist/collection/assets/icons/iconset-default-tmp.svg +4 -0
- package/dist/collection/assets/icons/iconset-default.svg +1 -1
- package/dist/collection/assets-raw/icons/default/vaccine.svg +3 -0
- package/dist/collection/collection-manifest.json +4 -0
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js +1 -1
- package/dist/collection/components/tabs/cura-tabs/cura-tabs.css +170 -0
- package/dist/collection/components/tabs/cura-tabs/cura-tabs.js +263 -0
- package/dist/collection/components/tabs/cura-tabs/cura-tabs.js.map +1 -0
- package/dist/collection/components/tabs/cura-tabs/cura-tabs.stories.js +89 -0
- package/dist/collection/components/tabs/cura-tabs/cura-tabs.stories.js.map +1 -0
- package/dist/collection/components/tabs/cura-tabs-button/cura-tabs-button.css +176 -0
- package/dist/collection/components/tabs/cura-tabs-button/cura-tabs-button.js +259 -0
- package/dist/collection/components/tabs/cura-tabs-button/cura-tabs-button.js.map +1 -0
- package/dist/collection/components/tabs/cura-tabs-button/cura-tabs-button.stories.js +96 -0
- package/dist/collection/components/tabs/cura-tabs-button/cura-tabs-button.stories.js.map +1 -0
- package/dist/collection/components/tabs/cura-tabs-group/cura-tabs-group.css +25 -0
- package/dist/collection/components/tabs/cura-tabs-group/cura-tabs-group.js +133 -0
- package/dist/collection/components/tabs/cura-tabs-group/cura-tabs-group.js.map +1 -0
- package/dist/collection/components/tabs/cura-tabs-group/cura-tabs-group.stories.js +65 -0
- package/dist/collection/components/tabs/cura-tabs-group/cura-tabs-group.stories.js.map +1 -0
- package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.css +168 -0
- package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.js +258 -0
- package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.js.map +1 -0
- package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.js +89 -0
- package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.js.map +1 -0
- package/dist/collection/components/tabs/cura-tabs.definitions.js +7 -0
- package/dist/collection/components/tabs/cura-tabs.definitions.js.map +1 -0
- package/dist/collection/components/text/cura-display/cura-display.js +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
- package/dist/components/cura-display.js +1 -1
- package/dist/components/cura-heading2.js +1 -1
- package/dist/components/cura-icons-view.js +1 -1
- package/dist/components/cura-icons-view.js.map +1 -1
- package/dist/components/cura-paragraph2.js +1 -1
- package/dist/components/cura-tabs-button.d.ts +11 -0
- package/dist/components/cura-tabs-button.js +150 -0
- package/dist/components/cura-tabs-button.js.map +1 -0
- package/dist/components/cura-tabs-group.d.ts +11 -0
- package/dist/components/cura-tabs-group.js +64 -0
- package/dist/components/cura-tabs-group.js.map +1 -0
- package/dist/components/cura-tabs-transparent.d.ts +11 -0
- package/dist/components/cura-tabs-transparent.js +143 -0
- package/dist/components/cura-tabs-transparent.js.map +1 -0
- package/dist/components/cura-tabs.d.ts +11 -0
- package/dist/components/cura-tabs.definitions.js +10 -0
- package/dist/components/cura-tabs.definitions.js.map +1 -0
- package/dist/components/cura-tabs.js +148 -0
- package/dist/components/cura-tabs.js.map +1 -0
- package/dist/components/index.js +39 -0
- package/dist/components/index.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/cura.esm.js.map +1 -1
- package/dist/cura/index.esm.js +1 -1
- package/dist/cura/p-53c18ed4.js +2 -0
- package/dist/cura/p-53c18ed4.js.map +1 -0
- package/dist/cura/p-5c6f9593.entry.js +2 -0
- package/dist/cura/p-5c6f9593.entry.js.map +1 -0
- package/dist/cura/{p-0c25333f.js → p-6cbd49dd.js} +2 -2
- package/dist/cura/{p-0c25333f.js.map → p-6cbd49dd.js.map} +1 -1
- package/dist/cura/p-7e2d1229.entry.js +2 -0
- package/dist/cura/p-7e2d1229.entry.js.map +1 -0
- package/dist/cura/{p-ac01bec2.entry.js → p-8aade007.entry.js} +2 -2
- package/dist/cura/p-9f460031.js +2 -0
- package/dist/cura/p-9f460031.js.map +1 -0
- package/dist/cura/p-b4ee956b.entry.js +2 -0
- package/dist/cura/p-b4ee956b.entry.js.map +1 -0
- package/dist/cura/p-b6ff8ac1.entry.js +2 -0
- package/dist/cura/p-b6ff8ac1.entry.js.map +1 -0
- package/dist/esm/{app-globals-ca1945d1.js → app-globals-c2abb41c.js} +2 -2
- package/dist/esm/{app-globals-ca1945d1.js.map → app-globals-c2abb41c.js.map} +1 -1
- package/dist/esm/{cura-accordion_18.entry.js → cura-accordion_20.entry.js} +141 -4
- package/dist/esm/cura-accordion_20.entry.js.map +1 -0
- package/dist/esm/cura-display.entry.js +1 -1
- package/dist/esm/cura-icons-view.entry.js +1 -1
- package/dist/esm/cura-icons-view.entry.js.map +1 -1
- package/dist/esm/cura-tabs-button.entry.js +102 -0
- package/dist/esm/cura-tabs-button.entry.js.map +1 -0
- package/dist/esm/cura-tabs-transparent.entry.js +101 -0
- package/dist/esm/cura-tabs-transparent.entry.js.map +1 -0
- package/dist/esm/cura-tabs.definitions-a017126e.js +10 -0
- package/dist/esm/cura-tabs.definitions-a017126e.js.map +1 -0
- package/dist/esm/{cura-theme-module-0fa5ee0b.js → cura-theme-module-bf286f68.js} +32 -1
- package/dist/esm/cura-theme-module-bf286f68.js.map +1 -0
- package/dist/esm/cura.js +3 -3
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/api/theme-presets/theme-perinatal-temporary.d.ts +43 -0
- package/dist/types/api/theme-presets/theme-presets.d.ts +43 -0
- package/dist/types/components/tabs/cura-tabs/cura-tabs.d.ts +30 -0
- package/dist/types/components/tabs/cura-tabs/cura-tabs.stories.d.ts +99 -0
- package/dist/types/components/tabs/cura-tabs-button/cura-tabs-button.d.ts +29 -0
- package/dist/types/components/tabs/cura-tabs-button/cura-tabs-button.stories.d.ts +99 -0
- package/dist/types/components/tabs/cura-tabs-group/cura-tabs-group.d.ts +18 -0
- package/dist/types/components/tabs/cura-tabs-group/cura-tabs-group.stories.d.ts +57 -0
- package/dist/types/components/tabs/cura-tabs-transparent/cura-tabs-transparent.d.ts +29 -0
- package/dist/types/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.d.ts +99 -0
- package/dist/types/components/tabs/cura-tabs.definitions.d.ts +6 -0
- package/dist/types/components.d.ts +164 -0
- package/package.json +2 -2
- package/dist/cjs/cura-accordion_18.cjs.entry.js.map +0 -1
- package/dist/cjs/cura-theme-module-f1e4a309.js.map +0 -1
- package/dist/cura/p-07817634.entry.js +0 -2
- package/dist/cura/p-07817634.entry.js.map +0 -1
- package/dist/cura/p-bf8e2037.js +0 -2
- package/dist/cura/p-bf8e2037.js.map +0 -1
- package/dist/cura/p-d936d5cf.entry.js +0 -2
- package/dist/cura/p-d936d5cf.entry.js.map +0 -1
- package/dist/esm/cura-accordion_18.entry.js.map +0 -1
- package/dist/esm/cura-theme-module-0fa5ee0b.js.map +0 -1
- /package/dist/cura/{p-ac01bec2.entry.js.map → p-8aade007.entry.js.map} +0 -0
package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.js
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s)
|
|
4
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
import iconNames from "../../../assets/icons/iconset-default-list";
|
|
14
|
+
const renderCuraTabsTransparent = (args) => `
|
|
15
|
+
<cura-tabs-transparent
|
|
16
|
+
name=${args.name}
|
|
17
|
+
icon-name=${args.iconName}
|
|
18
|
+
selected=${args.selected}
|
|
19
|
+
disabled=${args.disabled}
|
|
20
|
+
border-bottom=${args.borderBottom}
|
|
21
|
+
size=${args.size}
|
|
22
|
+
color-mode=${args.colorMode}
|
|
23
|
+
>
|
|
24
|
+
Label
|
|
25
|
+
</cura-tabs-transparent>
|
|
26
|
+
`;
|
|
27
|
+
export default {
|
|
28
|
+
title: 'Componentes/Tabs/Tabs Transparent',
|
|
29
|
+
tags: ['autodocs'],
|
|
30
|
+
render: (_a) => {
|
|
31
|
+
var args = __rest(_a, []);
|
|
32
|
+
return renderCuraTabsTransparent(args);
|
|
33
|
+
},
|
|
34
|
+
argTypes: {
|
|
35
|
+
name: {
|
|
36
|
+
control: 'text',
|
|
37
|
+
description: 'Define o identificador único do tabs. Obrigatório definir um "name" distinto para cada cura-tabs-transparent quando utilizado dentro de um tabs-group, garantindo o controle correto do estado e a seleção da aba ativa.',
|
|
38
|
+
table: {
|
|
39
|
+
category: 'Properties',
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
iconName: {
|
|
43
|
+
control: { type: 'select' },
|
|
44
|
+
options: ['', ...iconNames],
|
|
45
|
+
description: 'Define o nome do ícone exibido do iconset.',
|
|
46
|
+
table: {
|
|
47
|
+
category: 'Properties',
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
selected: { control: 'boolean', description: 'Define se a aba está selecionada.', table: { category: 'State', defaultValue: { summary: false } } },
|
|
51
|
+
disabled: { control: 'boolean', description: 'Define se a aba está desabilitada.', table: { category: 'State', defaultValue: { summary: false } } },
|
|
52
|
+
borderBottom: { control: 'boolean', description: 'Define se a borda inferior é exibida.', table: { category: 'Properties', defaultValue: { summary: 'true' } } },
|
|
53
|
+
size: {
|
|
54
|
+
control: 'select',
|
|
55
|
+
options: ['small', 'medium', 'large'],
|
|
56
|
+
description: 'Define o tamanho do elemento.',
|
|
57
|
+
table: {
|
|
58
|
+
category: 'Properties',
|
|
59
|
+
defaultValue: { summary: 'large' },
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
colorMode: {
|
|
63
|
+
control: { type: 'inline-radio' },
|
|
64
|
+
options: ['light', 'dark'],
|
|
65
|
+
description: 'Define a cor de tema.',
|
|
66
|
+
table: {
|
|
67
|
+
category: 'Properties',
|
|
68
|
+
defaultValue: { summary: 'light' },
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
tabSelect: {
|
|
72
|
+
action: 'tabSelect',
|
|
73
|
+
description: 'Evento disparado ao clicar na aba. Retorna o "name" da aba.',
|
|
74
|
+
table: { category: 'Events' },
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
export const CuraTabs = {
|
|
79
|
+
args: {
|
|
80
|
+
name: 'tab1',
|
|
81
|
+
iconName: 'infoCircle',
|
|
82
|
+
selected: false,
|
|
83
|
+
disabled: false,
|
|
84
|
+
borderBottom: true,
|
|
85
|
+
size: 'large',
|
|
86
|
+
colorMode: 'light',
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=cura-tabs-transparent.stories.js.map
|
package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cura-tabs-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,MAAM,yBAAyB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC;;aAEpC,IAAI,CAAC,IAAI;kBACJ,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,QAAQ;iBACb,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;aAC1B,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,SAAS;;;;CAIhC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EACT,0NAA0N;YAC5N,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;YAC3B,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,mCAAmC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QAClJ,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oCAAoC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QACnJ,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,uCAAuC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;QAChK,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,WAAW,EAAE,+BAA+B;YAC5C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;YAC1B,WAAW,EAAE,uBAAuB;YACpC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,6DAA6D;YAC1E,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;SAC9B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,IAAI;QAClB,IAAI,EAAE,OAAO;QACb,SAAS,EAAE,OAAO;KACnB;CACF,CAAC","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraTabsTransparent = (args: any) => `\n <cura-tabs-transparent\n name=${args.name}\n icon-name=${args.iconName}\n selected=${args.selected}\n disabled=${args.disabled}\n border-bottom=${args.borderBottom}\n size=${args.size}\n color-mode=${args.colorMode}\n >\n Label\n </cura-tabs-transparent>\n`;\n\nexport default {\n title: 'Componentes/Tabs/Tabs Transparent',\n tags: ['autodocs'],\n render: ({ ...args }) => {\n return renderCuraTabsTransparent(args);\n },\n argTypes: {\n name: {\n control: 'text',\n description:\n 'Define o identificador único do tabs. Obrigatório definir um \"name\" distinto para cada cura-tabs-transparent quando utilizado dentro de um tabs-group, garantindo o controle correto do estado e a seleção da aba ativa.',\n table: {\n category: 'Properties',\n },\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Define o nome do ícone exibido do iconset.',\n table: {\n category: 'Properties',\n },\n },\n selected: { control: 'boolean', description: 'Define se a aba está selecionada.', table: { category: 'State', defaultValue: { summary: false } } },\n disabled: { control: 'boolean', description: 'Define se a aba está desabilitada.', table: { category: 'State', defaultValue: { summary: false } } },\n borderBottom: { control: 'boolean', description: 'Define se a borda inferior é exibida.', table: { category: 'Properties', defaultValue: { summary: 'true' } } },\n size: {\n control: 'select',\n options: ['small', 'medium', 'large'],\n description: 'Define o tamanho do elemento.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'large' },\n },\n },\n colorMode: {\n control: { type: 'inline-radio' },\n options: ['light', 'dark'],\n description: 'Define a cor de tema.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' },\n },\n },\n tabSelect: {\n action: 'tabSelect',\n description: 'Evento disparado ao clicar na aba. Retorna o \"name\" da aba.',\n table: { category: 'Events' },\n },\n },\n};\n\nexport const CuraTabs = {\n args: {\n name: 'tab1',\n iconName: 'infoCircle',\n selected: false,\n disabled: false,\n borderBottom: true,\n size: 'large',\n colorMode: 'light',\n },\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cura-tabs.definitions.js","sourceRoot":"","sources":["../../../src/components/tabs/cura-tabs.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;CAClB,CAAC","sourcesContent":["export const labelSizes = {\n small: 'xsmall',\n medium: 'small',\n large: 'medium',\n default: 'medium',\n};\n"]}
|
|
@@ -60,7 +60,7 @@ export class CuraDisplay {
|
|
|
60
60
|
return tags[`${this.level}`] || tags['default'];
|
|
61
61
|
}
|
|
62
62
|
render() {
|
|
63
|
-
return (h(Host, { key: '
|
|
63
|
+
return (h(Host, { key: '264f7e93aac5ecb7a775c6e505f230518e3959f4', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
|
|
64
64
|
}
|
|
65
65
|
static get is() { return "cura-display"; }
|
|
66
66
|
static get encapsulation() { return "shadow"; }
|
|
@@ -59,7 +59,7 @@ export class CuraHeading {
|
|
|
59
59
|
return tags[`${this.level}`] || tags['default'];
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (h(Host, { key: '
|
|
62
|
+
return (h(Host, { key: 'd32c25d0110f82182f4559789f3d2db04e040afe', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
|
|
63
63
|
}
|
|
64
64
|
static get is() { return "cura-heading"; }
|
|
65
65
|
static get encapsulation() { return "shadow"; }
|
|
@@ -43,7 +43,7 @@ export class CuraParagraph {
|
|
|
43
43
|
return classes;
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: 'c3789e60b50107cc39c51e4a3ec317e86c966689', style: this.hostCSSProperties() }, h("p", { key: 'f70ffc6277b6164dfc8d230123820efb3d5daa64', style: this.styles, class: this.getClasses() }, h("slot", { key: '66251e59d51637fc7820516b17af8947cc9168e8' }))));
|
|
47
47
|
}
|
|
48
48
|
static get is() { return "cura-paragraph"; }
|
|
49
49
|
static get encapsulation() { return "shadow"; }
|
|
@@ -67,7 +67,7 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends
|
|
|
67
67
|
return tags[`${this.level}`] || tags['default'];
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
|
-
return (h(Host, { key: '
|
|
70
|
+
return (h(Host, { key: '264f7e93aac5ecb7a775c6e505f230518e3959f4', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
|
|
71
71
|
}
|
|
72
72
|
get host() { return this; }
|
|
73
73
|
static get watchers() { return {
|
|
@@ -66,7 +66,7 @@ const CuraHeading = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends H
|
|
|
66
66
|
return tags[`${this.level}`] || tags['default'];
|
|
67
67
|
}
|
|
68
68
|
render() {
|
|
69
|
-
return (h(Host, { key: '
|
|
69
|
+
return (h(Host, { key: 'd32c25d0110f82182f4559789f3d2db04e040afe', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
|
|
70
70
|
}
|
|
71
71
|
get host() { return this; }
|
|
72
72
|
static get style() { return CuraHeadingStyle0; }
|
|
@@ -3,7 +3,7 @@ import { i as iconSizes, d as defineCustomElement$3 } from './cura-icon2.js';
|
|
|
3
3
|
import { d as defineCustomElement$4 } from './cura-heading2.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './cura-label2.js';
|
|
5
5
|
|
|
6
|
-
const iconsetdefaulticons = ["360", "accessibility", "accessibility2", "accessibility3", "accessibility4", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "contacts", "currency", "delete", "desktop", "doc", "down", "download", "drug", "duplicate", "edit", "elevator", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "parking", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCancel", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
|
|
6
|
+
const iconsetdefaulticons = ["360", "accessibility", "accessibility2", "accessibility3", "accessibility4", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "contacts", "currency", "delete", "desktop", "doc", "down", "download", "drug", "duplicate", "edit", "elevator", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "parking", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCancel", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "vaccine", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
|
|
7
7
|
|
|
8
8
|
const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:flex;align-items:center}.iconSizes .size{display:flex;flex-direction:column;text-align:center;align-items:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px;margin:8px 0}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#2d2d2d;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:flex;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;transition:opacity 0.2s linear;width:105px;display:flex;flex-direction:column;text-align:center;align-items:center;margin-bottom:16px;box-sizing:border-box;}.icons .icon cura-label{margin-top:8px}.icons .icon cura-paragraph{margin-top:4px}";
|
|
9
9
|
const CuraIconsViewStyle0 = curaIconsViewCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-icons-view.js","mappings":";;;;;AAAA,4BAAe,CAAC,KAAK,EAAC,eAAe,EAAC,gBAAgB,EAAC,gBAAgB,EAAC,gBAAgB,EAAC,SAAS,EAAC,SAAS,EAAC,aAAa,EAAC,eAAe,EAAC,WAAW,EAAC,iBAAiB,EAAC,WAAW,EAAC,iBAAiB,EAAC,YAAY,EAAC,kBAAkB,EAAC,SAAS,EAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,UAAU,EAAC,YAAY,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,YAAY,EAAC,OAAO,EAAC,YAAY,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,OAAO,EAAC,aAAa,EAAC,UAAU,EAAC,QAAQ,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,EAAC,aAAa,EAAC,kBAAkB,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,gBAAgB,EAAC,SAAS,EAAC,YAAY,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,UAAU,EAAC,WAAW,EAAC,YAAY,EAAC,YAAY,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,gBAAgB,EAAC,WAAW,EAAC,eAAe,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,aAAa,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAC,cAAc,EAAC,YAAY,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,YAAY,EAAC,YAAY,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,EAAC,gBAAgB,EAAC,gBAAgB,EAAC,OAAO,EAAC,QAAQ,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,gBAAgB,EAAC,eAAe,EAAC,mBAAmB,EAAC,QAAQ,EAAC,QAAQ,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,cAAc,EAAC,WAAW,EAAC,UAAU,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,CAAC;;
|
|
1
|
+
{"file":"cura-icons-view.js","mappings":"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","names":["CuraIconsView"],"sources":["src/assets/icons/iconset-default-list.ts","src/components/cura-icons-view/cura-icons-view.scss?tag=cura-icons-view&encapsulation=shadow","src/components/cura-icons-view/cura-icons-view.tsx"],"sourcesContent":["export default [\"360\",\"accessibility\",\"accessibility2\",\"accessibility3\",\"accessibility4\",\"addUser\",\"airdrop\",\"alertCircle\",\"alertTriangle\",\"arrowDown\",\"arrowDownCircle\",\"arrowLeft\",\"arrowLeftCircle\",\"arrowRight\",\"arrowRightCircle\",\"arrowUp\",\"arrowUpCircle\",\"attach\",\"avatarF\",\"avatarM\",\"biometry\",\"bloodGroup\",\"calendar\",\"cam\",\"camOff\",\"central\",\"chatCircle\",\"check\",\"checkBadge\",\"checkCircle\",\"checkDouble\",\"clock\",\"close\",\"closeCircle\",\"collapse\",\"config\",\"contacts\",\"currency\",\"delete\",\"desktop\",\"doc\",\"down\",\"download\",\"drug\",\"duplicate\",\"edit\",\"elevator\",\"exam\",\"examDoc\",\"expand\",\"facebook\",\"fileBmp\",\"fileJpg\",\"filePdf\",\"filePng\",\"fileUpload\",\"fileXls\",\"filter\",\"fullscreen\",\"gallery\",\"geotag\",\"geotagUnity\",\"geotagUnityGroup\",\"google\",\"graph\",\"healthPlan\",\"heart\",\"height\",\"height2\",\"home\",\"horizontalList\",\"imageUp\",\"infoCircle\",\"instagram\",\"key\",\"lamp\",\"language\",\"language2\",\"languageEN\",\"languagePT\",\"lattes\",\"left\",\"like\",\"link\",\"linkExternal\",\"linkedin\",\"list\",\"login\",\"logout\",\"mail\",\"maintenance\",\"medDoc\",\"medEspec\",\"medImg\",\"medUser\",\"medical\",\"menuHamburguer\",\"menuKebab\",\"menuMeatballs\",\"mic\",\"micOff\",\"minus\",\"minusCircle\",\"minusSquare\",\"mobile\",\"news\",\"notification\",\"npsDeslike\",\"npsHate\",\"npsLike\",\"npsLove\",\"npsNeutral\",\"order\",\"parking\",\"partner\",\"phone\",\"play\",\"plus\",\"plusCircle\",\"plusSquare\",\"print\",\"profile\",\"profileCircle\",\"questionCircle\",\"questionSquare\",\"range\",\"reload\",\"ribbon\",\"right\",\"schedule\",\"scheduleCancel\",\"scheduleCheck\",\"scheduleHistorico\",\"search\",\"secure\",\"share\",\"siren\",\"sound\",\"soundOff\",\"subItem\",\"swap\",\"target\",\"team\",\"telegram\",\"twitter\",\"unLink\",\"unSecure\",\"unity\",\"unlike\",\"up\",\"upload\",\"vaccine\",\"verticalList\",\"viewFalse\",\"viewTrue\",\"weight\",\"whatsapp\",\"wifi\",\"wifiOff\",\"youtube\",\"zoomIn\",\"zoomOut\"];",":host {\n display: block;\n padding: 24px;\n font-family: 'Roboto', Arial, Helvetica, sans-serif;\n}\n\n.iconDetail {\n display: block;\n}\n\n.iconSizes {\n display: flex;\n align-items: center;\n\n\n .size {\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n margin-right: 9px;\n padding: 8px;\n\n &:last-child { margin-right: 0; }\n span {\n font-size: 10px;\n margin: 8px 0;\n }\n }\n\n &.invert {\n margin-top: 12px;\n\n .size {\n background-color: #2d2d2d;\n color: #F6F6F6;\n border-radius: 3px;\n }\n }\n}\n\n.icons {\n margin-top: 28px;\n display: flex;\n flex-wrap: wrap;\n position: relative;\n\n .icon {\n position: relative;\n padding: 4px;\n cursor: pointer;\n opacity: .6;\n transition: opacity .2s linear;\n width: 105px;\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n margin-bottom: 16px;\n box-sizing: border-box;\n cura-label {\n margin-top: 8px;\n }\n cura-paragraph {\n margin-top: 4px;\n }\n /* &.selected {\n transform: scale(1.2);\n } */\n }\n}\n\n","import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n tag: 'cura-icons-view',\n styleUrl: 'cura-icons-view.scss',\n shadow: true,\n})\nexport class CuraIconsView {\n\n sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n @State() selected = iconsetdefaulticons[0];\n\n connectedCallback() {\n this.sizes.unshift(this.sizes.pop());\n }\n\n setSelected = (icon) => {\n this.selected = icon;\n }\n\n render() {\n return (\n <Host>\n <div class=\"iconDetail\">\n <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n <div class=\"iconSizes\">\n { this.sizes.map( size =>\n <div class=\"size\">\n <cura-icon name={this.selected} size={size}></cura-icon>\n <span>{ size }</span>\n </div>\n )}\n </div>\n <div class=\"iconSizes invert\">\n { this.sizes.map( size =>\n <div class=\"size\">\n <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n <span>{ size }</span>\n </div>\n )}\n </div>\n </div>\n <div class=\"icons\">\n { iconsetdefaulticons.map(icon =>\n <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n <cura-icon\n name={icon}\n size=\"32\"\n color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n <cura-label\n size=\"xsmall\"\n weight={icon === this.selected ? 'bold' : 'regular'}\n color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -50,7 +50,7 @@ const CuraParagraph = /*@__PURE__*/ proxyCustomElement(class CuraParagraph exten
|
|
|
50
50
|
return classes;
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
53
|
-
return (h(Host, { key: '
|
|
53
|
+
return (h(Host, { key: 'c3789e60b50107cc39c51e4a3ec317e86c966689', style: this.hostCSSProperties() }, h("p", { key: 'f70ffc6277b6164dfc8d230123820efb3d5daa64', style: this.styles, class: this.getClasses() }, h("slot", { key: '66251e59d51637fc7820516b17af8947cc9168e8' }))));
|
|
54
54
|
}
|
|
55
55
|
get host() { return this; }
|
|
56
56
|
static get style() { return CuraParagraphStyle0; }
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface CuraTabsButton extends Components.CuraTabsButton, HTMLElement {}
|
|
4
|
+
export const CuraTabsButton: {
|
|
5
|
+
prototype: CuraTabsButton;
|
|
6
|
+
new (): CuraTabsButton;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
import { l as labelSizes } from './cura-tabs.definitions.js';
|
|
3
|
+
import { d as defineCustomElement$4 } from './cura-badge-counter2.js';
|
|
4
|
+
import { d as defineCustomElement$3 } from './cura-icon2.js';
|
|
5
|
+
import { d as defineCustomElement$2 } from './cura-label2.js';
|
|
6
|
+
|
|
7
|
+
const curaTabsButtonCss = ":host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none;display:flex;align-items:center;justify-content:center;min-width:120px;width:fit-content;border:2px solid var(--border-color);border-radius:4px}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button:not(.selected),:host a:not(.selected){border:2px solid var(--border-color)}:host button:not(.disabled,.selected):hover,:host a:not(.disabled,.selected):hover{background-color:var(--background-color-hover)}:host button:not(.disabled,.selected):hover.dark,:host a:not(.disabled,.selected):hover.dark{border-color:var(--neutral-purewhite)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px)}:host button:focus,:host a:focus{border-color:var(--primary-light)}:host button cura-icon,:host a cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button cura-badge-counter,:host a cura-badge-counter{margin-left:calc(var(--cura-spacing-base) * 2px)}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--background-color-selected)}:host button.selected.disabled,:host a.selected.disabled{border-color:transparent;background-color:var(--background-disabled-selected)}:host button.disabled,:host a.disabled{cursor:not-allowed}:host button.disabled:not(.selected),:host a.disabled:not(.selected){border-color:var(--neutral-dark)}";
|
|
8
|
+
const CuraTabsButtonStyle0 = curaTabsButtonCss;
|
|
9
|
+
|
|
10
|
+
const CuraTabs = /*@__PURE__*/ proxyCustomElement(class CuraTabs extends HTMLElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super();
|
|
13
|
+
this.__registerHost();
|
|
14
|
+
this.__attachShadow();
|
|
15
|
+
this.tabSelect = createEvent(this, "tabSelect", 7);
|
|
16
|
+
this.name = undefined;
|
|
17
|
+
this.iconName = undefined;
|
|
18
|
+
this.counter = 1;
|
|
19
|
+
this.selected = false;
|
|
20
|
+
this.disabled = false;
|
|
21
|
+
this.size = 'large';
|
|
22
|
+
this.colorMode = 'light';
|
|
23
|
+
this.hovered = false;
|
|
24
|
+
this.styles = {};
|
|
25
|
+
}
|
|
26
|
+
setColors() {
|
|
27
|
+
const colors = [
|
|
28
|
+
{ name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light' },
|
|
29
|
+
{ name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-light' : null },
|
|
30
|
+
{
|
|
31
|
+
name: '--background-disabled-selected',
|
|
32
|
+
theme: this.colorMode === 'light' ? 'neutral-white' : 'neutral-black',
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
name: '--border-color',
|
|
36
|
+
theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light',
|
|
37
|
+
},
|
|
38
|
+
];
|
|
39
|
+
colors.forEach(c => {
|
|
40
|
+
if (c.theme)
|
|
41
|
+
this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);
|
|
42
|
+
});
|
|
43
|
+
this.styles = Object.assign({}, this.styles);
|
|
44
|
+
}
|
|
45
|
+
computeContentColor() {
|
|
46
|
+
if (this.disabled)
|
|
47
|
+
return 'neutral-dark';
|
|
48
|
+
if (this.colorMode === 'dark') {
|
|
49
|
+
if (this.hovered && !this.selected) {
|
|
50
|
+
return 'neutral-purewhite';
|
|
51
|
+
}
|
|
52
|
+
return this.selected ? 'neutral-black' : 'primary-lighter';
|
|
53
|
+
}
|
|
54
|
+
return this.selected ? 'neutral-purewhite' : 'primary-dark';
|
|
55
|
+
}
|
|
56
|
+
getIcon() {
|
|
57
|
+
if (!this.iconName)
|
|
58
|
+
return '';
|
|
59
|
+
const iconSize = this.size === 'large' ? 20 : 16;
|
|
60
|
+
const iconColor = this.computeContentColor();
|
|
61
|
+
return h("cura-icon", { name: this.iconName, size: iconSize, color: iconColor });
|
|
62
|
+
}
|
|
63
|
+
getClasses() {
|
|
64
|
+
return {
|
|
65
|
+
[this.size]: true,
|
|
66
|
+
[this.colorMode]: true,
|
|
67
|
+
selected: this.selected,
|
|
68
|
+
disabled: this.disabled,
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
getCounter() {
|
|
72
|
+
return h("cura-badge-counter", { number: this.counter, color: "primary", disabled: this.disabled, class: "badge-number" });
|
|
73
|
+
}
|
|
74
|
+
connectedCallback() {
|
|
75
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'), '--neutral-dark': window.CuraAPI.theme.colors.getColor('neutral-dark'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
|
|
76
|
+
this.setColors();
|
|
77
|
+
}
|
|
78
|
+
handleMouseEnter() {
|
|
79
|
+
if (this.disabled)
|
|
80
|
+
return;
|
|
81
|
+
this.hovered = true;
|
|
82
|
+
}
|
|
83
|
+
handleMouseLeave() {
|
|
84
|
+
this.hovered = false;
|
|
85
|
+
}
|
|
86
|
+
handleClick(e) {
|
|
87
|
+
if (this.disabled) {
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
this.selected = !this.selected;
|
|
92
|
+
this.tabSelect.emit({ name: this.name });
|
|
93
|
+
}
|
|
94
|
+
render() {
|
|
95
|
+
const labelSize = labelSizes[this.size] || labelSizes['default'];
|
|
96
|
+
const labelColor = this.computeContentColor();
|
|
97
|
+
return (h(Host, { key: '9410b9c68061ffb5d838fe6ab2f409be9b90c6ac', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, h("button", { key: '1ac26d9b41e072f1ec3668d66fee83679640c54f', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), h("cura-label", { key: 'ff854d36883b062d699388e71e6315f76f008f79', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, h("slot", { key: '6ab5c0cdea38f9094bb382943fe25c3967a681ab' })), this.counter > 0 && this.getCounter())));
|
|
98
|
+
}
|
|
99
|
+
static get watchers() { return {
|
|
100
|
+
"colorMode": ["setColors"]
|
|
101
|
+
}; }
|
|
102
|
+
static get style() { return CuraTabsButtonStyle0; }
|
|
103
|
+
}, [1, "cura-tabs-button", {
|
|
104
|
+
"name": [513],
|
|
105
|
+
"iconName": [513, "icon-name"],
|
|
106
|
+
"counter": [1538],
|
|
107
|
+
"selected": [1540],
|
|
108
|
+
"disabled": [1540],
|
|
109
|
+
"size": [513],
|
|
110
|
+
"colorMode": [1537, "color-mode"],
|
|
111
|
+
"hovered": [32],
|
|
112
|
+
"styles": [32]
|
|
113
|
+
}, undefined, {
|
|
114
|
+
"colorMode": ["setColors"]
|
|
115
|
+
}]);
|
|
116
|
+
function defineCustomElement$1() {
|
|
117
|
+
if (typeof customElements === "undefined") {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
const components = ["cura-tabs-button", "cura-badge-counter", "cura-icon", "cura-label"];
|
|
121
|
+
components.forEach(tagName => { switch (tagName) {
|
|
122
|
+
case "cura-tabs-button":
|
|
123
|
+
if (!customElements.get(tagName)) {
|
|
124
|
+
customElements.define(tagName, CuraTabs);
|
|
125
|
+
}
|
|
126
|
+
break;
|
|
127
|
+
case "cura-badge-counter":
|
|
128
|
+
if (!customElements.get(tagName)) {
|
|
129
|
+
defineCustomElement$4();
|
|
130
|
+
}
|
|
131
|
+
break;
|
|
132
|
+
case "cura-icon":
|
|
133
|
+
if (!customElements.get(tagName)) {
|
|
134
|
+
defineCustomElement$3();
|
|
135
|
+
}
|
|
136
|
+
break;
|
|
137
|
+
case "cura-label":
|
|
138
|
+
if (!customElements.get(tagName)) {
|
|
139
|
+
defineCustomElement$2();
|
|
140
|
+
}
|
|
141
|
+
break;
|
|
142
|
+
} });
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
const CuraTabsButton = CuraTabs;
|
|
146
|
+
const defineCustomElement = defineCustomElement$1;
|
|
147
|
+
|
|
148
|
+
export { CuraTabsButton, defineCustomElement };
|
|
149
|
+
|
|
150
|
+
//# sourceMappingURL=cura-tabs-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"cura-tabs-button.js","mappings":"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","names":[],"sources":["src/components/tabs/cura-tabs-button/cura-tabs-button.scss?tag=cura-tabs-button&encapsulation=shadow","src/components/tabs/cura-tabs-button/cura-tabs-button.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/buttons.scss';\n\n$button-sizes: (\n small: $spacing-mini $spacing-mini,\n medium: $spacing-xxxs $spacing-xxxs,\n large: $spacing-xxxs $spacing-xxs,\n);\n\n:host {\n button,\n a {\n @include button-element() {\n background-color: transparent;\n box-sizing: border-box;\n border: none;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n min-width: 120px;\n width: fit-content;\n\n border: 2px solid var(--border-color);\n border-radius: 4px;\n\n &:not(.selected) {\n border: 2px solid var(--border-color);\n }\n\n &:not(.disabled, .selected):hover {\n background-color: var(--background-color-hover);\n\n &.dark {\n border-color: var(--neutral-purewhite);\n }\n }\n\n @each $size, $padding in $button-sizes {\n &.#{$size} {\n padding: $padding;\n }\n }\n\n &:focus {\n border-color: var(--primary-light);\n }\n\n cura-icon {\n margin-right: #{$spacing-mini};\n }\n\n cura-badge-counter {\n margin-left: #{$spacing-mini};\n }\n\n @include button-selected() {\n background-color: var(--background-color-selected);\n\n &.disabled {\n border-color: transparent;\n background-color: var(--background-disabled-selected);\n }\n }\n\n &.disabled {\n &:not(.selected) {\n border-color: var(--neutral-dark);\n }\n\n cursor: not-allowed;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { labelSizes } from '../cura-tabs.definitions';\n\n@Component({\n tag: 'cura-tabs-button',\n styleUrl: 'cura-tabs-button.scss',\n shadow: true,\n})\nexport class CuraTabs {\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) iconName: string;\n @Prop({ reflect: true, mutable: true }) counter?: number = 1;\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n @State() hovered = false;\n @State() styles: Record<string, string> = {};\n\n @Event() tabSelect: EventEmitter<{ name: string }>;\n\n @Watch('colorMode')\n setColors() {\n const colors = [\n { name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light' },\n { name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-light' : null },\n {\n name: '--background-disabled-selected',\n theme: this.colorMode === 'light' ? 'neutral-white' : 'neutral-black',\n },\n {\n name: '--border-color',\n theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light',\n },\n ];\n\n colors.forEach(c => {\n if (c.theme) this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);\n });\n\n this.styles = { ...this.styles };\n }\n\n computeContentColor(): string {\n if (this.disabled) return 'neutral-dark';\n\n if (this.colorMode === 'dark') {\n if (this.hovered && !this.selected) {\n return 'neutral-purewhite';\n }\n return this.selected ? 'neutral-black' : 'primary-lighter';\n }\n\n return this.selected ? 'neutral-purewhite' : 'primary-dark';\n }\n\n getIcon() {\n if (!this.iconName) return '';\n const iconSize = this.size === 'large' ? 20 : 16;\n const iconColor = this.computeContentColor();\n\n return <cura-icon name={this.iconName} size={iconSize} color={iconColor}></cura-icon>;\n }\n\n getClasses() {\n return {\n [this.size]: true,\n [this.colorMode]: true,\n selected: this.selected,\n disabled: this.disabled,\n };\n }\n\n getCounter() {\n return <cura-badge-counter number={this.counter} color=\"primary\" disabled={this.disabled} class=\"badge-number\"></cura-badge-counter>;\n }\n\n connectedCallback() {\n this.styles = {\n ...this.styles,\n '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'),\n '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n '--neutral-dark': window.CuraAPI.theme.colors.getColor('neutral-dark'),\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n };\n\n this.setColors();\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n handleClick(e: Event) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n\n this.selected = !this.selected;\n this.tabSelect.emit({ name: this.name });\n }\n\n render() {\n const labelSize = labelSizes[this.size] || labelSizes['default'];\n const labelColor = this.computeContentColor();\n\n return (\n <Host role=\"button\" aria-pressed={this.selected} aria-disabled={this.disabled}>\n <button\n class={this.getClasses()}\n style={this.styles}\n onClick={e => this.handleClick(e)}\n disabled={this.disabled}\n onMouseEnter={this.handleMouseEnter.bind(this)}\n onMouseLeave={this.handleMouseLeave.bind(this)}\n >\n {this.getIcon()}\n <cura-label size={labelSize} color={labelColor} lineHeight=\"0\" marginBlock=\"0\">\n <slot></slot>\n </cura-label>\n {this.counter > 0 && this.getCounter()}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface CuraTabsGroup extends Components.CuraTabsGroup, HTMLElement {}
|
|
4
|
+
export const CuraTabsGroup: {
|
|
5
|
+
prototype: CuraTabsGroup;
|
|
6
|
+
new (): CuraTabsGroup;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
const curaTabsGroupCss = ":host{display:flex;gap:var(--gap)}:host(.border-bottom){position:relative}:host(.border-bottom)::after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--border-color);z-index:0}::slotted(cura-tabs),::slotted(cura-tabs-transparent){position:relative;z-index:1}";
|
|
4
|
+
const CuraTabsGroupStyle0 = curaTabsGroupCss;
|
|
5
|
+
|
|
6
|
+
const CuraTabsGroup$1 = /*@__PURE__*/ proxyCustomElement(class CuraTabsGroup extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
this.__attachShadow();
|
|
11
|
+
this.tabChange = createEvent(this, "tabChange", 7);
|
|
12
|
+
this.gap = 0;
|
|
13
|
+
this.borderBottom = true;
|
|
14
|
+
this.colorMode = 'light';
|
|
15
|
+
this.styles = {};
|
|
16
|
+
}
|
|
17
|
+
handleTabSelect(ev) {
|
|
18
|
+
this.updateSelectedTab(ev.detail.name);
|
|
19
|
+
}
|
|
20
|
+
updateSelectedTab(value) {
|
|
21
|
+
const tabs = this.host.querySelectorAll('cura-tabs, cura-tabs-transparent, cura-tabs-button');
|
|
22
|
+
tabs.forEach((tab) => {
|
|
23
|
+
tab.selected = tab.name === value;
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
getClasses() {
|
|
27
|
+
return {
|
|
28
|
+
'border-bottom': this.borderBottom,
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
connectedCallback() {
|
|
32
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--border-color': window.CuraAPI.theme.colors.getColor(this.colorMode === 'light' ? 'neutral-base' : 'primary-base'), '--gap': `${this.gap}px` });
|
|
33
|
+
}
|
|
34
|
+
render() {
|
|
35
|
+
return (h(Host, { key: 'fb6a6ae52fd5bdfb8c3978a75f26be87479ccafa', role: "tablist", style: this.styles, class: this.getClasses() }, h("slot", { key: 'afca97b27c8359f8236331257e4db41f1332e071' })));
|
|
36
|
+
}
|
|
37
|
+
get host() { return this; }
|
|
38
|
+
static get style() { return CuraTabsGroupStyle0; }
|
|
39
|
+
}, [1, "cura-tabs-group", {
|
|
40
|
+
"gap": [514],
|
|
41
|
+
"borderBottom": [1540, "border-bottom"],
|
|
42
|
+
"colorMode": [1537, "color-mode"],
|
|
43
|
+
"styles": [32]
|
|
44
|
+
}, [[0, "tabSelect", "handleTabSelect"]]]);
|
|
45
|
+
function defineCustomElement$1() {
|
|
46
|
+
if (typeof customElements === "undefined") {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const components = ["cura-tabs-group"];
|
|
50
|
+
components.forEach(tagName => { switch (tagName) {
|
|
51
|
+
case "cura-tabs-group":
|
|
52
|
+
if (!customElements.get(tagName)) {
|
|
53
|
+
customElements.define(tagName, CuraTabsGroup$1);
|
|
54
|
+
}
|
|
55
|
+
break;
|
|
56
|
+
} });
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const CuraTabsGroup = CuraTabsGroup$1;
|
|
60
|
+
const defineCustomElement = defineCustomElement$1;
|
|
61
|
+
|
|
62
|
+
export { CuraTabsGroup, defineCustomElement };
|
|
63
|
+
|
|
64
|
+
//# sourceMappingURL=cura-tabs-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"cura-tabs-group.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sSAAsS,CAAC;AAChU,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;;mBACe,CAAC;4BACwB,IAAI;yBACE,OAAO;sBAEnC,EAAE;;IAO5C,eAAe,CAAC,EAAiC;QAC/C,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACxC;IAED,iBAAiB,CAAC,KAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oDAAoD,CAAC,CAAC;QAE9F,IAAI,CAAC,OAAO,CAAC,CAAC,GAAwB;YACpC,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC;SACnC,CAAC,CAAC;KACJ;IAED,UAAU;QACR,OAAO;YACL,eAAe,EAAE,IAAI,CAAC,YAAY;SACnC,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,cAAc,CAAC,EACpH,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,GACzB,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC/D,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraTabsGroup"],"sources":["src/components/tabs/cura-tabs-group/cura-tabs-group.scss?tag=cura-tabs-group&encapsulation=shadow","src/components/tabs/cura-tabs-group/cura-tabs-group.tsx"],"sourcesContent":[":host {\n display: flex;\n gap: var(--gap);\n}\n\n:host(.border-bottom) {\n position: relative;\n}\n\n:host(.border-bottom)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: var(--border-color);\n z-index: 0;\n}\n\n::slotted(cura-tabs),\n::slotted(cura-tabs-transparent) {\n position: relative;\n z-index: 1;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-tabs-group',\n styleUrl: 'cura-tabs-group.scss',\n shadow: true,\n})\nexport class CuraTabsGroup {\n @Prop({ reflect: true }) gap: number = 0;\n @Prop({ reflect: true, mutable: true }) borderBottom: boolean = true;\n @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n @State() styles: Record<string, string> = {};\n\n @Element() host: HTMLElement;\n\n @Event() tabChange: EventEmitter<string>;\n\n @Listen('tabSelect')\n handleTabSelect(ev: CustomEvent<{ name: string }>) {\n this.updateSelectedTab(ev.detail.name);\n }\n\n updateSelectedTab(value: string) {\n const tabs = this.host.querySelectorAll('cura-tabs, cura-tabs-transparent, cura-tabs-button');\n\n tabs.forEach((tab: HTMLCuraTabsElement) => {\n tab.selected = tab.name === value;\n });\n }\n\n getClasses() {\n return {\n 'border-bottom': this.borderBottom,\n };\n }\n\n connectedCallback() {\n this.styles = {\n ...this.styles,\n '--border-color': window.CuraAPI.theme.colors.getColor(this.colorMode === 'light' ? 'neutral-base' : 'primary-base'),\n '--gap': `${this.gap}px`,\n };\n }\n\n render() {\n return (\n <Host role=\"tablist\" style={this.styles} class={this.getClasses()}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface CuraTabsTransparent extends Components.CuraTabsTransparent, HTMLElement {}
|
|
4
|
+
export const CuraTabsTransparent: {
|
|
5
|
+
prototype: CuraTabsTransparent;
|
|
6
|
+
new (): CuraTabsTransparent;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|