@rededor/cura 1.2.0 → 1.4.0-alpha.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/{app-globals-4d07f363.js → app-globals-f33ceef8.js} +32 -1
- package/dist/cjs/app-globals-f33ceef8.js.map +1 -0
- package/dist/cjs/cura-accordion_12.cjs.entry.js +39 -38
- package/dist/cjs/cura-accordion_12.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-alert.cjs.entry.js +3 -2
- package/dist/cjs/cura-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-avatar.cjs.entry.js +1 -1
- package/dist/cjs/cura-badge-distance.cjs.entry.js +1 -1
- package/dist/cjs/cura-badge-number.cjs.entry.js +2 -2
- package/dist/cjs/cura-badge-number.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-button-outline.cjs.entry.js +1 -1
- package/dist/cjs/cura-button-select.cjs.entry.js +17 -9
- 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 +2 -2
- 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 +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 +21 -11
- package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-icons-view.cjs.entry.js +3 -3
- package/dist/cjs/cura-input-date.cjs.entry.js +45 -45
- package/dist/cjs/cura-input-date.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
- package/dist/cjs/cura-modal.cjs.entry.js +50 -0
- package/dist/cjs/cura-modal.cjs.entry.js.map +1 -0
- 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 +232 -0
- package/dist/cjs/cura-tooltip.cjs.entry.js.map +1 -0
- package/dist/cjs/cura.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/api/theme-presets/theme-presets.js +2 -0
- package/dist/collection/api/theme-presets/theme-presets.js.map +1 -1
- package/dist/collection/api/theme-presets/theme-richet.js +32 -0
- package/dist/collection/api/theme-presets/theme-richet.js.map +1 -0
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.css +0 -6
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.js +41 -43
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.js.map +1 -1
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.stories.js +54 -36
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.stories.js.map +1 -1
- package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.css +61 -60
- package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.js +41 -23
- package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.js.map +1 -1
- package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js +1 -1
- package/dist/collection/components/badges/cura-badge-number/cura-badge-number.css +0 -2
- package/dist/collection/components/badges/cura-badge-number/cura-badge-number.js +1 -1
- package/dist/collection/components/badges/cura-badge-number/cura-badge-number.js.map +1 -1
- 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.css +36 -2
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.js +39 -11
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.stories.js +18 -7
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.stories.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.css +25 -11
- package/dist/collection/components/cura-alert/cura-alert.js +2 -1
- package/dist/collection/components/cura-alert/cura-alert.js.map +1 -1
- package/dist/collection/components/cura-avatar/cura-avatar.js +1 -1
- package/dist/collection/components/cura-calendar/cura-calendar.css +1 -0
- 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.js +1 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.js +3 -3
- package/dist/collection/components/cura-modal/cura-modal.css +211 -0
- package/dist/collection/components/cura-modal/cura-modal.js +134 -0
- package/dist/collection/components/cura-modal/cura-modal.js.map +1 -0
- package/dist/collection/components/cura-modal/cura-modal.stories.js +85 -0
- package/dist/collection/components/cura-modal/cura-modal.stories.js.map +1 -0
- 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.css +159 -0
- package/dist/collection/components/cura-tooltip/cura-tooltip.js +397 -0
- package/dist/collection/components/cura-tooltip/cura-tooltip.js.map +1 -0
- package/dist/collection/components/cura-tooltip/cura-tooltip.stories.js +137 -0
- package/dist/collection/components/cura-tooltip/cura-tooltip.stories.js.map +1 -0
- 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.css +1 -1
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js +20 -10
- 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.css +15 -0
- package/dist/collection/components/forms/cura-input-date/cura-input-date.js +69 -68
- package/dist/collection/components/forms/cura-input-date/cura-input-date.js.map +1 -1
- package/dist/collection/components/forms/cura-input-date/cura-input-date.stories.js +29 -10
- package/dist/collection/components/forms/cura-input-date/cura-input-date.stories.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 +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.css +5 -1
- package/dist/collection/components/text/cura-heading/cura-heading.js +7 -6
- package/dist/collection/components/text/cura-heading/cura-heading.js.map +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
- package/dist/components/cura-accordion-item.js +19 -12
- package/dist/components/cura-accordion-item.js.map +1 -1
- package/dist/components/cura-accordion.js +14 -15
- package/dist/components/cura-accordion.js.map +1 -1
- package/dist/components/cura-alert.js +3 -2
- package/dist/components/cura-alert.js.map +1 -1
- package/dist/components/cura-avatar.js +1 -1
- package/dist/components/cura-badge-distance.js +1 -1
- package/dist/components/cura-badge-number2.js +2 -2
- package/dist/components/cura-badge-number2.js.map +1 -1
- package/dist/components/cura-button-outline.js +1 -1
- package/dist/components/cura-button-select.js +18 -9
- 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 +2 -2
- package/dist/components/cura-calendar2.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 +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 +21 -11
- package/dist/components/cura-dropdown-search.js.map +1 -1
- package/dist/components/cura-heading2.js +8 -7
- package/dist/components/cura-heading2.js.map +1 -1
- package/dist/components/cura-icon2.js +1 -1
- package/dist/components/cura-icons-view.js +3 -3
- package/dist/components/cura-input-date.js +54 -57
- package/dist/components/cura-input-date.js.map +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.d.ts +11 -0
- package/dist/components/cura-modal.js +84 -0
- package/dist/components/cura-modal.js.map +1 -0
- 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.d.ts +11 -0
- package/dist/components/cura-tooltip.js +291 -0
- package/dist/components/cura-tooltip.js.map +1 -0
- package/dist/components/index.js +35 -0
- package/dist/components/index.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/cura.esm.js.map +1 -1
- package/dist/cura/{p-116a1cd6.entry.js → p-01e301d4.entry.js} +2 -2
- package/dist/cura/p-0308cf6b.entry.js +2 -0
- package/dist/cura/p-0308cf6b.entry.js.map +1 -0
- package/dist/cura/{p-c6508bd7.entry.js → p-075b02de.entry.js} +2 -2
- package/dist/cura/{p-fd083399.entry.js → p-0e28f1c8.entry.js} +2 -2
- package/dist/cura/{p-e5023e34.entry.js → p-1f53580a.entry.js} +2 -2
- package/dist/cura/p-3536c96b.entry.js +2 -0
- package/dist/cura/p-3536c96b.entry.js.map +1 -0
- package/dist/cura/p-5bb8302c.entry.js +2 -0
- package/dist/cura/p-5bb8302c.entry.js.map +1 -0
- package/dist/cura/p-7090d4a7.entry.js +2 -0
- package/dist/cura/p-7090d4a7.entry.js.map +1 -0
- package/dist/cura/p-71a2dcef.entry.js +2 -0
- package/dist/cura/p-71a2dcef.entry.js.map +1 -0
- package/dist/cura/{p-2956f120.entry.js → p-7853ab16.entry.js} +2 -2
- package/dist/cura/{p-2956f120.entry.js.map → p-7853ab16.entry.js.map} +1 -1
- package/dist/cura/{p-41c3d47d.entry.js → p-81c66f2b.entry.js} +2 -2
- package/dist/cura/p-82b99090.js +2 -0
- package/dist/cura/p-82b99090.js.map +1 -0
- package/dist/cura/p-9a7e3f48.entry.js +2 -0
- package/dist/cura/p-9a7e3f48.entry.js.map +1 -0
- package/dist/cura/{p-dcd2e5bb.entry.js → p-a7ecea4a.entry.js} +2 -2
- package/dist/cura/{p-33772510.entry.js → p-b0451cb3.entry.js} +2 -2
- package/dist/cura/{p-907b3d12.entry.js → p-bfb5e9e1.entry.js} +2 -2
- package/dist/cura/{p-fdce91a7.entry.js → p-d635501a.entry.js} +2 -2
- package/dist/cura/{p-44e3325a.entry.js → p-dbd9eab3.entry.js} +2 -2
- package/dist/cura/{p-8f3db0fe.entry.js → p-e5b0dd74.entry.js} +2 -2
- package/dist/cura/p-ebed83d1.entry.js +2 -0
- package/dist/cura/{p-fcbf4311.entry.js → p-ed839f1e.entry.js} +2 -2
- package/dist/cura/p-eda28278.entry.js +2 -0
- package/dist/cura/p-eda28278.entry.js.map +1 -0
- package/dist/cura/{p-b2d5db22.entry.js → p-eea093b2.entry.js} +2 -2
- package/dist/cura/p-f375a612.entry.js +2 -0
- package/dist/cura/p-f375a612.entry.js.map +1 -0
- package/dist/esm/{app-globals-6ca7103d.js → app-globals-e54ee4c3.js} +32 -1
- package/dist/esm/app-globals-e54ee4c3.js.map +1 -0
- package/dist/esm/cura-accordion_12.entry.js +39 -38
- package/dist/esm/cura-accordion_12.entry.js.map +1 -1
- package/dist/esm/cura-alert.entry.js +3 -2
- package/dist/esm/cura-alert.entry.js.map +1 -1
- package/dist/esm/cura-avatar.entry.js +1 -1
- package/dist/esm/cura-badge-distance.entry.js +1 -1
- package/dist/esm/cura-badge-number.entry.js +2 -2
- package/dist/esm/cura-badge-number.entry.js.map +1 -1
- package/dist/esm/cura-button-outline.entry.js +1 -1
- package/dist/esm/cura-button-select.entry.js +17 -9
- 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 +2 -2
- 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 +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 +21 -11
- package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
- package/dist/esm/cura-icons-view.entry.js +3 -3
- package/dist/esm/cura-input-date.entry.js +45 -45
- package/dist/esm/cura-input-date.entry.js.map +1 -1
- package/dist/esm/cura-loader-bar.entry.js +1 -1
- package/dist/esm/cura-modal.entry.js +46 -0
- package/dist/esm/cura-modal.entry.js.map +1 -0
- 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 +228 -0
- package/dist/esm/cura-tooltip.entry.js.map +1 -0
- package/dist/esm/cura.js +2 -2
- package/dist/esm/loader.js +2 -2
- package/dist/types/api/theme-presets/theme-presets.d.ts +43 -0
- package/dist/types/api/theme-presets/theme-richet.d.ts +43 -0
- package/dist/types/components/accordion/cura-accordion/cura-accordion.d.ts +7 -3
- package/dist/types/components/accordion/cura-accordion/cura-accordion.stories.d.ts +38 -16
- package/dist/types/components/accordion/cura-accordion-item/cura-accordion-item.d.ts +8 -3
- package/dist/types/components/buttons/cura-button-select/cura-button-select.d.ts +2 -0
- package/dist/types/components/buttons/cura-button-select/cura-button-select.stories.d.ts +14 -0
- package/dist/types/components/cura-modal/cura-modal.d.ts +28 -0
- package/dist/types/components/cura-modal/cura-modal.stories.d.ts +70 -0
- package/dist/types/components/cura-tooltip/cura-tooltip.d.ts +25 -0
- package/dist/types/components/cura-tooltip/cura-tooltip.stories.d.ts +119 -0
- package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search.d.ts +1 -0
- package/dist/types/components/forms/cura-input-date/cura-input-date.d.ts +19 -19
- package/dist/types/components/text/cura-heading/cura-heading.d.ts +1 -0
- package/dist/types/components.d.ts +131 -10
- package/package.json +2 -2
- package/dist/cjs/app-globals-4d07f363.js.map +0 -1
- package/dist/cura/p-0b7a7306.js +0 -2
- package/dist/cura/p-0b7a7306.js.map +0 -1
- package/dist/cura/p-2d267d23.entry.js +0 -2
- package/dist/cura/p-2d267d23.entry.js.map +0 -1
- package/dist/cura/p-4e14c01c.entry.js +0 -2
- package/dist/cura/p-b43b69f3.entry.js +0 -2
- package/dist/cura/p-b43b69f3.entry.js.map +0 -1
- package/dist/cura/p-be10b681.entry.js +0 -2
- package/dist/cura/p-be10b681.entry.js.map +0 -1
- package/dist/cura/p-cda24a1e.entry.js +0 -2
- package/dist/cura/p-cda24a1e.entry.js.map +0 -1
- package/dist/cura/p-e8bc6381.entry.js +0 -2
- package/dist/cura/p-e8bc6381.entry.js.map +0 -1
- package/dist/cura/p-ed97cf3c.entry.js +0 -2
- package/dist/cura/p-ed97cf3c.entry.js.map +0 -1
- package/dist/esm/app-globals-6ca7103d.js.map +0 -1
- /package/dist/cura/{p-116a1cd6.entry.js.map → p-01e301d4.entry.js.map} +0 -0
- /package/dist/cura/{p-c6508bd7.entry.js.map → p-075b02de.entry.js.map} +0 -0
- /package/dist/cura/{p-fd083399.entry.js.map → p-0e28f1c8.entry.js.map} +0 -0
- /package/dist/cura/{p-e5023e34.entry.js.map → p-1f53580a.entry.js.map} +0 -0
- /package/dist/cura/{p-41c3d47d.entry.js.map → p-81c66f2b.entry.js.map} +0 -0
- /package/dist/cura/{p-dcd2e5bb.entry.js.map → p-a7ecea4a.entry.js.map} +0 -0
- /package/dist/cura/{p-33772510.entry.js.map → p-b0451cb3.entry.js.map} +0 -0
- /package/dist/cura/{p-907b3d12.entry.js.map → p-bfb5e9e1.entry.js.map} +0 -0
- /package/dist/cura/{p-fdce91a7.entry.js.map → p-d635501a.entry.js.map} +0 -0
- /package/dist/cura/{p-44e3325a.entry.js.map → p-dbd9eab3.entry.js.map} +0 -0
- /package/dist/cura/{p-8f3db0fe.entry.js.map → p-e5b0dd74.entry.js.map} +0 -0
- /package/dist/cura/{p-4e14c01c.entry.js.map → p-ebed83d1.entry.js.map} +0 -0
- /package/dist/cura/{p-fcbf4311.entry.js.map → p-ed839f1e.entry.js.map} +0 -0
- /package/dist/cura/{p-b2d5db22.entry.js.map → p-eea093b2.entry.js.map} +0 -0
|
@@ -16,17 +16,28 @@ export class CuraInputDate {
|
|
|
16
16
|
this.isCalendarVisible = false;
|
|
17
17
|
this.dates = [];
|
|
18
18
|
this.value = '';
|
|
19
|
+
this.dateSettings = {
|
|
20
|
+
placeholder: null,
|
|
21
|
+
mask: 'date',
|
|
22
|
+
mode: 'single',
|
|
23
|
+
};
|
|
19
24
|
}
|
|
20
25
|
connectedCallback() {
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
this.styles
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
const { fonts, colors, spacing } = window.CuraAPI.theme;
|
|
27
|
+
const weights = fonts.getWeights();
|
|
28
|
+
this.styles = {
|
|
29
|
+
'--base-spacing': spacing.getSpacing(),
|
|
30
|
+
'--neutral-purewhite': colors.getColor('neutral-purewhite'),
|
|
31
|
+
'--neutral-lighter': colors.getColor('neutral-lighter'),
|
|
32
|
+
'--neutral-base': colors.getColor('neutral-base'),
|
|
33
|
+
'--font-size': fonts.getSize(),
|
|
34
|
+
'--font-color': fonts.getColor(),
|
|
35
|
+
'--font-family': fonts.getFamily(),
|
|
36
|
+
'--font-weight-regular': weights.regular,
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
componentWillLoad() {
|
|
40
|
+
this.updateDateSettings();
|
|
30
41
|
}
|
|
31
42
|
/**
|
|
32
43
|
* Callback for form association
|
|
@@ -34,33 +45,21 @@ export class CuraInputDate {
|
|
|
34
45
|
formAssociatedCallback(form) {
|
|
35
46
|
form.ariaLabel = this.label;
|
|
36
47
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
* either for a date range ('dd/mm/yyyy - dd/mm/yyyy') or a single date ('dd/mm/yyyy')
|
|
42
|
-
*/
|
|
43
|
-
setPlaceholder() {
|
|
44
|
-
if (this.placeholder) {
|
|
45
|
-
return this.placeholder;
|
|
48
|
+
updateDateSettings() {
|
|
49
|
+
const newSettings = this.getDateSettings(this.enableRangeDates);
|
|
50
|
+
if (this.shouldUpdateDateSettings(newSettings)) {
|
|
51
|
+
this.dateSettings = newSettings;
|
|
46
52
|
}
|
|
47
|
-
return this.enableRangeDates ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa';
|
|
48
53
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return this.enableRangeDates ? 'dateRange' : 'date';
|
|
54
|
+
getDateSettings(isRange) {
|
|
55
|
+
return {
|
|
56
|
+
placeholder: this.placeholder || (isRange ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa'),
|
|
57
|
+
mask: isRange ? 'dateRange' : 'date',
|
|
58
|
+
mode: isRange ? 'range' : 'single',
|
|
59
|
+
};
|
|
56
60
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
*
|
|
60
|
-
* @returns {'range' | 'single'}
|
|
61
|
-
*/
|
|
62
|
-
setMode() {
|
|
63
|
-
return this.enableRangeDates ? 'range' : 'single';
|
|
61
|
+
shouldUpdateDateSettings(newSettings) {
|
|
62
|
+
return this.dateSettings.placeholder !== newSettings.placeholder || this.dateSettings.mask !== newSettings.mask || this.dateSettings.mode !== newSettings.mode;
|
|
64
63
|
}
|
|
65
64
|
handleClick(ev) {
|
|
66
65
|
if (this.el.contains(ev.target)) {
|
|
@@ -89,8 +88,7 @@ export class CuraInputDate {
|
|
|
89
88
|
this.dateChange.emit(this.value);
|
|
90
89
|
}
|
|
91
90
|
else {
|
|
92
|
-
this.
|
|
93
|
-
this.dates = [];
|
|
91
|
+
this.resetDates();
|
|
94
92
|
}
|
|
95
93
|
}
|
|
96
94
|
else if (simpleDateRegex.test(inputValue)) {
|
|
@@ -103,8 +101,7 @@ export class CuraInputDate {
|
|
|
103
101
|
this.dateChange.emit(this.value);
|
|
104
102
|
}
|
|
105
103
|
else {
|
|
106
|
-
this.
|
|
107
|
-
this.dates = [];
|
|
104
|
+
this.resetDates();
|
|
108
105
|
}
|
|
109
106
|
}
|
|
110
107
|
else {
|
|
@@ -117,6 +114,7 @@ export class CuraInputDate {
|
|
|
117
114
|
this.status = 'default';
|
|
118
115
|
this.value = '';
|
|
119
116
|
this.dateChange.emit(this.value);
|
|
117
|
+
this.statusInputChange.emit(this.status);
|
|
120
118
|
}
|
|
121
119
|
}
|
|
122
120
|
isDateValid(date) {
|
|
@@ -138,9 +136,14 @@ export class CuraInputDate {
|
|
|
138
136
|
const year = date.getFullYear();
|
|
139
137
|
return `${day}/${month}/${year}`;
|
|
140
138
|
}
|
|
139
|
+
resetDates() {
|
|
140
|
+
this.status = 'error';
|
|
141
|
+
this.dates = [];
|
|
142
|
+
this.statusInputChange.emit(this.status);
|
|
143
|
+
}
|
|
141
144
|
renderCalendarOrHelperText() {
|
|
142
145
|
if (this.isCalendarVisible) {
|
|
143
|
-
return (h("div", { class: "calendar" }, h("cura-calendar", { customDates: this.dates, mode: this.
|
|
146
|
+
return (h("div", { class: "calendar visible" }, h("cura-calendar", { customDates: this.dates, mode: this.dateSettings.mode, width: "100%", maxWidth: "400px", embedded: false, floating: false, disableFutureDates: this.disableFutureDates, disablePassDates: this.disablePassDates, onOnchangeday: e => {
|
|
144
147
|
const days = e.detail.days;
|
|
145
148
|
if (days.length === 1) {
|
|
146
149
|
this.value = this.parseDateToString(days[0]);
|
|
@@ -159,7 +162,7 @@ export class CuraInputDate {
|
|
|
159
162
|
}
|
|
160
163
|
}
|
|
161
164
|
render() {
|
|
162
|
-
return (h(Host, { key: '
|
|
165
|
+
return (h(Host, { key: 'bcda0a8a2601f24d445775e40535d1c8a80be5c0' }, h("div", { key: '3a3e11f1bd7082d563537a8679f69f976f242a4a', class: "container", style: this.styles }, h("cura-input-text", { key: '86ce4be158090c4ad4bfaa1e5196548fa5e1c105', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
|
|
163
166
|
}
|
|
164
167
|
static get is() { return "cura-input-date"; }
|
|
165
168
|
static get encapsulation() { return "shadow"; }
|
|
@@ -214,7 +217,7 @@ export class CuraInputDate {
|
|
|
214
217
|
},
|
|
215
218
|
"size": {
|
|
216
219
|
"type": "string",
|
|
217
|
-
"mutable":
|
|
220
|
+
"mutable": false,
|
|
218
221
|
"complexType": {
|
|
219
222
|
"original": "'small' | 'medium' | 'large'",
|
|
220
223
|
"resolved": "\"large\" | \"medium\" | \"small\"",
|
|
@@ -250,7 +253,7 @@ export class CuraInputDate {
|
|
|
250
253
|
},
|
|
251
254
|
"helperText": {
|
|
252
255
|
"type": "string",
|
|
253
|
-
"mutable":
|
|
256
|
+
"mutable": false,
|
|
254
257
|
"complexType": {
|
|
255
258
|
"original": "string",
|
|
256
259
|
"resolved": "string",
|
|
@@ -267,7 +270,7 @@ export class CuraInputDate {
|
|
|
267
270
|
},
|
|
268
271
|
"enableRangeDates": {
|
|
269
272
|
"type": "boolean",
|
|
270
|
-
"mutable":
|
|
273
|
+
"mutable": false,
|
|
271
274
|
"complexType": {
|
|
272
275
|
"original": "boolean",
|
|
273
276
|
"resolved": "boolean",
|
|
@@ -284,7 +287,7 @@ export class CuraInputDate {
|
|
|
284
287
|
},
|
|
285
288
|
"disableFutureDates": {
|
|
286
289
|
"type": "boolean",
|
|
287
|
-
"mutable":
|
|
290
|
+
"mutable": false,
|
|
288
291
|
"complexType": {
|
|
289
292
|
"original": "boolean",
|
|
290
293
|
"resolved": "boolean",
|
|
@@ -301,7 +304,7 @@ export class CuraInputDate {
|
|
|
301
304
|
},
|
|
302
305
|
"disablePassDates": {
|
|
303
306
|
"type": "boolean",
|
|
304
|
-
"mutable":
|
|
307
|
+
"mutable": false,
|
|
305
308
|
"complexType": {
|
|
306
309
|
"original": "boolean",
|
|
307
310
|
"resolved": "boolean",
|
|
@@ -318,7 +321,7 @@ export class CuraInputDate {
|
|
|
318
321
|
},
|
|
319
322
|
"iconName": {
|
|
320
323
|
"type": "string",
|
|
321
|
-
"mutable":
|
|
324
|
+
"mutable": false,
|
|
322
325
|
"complexType": {
|
|
323
326
|
"original": "string",
|
|
324
327
|
"resolved": "string",
|
|
@@ -359,7 +362,8 @@ export class CuraInputDate {
|
|
|
359
362
|
"styles": {},
|
|
360
363
|
"isCalendarVisible": {},
|
|
361
364
|
"dates": {},
|
|
362
|
-
"value": {}
|
|
365
|
+
"value": {},
|
|
366
|
+
"dateSettings": {}
|
|
363
367
|
};
|
|
364
368
|
}
|
|
365
369
|
static get events() {
|
|
@@ -381,34 +385,31 @@ export class CuraInputDate {
|
|
|
381
385
|
"resolved": "string",
|
|
382
386
|
"references": {}
|
|
383
387
|
}
|
|
388
|
+
}, {
|
|
389
|
+
"method": "statusInputChange",
|
|
390
|
+
"name": "statusInputChange",
|
|
391
|
+
"bubbles": true,
|
|
392
|
+
"cancelable": true,
|
|
393
|
+
"composed": true,
|
|
394
|
+
"docs": {
|
|
395
|
+
"tags": [{
|
|
396
|
+
"name": "type",
|
|
397
|
+
"text": "{EventEmitter<string>}"
|
|
398
|
+
}],
|
|
399
|
+
"text": "Emitted when the value of the status changes"
|
|
400
|
+
},
|
|
401
|
+
"complexType": {
|
|
402
|
+
"original": "string",
|
|
403
|
+
"resolved": "string",
|
|
404
|
+
"references": {}
|
|
405
|
+
}
|
|
384
406
|
}];
|
|
385
407
|
}
|
|
386
408
|
static get elementRef() { return "el"; }
|
|
387
409
|
static get watchers() {
|
|
388
410
|
return [{
|
|
389
411
|
"propName": "enableRangeDates",
|
|
390
|
-
"methodName": "
|
|
391
|
-
}, {
|
|
392
|
-
"propName": "enableRangeDates",
|
|
393
|
-
"methodName": "setMask"
|
|
394
|
-
}, {
|
|
395
|
-
"propName": "enableRangeDates",
|
|
396
|
-
"methodName": "setMode"
|
|
397
|
-
}, {
|
|
398
|
-
"propName": "disableFutureDates",
|
|
399
|
-
"methodName": "isDateValid"
|
|
400
|
-
}, {
|
|
401
|
-
"propName": "disablePassDates",
|
|
402
|
-
"methodName": "isDateValid"
|
|
403
|
-
}, {
|
|
404
|
-
"propName": "dates",
|
|
405
|
-
"methodName": "renderCalendarOrHelperText"
|
|
406
|
-
}, {
|
|
407
|
-
"propName": "isCalendarVisible",
|
|
408
|
-
"methodName": "renderCalendarOrHelperText"
|
|
409
|
-
}, {
|
|
410
|
-
"propName": "disableFutureDates",
|
|
411
|
-
"methodName": "renderCalendarOrHelperText"
|
|
412
|
+
"methodName": "updateDateSettings"
|
|
412
413
|
}];
|
|
413
414
|
}
|
|
414
415
|
static get listeners() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-input-date.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-input-date/cura-input-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Listen, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport { CuraInputTextCustomEvent } from '../../../components';\nimport { isAfter, isBefore } from 'date-fns';\n\n@Component({\n tag: 'cura-input-date',\n styleUrl: 'cura-input-date.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraInputDate {\n @Element() el: HTMLElement;\n\n /**\n * Label text for the input date\n */\n @Prop({ reflect: true }) label?: string = '';\n\n /**\n * Indicates input status (default: default)\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n\n /**\n * Size of the input mode default: 'small', 'medium', or 'large' (default: 'medium')\n */\n @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Name text for the input date\n */\n @Prop({ reflect: true }) name?: string = '';\n\n /**\n * Helper text displayed below the input\n */\n @Prop({ reflect: true, mutable: true }) helperText?: string;\n\n /**\n * Enables the date range selection mode, allowing users to select a period of dates\n */\n @Prop({ reflect: true, mutable: true }) enableRangeDates: boolean;\n\n /**\n * Controls whether future dates (dates before the current date) should be disabled\n */\n @Prop({ reflect: true, mutable: true }) disableFutureDates: boolean;\n\n /**\n * Controls whether past dates (dates before the current date) should be disabled\n */\n @Prop({ reflect: true, mutable: true }) disablePassDates: boolean;\n\n /**\n * Whether to display a cura icon (default: null)\n */\n @Prop({ reflect: true, mutable: true }) iconName?: string = '';\n\n /**\n * Placeholder text for the input\n */\n @Prop({ reflect: true }) placeholder?: string | null = null;\n\n /**\n * Emitted when the value of the input changes\n * @type {EventEmitter<string>}\n */\n @Event() dateChange: EventEmitter<string>;\n\n @State() styles = {};\n\n @State() isCalendarVisible: boolean = false;\n\n @State() dates: Date[] = [];\n\n @State() value?: string = '';\n\n connectedCallback() {\n const weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-regular'] = weights.regular;\n }\n\n /**\n * Callback for form association\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Formats the placeholder based on the enableRangeDates flag\n *\n * @returns {string} A string representing the placeholder format,\n * either for a date range ('dd/mm/yyyy - dd/mm/yyyy') or a single date ('dd/mm/yyyy')\n */\n @Watch('enableRangeDates')\n setPlaceholder(): string {\n if (this.placeholder) {\n return this.placeholder;\n }\n return this.enableRangeDates ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa';\n }\n\n /**\n * Sets the mask type based on the enableRangeDates flag\n *\n * @returns {string} The mask type, either 'dateRange' or 'date'\n */\n @Watch('enableRangeDates')\n setMask(): string {\n return this.enableRangeDates ? 'dateRange' : 'date';\n }\n\n /**\n * Sets the mode type based on the enableRangeDates flag\n *\n * @returns {'range' | 'single'}\n */\n @Watch('enableRangeDates')\n setMode(): 'range' | 'single' {\n return this.enableRangeDates ? 'range' : 'single';\n }\n\n @Listen('click', { target: 'window' })\n handleClick(ev: { target: Node }) {\n if (this.el.contains(ev.target)) {\n return;\n }\n this.hideCalendar();\n }\n\n hideCalendar() {\n this.isCalendarVisible = false;\n }\n\n showCalendar() {\n this.isCalendarVisible = true;\n }\n\n handleInputDates(event: any) {\n const inputValue = event.target.value;\n\n const dateRangeRegex = /^(\\d{2}\\/\\d{2}\\/\\d{4})\\s*-\\s*(\\d{2}\\/\\d{2}\\/\\d{4})$/;\n const simpleDateRegex = /^(\\d{2}\\/\\d{2}\\/\\d{4})$/;\n\n if (dateRangeRegex.test(inputValue)) {\n const matches = inputValue.match(dateRangeRegex);\n const startDate = this.parseStringToDate(matches[1]);\n const endDate = this.parseStringToDate(matches[2]);\n if (this.isDateValid(startDate) && this.isDateValid(endDate)) {\n this.status = 'default';\n this.dates = [startDate, endDate];\n this.value = `${this.parseDateToString(startDate)} - ${this.parseDateToString(endDate)}`;\n this.dateChange.emit(this.value);\n } else {\n this.status = 'error';\n this.dates = [];\n }\n } else if (simpleDateRegex.test(inputValue)) {\n const matches = inputValue.match(simpleDateRegex);\n const singleDate = this.parseStringToDate(matches[1]);\n if (this.isDateValid(singleDate)) {\n this.status = 'default';\n this.dates = [singleDate];\n this.value = this.parseDateToString(singleDate);\n this.dateChange.emit(this.value);\n } else {\n this.status = 'error';\n this.dates = [];\n }\n } else {\n this.dates = [];\n }\n }\n\n handleChangeDates(event: CuraInputTextCustomEvent<string | number>) {\n if (event.detail === '') {\n this.dates = [];\n this.status = 'default';\n this.value = '';\n this.dateChange.emit(this.value);\n }\n }\n\n @Watch('disableFutureDates')\n @Watch('disablePassDates')\n isDateValid(date: Date) {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n\n if (this.disablePassDates) return !isBefore(date, today);\n if (this.disableFutureDates) return !isAfter(date, today);\n return true;\n }\n\n parseStringToDate(dateString: string): Date {\n const [day, month, year] = dateString.split('/').map(Number);\n return new Date(year, month - 1, day);\n }\n\n parseDateToString(date: Date): string {\n const day = String(date.getDate()).padStart(2, '0');\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const year = date.getFullYear();\n\n return `${day}/${month}/${year}`;\n }\n\n @Watch('dates')\n @Watch('isCalendarVisible')\n @Watch('disableFutureDates')\n renderCalendarOrHelperText() {\n if (this.isCalendarVisible) {\n return (\n <div class=\"calendar\">\n <cura-calendar\n customDates={this.dates}\n mode={this.setMode()}\n width=\"100%\"\n embedded={false}\n floating={false}\n disableFutureDates={this.disableFutureDates}\n disablePassDates={this.disablePassDates}\n onOnchangeday={e => {\n const days = e.detail.days;\n if (days.length === 1) {\n this.value = this.parseDateToString(days[0]);\n } else if (days.length > 0) {\n this.value = `${this.parseDateToString(days[0])} - ${this.parseDateToString(days[days.length - 1])}`;\n } else {\n this.value = '';\n }\n this.dateChange.emit(this.value);\n }}\n />\n </div>\n );\n } else {\n return this.helperText;\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"container\" style={this.styles}>\n <cura-input-text\n label={this.label}\n name={this.name}\n status={this.status}\n value={this.value}\n onFocus={() => this.showCalendar()}\n size={this.size}\n iconName={this.iconName}\n placeholder={this.setPlaceholder()}\n mask-preset={this.setMask()}\n enable-selection-mode={true}\n onKeyUp={event => this.handleInputDates(event)}\n autocomplete=\"off\"\n onValueChange={event => this.handleChangeDates(event)}\n >\n {this.renderCalendarOrHelperText()}\n </cura-input-text>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cura-input-date.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-input-date/cura-input-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Listen, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport { CuraInputTextCustomEvent } from '../../../components';\nimport { isAfter, isBefore } from 'date-fns';\n\n@Component({\n tag: 'cura-input-date',\n styleUrl: 'cura-input-date.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraInputDate {\n @Element() el: HTMLElement;\n\n /**\n * Label text for the input date\n */\n @Prop({ reflect: true }) label?: string = '';\n\n /**\n * Indicates input status (default: default)\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n\n /**\n * Size of the input mode default: 'small', 'medium', or 'large' (default: 'medium')\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Name text for the input date\n */\n @Prop({ reflect: true }) name?: string = '';\n\n /**\n * Helper text displayed below the input\n */\n @Prop({ reflect: true }) helperText?: string;\n\n /**\n * Enables the date range selection mode, allowing users to select a period of dates\n */\n @Prop({ reflect: true }) enableRangeDates: boolean;\n\n /**\n * Controls whether future dates (dates before the current date) should be disabled\n */\n @Prop({ reflect: true }) disableFutureDates: boolean;\n\n /**\n * Controls whether past dates (dates before the current date) should be disabled\n */\n @Prop({ reflect: true }) disablePassDates: boolean;\n\n /**\n * Whether to display a cura icon (default: null)\n */\n @Prop({ reflect: true }) iconName?: string = '';\n\n /**\n * Placeholder text for the input\n */\n @Prop({ reflect: true }) placeholder?: string | null = null;\n\n /**\n * Emitted when the value of the input changes\n * @type {EventEmitter<string>}\n */\n @Event() dateChange: EventEmitter<string>;\n\n /**\n * Emitted when the value of the status changes\n * @type {EventEmitter<string>}\n */\n @Event() statusInputChange: EventEmitter<string>;\n\n @State() styles = {};\n\n @State() isCalendarVisible: boolean = false;\n\n @State() dates: Date[] = [];\n\n @State() value?: string = '';\n\n @State() dateSettings = {\n placeholder: null,\n mask: 'date',\n mode: 'single',\n };\n\n connectedCallback() {\n const { fonts, colors, spacing } = window.CuraAPI.theme;\n const weights = fonts.getWeights();\n\n this.styles = {\n '--base-spacing': spacing.getSpacing(),\n '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n '--neutral-lighter': colors.getColor('neutral-lighter'),\n '--neutral-base': colors.getColor('neutral-base'),\n '--font-size': fonts.getSize(),\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-weight-regular': weights.regular,\n };\n }\n\n componentWillLoad() {\n this.updateDateSettings();\n }\n\n /**\n * Callback for form association\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n @Watch('enableRangeDates')\n updateDateSettings() {\n const newSettings = this.getDateSettings(this.enableRangeDates);\n\n if (this.shouldUpdateDateSettings(newSettings)) {\n this.dateSettings = newSettings;\n }\n }\n\n getDateSettings(isRange: boolean) {\n return {\n placeholder: this.placeholder || (isRange ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa'),\n mask: isRange ? 'dateRange' : 'date',\n mode: isRange ? 'range' : 'single',\n };\n }\n\n shouldUpdateDateSettings(newSettings: any) {\n return this.dateSettings.placeholder !== newSettings.placeholder || this.dateSettings.mask !== newSettings.mask || this.dateSettings.mode !== newSettings.mode;\n }\n\n @Listen('click', { target: 'window' })\n handleClick(ev: { target: Node }) {\n if (this.el.contains(ev.target)) {\n return;\n }\n this.hideCalendar();\n }\n\n hideCalendar() {\n this.isCalendarVisible = false;\n }\n\n showCalendar() {\n this.isCalendarVisible = true;\n }\n\n handleInputDates(event: any) {\n const inputValue = event.target.value;\n\n const dateRangeRegex = /^(\\d{2}\\/\\d{2}\\/\\d{4})\\s*-\\s*(\\d{2}\\/\\d{2}\\/\\d{4})$/;\n const simpleDateRegex = /^(\\d{2}\\/\\d{2}\\/\\d{4})$/;\n\n if (dateRangeRegex.test(inputValue)) {\n const matches = inputValue.match(dateRangeRegex);\n const startDate = this.parseStringToDate(matches[1]);\n const endDate = this.parseStringToDate(matches[2]);\n if (this.isDateValid(startDate) && this.isDateValid(endDate)) {\n this.status = 'default';\n this.dates = [startDate, endDate];\n this.value = `${this.parseDateToString(startDate)} - ${this.parseDateToString(endDate)}`;\n this.dateChange.emit(this.value);\n } else {\n this.resetDates();\n }\n } else if (simpleDateRegex.test(inputValue)) {\n const matches = inputValue.match(simpleDateRegex);\n const singleDate = this.parseStringToDate(matches[1]);\n if (this.isDateValid(singleDate)) {\n this.status = 'default';\n this.dates = [singleDate];\n this.value = this.parseDateToString(singleDate);\n this.dateChange.emit(this.value);\n } else {\n this.resetDates();\n }\n } else {\n this.dates = [];\n }\n }\n\n handleChangeDates(event: CuraInputTextCustomEvent<string | number>) {\n if (event.detail === '') {\n this.dates = [];\n this.status = 'default';\n this.value = '';\n this.dateChange.emit(this.value);\n this.statusInputChange.emit(this.status);\n }\n }\n\n isDateValid(date: Date) {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n\n if (this.disablePassDates) return !isBefore(date, today);\n if (this.disableFutureDates) return !isAfter(date, today);\n return true;\n }\n\n parseStringToDate(dateString: string): Date {\n const [day, month, year] = dateString.split('/').map(Number);\n return new Date(year, month - 1, day);\n }\n\n parseDateToString(date: Date): string {\n const day = String(date.getDate()).padStart(2, '0');\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const year = date.getFullYear();\n\n return `${day}/${month}/${year}`;\n }\n\n resetDates() {\n this.status = 'error';\n this.dates = [];\n this.statusInputChange.emit(this.status);\n }\n\n renderCalendarOrHelperText() {\n if (this.isCalendarVisible) {\n return (\n <div class=\"calendar visible\">\n <cura-calendar\n customDates={this.dates}\n mode={this.dateSettings.mode as 'single' | 'range'}\n width=\"100%\"\n maxWidth=\"400px\"\n embedded={false}\n floating={false}\n disableFutureDates={this.disableFutureDates}\n disablePassDates={this.disablePassDates}\n onOnchangeday={e => {\n const days = e.detail.days;\n if (days.length === 1) {\n this.value = this.parseDateToString(days[0]);\n } else if (days.length > 0) {\n this.value = `${this.parseDateToString(days[0])} - ${this.parseDateToString(days[days.length - 1])}`;\n } else {\n this.value = '';\n }\n this.dateChange.emit(this.value);\n }}\n />\n </div>\n );\n } else {\n return this.helperText;\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"container\" style={this.styles}>\n <cura-input-text\n label={this.label}\n name={this.name}\n status={this.status}\n value={this.value}\n onFocus={() => this.showCalendar()}\n size={this.size}\n icon-name={this.iconName}\n placeholder={this.dateSettings.placeholder}\n mask-preset={this.dateSettings.mask}\n enable-selection-mode={true}\n onKeyUp={event => this.handleInputDates(event)}\n autocomplete=\"off\"\n onValueChange={event => this.handleChangeDates(event)}\n >\n {this.renderCalendarOrHelperText()}\n </cura-input-text>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -13,17 +13,36 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import iconNames from "../../../assets/icons/iconset-default-list";
|
|
14
14
|
const renderCuraInputDate = (args) => {
|
|
15
15
|
const block = `<cura-input-date
|
|
16
|
+
style="min-height: 450px; height: 100%;"
|
|
16
17
|
${args.label ? `label="${args.label}"` : ''}
|
|
17
|
-
${args.size && args.size !== 'medium'
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
${args.size && args.size !== 'medium'
|
|
19
|
+
? `
|
|
20
|
+
size="${args.size}"`
|
|
21
|
+
: ''}${args.status && args.status !== 'default'
|
|
22
|
+
? `
|
|
23
|
+
status="${args.status}"`
|
|
24
|
+
: ''}${args.name
|
|
25
|
+
? `
|
|
26
|
+
name="${args.name}"`
|
|
27
|
+
: ''}${args.helperText
|
|
28
|
+
? `
|
|
29
|
+
helper-text="${args.helperText}"`
|
|
30
|
+
: ''}${args.enableRangeDates
|
|
31
|
+
? `
|
|
32
|
+
enable-range-dates="${args.enableRangeDates}"`
|
|
33
|
+
: ''}${args.disablePassDates
|
|
34
|
+
? `
|
|
35
|
+
disable-pass-dates="${args.disablePassDates}"`
|
|
36
|
+
: ''}${args.disableFutureDates
|
|
37
|
+
? `
|
|
38
|
+
disable-future-dates="${args.disableFutureDates}"`
|
|
39
|
+
: ''}${args.iconName
|
|
40
|
+
? `
|
|
41
|
+
icon-name="${args.iconName}"`
|
|
42
|
+
: ''}${args.placeholder
|
|
43
|
+
? `
|
|
44
|
+
placeholder="${args.placeholder}"`
|
|
45
|
+
: ''}>
|
|
27
46
|
</cura-input-date>
|
|
28
47
|
`;
|
|
29
48
|
return `${block}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-input-date.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-input-date/cura-input-date.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,MAAM,mBAAmB,GAAG,CAAC,IAAS,EAAE,EAAE;IACxC,MAAM,KAAK,GAAG
|
|
1
|
+
{"version":3,"file":"cura-input-date.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-input-date/cura-input-date.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraInputDate = (args: any) => {\n const block = `<cura-input-date\n style=\"min-height: 450px; height: 100%;\"\n ${args.label ? `label=\"${args.label}\"` : ''}\n ${\n args.size && args.size !== 'medium'\n ? `\n size=\"${args.size}\"`\n : ''\n }${\n args.status && args.status !== 'default'\n ? `\n status=\"${args.status}\"`\n : ''\n }${\n args.name\n ? `\n name=\"${args.name}\"`\n : ''\n }${\n args.helperText\n ? `\n helper-text=\"${args.helperText}\"`\n : ''\n }${\n args.enableRangeDates\n ? `\n enable-range-dates=\"${args.enableRangeDates}\"`\n : ''\n }${\n args.disablePassDates\n ? `\n disable-pass-dates=\"${args.disablePassDates}\"`\n : ''\n }${\n args.disableFutureDates\n ? `\n disable-future-dates=\"${args.disableFutureDates}\"`\n : ''\n }${\n args.iconName\n ? `\n icon-name=\"${args.iconName}\"`\n : ''\n }${\n args.placeholder\n ? `\n placeholder=\"${args.placeholder}\"`\n : ''\n }>\n</cura-input-date>\n`;\n return `${block}`;\n};\n\nexport default {\n title: 'Componentes/Forms/InputDate',\n tags: ['autodocs'],\n\n render: ({ ...args }) => {\n return renderCuraInputDate(args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto da label do input',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n name: {\n control: 'text',\n description: 'Propriedade name do input',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'success', 'error'],\n description: 'Status do input',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto de placeholder do input',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanho do input',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' },\n },\n },\n helperText: {\n control: 'text',\n description: 'Define o texto de ajuda do input',\n table: {\n category: 'Properties',\n },\n },\n disableFutureDates: {\n control: 'boolean',\n description: 'Define se deve desabilitar datas futuras',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n enableRangeDates: {\n control: 'boolean',\n description: 'Define se deve habilitar um range de datas',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n disablePassDates: {\n control: 'boolean',\n description: 'Define se deve desabilitar datas passadas',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone usado no campo de input date',\n required: false,\n table: {\n category: 'Properties',\n defaultValue: { summary: '' },\n },\n },\n },\n};\n\nexport const InputDate = {\n args: {\n label: 'Label',\n helperText: 'Texto de ajuda',\n size: 'medium',\n name: 'cura-input-date',\n enableRangeDates: false,\n disableFutureDates: false,\n disablePassDates: false,\n status: 'default',\n iconName: '',\n placeholder: '',\n },\n};\n"]}
|
|
@@ -545,7 +545,7 @@ export class CuraInputText {
|
|
|
545
545
|
"references": {
|
|
546
546
|
"MaskPreset": {
|
|
547
547
|
"location": "local",
|
|
548
|
-
"path": "/
|
|
548
|
+
"path": "/Users/fellipesoares/Code/cura/packages/component-lib/src/components/forms/cura-input-text/cura-input-text.tsx",
|
|
549
549
|
"id": "src/components/forms/cura-input-text/cura-input-text.tsx::MaskPreset"
|
|
550
550
|
}
|
|
551
551
|
}
|
|
@@ -46,7 +46,7 @@ export class CuraLabel {
|
|
|
46
46
|
};
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '8d691e1d4c38c30d1e50bc981b9e6de89b3506e0', style: this.hostCSSProperties() }, h("p", { key: 'b68944f4fe1e65aecf6a627f3bba547418bc125b', style: this.styles, class: this.getClasses() }, h("slot", { key: 'f8ac467674d94fe94adc075743b12111d1e32469' }))));
|
|
50
50
|
}
|
|
51
51
|
static get is() { return "cura-label"; }
|
|
52
52
|
static get encapsulation() { return "shadow"; }
|
|
@@ -120,7 +120,7 @@ export class CuraRadio {
|
|
|
120
120
|
return statusColors[this.status][type];
|
|
121
121
|
}
|
|
122
122
|
render() {
|
|
123
|
-
return (h(Host, { key: '
|
|
123
|
+
return (h(Host, { key: '07ed893348b28a188a67ee6b5e8eedb0598d2309' }, h("div", { key: 'b80a2b0e3db1f5dcac77617ecb9629b219460dbe', class: this.getClasses(), style: this.styles }, h("div", { key: '945ceedc874bf7b8ecb48683d26fa626449fb377', class: "info" }, h("div", { key: '3257b5a46d040d0177e8a791a2d810bf278f7517', class: "label-wrapper" }, h("cura-label", { key: '8c68882b6e2f852a2d1929449b3c82469474fab3', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'e9adfe5998b2c5f705589461bff38705f0ddbbc7', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '50063f682a67c74a0ce2292cc823c21e6db90bcd', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c746a61b3e7ea6d4a63143b794fd8c482829e834' }))), h("input", { key: '078275db7eb3a4878d93d77b120c3caaa0b5e0b7', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
|
|
124
124
|
}
|
|
125
125
|
static get is() { return "cura-radio"; }
|
|
126
126
|
static get encapsulation() { return "shadow"; }
|
|
@@ -265,13 +265,13 @@ export class CuraSelect {
|
|
|
265
265
|
return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
|
|
266
266
|
}
|
|
267
267
|
render() {
|
|
268
|
-
return (h(Host, { key: '
|
|
268
|
+
return (h(Host, { key: 'f01b52d0da1c417723c9da0ce7002155b3cbb07d', style: this.styles }, h("div", { key: '2798e5cd7f16e8679520900374e569cca1e5bee8', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '5f9f645c3199e6299f000f5ab167139f536442b8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '2bca7ed64c1d44152161c2d71173f70b8b2fbacc', class: 'required' }, "* "))), h("div", { key: 'c1e77ccc2d1853b8749fea57e5ca3554363ef168', class: {
|
|
269
269
|
'cura-input-field': true,
|
|
270
270
|
'open': this.isOpen
|
|
271
|
-
} }, this.renderIcon(), h("input", { key: '
|
|
271
|
+
} }, this.renderIcon(), h("input", { key: '66e99e0a7c3b00516cc2f1240d08511c9434201b', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: '4efde985b30016b633818f9fafe6c1f538b4776e', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'ead6b6a9f95acc7f2cf2e7474f72c1627e0bd8cd', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'e01c6c99fecb78822d092a41db0b969ca160cea1' })), this.isOpen && (h("div", { key: '0fedad3cac056457810c984eb471bd9a703f2ff4', class: {
|
|
272
272
|
'menu': true,
|
|
273
273
|
'open': this.isOpen
|
|
274
|
-
} }, h("slot", { key: '
|
|
274
|
+
} }, h("slot", { key: '1330a45037f002b5fd20a356f1fe5b982999e512', name: 'option' }))))));
|
|
275
275
|
}
|
|
276
276
|
static get is() { return "cura-select"; }
|
|
277
277
|
static get encapsulation() { return "shadow"; }
|
|
@@ -33,7 +33,7 @@ export class CuraSelectOption {
|
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '42fe72a8cadcb2745fa41cced2bf8f571ca0fb81', slot: "option" }, h("div", { key: '275c6ba6baaf1c28af3c6cce6abc36dc8c496e13', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'a5f2e672f55fe16b749f6f5d33c1ba64eb415ca8', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '37b09097f6f51515fe63f07a5b6bb2449ba51e60' })), this.selected && h("cura-icon", { key: '88b01b9505ea9c46ddd19be78db4bd084601687d', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
|
|
37
37
|
}
|
|
38
38
|
static get is() { return "cura-select-option"; }
|
|
39
39
|
static get encapsulation() { return "shadow"; }
|
|
@@ -92,7 +92,7 @@ export class CuraSwitch {
|
|
|
92
92
|
return classes;
|
|
93
93
|
}
|
|
94
94
|
render() {
|
|
95
|
-
return (h(Host, { key: '
|
|
95
|
+
return (h(Host, { key: '7d90b4378da63462ce63f48a54b73c1ae73e75cd' }, h("div", { key: '880d8117e073b11e33acfe2915b4aa2695f6eda4', class: this.getClasses(), style: this.styles }, h("div", { key: '475056ce32564bd91dc48cd0d9d08059db77c030', class: "info" }, h("cura-label", { key: 'f391c5eb73fbae218a7037d0381fd49b9c739298', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'd587a5d17813f65a77563ce70f0c5e924bbf737d', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '9cb6d99b2c6e7f0f398fb2899823717c9b1b565e' }))), h("div", { key: 'c7fd172953c607baa30186dd1429b39af28093ca', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '0392a5ea1bd31068aa8af7f95fe21f3c7bf7797e', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '98d36e0853ec222beaefd6da984483cbc872a5fa', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
|
|
96
96
|
}
|
|
97
97
|
static get is() { return "cura-switch"; }
|
|
98
98
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,7 +16,7 @@ export class CuraLoaderBar {
|
|
|
16
16
|
this.setProgress();
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
19
|
+
return (h(Host, { key: 'b24471535bdf9ada29ae81baa05f5c9abe7b79f9' }, h("div", { key: '15eb6b0b6abb45246c98d9e5957c492f44544062', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '032eee4ae4da0d5ad88f0df735d93ed37b8be26b', class: "progress-bar-fill" }))));
|
|
20
20
|
}
|
|
21
21
|
setColor() {
|
|
22
22
|
this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
|
|
@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
|
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: '9ef3dd91b5958a5aeb90fe51120f5d9cc768ca62', style: this.getStyles() }, h("svg", { key: '96b6a2ac1ee77c14b68ea7ee462bae4a122f0c1f', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '01e9425e96b2f8b63a0115dfba358a46d86574c5' }, h("circle", { key: '5ba2e9d288de3b48d33c57ef9c8c282511683739', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'b2069b38fc2a810c6b838eb4c924619a14ef5648', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '4e04a92c3cb8ba0084112f1a14a7815317ca92c5' }, h("linearGradient", { key: '4369f1a5c6d66b37cc00ca88c3e5c77867867fbf', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '224eac239fcd4f22e3ca7b044d89942757381b9e' }), h("stop", { key: '35236a39f2156fefea7878a60dd1e559d3d1f850', offset: "1" }))))));
|
|
23
23
|
}
|
|
24
24
|
static get is() { return "cura-loader-circle"; }
|
|
25
25
|
static get encapsulation() { return "shadow"; }
|
|
@@ -60,7 +60,7 @@ export class CuraDisplay {
|
|
|
60
60
|
return tags[`${this.level}`] || tags['default'];
|
|
61
61
|
}
|
|
62
62
|
render() {
|
|
63
|
-
return (h(Host, { key: '
|
|
63
|
+
return (h(Host, { key: '9d75215eaa43baaf9ca9aada36dfdbff4596afb2', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
64
64
|
}
|
|
65
65
|
static get is() { return "cura-display"; }
|
|
66
66
|
static get encapsulation() { return "shadow"; }
|
|
@@ -113,6 +113,10 @@
|
|
|
113
113
|
text-underline-offset: 10%;
|
|
114
114
|
cursor: default;
|
|
115
115
|
}
|
|
116
|
-
:host ::slotted(i)
|
|
116
|
+
:host ::slotted(i) {
|
|
117
117
|
font-weight: var(--font-weight-medium);
|
|
118
|
+
}
|
|
119
|
+
:host ::slotted(em) {
|
|
120
|
+
color: var(--color-link);
|
|
121
|
+
font-style: normal;
|
|
118
122
|
}
|
|
@@ -36,17 +36,18 @@ export class CuraHeading {
|
|
|
36
36
|
};
|
|
37
37
|
}
|
|
38
38
|
hostCSSProperties() {
|
|
39
|
+
const fontColor = this.color
|
|
40
|
+
? this.theme.colors.getColor(this.color)
|
|
41
|
+
: this.theme.fonts.getColor();
|
|
39
42
|
return {
|
|
40
43
|
'--margin-block': this.marginBlock,
|
|
41
44
|
'--font-size-base': this.fontSizeBase,
|
|
42
|
-
'--line-height': this.lineHeight
|
|
45
|
+
'--line-height': this.lineHeight,
|
|
46
|
+
'--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),
|
|
43
47
|
};
|
|
44
48
|
}
|
|
45
49
|
setColors() {
|
|
46
|
-
|
|
47
|
-
? this.theme.colors.getColor(this.color)
|
|
48
|
-
: this.theme.fonts.getColor();
|
|
49
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
|
|
50
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
|
|
50
51
|
}
|
|
51
52
|
getHeadingTag() {
|
|
52
53
|
const tags = {
|
|
@@ -61,7 +62,7 @@ export class CuraHeading {
|
|
|
61
62
|
return tags[`${this.level}`] || tags['default'];
|
|
62
63
|
}
|
|
63
64
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
65
|
+
return (h(Host, { key: '83a6a2a08051c3654f609f0e1824f41f48a6ff83', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
65
66
|
}
|
|
66
67
|
static get is() { return "cura-heading"; }
|
|
67
68
|
static get encapsulation() { return "shadow"; }
|