@rededor/cura 1.4.0-alpha.0 → 1.4.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/cjs/cura-accordion_12.cjs.entry.js +12 -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-counter.cjs.entry.js +63 -0
- package/dist/cjs/cura-badge-counter.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-badge-distance.cjs.entry.js +1 -1
- package/dist/cjs/cura-badge-pill.cjs.entry.js +83 -0
- package/dist/cjs/cura-badge-pill.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-outline.cjs.entry.js +1 -1
- package/dist/cjs/cura-button-select.cjs.entry.js +2 -11
- package/dist/cjs/cura-button-select.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-button-transparent.cjs.entry.js +1 -1
- package/dist/cjs/cura-calendar.cjs.entry.js +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 +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 +2 -2
- package/dist/cjs/cura-dropdown-search.cjs.entry.js +24 -15
- package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
- package/dist/cjs/{cura-icon.definitions-8d714f6a.js → cura-icon.definitions-5223028b.js} +2 -4
- package/dist/cjs/cura-icon.definitions-5223028b.js.map +1 -0
- package/dist/cjs/cura-icons-view.cjs.entry.js +2 -5
- package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-input-date.cjs.entry.js +1 -1
- package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
- package/dist/cjs/cura-modal.cjs.entry.js +28 -7
- package/dist/cjs/cura-modal.cjs.entry.js.map +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-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/cura.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.css +51 -0
- package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.js +149 -0
- package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.js.map +1 -0
- package/dist/collection/components/badges/{cura-badge-number/cura-badge-number.stories.js → cura-badge-counter/cura-badge-counter.stories.js} +33 -13
- package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.stories.js.map +1 -0
- package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js +1 -1
- package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.css +73 -0
- package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.js +219 -0
- package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.js.map +1 -0
- package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.stories.js +126 -0
- package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.stories.js.map +1 -0
- package/dist/collection/components/buttons/cura-button/cura-button.js +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +1 -1
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.js +5 -14
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +1 -1
- 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.js +1 -1
- package/dist/collection/components/cura-card/cura-card.js +1 -1
- package/dist/collection/components/cura-icon/cura-icon.definitions.js +1 -2
- package/dist/collection/components/cura-icon/cura-icon.definitions.js.map +1 -1
- package/dist/collection/components/cura-icon/cura-icon.js +2 -6
- package/dist/collection/components/cura-icon/cura-icon.js.map +1 -1
- package/dist/collection/components/cura-icon/cura-icon.stories.js +1 -3
- package/dist/collection/components/cura-icon/cura-icon.stories.js.map +1 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.js +2 -5
- package/dist/collection/components/cura-icons-view/cura-icons-view.js.map +1 -1
- package/dist/collection/components/cura-modal/cura-modal.css +4 -2
- package/dist/collection/components/cura-modal/cura-modal.js +91 -10
- package/dist/collection/components/cura-modal/cura-modal.js.map +1 -1
- package/dist/collection/components/cura-modal/cura-modal.stories.js +54 -18
- package/dist/collection/components/cura-modal/cura-modal.stories.js.map +1 -1
- 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/cura-tooltip/cura-tooltip.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.js +2 -2
- 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 +26 -16
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
- package/dist/collection/components/forms/cura-input-date/cura-input-date.js +1 -1
- package/dist/collection/components/forms/cura-label/cura-label.js +1 -1
- package/dist/collection/components/forms/cura-radio/cura-radio.js +1 -1
- package/dist/collection/components/forms/cura-select/cura-select.js +3 -3
- 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.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/collection/utils/utils.js +1 -0
- package/dist/collection/utils/utils.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-counter.d.ts +11 -0
- package/dist/components/cura-badge-counter.js +8 -0
- package/dist/components/cura-badge-counter.js.map +1 -0
- package/dist/components/cura-badge-counter2.js +90 -0
- package/dist/components/cura-badge-counter2.js.map +1 -0
- package/dist/components/cura-badge-distance.js +1 -1
- package/dist/components/{cura-badge-number.d.ts → cura-badge-pill.d.ts} +4 -4
- package/dist/components/cura-badge-pill.js +120 -0
- package/dist/components/cura-badge-pill.js.map +1 -0
- package/dist/components/cura-button-outline.js +1 -1
- package/dist/components/cura-button-select.js +6 -15
- package/dist/components/cura-button-select.js.map +1 -1
- package/dist/components/cura-button-transparent2.js +1 -1
- package/dist/components/cura-button.js +1 -1
- package/dist/components/cura-calendar2.js +1 -1
- package/dist/components/cura-card.js +1 -1
- package/dist/components/cura-checkbox.js +1 -1
- package/dist/components/cura-display.js +1 -1
- package/dist/components/cura-dropdown-search-option-title.js +1 -1
- package/dist/components/cura-dropdown-search-option.js +2 -2
- package/dist/components/cura-dropdown-search.js +26 -16
- package/dist/components/cura-dropdown-search.js.map +1 -1
- package/dist/components/cura-heading2.js +1 -1
- package/dist/components/cura-icon2.js +3 -8
- package/dist/components/cura-icon2.js.map +1 -1
- package/dist/components/cura-icons-view.js +7 -16
- package/dist/components/cura-icons-view.js.map +1 -1
- package/dist/components/cura-input-date.js +1 -1
- package/dist/components/cura-label2.js +1 -1
- package/dist/components/cura-loader-bar2.js +1 -1
- package/dist/components/cura-loader-circle2.js +1 -1
- package/dist/components/cura-modal.js +36 -9
- package/dist/components/cura-modal.js.map +1 -1
- package/dist/components/cura-page-template.js +1 -1
- package/dist/components/cura-paragraph2.js +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 +3 -3
- package/dist/components/cura-switch.js +1 -1
- package/dist/components/cura-toast.js +1 -1
- package/dist/components/cura-tooltip.js +1 -1
- package/dist/components/index.js +4 -2
- 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-01e301d4.entry.js → p-116a1cd6.entry.js} +2 -2
- package/dist/cura/{p-5bb8302c.entry.js → p-19f28fa8.entry.js} +2 -2
- package/dist/cura/p-19f28fa8.entry.js.map +1 -0
- package/dist/cura/{p-eda28278.entry.js → p-2545cfc7.entry.js} +2 -2
- package/dist/cura/p-35920ac0.entry.js +2 -0
- package/dist/cura/p-35920ac0.entry.js.map +1 -0
- package/dist/cura/{p-eea093b2.entry.js → p-36dbec98.entry.js} +2 -2
- package/dist/cura/{p-ed839f1e.entry.js → p-3d958d45.entry.js} +2 -2
- package/dist/cura/{p-3536c96b.entry.js → p-3e4ca7e7.entry.js} +2 -2
- package/dist/cura/{p-e5b0dd74.entry.js → p-3eca0f0c.entry.js} +2 -2
- package/dist/cura/{p-1f53580a.entry.js → p-42258230.entry.js} +2 -2
- package/dist/cura/p-48f9289b.js +2 -0
- package/dist/cura/p-48f9289b.js.map +1 -0
- package/dist/cura/{p-dbd9eab3.entry.js → p-4b496c51.entry.js} +2 -2
- package/dist/cura/p-52f854e0.entry.js +2 -0
- package/dist/cura/p-52f854e0.entry.js.map +1 -0
- package/dist/cura/{p-81c66f2b.entry.js → p-576c65b4.entry.js} +2 -2
- package/dist/cura/{p-bfb5e9e1.entry.js → p-6e4f4fbf.entry.js} +2 -2
- package/dist/cura/{p-0e28f1c8.entry.js → p-818c581f.entry.js} +2 -2
- package/dist/cura/{p-b0451cb3.entry.js → p-a91d451f.entry.js} +2 -2
- package/dist/cura/p-aa65cb50.entry.js +2 -0
- package/dist/cura/p-aa65cb50.entry.js.map +1 -0
- package/dist/cura/{p-075b02de.entry.js → p-b1a51e81.entry.js} +2 -2
- package/dist/cura/{p-f375a612.entry.js → p-bdb1a0c5.entry.js} +2 -2
- package/dist/cura/p-c4da4c44.entry.js +2 -0
- package/dist/cura/p-c4da4c44.entry.js.map +1 -0
- package/dist/cura/{p-a7ecea4a.entry.js → p-dcd2e5bb.entry.js} +2 -2
- package/dist/cura/{p-7853ab16.entry.js → p-e1a41792.entry.js} +2 -2
- package/dist/cura/p-ef593f12.entry.js +2 -0
- package/dist/cura/p-ef593f12.entry.js.map +1 -0
- package/dist/cura/p-f23c4ed8.entry.js +2 -0
- package/dist/cura/p-f23c4ed8.entry.js.map +1 -0
- package/dist/cura/p-f5d45776.entry.js +2 -0
- package/dist/esm/cura-accordion_12.entry.js +12 -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-counter.entry.js +59 -0
- package/dist/esm/cura-badge-counter.entry.js.map +1 -0
- package/dist/esm/cura-badge-distance.entry.js +1 -1
- package/dist/esm/cura-badge-pill.entry.js +79 -0
- package/dist/esm/cura-badge-pill.entry.js.map +1 -0
- package/dist/esm/cura-button-outline.entry.js +1 -1
- package/dist/esm/cura-button-select.entry.js +2 -11
- package/dist/esm/cura-button-select.entry.js.map +1 -1
- package/dist/esm/cura-button-transparent.entry.js +1 -1
- package/dist/esm/cura-calendar.entry.js +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 +1 -1
- package/dist/esm/cura-dropdown-search-option-title.entry.js +1 -1
- package/dist/esm/cura-dropdown-search-option.entry.js +2 -2
- package/dist/esm/cura-dropdown-search.entry.js +24 -15
- package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
- package/dist/esm/cura-icon.definitions-a892c0e2.js +17 -0
- package/dist/esm/cura-icon.definitions-a892c0e2.js.map +1 -0
- package/dist/esm/cura-icons-view.entry.js +2 -5
- package/dist/esm/cura-icons-view.entry.js.map +1 -1
- package/dist/esm/cura-input-date.entry.js +1 -1
- package/dist/esm/cura-loader-bar.entry.js +1 -1
- package/dist/esm/cura-modal.entry.js +28 -7
- package/dist/esm/cura-modal.entry.js.map +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-tooltip.entry.js +1 -1
- package/dist/esm/cura.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/badges/cura-badge-counter/cura-badge-counter.d.ts +30 -0
- package/dist/types/components/badges/{cura-badge-number/cura-badge-number.stories.d.ts → cura-badge-counter/cura-badge-counter.stories.d.ts} +26 -1
- package/dist/types/components/badges/cura-badge-pill/cura-badge-pill.d.ts +44 -0
- package/dist/types/components/badges/cura-badge-pill/cura-badge-pill.stories.d.ts +119 -0
- package/dist/types/components/buttons/cura-button-select/cura-button-select.d.ts +1 -2
- package/dist/types/components/cura-icon/cura-icon.definitions.d.ts +0 -1
- package/dist/types/components/cura-modal/cura-modal.d.ts +22 -3
- package/dist/types/components/cura-modal/cura-modal.stories.d.ts +42 -3
- package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search.d.ts +8 -0
- package/dist/types/components.d.ts +140 -19
- package/dist/types/utils/utils.d.ts +1 -0
- package/package.json +2 -2
- package/dist/cjs/cura-badge-number.cjs.entry.js +0 -29
- package/dist/cjs/cura-badge-number.cjs.entry.js.map +0 -1
- package/dist/cjs/cura-icon.definitions-8d714f6a.js.map +0 -1
- package/dist/collection/components/badges/cura-badge-number/cura-badge-number.css +0 -28
- package/dist/collection/components/badges/cura-badge-number/cura-badge-number.js +0 -66
- package/dist/collection/components/badges/cura-badge-number/cura-badge-number.js.map +0 -1
- package/dist/collection/components/badges/cura-badge-number/cura-badge-number.stories.js.map +0 -1
- package/dist/components/cura-badge-number.js +0 -8
- package/dist/components/cura-badge-number.js.map +0 -1
- package/dist/components/cura-badge-number2.js +0 -49
- package/dist/components/cura-badge-number2.js.map +0 -1
- package/dist/cura/p-0308cf6b.entry.js +0 -2
- package/dist/cura/p-0308cf6b.entry.js.map +0 -1
- package/dist/cura/p-5bb8302c.entry.js.map +0 -1
- package/dist/cura/p-7090d4a7.entry.js +0 -2
- package/dist/cura/p-7090d4a7.entry.js.map +0 -1
- package/dist/cura/p-71a2dcef.entry.js +0 -2
- package/dist/cura/p-71a2dcef.entry.js.map +0 -1
- package/dist/cura/p-9a7e3f48.entry.js +0 -2
- package/dist/cura/p-9a7e3f48.entry.js.map +0 -1
- package/dist/cura/p-a7221f0c.js +0 -2
- package/dist/cura/p-a7221f0c.js.map +0 -1
- package/dist/cura/p-d635501a.entry.js +0 -2
- package/dist/cura/p-d635501a.entry.js.map +0 -1
- package/dist/cura/p-ebed83d1.entry.js +0 -2
- package/dist/esm/cura-badge-number.entry.js +0 -25
- package/dist/esm/cura-badge-number.entry.js.map +0 -1
- package/dist/esm/cura-icon.definitions-aaa4e80f.js +0 -18
- package/dist/esm/cura-icon.definitions-aaa4e80f.js.map +0 -1
- package/dist/types/components/badges/cura-badge-number/cura-badge-number.d.ts +0 -8
- /package/dist/cura/{p-01e301d4.entry.js.map → p-116a1cd6.entry.js.map} +0 -0
- /package/dist/cura/{p-eda28278.entry.js.map → p-2545cfc7.entry.js.map} +0 -0
- /package/dist/cura/{p-eea093b2.entry.js.map → p-36dbec98.entry.js.map} +0 -0
- /package/dist/cura/{p-ed839f1e.entry.js.map → p-3d958d45.entry.js.map} +0 -0
- /package/dist/cura/{p-3536c96b.entry.js.map → p-3e4ca7e7.entry.js.map} +0 -0
- /package/dist/cura/{p-e5b0dd74.entry.js.map → p-3eca0f0c.entry.js.map} +0 -0
- /package/dist/cura/{p-1f53580a.entry.js.map → p-42258230.entry.js.map} +0 -0
- /package/dist/cura/{p-dbd9eab3.entry.js.map → p-4b496c51.entry.js.map} +0 -0
- /package/dist/cura/{p-81c66f2b.entry.js.map → p-576c65b4.entry.js.map} +0 -0
- /package/dist/cura/{p-bfb5e9e1.entry.js.map → p-6e4f4fbf.entry.js.map} +0 -0
- /package/dist/cura/{p-0e28f1c8.entry.js.map → p-818c581f.entry.js.map} +0 -0
- /package/dist/cura/{p-b0451cb3.entry.js.map → p-a91d451f.entry.js.map} +0 -0
- /package/dist/cura/{p-075b02de.entry.js.map → p-b1a51e81.entry.js.map} +0 -0
- /package/dist/cura/{p-f375a612.entry.js.map → p-bdb1a0c5.entry.js.map} +0 -0
- /package/dist/cura/{p-a7ecea4a.entry.js.map → p-dcd2e5bb.entry.js.map} +0 -0
- /package/dist/cura/{p-7853ab16.entry.js.map → p-e1a41792.entry.js.map} +0 -0
- /package/dist/cura/{p-ebed83d1.entry.js.map → p-f5d45776.entry.js.map} +0 -0
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
|
+
export class CuraBadgePill {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.theme = window.CuraAPI.theme;
|
|
5
|
+
this.type = 'solid';
|
|
6
|
+
this.color = 'primary';
|
|
7
|
+
this.iconName = undefined;
|
|
8
|
+
this.iconset = 'default';
|
|
9
|
+
this.disabled = false;
|
|
10
|
+
this.iconOnly = false;
|
|
11
|
+
this.borderRadius = "2px";
|
|
12
|
+
this.styles = {};
|
|
13
|
+
}
|
|
14
|
+
handleColorChange() {
|
|
15
|
+
this.setColors();
|
|
16
|
+
}
|
|
17
|
+
connectedCallback() {
|
|
18
|
+
this.setBaseStyles();
|
|
19
|
+
this.setColors();
|
|
20
|
+
}
|
|
21
|
+
setBaseStyles() {
|
|
22
|
+
this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
|
|
23
|
+
this.styles['--font-family'] = this.theme.fonts.getFamily();
|
|
24
|
+
this.styles['--font-size'] = this.theme.fonts.getSize();
|
|
25
|
+
this.styles = Object.assign({}, this.styles);
|
|
26
|
+
}
|
|
27
|
+
setColors() {
|
|
28
|
+
const colors = [
|
|
29
|
+
{ name: '--color-background', theme: `${this.color}-lighter` },
|
|
30
|
+
{ name: '--color-base', theme: `${this.color}-dark` },
|
|
31
|
+
{ name: '--color-background-disabled', theme: 'neutral-pale' },
|
|
32
|
+
{ name: '--color-outline-disabled', theme: 'neutral-medium' },
|
|
33
|
+
];
|
|
34
|
+
colors.forEach(color => {
|
|
35
|
+
this.styles[color.name] = this.theme.colors.getColor(color.theme);
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
hostCSSProperties() {
|
|
39
|
+
return {
|
|
40
|
+
'--border-radius': this.borderRadius || '2px',
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
getClasses() {
|
|
44
|
+
const classes = {};
|
|
45
|
+
classes['badge-container'] = true;
|
|
46
|
+
classes[`icon-only`] = this.iconOnly;
|
|
47
|
+
classes['disabled'] = this.disabled;
|
|
48
|
+
classes[`${this.type}`] = true;
|
|
49
|
+
return classes;
|
|
50
|
+
}
|
|
51
|
+
getSymbolColor() {
|
|
52
|
+
return this.disabled
|
|
53
|
+
? 'neutral-medium'
|
|
54
|
+
: `${this.color}-dark`;
|
|
55
|
+
}
|
|
56
|
+
getIcon() {
|
|
57
|
+
if (!this.iconName)
|
|
58
|
+
return '';
|
|
59
|
+
return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: 'micro', color: this.getSymbolColor() });
|
|
60
|
+
}
|
|
61
|
+
render() {
|
|
62
|
+
const symbolColor = this.getSymbolColor();
|
|
63
|
+
return (h(Host, { key: 'b6870052543347fdc83a75629b30251ddab35e12', style: this.hostCSSProperties() }, h("div", { key: 'ae8b14c1c9c323b8387e7ed4e3a97bade9c712f4', class: this.getClasses(), style: this.styles }, this.getIcon(), h("cura-label", { key: 'd14ab9efd48f33c7b8153cf85699b2fc96ecd7af', size: 'xsmall', "line-height": "117%", color: symbolColor }, h("slot", { key: 'b684ca1b248d04700a2b8a7245c455fb9bdef474' })))));
|
|
64
|
+
}
|
|
65
|
+
static get is() { return "cura-badge-pill"; }
|
|
66
|
+
static get encapsulation() { return "shadow"; }
|
|
67
|
+
static get originalStyleUrls() {
|
|
68
|
+
return {
|
|
69
|
+
"$": ["cura-badge-pill.scss"]
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
static get styleUrls() {
|
|
73
|
+
return {
|
|
74
|
+
"$": ["cura-badge-pill.css"]
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
static get properties() {
|
|
78
|
+
return {
|
|
79
|
+
"type": {
|
|
80
|
+
"type": "string",
|
|
81
|
+
"mutable": false,
|
|
82
|
+
"complexType": {
|
|
83
|
+
"original": "'solid' | 'outline' | 'transparent'",
|
|
84
|
+
"resolved": "\"outline\" | \"solid\" | \"transparent\"",
|
|
85
|
+
"references": {}
|
|
86
|
+
},
|
|
87
|
+
"required": false,
|
|
88
|
+
"optional": false,
|
|
89
|
+
"docs": {
|
|
90
|
+
"tags": [],
|
|
91
|
+
"text": "Badge type: solid | outline | transparent"
|
|
92
|
+
},
|
|
93
|
+
"attribute": "type",
|
|
94
|
+
"reflect": true,
|
|
95
|
+
"defaultValue": "'solid'"
|
|
96
|
+
},
|
|
97
|
+
"color": {
|
|
98
|
+
"type": "string",
|
|
99
|
+
"mutable": false,
|
|
100
|
+
"complexType": {
|
|
101
|
+
"original": "'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'",
|
|
102
|
+
"resolved": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
|
|
103
|
+
"references": {}
|
|
104
|
+
},
|
|
105
|
+
"required": false,
|
|
106
|
+
"optional": false,
|
|
107
|
+
"docs": {
|
|
108
|
+
"tags": [],
|
|
109
|
+
"text": "Color base from color scheme. Default: primary"
|
|
110
|
+
},
|
|
111
|
+
"attribute": "color",
|
|
112
|
+
"reflect": false,
|
|
113
|
+
"defaultValue": "'primary'"
|
|
114
|
+
},
|
|
115
|
+
"iconName": {
|
|
116
|
+
"type": "string",
|
|
117
|
+
"mutable": false,
|
|
118
|
+
"complexType": {
|
|
119
|
+
"original": "string",
|
|
120
|
+
"resolved": "string",
|
|
121
|
+
"references": {}
|
|
122
|
+
},
|
|
123
|
+
"required": false,
|
|
124
|
+
"optional": false,
|
|
125
|
+
"docs": {
|
|
126
|
+
"tags": [],
|
|
127
|
+
"text": "Name of the icon to be used from iconset"
|
|
128
|
+
},
|
|
129
|
+
"attribute": "icon-name",
|
|
130
|
+
"reflect": true
|
|
131
|
+
},
|
|
132
|
+
"iconset": {
|
|
133
|
+
"type": "string",
|
|
134
|
+
"mutable": false,
|
|
135
|
+
"complexType": {
|
|
136
|
+
"original": "string",
|
|
137
|
+
"resolved": "string",
|
|
138
|
+
"references": {}
|
|
139
|
+
},
|
|
140
|
+
"required": false,
|
|
141
|
+
"optional": false,
|
|
142
|
+
"docs": {
|
|
143
|
+
"tags": [],
|
|
144
|
+
"text": "Custom iconset if needed"
|
|
145
|
+
},
|
|
146
|
+
"attribute": "iconset",
|
|
147
|
+
"reflect": true,
|
|
148
|
+
"defaultValue": "'default'"
|
|
149
|
+
},
|
|
150
|
+
"disabled": {
|
|
151
|
+
"type": "boolean",
|
|
152
|
+
"mutable": false,
|
|
153
|
+
"complexType": {
|
|
154
|
+
"original": "boolean",
|
|
155
|
+
"resolved": "boolean",
|
|
156
|
+
"references": {}
|
|
157
|
+
},
|
|
158
|
+
"required": false,
|
|
159
|
+
"optional": false,
|
|
160
|
+
"docs": {
|
|
161
|
+
"tags": [],
|
|
162
|
+
"text": "Disabled state. Boolean"
|
|
163
|
+
},
|
|
164
|
+
"attribute": "disabled",
|
|
165
|
+
"reflect": true,
|
|
166
|
+
"defaultValue": "false"
|
|
167
|
+
},
|
|
168
|
+
"iconOnly": {
|
|
169
|
+
"type": "boolean",
|
|
170
|
+
"mutable": false,
|
|
171
|
+
"complexType": {
|
|
172
|
+
"original": "boolean",
|
|
173
|
+
"resolved": "boolean",
|
|
174
|
+
"references": {}
|
|
175
|
+
},
|
|
176
|
+
"required": false,
|
|
177
|
+
"optional": false,
|
|
178
|
+
"docs": {
|
|
179
|
+
"tags": [],
|
|
180
|
+
"text": "Set badge to icon only. Boolean"
|
|
181
|
+
},
|
|
182
|
+
"attribute": "icon-only",
|
|
183
|
+
"reflect": true,
|
|
184
|
+
"defaultValue": "false"
|
|
185
|
+
},
|
|
186
|
+
"borderRadius": {
|
|
187
|
+
"type": "string",
|
|
188
|
+
"mutable": false,
|
|
189
|
+
"complexType": {
|
|
190
|
+
"original": "string",
|
|
191
|
+
"resolved": "string",
|
|
192
|
+
"references": {}
|
|
193
|
+
},
|
|
194
|
+
"required": false,
|
|
195
|
+
"optional": false,
|
|
196
|
+
"docs": {
|
|
197
|
+
"tags": [],
|
|
198
|
+
"text": "Set border-radius."
|
|
199
|
+
},
|
|
200
|
+
"attribute": "border-radius",
|
|
201
|
+
"reflect": true,
|
|
202
|
+
"defaultValue": "\"2px\""
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
static get states() {
|
|
207
|
+
return {
|
|
208
|
+
"styles": {}
|
|
209
|
+
};
|
|
210
|
+
}
|
|
211
|
+
static get elementRef() { return "host"; }
|
|
212
|
+
static get watchers() {
|
|
213
|
+
return [{
|
|
214
|
+
"propName": "color",
|
|
215
|
+
"methodName": "handleColorChange"
|
|
216
|
+
}];
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
//# sourceMappingURL=cura-badge-pill.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cura-badge-pill.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-pill/cura-badge-pill.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, h, Watch, Element } from '@stencil/core';\n\n@Component({\n tag: 'cura-badge-pill',\n styleUrl: 'cura-badge-pill.scss',\n shadow: true,\n})\nexport class CuraBadgePill {\n @Element() host: HTMLElement;\n\n /**\n * Badge type: solid | outline | transparent\n */\n @Prop({ reflect: true }) type: 'solid' | 'outline' | 'transparent' = 'solid';\n\n /**\n * Color base from color scheme. Default: primary\n */\n @Prop() color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' = 'primary';\n\n /**\n * Name of the icon to be used from iconset\n */\n @Prop({ reflect: true }) iconName: string;\n\n /**\n * Custom iconset if needed\n */\n @Prop({ reflect: true }) iconset = 'default';\n\n /**\n * Disabled state. Boolean\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * Set badge to icon only. Boolean\n */\n @Prop({ reflect: true }) iconOnly = false;\n\n /**\n * Set border-radius.\n */\n @Prop({ reflect: true }) borderRadius: string = \"2px\";\n\n @State() styles = {};\n\n theme = window.CuraAPI.theme;\n\n @Watch('color')\n handleColorChange() {\n this.setColors();\n }\n\n connectedCallback() {\n this.setBaseStyles();\n this.setColors();\n }\n\n private setBaseStyles() {\n this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n this.styles['--font-family'] = this.theme.fonts.getFamily();\n this.styles['--font-size'] = this.theme.fonts.getSize();\n this.styles = { ...this.styles };\n }\n\n private setColors() {\n const colors = [\n { name: '--color-background', theme: `${this.color}-lighter` },\n { name: '--color-base', theme: `${this.color}-dark` },\n { name: '--color-background-disabled', theme: 'neutral-pale' },\n { name: '--color-outline-disabled', theme: 'neutral-medium' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = this.theme.colors.getColor(color.theme);\n });\n }\n\n hostCSSProperties() {\n return {\n '--border-radius': this.borderRadius || '2px',\n };\n }\n\n getClasses() {\n const classes = {};\n classes['badge-container'] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['disabled'] = this.disabled;\n classes[`${this.type}`] = true;\n return classes;\n }\n\n getSymbolColor() {\n return this.disabled\n ? 'neutral-medium'\n : `${this.color}-dark`;\n }\n\n getIcon() {\n if (!this.iconName) return '';\n return <cura-icon\n name={this.iconName}\n iconset={this.iconset}\n size={'micro'}\n color={this.getSymbolColor()}\n />;\n }\n\n render() {\n const symbolColor = this.getSymbolColor();\n return (\n <Host style={this.hostCSSProperties()}>\n <div class={this.getClasses()} style={this.styles}>\n {this.getIcon()}\n <cura-label size='xsmall' line-height=\"117%\" color={symbolColor}>\n <slot></slot>\n </cura-label>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -0,0 +1,126 @@
|
|
|
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
|
+
export default {
|
|
15
|
+
title: 'Componentes/Badges/Badge Pill',
|
|
16
|
+
tags: ['autodocs'],
|
|
17
|
+
render: (_a) => {
|
|
18
|
+
var args = __rest(_a, []);
|
|
19
|
+
return `<cura-badge-pill
|
|
20
|
+
type="${args.type}"
|
|
21
|
+
color="${args.color}"${args.iconName ? `
|
|
22
|
+
icon-name="${args.iconName}"` : ''} ${args.iconset ? `
|
|
23
|
+
iconset="${args.iconset}"` : ''} ${args.disabled ? `
|
|
24
|
+
disabled` : ''} ${args.iconOnly ? `
|
|
25
|
+
icon-only` : ''} ${args.borderRadius ? `
|
|
26
|
+
border-radius="${args.borderRadius}"` : ''}
|
|
27
|
+
>
|
|
28
|
+
${args.label}
|
|
29
|
+
</cura-badge-pill>
|
|
30
|
+
${args.cssBorderRadius ? `<style>
|
|
31
|
+
cura-badge-pill {
|
|
32
|
+
--border-radius: ${args.cssBorderRadius} !important;
|
|
33
|
+
}
|
|
34
|
+
</style>` : ''}`;
|
|
35
|
+
},
|
|
36
|
+
argTypes: {
|
|
37
|
+
type: {
|
|
38
|
+
control: { type: 'select' },
|
|
39
|
+
options: ['solid', 'outline', 'transparent'],
|
|
40
|
+
description: 'Tipo do badge',
|
|
41
|
+
table: {
|
|
42
|
+
category: 'Properties',
|
|
43
|
+
defaultValue: { summary: 'solid' }
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
color: {
|
|
47
|
+
control: { type: 'select' },
|
|
48
|
+
options: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
|
|
49
|
+
description: 'Cor base do badge',
|
|
50
|
+
table: {
|
|
51
|
+
category: 'Properties',
|
|
52
|
+
defaultValue: { summary: 'primary' }
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
iconName: {
|
|
56
|
+
control: { type: 'select' },
|
|
57
|
+
options: ['', ...iconNames],
|
|
58
|
+
description: 'Nome do ícone do iconset',
|
|
59
|
+
table: {
|
|
60
|
+
category: 'Icons'
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
iconset: {
|
|
64
|
+
control: { type: 'text' },
|
|
65
|
+
description: 'Conjunto de ícones personalizado',
|
|
66
|
+
table: {
|
|
67
|
+
category: 'Icons',
|
|
68
|
+
defaultValue: { summary: 'default' }
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
iconOnly: {
|
|
72
|
+
control: 'boolean',
|
|
73
|
+
description: 'Mostra apenas o ícone',
|
|
74
|
+
table: {
|
|
75
|
+
category: 'Icons',
|
|
76
|
+
defaultValue: { summary: false }
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
disabled: {
|
|
80
|
+
control: 'boolean',
|
|
81
|
+
description: 'Estado desabilitado',
|
|
82
|
+
table: {
|
|
83
|
+
category: 'State',
|
|
84
|
+
defaultValue: { summary: false }
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
label: {
|
|
88
|
+
control: 'text',
|
|
89
|
+
description: 'Label do badge',
|
|
90
|
+
table: {
|
|
91
|
+
category: 'Properties'
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
borderRadius: {
|
|
95
|
+
control: 'text',
|
|
96
|
+
description: 'Border radius do badge',
|
|
97
|
+
table: {
|
|
98
|
+
category: 'Properties',
|
|
99
|
+
defaultValue: { summary: '2px' }
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
cssBorderRadius: {
|
|
103
|
+
control: 'text',
|
|
104
|
+
name: '--border-radius',
|
|
105
|
+
description: 'É possível sobrescrever o border-radius do componente (Ex: 10px, 50%, etc.)',
|
|
106
|
+
table: {
|
|
107
|
+
category: 'CSS Properties',
|
|
108
|
+
defaultValue: { summary: '' }
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
};
|
|
113
|
+
export const BadgePill = {
|
|
114
|
+
args: {
|
|
115
|
+
type: 'solid',
|
|
116
|
+
color: 'primary',
|
|
117
|
+
iconName: '',
|
|
118
|
+
iconset: '',
|
|
119
|
+
disabled: false,
|
|
120
|
+
iconOnly: false,
|
|
121
|
+
label: 'Badge Pill',
|
|
122
|
+
borderRadius: '',
|
|
123
|
+
cssBorderRadius: '',
|
|
124
|
+
},
|
|
125
|
+
};
|
|
126
|
+
//# sourceMappingURL=cura-badge-pill.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cura-badge-pill.stories.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-pill/cura-badge-pill.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n title: 'Componentes/Badges/Badge Pill',\n tags: ['autodocs'],\n render: ({ ...args }) => {\n return `<cura-badge-pill\n type=\"${args.type}\"\n color=\"${args.color}\"${args.iconName ? `\n icon-name=\"${args.iconName}\"` : ''} ${args.iconset ? `\n iconset=\"${args.iconset}\"` : ''} ${args.disabled ? `\n disabled` : ''} ${args.iconOnly ? `\n icon-only` : ''} ${args.borderRadius ? `\n border-radius=\"${args.borderRadius}\"` : ''}\n>\n ${args.label}\n</cura-badge-pill>\n${args.cssBorderRadius ? `<style>\n cura-badge-pill {\n --border-radius: ${args.cssBorderRadius} !important;\n }\n</style>` : ''}`;\n },\n argTypes: {\n type: {\n control: { type: 'select' },\n options: ['solid', 'outline', 'transparent'],\n description: 'Tipo do badge',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'solid' }\n }\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],\n description: 'Cor base do badge',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'primary' }\n }\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone do iconset',\n table: {\n category: 'Icons'\n }\n },\n iconset: {\n control: { type: 'text' },\n description: 'Conjunto de ícones personalizado',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'default' }\n }\n },\n iconOnly: {\n control: 'boolean',\n description: 'Mostra apenas o ícone',\n table: {\n category: 'Icons',\n defaultValue: { summary: false }\n }\n },\n disabled: {\n control: 'boolean',\n description: 'Estado desabilitado',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n }\n },\n label: {\n control: 'text',\n description: 'Label do badge',\n table: {\n category: 'Properties'\n }\n },\n borderRadius: {\n control: 'text',\n description: 'Border radius do badge',\n table: {\n category: 'Properties',\n defaultValue: { summary: '2px' }\n }\n },\n cssBorderRadius: {\n control: 'text',\n name: '--border-radius',\n description: 'É possível sobrescrever o border-radius do componente (Ex: 10px, 50%, etc.)',\n table: {\n category: 'CSS Properties',\n defaultValue: { summary: '' }\n }\n },\n },\n};\n\nexport const BadgePill = {\n args: {\n type: 'solid',\n color: 'primary',\n iconName: '',\n iconset: '',\n disabled: false,\n iconOnly: false,\n label: 'Badge Pill',\n borderRadius: '',\n cssBorderRadius: '',\n },\n};\n\n"]}
|
|
@@ -88,7 +88,7 @@ export class CuraButton {
|
|
|
88
88
|
render() {
|
|
89
89
|
const symbolColor = this.getSymbolColor();
|
|
90
90
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
91
|
-
return (h(Host, { key: '
|
|
91
|
+
return (h(Host, { key: '27ce2e8e003caac05d652a9a25054f689d9e3841' }, 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", { class: "label", size: labelSize, lineHeight: '105%', 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", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
92
92
|
}
|
|
93
93
|
static get is() { return "cura-button"; }
|
|
94
94
|
static get encapsulation() { return "shadow"; }
|
|
@@ -87,7 +87,7 @@ export class CuraButtonOutline {
|
|
|
87
87
|
render() {
|
|
88
88
|
const symbolColor = this.getSymbolColor();
|
|
89
89
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
90
|
-
return (h(Host, { key: '
|
|
90
|
+
return (h(Host, { key: '8c7adeaec50deaf3829295d2231b390992064735' }, 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: '105%', 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: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
91
91
|
}
|
|
92
92
|
static get is() { return "cura-button-outline"; }
|
|
93
93
|
static get encapsulation() { return "shadow"; }
|
|
@@ -57,15 +57,6 @@ export class CuraButtonSelect {
|
|
|
57
57
|
return this.selected ? 'neutral-white' : 'neutral-black';
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
getColorCounter() {
|
|
61
|
-
if (this.background === 'dark' && this.disabled) {
|
|
62
|
-
return !this.selected ? 'neutral-black' : 'neutral-dark';
|
|
63
|
-
}
|
|
64
|
-
if (this.background === 'light' && this.disabled) {
|
|
65
|
-
return 'neutral-pale';
|
|
66
|
-
}
|
|
67
|
-
return `${this.color}-lighter`;
|
|
68
|
-
}
|
|
69
60
|
getColorBagdeNumber() {
|
|
70
61
|
if (this.background === 'dark' && this.disabled) {
|
|
71
62
|
return this.selected ? 'neutral-black' : 'neutral-dark';
|
|
@@ -83,7 +74,7 @@ export class CuraButtonSelect {
|
|
|
83
74
|
return h("cura-icon", { name: this.iconName, size: iconSize, color: this.getLabelFontColor() });
|
|
84
75
|
}
|
|
85
76
|
getCounter() {
|
|
86
|
-
return (h("cura-badge-
|
|
77
|
+
return (h("cura-badge-counter", { number: this.counter, color: this.color, disabled: this.disabled || null, class: "badge-number" }));
|
|
87
78
|
}
|
|
88
79
|
getCheckIconRight() {
|
|
89
80
|
const iconSize = this.size === 'large' ? 20 : 16;
|
|
@@ -105,7 +96,7 @@ export class CuraButtonSelect {
|
|
|
105
96
|
}
|
|
106
97
|
render() {
|
|
107
98
|
const labelSize = labelSizes[this.size] || labelSizes['default'];
|
|
108
|
-
return (h(Host, { key: '
|
|
99
|
+
return (h(Host, { key: '54bf5dc64b99128f839fdc22ff56dd709971fc8e' }, h("button", { key: '422e4d80d321fb9e4cddd165700220071012bea8', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '6c40080d1b8746e394539cf717d658e4d834c500', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: 'f2f9b54cbcd2c7a571d966ba20f344384ecaadc0', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, h("slot", { key: 'f5c471e0771c6c19685aa591461a73b1aaa83c47' })), this.counter ? this.getCounter() : null, this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null))));
|
|
109
100
|
}
|
|
110
101
|
static get is() { return "cura-button-select"; }
|
|
111
102
|
static get encapsulation() { return "shadow"; }
|
|
@@ -175,11 +166,11 @@ export class CuraButtonSelect {
|
|
|
175
166
|
"defaultValue": "'medium'"
|
|
176
167
|
},
|
|
177
168
|
"counter": {
|
|
178
|
-
"type": "
|
|
169
|
+
"type": "number",
|
|
179
170
|
"mutable": true,
|
|
180
171
|
"complexType": {
|
|
181
|
-
"original": "
|
|
182
|
-
"resolved": "number
|
|
172
|
+
"original": "number | null",
|
|
173
|
+
"resolved": "number",
|
|
183
174
|
"references": {}
|
|
184
175
|
},
|
|
185
176
|
"required": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-button-select.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-select/cura-button-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n tag: 'cura-button-select',\n styleUrl: 'cura-button-select.scss',\n shadow: true,\n})\nexport class CuraButtonSelect {\n @Element() host: HTMLElement;\n\n @Prop({ reflect: true, mutable: true }) selected = false;\n @Prop({ reflect: true, mutable: true }) iconName: string;\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n @Prop({ reflect: true, mutable: true }) counter: string | number | null;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop() background: 'dark' | 'light' = 'light';\n @Prop() color: string = 'primary';\n @Prop({ reflect: true }) iconPosition: 'left' | 'right';\n\n @State() hovered = false;\n @State() styles = {};\n\n @Event({ eventName: 'onclick' }) onclick: EventEmitter<{ selected: boolean }>;\n\n theme = window.CuraAPI.theme;\n\n weights;\n\n @Watch('background')\n @Watch('color')\n setColors() {\n const colors = [\n { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },\n ];\n\n colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n this.styles = { ...this.styles };\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes['disabled'] = this.disabled;\n classes['selected'] = this.selected;\n return classes;\n }\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\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.setColors();\n }\n\n getLabelFontColor() {\n if (this.disabled) return 'neutral-dark';\n\n if (this.background === 'dark') {\n return this.selected ? 'neutral-black' : 'neutral-white';\n }\n if (this.background === 'light') {\n return this.selected ? 'neutral-white' : 'neutral-black';\n }\n }\n\n getColorCounter() {\n if (this.background === 'dark' && this.disabled) {\n return !this.selected ? 'neutral-black' : 'neutral-dark';\n }\n\n if (this.background === 'light' && this.disabled) {\n return 'neutral-pale';\n }\n return `${this.color}-lighter`;\n }\n\n getColorBagdeNumber() {\n if (this.background === 'dark' && this.disabled) {\n return this.selected ? 'neutral-black' : 'neutral-dark';\n }\n\n if (this.background === 'light' && this.disabled) {\n return 'neutral-medium';\n }\n\n return `${this.color}-darker`;\n }\n\n getIcon() {\n const iconSize = this.size === 'large' ? 20 : 16;\n if (this.iconPosition === 'right') {\n return;\n }\n\n return <cura-icon name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n }\n\n getCounter() {\n return (\n <cura-badge-number color={this.getColorCounter()} class=\"badge-number\">\n <cura-label color={this.getColorBagdeNumber()} size=\"small\">\n {this.counter}\n </cura-label>\n </cura-badge-number>\n );\n }\n\n getCheckIconRight() {\n const iconSize = this.size === 'large' ? 20 : 16;\n return <cura-icon name=\"check\" size={iconSize} color={this.getLabelFontColor()}></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 handleClick(e: Event) {\n if (this.disabled) e.preventDefault();\n this.selected = !this.selected;\n this.onclick.emit({ selected: this.selected });\n }\n\n render() {\n const labelSize = labelSizes[this.size] || labelSizes['default'];\n return (\n <Host>\n <button\n class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled}\n onClick={e => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n <div class=\"button-container\">\n {this.iconName ? this.getIcon() : null}\n <cura-label class=\"label\" size={labelSize} lineHeight=\"0%\" color={this.getLabelFontColor()} weight=\"regular\">\n <slot></slot>\n </cura-label>\n {this.counter ? this.getCounter() : null}\n {this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null}\n </div>\n </button>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cura-button-select.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-select/cura-button-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n tag: 'cura-button-select',\n styleUrl: 'cura-button-select.scss',\n shadow: true,\n})\nexport class CuraButtonSelect {\n @Element() host: HTMLElement;\n\n @Prop({ reflect: true, mutable: true }) selected = false;\n @Prop({ reflect: true, mutable: true }) iconName: string;\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n @Prop({ reflect: true, mutable: true }) counter: number | null;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop() background: 'dark' | 'light' = 'light';\n @Prop() color: string = 'primary';\n @Prop({ reflect: true }) iconPosition: 'left' | 'right';\n\n @State() hovered = false;\n @State() styles = {};\n\n @Event({ eventName: 'onclick' }) onclick: EventEmitter<{ selected: boolean }>;\n\n theme = window.CuraAPI.theme;\n\n weights;\n\n @Watch('background')\n @Watch('color')\n setColors() {\n const colors = [\n { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },\n ];\n\n colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n this.styles = { ...this.styles };\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes['disabled'] = this.disabled;\n classes['selected'] = this.selected;\n return classes;\n }\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\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.setColors();\n }\n\n getLabelFontColor() {\n if (this.disabled) return 'neutral-dark';\n\n if (this.background === 'dark') {\n return this.selected ? 'neutral-black' : 'neutral-white';\n }\n if (this.background === 'light') {\n return this.selected ? 'neutral-white' : 'neutral-black';\n }\n }\n\n getColorBagdeNumber() {\n if (this.background === 'dark' && this.disabled) {\n return this.selected ? 'neutral-black' : 'neutral-dark';\n }\n\n if (this.background === 'light' && this.disabled) {\n return 'neutral-medium';\n }\n\n return `${this.color}-darker`;\n }\n\n getIcon() {\n const iconSize = this.size === 'large' ? 20 : 16;\n if (this.iconPosition === 'right') {\n return;\n }\n\n return <cura-icon name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n }\n\n getCounter() {\n return (\n <cura-badge-counter\n number={this.counter}\n color={this.color}\n disabled={this.disabled || null}\n class=\"badge-number\">\n </cura-badge-counter>\n );\n }\n\n getCheckIconRight() {\n const iconSize = this.size === 'large' ? 20 : 16;\n return <cura-icon name=\"check\" size={iconSize} color={this.getLabelFontColor()}></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 handleClick(e: Event) {\n if (this.disabled) e.preventDefault();\n this.selected = !this.selected;\n this.onclick.emit({ selected: this.selected });\n }\n\n render() {\n const labelSize = labelSizes[this.size] || labelSizes['default'];\n return (\n <Host>\n <button\n class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled}\n onClick={e => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n <div class=\"button-container\">\n {this.iconName ? this.getIcon() : null}\n <cura-label class=\"label\" size={labelSize} lineHeight=\"0%\" color={this.getLabelFontColor()} weight=\"regular\">\n <slot></slot>\n </cura-label>\n {this.counter ? this.getCounter() : null}\n {this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null}\n </div>\n </button>\n </Host>\n );\n }\n}\n"]}
|
package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js
CHANGED
|
@@ -76,7 +76,7 @@ export class CuraButtonTransparent {
|
|
|
76
76
|
render() {
|
|
77
77
|
const symbolColor = this.getSymbolColor();
|
|
78
78
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
79
|
-
return (h(Host, { key: '
|
|
79
|
+
return (h(Host, { key: '5cdc491f0c3e80910e76c5bef2e26ce468ffda1f' }, 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: '105%', 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: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
80
80
|
}
|
|
81
81
|
static get is() { return "cura-button-transparent"; }
|
|
82
82
|
static get encapsulation() { return "shadow"; }
|
|
@@ -44,7 +44,7 @@ export class CuraAlert {
|
|
|
44
44
|
return this.icon ? this.icon : iconMapping[this.type];
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: 'c7d36a87c8ca4ea44a53d90edf5028e27d4ab631' }, h("div", { key: 'c54f199ba48a8a0e0549c5f046cf7dc128d8108e', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'f1607925bceeaf29a8bee7a021b1bf9e9be5b0e6', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6ccb322b9594a0c963cf8fa873b4a66642d69357', class: "content" }, this.label ? (h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', h("cura-paragraph", { key: 'e70495f19e2eac2b0c593d156436061aba50c295', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '043f67d199324f668aced318a81e6ecdbd3ac97a' })), h("slot", { key: '83cc65b83514bdbc77a3676d2fab55ebb20aa5dc', name: "actions" })), this.closeable ?
|
|
48
48
|
(h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
|
|
49
49
|
: '')));
|
|
50
50
|
}
|
|
@@ -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: '2760534555a0483e7e30c5f3009ec0cf68d0973b', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '3daf6dd066983dc63525c38b7da498147c0bf387', class: this.getClasses(), style: this.styles }, h("img", { key: 'a5f4de7983722fc3f750404fa985c312590b5e98', 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"; }
|
|
@@ -452,7 +452,7 @@ export class CuraCalendar {
|
|
|
452
452
|
}
|
|
453
453
|
render() {
|
|
454
454
|
const { months } = this.fetchMonthNames();
|
|
455
|
-
return (h(Host, { key: '
|
|
455
|
+
return (h(Host, { key: 'fcea88a384ceebadccb6059ef59cea945f875a72', style: this.getHostCSSProperties() }, h("div", { key: '82c5271ba6b073439fb58471920f73b68b8f1320', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, h("header", { key: '3921fb57f3d526b9f33c59f998ad422806505bc1', class: "header" }, h("div", { key: '1f852f0f29ff927d3940c670f5b25206837cc331', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: '697fda3903f24611628fe24a7f669ab87474aeab', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (h("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), h("cura-select", { size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: '6b7f0694e978b0807c4e54629cda68f2fde27c8a', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), h("span", { key: '5a151331c2c9872cf3b50bbaea7c9b92b1476297', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), h("div", { key: '7eeb57ed5dc104c953343697a205a922a1b2b912', class: "dates" }, !this.collapsed
|
|
456
456
|
? this.fetchDaysOfMonth().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
|
|
457
457
|
: this.fetchDaysOfWeek().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (h("div", { class: "collapsed-container" }, h("cura-button-transparent", { onClick: () => this.showNotColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "plusCircle" }, "Veja mais datas"))) : (h("div", { class: "collapsed-container" }, h("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "minusCircle" }, "Veja menos datas")))) : null)));
|
|
458
458
|
}
|
|
@@ -34,7 +34,7 @@ export class CuraCard {
|
|
|
34
34
|
return classes;
|
|
35
35
|
}
|
|
36
36
|
render() {
|
|
37
|
-
return (h(Host, { key: '
|
|
37
|
+
return (h(Host, { key: 'db1a13cfe3bb925300e65641e1d45fade5a03f52', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
|
|
38
38
|
}
|
|
39
39
|
static get is() { return "cura-card"; }
|
|
40
40
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export const microIcons = ['arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'check', 'checkDouble', 'close', 'closeCircle', 'collapse', 'down', 'expand', 'linkExternal', 'link', 'left', 'minus', 'minusCircle', 'minusSquare', 'order', 'subItem', 'right', 'plus', 'plusCircle', 'plusSquare', 'up', 'filter', 'swap'];
|
|
2
1
|
export const iconSizes = {
|
|
3
2
|
"128": { size: 128, stroke: 5.25 },
|
|
4
3
|
"72": { size: 72, stroke: 3.5 },
|
|
@@ -9,7 +8,7 @@ export const iconSizes = {
|
|
|
9
8
|
"24": { size: 24, stroke: 2 },
|
|
10
9
|
"20": { size: 20, stroke: 1.75 },
|
|
11
10
|
"16": { size: 16, stroke: 1.5 },
|
|
12
|
-
"micro": { size: 12, stroke: 1.
|
|
11
|
+
"micro": { size: 12, stroke: 1.25 },
|
|
13
12
|
"default": { size: 24, stroke: 2 }
|
|
14
13
|
};
|
|
15
14
|
//# sourceMappingURL=cura-icon.definitions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-icon.definitions.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"cura-icon.definitions.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC;IAChC,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;IAC3B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,OAAO,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IAClC,SAAS,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;CACjC,CAAC","sourcesContent":["export const iconSizes = {\n \"128\": {size: 128, stroke: 5.25},\n \"72\": {size: 72, stroke: 3.5},\n \"64\": {size: 64, stroke: 3.25},\n \"48\": {size: 48, stroke: 2.75},\n \"40\": {size: 40, stroke: 2.5},\n \"32\": {size: 32, stroke: 2.25},\n \"24\": {size: 24, stroke: 2},\n \"20\": {size: 20, stroke: 1.75},\n \"16\": {size: 16, stroke: 1.5},\n \"micro\": {size: 12, stroke: 1.25 },\n \"default\": {size: 24, stroke: 2}\n};\n"]}
|