@rededor/cura 1.0.0-alpha.7 → 1.0.0
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-bcffd819.js → app-globals-b77d5b06.js} +7 -7
- package/dist/cjs/{app-globals-bcffd819.js.map → app-globals-b77d5b06.js.map} +1 -1
- package/dist/cjs/cura-accordion_12.cjs.entry.js +30 -16
- package/dist/cjs/cura-accordion_12.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-alert.cjs.entry.js +1 -1
- package/dist/cjs/cura-avatar.cjs.entry.js +1 -1
- package/dist/cjs/cura-badge-distance.cjs.entry.js +46 -0
- package/dist/cjs/cura-badge-distance.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-outline.cjs.entry.js +10 -6
- package/dist/cjs/cura-button-outline.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-button-select.cjs.entry.js +2 -2
- package/dist/cjs/cura-button-select.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-button-transparent.cjs.entry.js +11 -7
- package/dist/cjs/cura-button-transparent.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-button.definitions-f036371c.js +12 -0
- package/dist/cjs/cura-button.definitions-f036371c.js.map +1 -0
- package/dist/cjs/cura-calendar.cjs.entry.js +99 -10
- package/dist/cjs/cura-calendar.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-card.cjs.entry.js +1 -1
- package/dist/cjs/cura-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/cura-display.cjs.entry.js +19 -10
- package/dist/cjs/cura-display.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-dropdown-search-option-title.cjs.entry.js +1 -1
- package/dist/cjs/cura-dropdown-search-option.cjs.entry.js +5 -3
- package/dist/cjs/cura-dropdown-search-option.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-dropdown-search.cjs.entry.js +3 -3
- package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-icons-view.cjs.entry.js +4 -4
- package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
- package/dist/cjs/cura-radio.cjs.entry.js +1 -1
- package/dist/cjs/cura-switch.cjs.entry.js +1 -1
- package/dist/cjs/cura-toast.cjs.entry.js +1 -1
- package/dist/cjs/cura.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/api/theme-presets/theme-maternity.js +6 -6
- package/dist/collection/api/theme-presets/theme-maternity.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/drug.svg +3 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.css +28 -0
- package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js +94 -0
- package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js.map +1 -0
- package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.stories.js +56 -0
- package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.stories.js.map +1 -0
- package/dist/collection/components/buttons/cura-button/cura-button.css +61 -65
- package/dist/collection/components/buttons/cura-button/cura-button.js +26 -3
- package/dist/collection/components/buttons/cura-button/cura-button.js.map +1 -1
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js +28 -2
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.css +50 -53
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +28 -6
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js +28 -2
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.css +29 -33
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.js +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.css +37 -54
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +31 -9
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js +16 -6
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button.definitions.js +7 -0
- package/dist/collection/components/buttons/cura-button.definitions.js.map +1 -0
- package/dist/collection/components/cura-alert/cura-alert.js +1 -1
- package/dist/collection/components/cura-avatar/cura-avatar.js +1 -1
- package/dist/collection/components/cura-calendar/cura-calendar.css +18 -1
- package/dist/collection/components/cura-calendar/cura-calendar.js +93 -17
- package/dist/collection/components/cura-calendar/cura-calendar.js.map +1 -1
- package/dist/collection/components/cura-calendar/cura-calendar.stories.js +24 -4
- package/dist/collection/components/cura-calendar/cura-calendar.stories.js.map +1 -1
- package/dist/collection/components/cura-card/cura-card.js +1 -1
- package/dist/collection/components/cura-icon/cura-icon.js +1 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.js +3 -3
- package/dist/collection/components/cura-page-template/cura-page-template.js +1 -1
- package/dist/collection/components/cura-toast/cura-toast.js +1 -1
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +1 -1
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.css +48 -29
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js +4 -2
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js.map +1 -1
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js +1 -1
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js +3 -3
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js +1 -1
- package/dist/collection/components/forms/cura-label/cura-label.js +3 -3
- package/dist/collection/components/forms/cura-label/cura-label.js.map +1 -1
- package/dist/collection/components/forms/cura-radio/cura-radio.js +1 -1
- package/dist/collection/components/forms/cura-select/cura-select.js +14 -3
- package/dist/collection/components/forms/cura-select/cura-select.js.map +1 -1
- package/dist/collection/components/forms/cura-select-options/cura-select-option.js +1 -1
- package/dist/collection/components/forms/cura-switch/cura-switch.js +1 -1
- package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js +1 -1
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +1 -1
- package/dist/collection/components/text/cura-display/cura-display.css +16 -0
- package/dist/collection/components/text/cura-display/cura-display.js +37 -10
- package/dist/collection/components/text/cura-display/cura-display.js.map +1 -1
- package/dist/collection/components/text/cura-display/cura-display.stories.js +13 -2
- package/dist/collection/components/text/cura-display/cura-display.stories.js.map +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +9 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map +1 -1
- package/dist/components/cura-alert.js +1 -1
- package/dist/components/cura-avatar.js +1 -1
- package/dist/components/cura-badge-distance.d.ts +11 -0
- package/dist/components/cura-badge-distance.js +73 -0
- package/dist/components/cura-badge-distance.js.map +1 -0
- package/dist/components/cura-button-outline.js +11 -6
- package/dist/components/cura-button-outline.js.map +1 -1
- package/dist/components/cura-button-select.js +2 -2
- package/dist/components/cura-button-select.js.map +1 -1
- package/dist/components/cura-button-transparent2.js +13 -8
- package/dist/components/cura-button-transparent2.js.map +1 -1
- package/dist/components/cura-button.definitions.js +10 -0
- package/dist/components/cura-button.definitions.js.map +1 -0
- package/dist/components/cura-button.js +10 -4
- package/dist/components/cura-button.js.map +1 -1
- package/dist/components/cura-calendar.js +118 -15
- package/dist/components/cura-calendar.js.map +1 -1
- package/dist/components/cura-card.js +1 -1
- package/dist/components/cura-checkbox.js +1 -1
- package/dist/components/cura-display.js +21 -11
- package/dist/components/cura-display.js.map +1 -1
- package/dist/components/cura-dropdown-search-option-title.js +1 -1
- package/dist/components/cura-dropdown-search-option.js +5 -3
- package/dist/components/cura-dropdown-search-option.js.map +1 -1
- package/dist/components/cura-dropdown-search.js +3 -3
- package/dist/components/cura-dropdown-search.js.map +1 -1
- package/dist/components/cura-heading2.js +1 -1
- package/dist/components/cura-icon2.js +1 -1
- package/dist/components/cura-icons-view.js +4 -4
- package/dist/components/cura-icons-view.js.map +1 -1
- package/dist/components/cura-label2.js +1 -1
- package/dist/components/cura-label2.js.map +1 -1
- package/dist/components/cura-loader-bar2.js +1 -1
- package/dist/components/cura-loader-circle2.js +1 -1
- package/dist/components/cura-page-template.js +1 -1
- package/dist/components/cura-paragraph2.js +2 -2
- package/dist/components/cura-paragraph2.js.map +1 -1
- package/dist/components/cura-radio.js +1 -1
- package/dist/components/cura-select-option2.js +1 -1
- package/dist/components/cura-select2.js +15 -5
- package/dist/components/cura-select2.js.map +1 -1
- package/dist/components/cura-switch.js +1 -1
- package/dist/components/cura-toast.js +1 -1
- package/dist/components/index.js +8 -6
- 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/p-0a923806.entry.js +2 -0
- package/dist/cura/p-0a923806.entry.js.map +1 -0
- package/dist/cura/{p-260edb61.entry.js → p-0d435e42.entry.js} +2 -2
- package/dist/cura/{p-8433fec9.entry.js → p-0dd837cf.entry.js} +2 -2
- package/dist/cura/{p-c63f4695.entry.js → p-2203e829.entry.js} +2 -2
- package/dist/cura/{p-6373c7cd.entry.js → p-4c7a2419.entry.js} +2 -2
- package/dist/cura/p-4ef24fbd.entry.js +2 -0
- package/dist/cura/p-4ef24fbd.entry.js.map +1 -0
- package/dist/cura/p-57b8b468.entry.js +2 -0
- package/dist/cura/p-57b8b468.entry.js.map +1 -0
- package/dist/cura/p-599acc84.entry.js +2 -0
- package/dist/cura/p-599acc84.entry.js.map +1 -0
- package/dist/cura/p-6682619b.entry.js +2 -0
- package/dist/cura/p-6682619b.entry.js.map +1 -0
- package/dist/cura/{p-5fcfbf32.entry.js → p-66c5cf5f.entry.js} +2 -2
- package/dist/cura/{p-4eaeb590.entry.js → p-84d8c67d.entry.js} +2 -2
- package/dist/cura/p-a00d2c68.entry.js +2 -0
- package/dist/cura/p-a00d2c68.entry.js.map +1 -0
- package/dist/cura/{p-a9dad622.entry.js → p-a5cf0fd6.entry.js} +2 -2
- package/dist/cura/{p-70c369b1.js → p-a6c3c0ea.js} +2 -2
- package/dist/cura/{p-70c369b1.js.map → p-a6c3c0ea.js.map} +1 -1
- package/dist/cura/{p-f016eb62.entry.js → p-ad8a7e0f.entry.js} +2 -2
- package/dist/cura/p-b301a1ef.entry.js +2 -0
- package/dist/cura/p-b301a1ef.entry.js.map +1 -0
- package/dist/cura/{p-0b1829ed.entry.js → p-dc5d0c29.entry.js} +2 -2
- package/dist/cura/p-dc5d0c29.entry.js.map +1 -0
- package/dist/cura/p-df5c3a86.entry.js +2 -0
- package/dist/cura/{p-17a878d4.entry.js.map → p-df5c3a86.entry.js.map} +1 -1
- package/dist/cura/p-dfc65f66.entry.js +2 -0
- package/dist/cura/p-efcb32eb.js +2 -0
- package/dist/cura/p-efcb32eb.js.map +1 -0
- package/dist/cura/p-f9433d24.entry.js +2 -0
- package/dist/cura/p-f9433d24.entry.js.map +1 -0
- package/dist/esm/{app-globals-f2da2b14.js → app-globals-488bf508.js} +7 -7
- package/dist/esm/{app-globals-f2da2b14.js.map → app-globals-488bf508.js.map} +1 -1
- package/dist/esm/cura-accordion_12.entry.js +30 -16
- package/dist/esm/cura-accordion_12.entry.js.map +1 -1
- package/dist/esm/cura-alert.entry.js +1 -1
- package/dist/esm/cura-avatar.entry.js +1 -1
- package/dist/esm/cura-badge-distance.entry.js +42 -0
- package/dist/esm/cura-badge-distance.entry.js.map +1 -0
- package/dist/esm/cura-button-outline.entry.js +10 -6
- package/dist/esm/cura-button-outline.entry.js.map +1 -1
- package/dist/esm/cura-button-select.entry.js +2 -2
- package/dist/esm/cura-button-select.entry.js.map +1 -1
- package/dist/esm/cura-button-transparent.entry.js +11 -7
- package/dist/esm/cura-button-transparent.entry.js.map +1 -1
- package/dist/esm/cura-button.definitions-617d3bad.js +10 -0
- package/dist/esm/cura-button.definitions-617d3bad.js.map +1 -0
- package/dist/esm/cura-calendar.entry.js +99 -10
- package/dist/esm/cura-calendar.entry.js.map +1 -1
- package/dist/esm/cura-card.entry.js +1 -1
- package/dist/esm/cura-checkbox.entry.js +1 -1
- package/dist/esm/cura-display.entry.js +19 -10
- package/dist/esm/cura-display.entry.js.map +1 -1
- package/dist/esm/cura-dropdown-search-option-title.entry.js +1 -1
- package/dist/esm/cura-dropdown-search-option.entry.js +5 -3
- package/dist/esm/cura-dropdown-search-option.entry.js.map +1 -1
- package/dist/esm/cura-dropdown-search.entry.js +3 -3
- package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
- package/dist/esm/cura-icons-view.entry.js +4 -4
- package/dist/esm/cura-icons-view.entry.js.map +1 -1
- package/dist/esm/cura-loader-bar.entry.js +1 -1
- package/dist/esm/cura-radio.entry.js +1 -1
- package/dist/esm/cura-switch.entry.js +1 -1
- package/dist/esm/cura-toast.entry.js +1 -1
- package/dist/esm/cura.js +2 -2
- package/dist/esm/loader.js +2 -2
- package/dist/types/components/badges/cura-badge-distance/cura-badge-distance.d.ts +12 -0
- package/dist/types/components/badges/cura-badge-distance/cura-badge-distance.stories.d.ts +39 -0
- package/dist/types/components/buttons/cura-button/cura-button.d.ts +5 -0
- package/dist/types/components/buttons/cura-button/cura-button.stories.d.ts +23 -0
- package/dist/types/components/buttons/cura-button-outline/cura-button-outline.d.ts +6 -1
- package/dist/types/components/buttons/cura-button-outline/cura-button-outline.stories.d.ts +23 -0
- package/dist/types/components/buttons/cura-button-transparent/cura-button-transparent.d.ts +6 -0
- package/dist/types/components/buttons/cura-button-transparent/cura-button-transparent.stories.d.ts +11 -0
- package/dist/types/components/buttons/cura-button.definitions.d.ts +6 -0
- package/dist/types/components/cura-calendar/cura-calendar.d.ts +13 -7
- package/dist/types/components/cura-calendar/cura-calendar.stories.d.ts +23 -1
- package/dist/types/components/forms/cura-label/cura-label.d.ts +1 -1
- package/dist/types/components/forms/cura-select/cura-select.d.ts +1 -0
- package/dist/types/components/text/cura-display/cura-display.d.ts +6 -0
- package/dist/types/components/text/cura-display/cura-display.stories.d.ts +14 -0
- package/dist/types/components.d.ts +67 -14
- package/package.json +2 -2
- package/dist/cura/p-0b1829ed.entry.js.map +0 -1
- package/dist/cura/p-17a878d4.entry.js +0 -2
- package/dist/cura/p-335323b5.entry.js +0 -2
- package/dist/cura/p-335323b5.entry.js.map +0 -1
- package/dist/cura/p-67e34464.entry.js +0 -2
- package/dist/cura/p-67e34464.entry.js.map +0 -1
- package/dist/cura/p-79fa3b97.entry.js +0 -2
- package/dist/cura/p-79fa3b97.entry.js.map +0 -1
- package/dist/cura/p-89014323.entry.js +0 -2
- package/dist/cura/p-89014323.entry.js.map +0 -1
- package/dist/cura/p-9a4094e3.entry.js +0 -2
- package/dist/cura/p-9a4094e3.entry.js.map +0 -1
- package/dist/cura/p-af2036a7.entry.js +0 -2
- package/dist/cura/p-b0d66386.entry.js +0 -2
- package/dist/cura/p-b0d66386.entry.js.map +0 -1
- package/dist/cura/p-c518a91c.entry.js +0 -2
- package/dist/cura/p-c518a91c.entry.js.map +0 -1
- /package/dist/cura/{p-260edb61.entry.js.map → p-0d435e42.entry.js.map} +0 -0
- /package/dist/cura/{p-8433fec9.entry.js.map → p-0dd837cf.entry.js.map} +0 -0
- /package/dist/cura/{p-c63f4695.entry.js.map → p-2203e829.entry.js.map} +0 -0
- /package/dist/cura/{p-6373c7cd.entry.js.map → p-4c7a2419.entry.js.map} +0 -0
- /package/dist/cura/{p-5fcfbf32.entry.js.map → p-66c5cf5f.entry.js.map} +0 -0
- /package/dist/cura/{p-4eaeb590.entry.js.map → p-84d8c67d.entry.js.map} +0 -0
- /package/dist/cura/{p-a9dad622.entry.js.map → p-a5cf0fd6.entry.js.map} +0 -0
- /package/dist/cura/{p-f016eb62.entry.js.map → p-ad8a7e0f.entry.js.map} +0 -0
- /package/dist/cura/{p-af2036a7.entry.js.map → p-dfc65f66.entry.js.map} +0 -0
package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.css
CHANGED
|
@@ -7,6 +7,27 @@
|
|
|
7
7
|
* --font-weight-medium
|
|
8
8
|
* --text-align
|
|
9
9
|
*/
|
|
10
|
+
/**
|
|
11
|
+
* Spacing sass vars
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* Global Spacing Definitions.
|
|
15
|
+
* Required CSS Properties:
|
|
16
|
+
* --base-spacing
|
|
17
|
+
*/
|
|
18
|
+
/* None: 0px */
|
|
19
|
+
/* Tiny default: 4px */
|
|
20
|
+
/* Mini default: 8px */
|
|
21
|
+
/* XXXS default: 12px */
|
|
22
|
+
/* XXS default: 16px */
|
|
23
|
+
/* XS default: 20px */
|
|
24
|
+
/* S default: 20px */
|
|
25
|
+
/* M default: 32px */
|
|
26
|
+
/* L default: 40px */
|
|
27
|
+
/* XL default: 48px */
|
|
28
|
+
/* XXL default: 64px */
|
|
29
|
+
/* XXXL default: 72px */
|
|
30
|
+
/* Huge default: 96px */
|
|
10
31
|
/**
|
|
11
32
|
* Buttons Host element definitions.
|
|
12
33
|
* Use: @include button-host() { ... }
|
|
@@ -72,41 +93,22 @@
|
|
|
72
93
|
border-radius: var(--border-radius);
|
|
73
94
|
position: relative;
|
|
74
95
|
background-color: transparent;
|
|
75
|
-
border
|
|
76
|
-
border: 2px solid transparent;
|
|
96
|
+
border: none;
|
|
77
97
|
}
|
|
78
98
|
:host button:focus, :host a:focus {
|
|
79
99
|
outline: 2px solid #6EA8FF;
|
|
80
100
|
}
|
|
81
101
|
:host button.large, :host a.large {
|
|
82
|
-
padding: calc(var(--base-spacing) *
|
|
83
|
-
min-height: calc(var(--base-spacing) *
|
|
84
|
-
min-width: calc(var(--base-spacing) * 33.7px);
|
|
102
|
+
padding: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);
|
|
103
|
+
min-height: calc(var(--base-spacing) * 11px);
|
|
85
104
|
}
|
|
86
105
|
:host button.medium, :host a.medium {
|
|
87
|
-
padding: calc(var(--base-spacing) *
|
|
88
|
-
min-height: calc(var(--base-spacing) *
|
|
89
|
-
min-width: calc(var(--base-spacing) * 29.95px);
|
|
106
|
+
padding: calc(var(--base-spacing) * 3px);
|
|
107
|
+
min-height: calc(var(--base-spacing) * 10px);
|
|
90
108
|
}
|
|
91
109
|
:host button.small, :host a.small {
|
|
92
|
-
padding: calc(var(--base-spacing) *
|
|
93
|
-
min-height: calc(var(--base-spacing) * 8px);
|
|
94
|
-
min-width: calc(var(--base-spacing) * 21.67px);
|
|
95
|
-
}
|
|
96
|
-
:host button:not(.isLoading).large, :host a:not(.isLoading).large {
|
|
97
|
-
padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
|
|
98
|
-
min-height: calc(var(--base-spacing) * 13px);
|
|
99
|
-
min-width: calc(var(--base-spacing) * 13px);
|
|
100
|
-
}
|
|
101
|
-
:host button:not(.isLoading).medium, :host a:not(.isLoading).medium {
|
|
102
|
-
padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);
|
|
103
|
-
min-height: calc(var(--base-spacing) * 11px);
|
|
104
|
-
min-width: calc(var(--base-spacing) * 11px);
|
|
105
|
-
}
|
|
106
|
-
:host button:not(.isLoading).small, :host a:not(.isLoading).small {
|
|
107
|
-
padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
|
|
110
|
+
padding: calc(var(--base-spacing) * 2px);
|
|
108
111
|
min-height: calc(var(--base-spacing) * 8px);
|
|
109
|
-
min-width: calc(var(--base-spacing) * 8px);
|
|
110
112
|
}
|
|
111
113
|
:host button .button-container, :host a .button-container {
|
|
112
114
|
display: flex;
|
|
@@ -118,43 +120,30 @@
|
|
|
118
120
|
:host button.icon-right .button-container, :host a.icon-right .button-container {
|
|
119
121
|
flex-direction: row-reverse;
|
|
120
122
|
}
|
|
123
|
+
:host button.justify .button-container, :host a.justify .button-container {
|
|
124
|
+
width: 100%;
|
|
125
|
+
}
|
|
121
126
|
:host button cura-label, :host a cura-label {
|
|
122
127
|
flex: 1;
|
|
123
|
-
font-family: var(--font-family);
|
|
124
|
-
font-weight: var(--font-weight-medium);
|
|
125
|
-
font-size: 1.43em;
|
|
126
|
-
line-height: 1.2em;
|
|
127
128
|
text-align: var(--text-align, "left");
|
|
128
129
|
}
|
|
129
|
-
:host button.medium cura-label, :host a.medium cura-label {
|
|
130
|
-
font-size: 1.14em;
|
|
131
|
-
}
|
|
132
|
-
:host button.small cura-label, :host a.small cura-label {
|
|
133
|
-
font-size: 1em;
|
|
134
|
-
}
|
|
135
130
|
:host button.icon-left cura-icon, :host a.icon-left cura-icon {
|
|
136
131
|
margin-right: calc(var(--base-spacing) * 3px);
|
|
137
132
|
}
|
|
138
133
|
:host button.icon-right cura-icon, :host a.icon-right cura-icon {
|
|
139
134
|
margin-left: calc(var(--base-spacing) * 3px);
|
|
140
135
|
}
|
|
141
|
-
:host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon {
|
|
142
|
-
margin-right: calc(var(--base-spacing) *
|
|
136
|
+
:host button.medium.icon-left cura-icon, :host button.small.icon-left cura-icon, :host a.medium.icon-left cura-icon, :host a.small.icon-left cura-icon {
|
|
137
|
+
margin-right: calc(var(--base-spacing) * 2px);
|
|
143
138
|
}
|
|
144
|
-
:host button.medium.icon-right cura-icon, :host a.medium.icon-right cura-icon {
|
|
145
|
-
margin-left: calc(var(--base-spacing) *
|
|
146
|
-
}
|
|
147
|
-
:host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon {
|
|
148
|
-
margin-right: calc(var(--base-spacing) * 2.5px);
|
|
149
|
-
}
|
|
150
|
-
:host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon {
|
|
151
|
-
margin-left: calc(var(--base-spacing) * 2.5px);
|
|
139
|
+
:host button.medium.icon-right cura-icon, :host button.small.icon-right cura-icon, :host a.medium.icon-right cura-icon, :host a.small.icon-right cura-icon {
|
|
140
|
+
margin-left: calc(var(--base-spacing) * 2px);
|
|
152
141
|
}
|
|
153
142
|
:host button.disabled, :host a.disabled {
|
|
154
143
|
cursor: not-allowed;
|
|
155
144
|
}
|
|
156
145
|
:host button.icon-only, :host a.icon-only {
|
|
157
|
-
padding: calc(var(--base-spacing) *
|
|
146
|
+
padding: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px);
|
|
158
147
|
}
|
|
159
148
|
:host button.icon-only cura-label, :host a.icon-only cura-label {
|
|
160
149
|
display: none;
|
|
@@ -164,10 +153,10 @@
|
|
|
164
153
|
margin-right: 0 !important;
|
|
165
154
|
}
|
|
166
155
|
:host button.icon-only.medium, :host a.icon-only.medium {
|
|
167
|
-
padding: calc(var(--base-spacing) *
|
|
156
|
+
padding: calc(var(--base-spacing) * 3px);
|
|
168
157
|
}
|
|
169
158
|
:host button.icon-only.small, :host a.icon-only.small {
|
|
170
|
-
padding: calc(var(--base-spacing) *
|
|
159
|
+
padding: calc(var(--base-spacing) * 2px);
|
|
171
160
|
}
|
|
172
161
|
:host button cura-loader-circle, :host a cura-loader-circle {
|
|
173
162
|
position: absolute;
|
|
@@ -177,14 +166,8 @@
|
|
|
177
166
|
cursor: wait;
|
|
178
167
|
}
|
|
179
168
|
:host button.isLoading .button-container, :host a.isLoading .button-container {
|
|
180
|
-
opacity: 0.3;
|
|
181
|
-
}
|
|
182
|
-
:host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container {
|
|
183
169
|
opacity: 0;
|
|
184
170
|
}
|
|
185
171
|
:host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle {
|
|
186
172
|
display: block;
|
|
187
|
-
}
|
|
188
|
-
:host button.isLoading cura-label, :host a.isLoading cura-label {
|
|
189
|
-
display: none;
|
|
190
173
|
}
|
package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
|
+
import { labelSizes } from "../cura-button.definitions";
|
|
2
3
|
export class CuraButtonTransparent {
|
|
3
4
|
constructor() {
|
|
4
5
|
this.type = 'button';
|
|
@@ -12,8 +13,9 @@ export class CuraButtonTransparent {
|
|
|
12
13
|
this.href = undefined;
|
|
13
14
|
this.target = "_self";
|
|
14
15
|
this.color = 'primary';
|
|
15
|
-
this.fontColor = '
|
|
16
|
+
this.fontColor = 'dark';
|
|
16
17
|
this.textAlign = 'left';
|
|
18
|
+
this.justify = false;
|
|
17
19
|
this.hovered = false;
|
|
18
20
|
this.styles = {};
|
|
19
21
|
}
|
|
@@ -35,12 +37,13 @@ export class CuraButtonTransparent {
|
|
|
35
37
|
classes[`icon-only`] = this.iconOnly;
|
|
36
38
|
classes['disabled'] = this.disabled;
|
|
37
39
|
classes['isLoading'] = this.isLoading;
|
|
40
|
+
classes['justify'] = this.justify;
|
|
38
41
|
return classes;
|
|
39
42
|
}
|
|
40
43
|
getIcon() {
|
|
41
|
-
if (!this.iconName
|
|
44
|
+
if (!this.iconName)
|
|
42
45
|
return null;
|
|
43
|
-
const iconSize = this.size === '
|
|
46
|
+
const iconSize = this.size === 'large' ? 20 : 16;
|
|
44
47
|
return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
|
|
45
48
|
}
|
|
46
49
|
handleMouseEnter() {
|
|
@@ -56,8 +59,7 @@ export class CuraButtonTransparent {
|
|
|
56
59
|
return 'neutral-dark';
|
|
57
60
|
if (this.hovered && !this.isLoading)
|
|
58
61
|
return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`;
|
|
59
|
-
|
|
60
|
-
return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`;
|
|
62
|
+
return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`;
|
|
61
63
|
}
|
|
62
64
|
handleClick(e) {
|
|
63
65
|
if (this.disabled || this.isLoading) {
|
|
@@ -72,7 +74,9 @@ export class CuraButtonTransparent {
|
|
|
72
74
|
}
|
|
73
75
|
}
|
|
74
76
|
render() {
|
|
75
|
-
|
|
77
|
+
const symbolColor = this.getSymbolColor();
|
|
78
|
+
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
79
|
+
return (h(Host, { key: 'a149c7f0dd3a413c563f891c9298d66cde905f5e' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
76
80
|
}
|
|
77
81
|
static get is() { return "cura-button-transparent"; }
|
|
78
82
|
static get encapsulation() { return "shadow"; }
|
|
@@ -282,7 +286,7 @@ export class CuraButtonTransparent {
|
|
|
282
286
|
"text": "Color base from color scheme. Default: accent."
|
|
283
287
|
},
|
|
284
288
|
"attribute": "color",
|
|
285
|
-
"reflect":
|
|
289
|
+
"reflect": true,
|
|
286
290
|
"defaultValue": "'primary'"
|
|
287
291
|
},
|
|
288
292
|
"fontColor": {
|
|
@@ -297,11 +301,11 @@ export class CuraButtonTransparent {
|
|
|
297
301
|
"optional": false,
|
|
298
302
|
"docs": {
|
|
299
303
|
"tags": [],
|
|
300
|
-
"text": "Set the font color to dark or light."
|
|
304
|
+
"text": "Set the font color to dark or light.\nDefault: dark."
|
|
301
305
|
},
|
|
302
306
|
"attribute": "font-color",
|
|
303
307
|
"reflect": true,
|
|
304
|
-
"defaultValue": "'
|
|
308
|
+
"defaultValue": "'dark'"
|
|
305
309
|
},
|
|
306
310
|
"textAlign": {
|
|
307
311
|
"type": "string",
|
|
@@ -320,6 +324,24 @@ export class CuraButtonTransparent {
|
|
|
320
324
|
"attribute": "text-align",
|
|
321
325
|
"reflect": true,
|
|
322
326
|
"defaultValue": "'left'"
|
|
327
|
+
},
|
|
328
|
+
"justify": {
|
|
329
|
+
"type": "boolean",
|
|
330
|
+
"mutable": false,
|
|
331
|
+
"complexType": {
|
|
332
|
+
"original": "boolean",
|
|
333
|
+
"resolved": "boolean",
|
|
334
|
+
"references": {}
|
|
335
|
+
},
|
|
336
|
+
"required": false,
|
|
337
|
+
"optional": false,
|
|
338
|
+
"docs": {
|
|
339
|
+
"tags": [],
|
|
340
|
+
"text": "Justify icons and label inside the button.\nVales: false (default) | true."
|
|
341
|
+
},
|
|
342
|
+
"attribute": "justify",
|
|
343
|
+
"reflect": true,
|
|
344
|
+
"defaultValue": "false"
|
|
323
345
|
}
|
|
324
346
|
};
|
|
325
347
|
}
|
package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-button-transparent.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, AttachInternals } from '@stencil/core';\n\n@Component({\n tag: 'cura-button-transparent',\n styleUrl: 'cura-button-transparent.scss',\n shadow: true,\n formAssociated: true\n})\nexport class CuraButtonTransparent {\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Button type: button (default) | submit | reset\n */\n @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({ reflect: true }) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({ reflect: true }) isLoading = false;\n\n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({ reflect: true }) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({ reflect: true }) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n /**\n * Set button to FAB/icon only.\n */\n @Prop({ reflect: true }) iconOnly = false;\n\n /**\n * Property href switch button to link.\n */\n @Prop({ reflect: true }) href: string;\n /**\n * Set target if link.\n */\n @Prop({ reflect: true }) target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop() color = 'primary';\n\n /**\n * Set the font color to dark or light.\n */\n @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'light';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n @State() hovered = false;\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n return classes;\n }\n\n\n getIcon() {\n if (!this.iconName || this.isLoading) return null;\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n @Watch('fontColor')\n @Watch('color')\n getSymbolColor() {\n if (this.disabled) return 'neutral-dark'\n if (this.hovered && !this.isLoading) return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`\n if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`)\n return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`\n }\n\n handleClick(e: Event) {\n if (this.disabled || this.isLoading) {\n e.preventDefault();\n return;\n }\n if (!this.href) {\n if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n }\n }\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled || null}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}\n type={this.type}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cura-button-transparent.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n tag: 'cura-button-transparent',\n styleUrl: 'cura-button-transparent.scss',\n shadow: true,\n formAssociated: true\n})\nexport class CuraButtonTransparent {\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Button type: button (default) | submit | reset\n */\n @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({ reflect: true }) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({ reflect: true }) isLoading = false;\n\n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({ reflect: true }) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({ reflect: true }) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n /**\n * Set button to FAB/icon only.\n */\n @Prop({ reflect: true }) iconOnly = false;\n\n /**\n * Property href switch button to link.\n */\n @Prop({ reflect: true }) href: string;\n /**\n * Set target if link.\n */\n @Prop({ reflect: true }) target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop({ reflect: true }) color = 'primary';\n\n /**\n * Set the font color to dark or light.\n * Default: dark.\n */\n @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'dark';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Justify icons and label inside the button.\n * Vales: false (default) | true.\n */\n @Prop({ reflect: true }) justify = false;\n\n @State() hovered = false;\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n classes['justify'] = this.justify;\n return classes;\n }\n\n\n getIcon() {\n if (!this.iconName) return null;\n const iconSize = this.size === 'large' ? 20 : 16;\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n @Watch('fontColor')\n @Watch('color')\n getSymbolColor() {\n if (this.disabled) return 'neutral-dark';\n if (this.hovered && !this.isLoading) return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`;\n return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`;\n }\n\n handleClick(e: Event) {\n if (this.disabled || this.isLoading) {\n e.preventDefault();\n return;\n }\n if (!this.href) {\n if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n }\n }\n\n render() {\n const symbolColor = this.getSymbolColor();\n const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n return (\n <Host>\n {this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled || null}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}\n type={this.type}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -13,18 +13,19 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import iconNames from "../../../assets/icons/iconset-default-list";
|
|
14
14
|
const renderCuraButtonTransparent = (label, args) => {
|
|
15
15
|
const block = `<cura-button-transparent${args.size && args.size !== 'large' ? `
|
|
16
|
-
size="${args.size}"` : ''}
|
|
17
|
-
|
|
16
|
+
size="${args.size}"` : ''}${args.type ? `
|
|
17
|
+
type="${args.type}"` : ''}${args.color ? `
|
|
18
18
|
color="${args.color}"` : ''}${args.disabled ? `
|
|
19
19
|
disabled` : ''}${args.isLoading ? `
|
|
20
|
-
is-loading` : ''}${args.fontColor && args.fontColor !== '
|
|
20
|
+
is-loading` : ''}${args.fontColor && args.fontColor !== 'dark' ? `
|
|
21
21
|
font-color="${args.fontColor}"` : ''}${args.iconName ? `
|
|
22
22
|
icon-name="${args.iconName}"` : ''}${args.iconPosition && args.iconPosition !== 'left' ? `
|
|
23
23
|
icon-position="${args.iconPosition}"` : ''}${args.iconOnly ? `
|
|
24
24
|
icon-only` : ''}${args.href ? `
|
|
25
25
|
href="${args.href}"` : ''}${args.target ? `
|
|
26
26
|
target="${args.target}"` : ''}${args.textAlign && args.textAlign !== 'left' ? `
|
|
27
|
-
text-align="${args.textAlign}"` : ''}${args.
|
|
27
|
+
text-align="${args.textAlign}"` : ''}${args.justify ? `
|
|
28
|
+
justify="${args.justify}"` : ''}${args.fullWidth ? `
|
|
28
29
|
style="width: 100%;"` : ''}>
|
|
29
30
|
${label}
|
|
30
31
|
</cura-button-transparent>`;
|
|
@@ -93,7 +94,7 @@ export default {
|
|
|
93
94
|
description: 'Define cor clara ou escura do tema de acordo com contexto.',
|
|
94
95
|
table: {
|
|
95
96
|
category: 'Properties',
|
|
96
|
-
defaultValue: { summary: '
|
|
97
|
+
defaultValue: { summary: 'dark' }
|
|
97
98
|
},
|
|
98
99
|
name: 'font-color'
|
|
99
100
|
},
|
|
@@ -107,6 +108,14 @@ export default {
|
|
|
107
108
|
},
|
|
108
109
|
name: 'text-align'
|
|
109
110
|
},
|
|
111
|
+
justify: {
|
|
112
|
+
control: 'boolean',
|
|
113
|
+
description: 'Expande os elementos internos para a dimensão do botão.',
|
|
114
|
+
table: {
|
|
115
|
+
category: 'Properties',
|
|
116
|
+
defaultValue: { summary: false }
|
|
117
|
+
}
|
|
118
|
+
},
|
|
110
119
|
fullWidth: {
|
|
111
120
|
control: 'boolean',
|
|
112
121
|
description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',
|
|
@@ -166,8 +175,9 @@ export const ButtonTransparent = {
|
|
|
166
175
|
type: 'button',
|
|
167
176
|
size: 'medium',
|
|
168
177
|
color: 'primary',
|
|
169
|
-
fontColor: '
|
|
178
|
+
fontColor: 'dark',
|
|
170
179
|
textAlign: 'left',
|
|
180
|
+
justify: false,
|
|
171
181
|
iconName: '',
|
|
172
182
|
iconPosition: 'left',
|
|
173
183
|
iconOnly: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraButtonTransparent = (label: string, args: any) => {\n const block = `<cura-button-transparent${args.size && args.size !== 'large' ? `\n size=\"${args.size}\"` : ''}\n ${args.type ? ` type=\"${args.type}\"` : ''}${args.color ? `\n color=\"${args.color}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.isLoading ? `\n is-loading` : ''}${args.fontColor && args.fontColor !== 'light' ? `\n font-color=\"${args.fontColor}\"` : ''}${args.iconName ? `\n icon-name=\"${args.iconName}\"` : ''}${args.iconPosition && args.iconPosition !== 'left' ? `\n icon-position=\"${args.iconPosition}\"` : ''}${args.iconOnly ? `\n icon-only` : ''}${args.href ? `\n href=\"${args.href}\"` : ''}${args.target ? `\n target=\"${args.target}\"` : ''}${args.textAlign && args.textAlign !== 'left' ? `\n text-align=\"${args.textAlign}\"` : ''}${args.fullWidth ? `\n style=\"width: 100%;\"` : ''}>\n ${label}\n</cura-button-transparent>`;\n\n return `${block}`;\n};\n\nexport default {\n title: 'Componentes/Buttons/Button Transparent',\n tags: ['autodocs'],\n render: ({ label, ...args }) => {\n return renderCuraButtonTransparent(label, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n name: 'Label'\n },\n disabled: {\n control: 'boolean',\n description: 'Estado desabilitado.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n }\n },\n isLoading: {\n control: 'boolean',\n description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n },\n name: 'is-loading'\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanhos disponíveis.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'large' }\n }\n },\n type: {\n control: { type: 'inline-radio' },\n options: ['button', 'submit', 'reset'],\n description: 'Tipo do botão.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'button' }\n }\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' }\n }\n },\n fontColor: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define cor clara ou escura do tema de acordo com contexto.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' }\n },\n name: 'font-color'\n },\n textAlign: {\n control: { type: 'inline-radio' },\n options: ['left', 'center', 'right'],\n description: 'Alinha texto de múltiplas linhas.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'text-align'\n },\n fullWidth: {\n control: 'boolean',\n description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n table: {\n category: 'CSS',\n defaultValue: { summary: false }\n }\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone a ser utilizado no iconset.',\n table: {\n category: 'Icons'\n },\n name: 'icon-name'\n },\n iconPosition: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do ícone no botão.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'left' }\n },\n name: 'icon-position'\n },\n iconOnly: {\n control: 'boolean',\n description: 'Oculta o label do botão exibindo somente o ícone.',\n table: {\n category: 'Icons',\n defaultValue: { summary: false }\n },\n name: 'icon-only'\n },\n href: {\n control: 'text',\n description: `Se definido o elemento de ação renderizado internamente será um link.`,\n table: {\n category: 'Properties'\n }\n },\n target: {\n control: 'text',\n description: 'Define o comportamento de abertura do link quando href for informado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '_self' }\n }\n }\n },\n};\n\nexport const ButtonTransparent = {\n args: {\n label: 'Button',\n type: 'button',\n size: 'medium',\n color: 'primary',\n fontColor: 'light',\n textAlign: 'left',\n iconName: '',\n iconPosition: 'left',\n iconOnly: false,\n disabled: false,\n isLoading: false,\n href: '',\n target: '_self',\n fullWidth: false,\n },\n};\n"]}
|
|
1
|
+
{"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraButtonTransparent = (label: string, args: any) => {\n const block = `<cura-button-transparent${args.size && args.size !== 'large' ? `\n size=\"${args.size}\"` : ''}${args.type ? `\n type=\"${args.type}\"` : ''}${args.color ? `\n color=\"${args.color}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.isLoading ? `\n is-loading` : ''}${args.fontColor && args.fontColor !== 'dark' ? `\n font-color=\"${args.fontColor}\"` : ''}${args.iconName ? `\n icon-name=\"${args.iconName}\"` : ''}${args.iconPosition && args.iconPosition !== 'left' ? `\n icon-position=\"${args.iconPosition}\"` : ''}${args.iconOnly ? `\n icon-only` : ''}${args.href ? `\n href=\"${args.href}\"` : ''}${args.target ? `\n target=\"${args.target}\"` : ''}${args.textAlign && args.textAlign !== 'left' ? `\n text-align=\"${args.textAlign}\"` : ''}${args.justify ? `\n justify=\"${args.justify}\"` : ''}${args.fullWidth ? `\n style=\"width: 100%;\"` : ''}>\n ${label}\n</cura-button-transparent>`;\n\n return `${block}`;\n};\n\nexport default {\n title: 'Componentes/Buttons/Button Transparent',\n tags: ['autodocs'],\n render: ({ label, ...args }) => {\n return renderCuraButtonTransparent(label, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n name: 'Label'\n },\n disabled: {\n control: 'boolean',\n description: 'Estado desabilitado.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n }\n },\n isLoading: {\n control: 'boolean',\n description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n },\n name: 'is-loading'\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanhos disponíveis.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'large' }\n }\n },\n type: {\n control: { type: 'inline-radio' },\n options: ['button', 'submit', 'reset'],\n description: 'Tipo do botão.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'button' }\n }\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' }\n }\n },\n fontColor: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define cor clara ou escura do tema de acordo com contexto.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'dark' }\n },\n name: 'font-color'\n },\n textAlign: {\n control: { type: 'inline-radio' },\n options: ['left', 'center', 'right'],\n description: 'Alinha texto de múltiplas linhas.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'text-align'\n },\n justify: {\n control: 'boolean',\n description: 'Expande os elementos internos para a dimensão do botão.',\n table: {\n category: 'Properties',\n defaultValue: { summary: false }\n }\n },\n fullWidth: {\n control: 'boolean',\n description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n table: {\n category: 'CSS',\n defaultValue: { summary: false }\n }\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone a ser utilizado no iconset.',\n table: {\n category: 'Icons'\n },\n name: 'icon-name'\n },\n iconPosition: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do ícone no botão.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'left' }\n },\n name: 'icon-position'\n },\n iconOnly: {\n control: 'boolean',\n description: 'Oculta o label do botão exibindo somente o ícone.',\n table: {\n category: 'Icons',\n defaultValue: { summary: false }\n },\n name: 'icon-only'\n },\n href: {\n control: 'text',\n description: `Se definido o elemento de ação renderizado internamente será um link.`,\n table: {\n category: 'Properties'\n }\n },\n target: {\n control: 'text',\n description: 'Define o comportamento de abertura do link quando href for informado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '_self' }\n }\n }\n },\n};\n\nexport const ButtonTransparent = {\n args: {\n label: 'Button',\n type: 'button',\n size: 'medium',\n color: 'primary',\n fontColor: 'dark',\n textAlign: 'left',\n justify: false,\n iconName: '',\n iconPosition: 'left',\n iconOnly: false,\n disabled: false,\n isLoading: false,\n href: '',\n target: '_self',\n fullWidth: false,\n },\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cura-button.definitions.js","sourceRoot":"","sources":["../../../src/components/buttons/cura-button.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,OAAO;IACjB,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAC","sourcesContent":["export const labelSizes = {\n \"small\": \"xsmall\",\n \"medium\": \"small\",\n \"large\": \"medium\",\n \"default\": \"medium\"\n};\n"]}
|
|
@@ -43,7 +43,7 @@ export class CuraAlert {
|
|
|
43
43
|
return this.icon ? this.icon : iconMapping[this.type];
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: 'b7b63129f2d0c1d2f8b451a7f795befc9e085238' }, h("div", { key: 'b8450a11d65f0bbb3c9f688fccbb38efc7bf223c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '9a5dc4295f7c40362a86f77fe805127590812f15', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6bbe4799d3f73df0cda2e94da2d71cdc1bfc855a', class: "content" }, h("cura-label", { key: '8b761ec2804bb5633893af8ed91f5de268bbf029', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '4e7e7726758c26f1f397e8efc84d5eba1c88b428', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f589c6fb9016b43b3557492a3ef1b4ede4a807a6' })), h("div", { key: 'b212e9255855b96d5c069dd7544675386f00b372', class: "actions" }, h("slot", { key: '174dfcc7dfc4ff3e29185843e010dddae75463f5', name: "actions" }))), this.closeable ?
|
|
47
47
|
(h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
|
|
48
48
|
: '')));
|
|
49
49
|
}
|
|
@@ -39,7 +39,7 @@ export class CuraAvatar {
|
|
|
39
39
|
this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: 'fc8fbe9cdcab86398c83a55d006badb870ee959a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '6a107805cd770b98e74f7b0475c9896f59e51832', class: this.getClasses(), style: this.styles }, h("img", { key: '4bd7991bd32b0aa6f87d0725303960b0b4c3b0b9', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "cura-avatar"; }
|
|
45
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
gap: 5px;
|
|
9
9
|
width: var(--width);
|
|
10
10
|
padding: 0 12px 12px 12px;
|
|
11
|
-
min-width:
|
|
11
|
+
min-width: 280px;
|
|
12
12
|
border: 1px solid var(--neutral-light);
|
|
13
13
|
border-radius: 4px;
|
|
14
14
|
overflow: hidden;
|
|
@@ -109,6 +109,23 @@
|
|
|
109
109
|
:host .icon:active {
|
|
110
110
|
transform: scale(1);
|
|
111
111
|
}
|
|
112
|
+
:host .collapsed-container {
|
|
113
|
+
text-align: center;
|
|
114
|
+
position: relative;
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
padding-top: 10px;
|
|
119
|
+
}
|
|
120
|
+
:host .collapsed-container::before {
|
|
121
|
+
content: "";
|
|
122
|
+
position: absolute;
|
|
123
|
+
bottom: 0;
|
|
124
|
+
top: 0;
|
|
125
|
+
left: 2px;
|
|
126
|
+
right: 2px;
|
|
127
|
+
border-top: 2px dotted var(--neutral-light);
|
|
128
|
+
}
|
|
112
129
|
:host .date {
|
|
113
130
|
display: flex;
|
|
114
131
|
justify-content: center;
|