@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
|
@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './cura-loader-circle2.js';
|
|
|
8
8
|
import { d as defineCustomElement$3 } from './cura-select2.js';
|
|
9
9
|
import { d as defineCustomElement$2 } from './cura-select-option2.js';
|
|
10
10
|
|
|
11
|
-
const curaInputDateCss = ":host{display:block}.container{display:flex;flex-direction:column}.container .calendar{padding:0px calc(var(--base-spacing) * 3px);margin-top:-8px;border-radius:0px 0px 4px 4px;border-top:0px;border-right:2px solid #D4D4D4;border-bottom:2px solid #D4D4D4;border-left:2px solid #D4D4D4;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}";
|
|
11
|
+
const curaInputDateCss = ":host{display:block}.container{display:flex;flex-direction:column;position:relative}.container .calendar{padding:0px calc(var(--base-spacing) * 3px);margin-top:-8px;border-radius:0px 0px 4px 4px;border-top:0px;border-right:2px solid #D4D4D4;border-bottom:2px solid #D4D4D4;border-left:2px solid #D4D4D4;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));position:absolute;top:100%;z-index:10;display:none;opacity:0;pointer-events:none}.container .calendar.visible{box-sizing:border-box;display:block;opacity:1;pointer-events:auto;width:100%;background-color:#fff}";
|
|
12
12
|
const CuraInputDateStyle0 = curaInputDateCss;
|
|
13
13
|
|
|
14
14
|
const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate extends HTMLElement {
|
|
@@ -17,6 +17,7 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
|
|
|
17
17
|
this.__registerHost();
|
|
18
18
|
this.__attachShadow();
|
|
19
19
|
this.dateChange = createEvent(this, "dateChange", 7);
|
|
20
|
+
this.statusInputChange = createEvent(this, "statusInputChange", 7);
|
|
20
21
|
this.label = '';
|
|
21
22
|
this.status = 'default';
|
|
22
23
|
this.size = 'medium';
|
|
@@ -31,17 +32,28 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
|
|
|
31
32
|
this.isCalendarVisible = false;
|
|
32
33
|
this.dates = [];
|
|
33
34
|
this.value = '';
|
|
35
|
+
this.dateSettings = {
|
|
36
|
+
placeholder: null,
|
|
37
|
+
mask: 'date',
|
|
38
|
+
mode: 'single',
|
|
39
|
+
};
|
|
34
40
|
}
|
|
35
41
|
connectedCallback() {
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
this.styles
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
const { fonts, colors, spacing } = window.CuraAPI.theme;
|
|
43
|
+
const weights = fonts.getWeights();
|
|
44
|
+
this.styles = {
|
|
45
|
+
'--base-spacing': spacing.getSpacing(),
|
|
46
|
+
'--neutral-purewhite': colors.getColor('neutral-purewhite'),
|
|
47
|
+
'--neutral-lighter': colors.getColor('neutral-lighter'),
|
|
48
|
+
'--neutral-base': colors.getColor('neutral-base'),
|
|
49
|
+
'--font-size': fonts.getSize(),
|
|
50
|
+
'--font-color': fonts.getColor(),
|
|
51
|
+
'--font-family': fonts.getFamily(),
|
|
52
|
+
'--font-weight-regular': weights.regular,
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
componentWillLoad() {
|
|
56
|
+
this.updateDateSettings();
|
|
45
57
|
}
|
|
46
58
|
/**
|
|
47
59
|
* Callback for form association
|
|
@@ -49,33 +61,21 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
|
|
|
49
61
|
formAssociatedCallback(form) {
|
|
50
62
|
form.ariaLabel = this.label;
|
|
51
63
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
* either for a date range ('dd/mm/yyyy - dd/mm/yyyy') or a single date ('dd/mm/yyyy')
|
|
57
|
-
*/
|
|
58
|
-
setPlaceholder() {
|
|
59
|
-
if (this.placeholder) {
|
|
60
|
-
return this.placeholder;
|
|
64
|
+
updateDateSettings() {
|
|
65
|
+
const newSettings = this.getDateSettings(this.enableRangeDates);
|
|
66
|
+
if (this.shouldUpdateDateSettings(newSettings)) {
|
|
67
|
+
this.dateSettings = newSettings;
|
|
61
68
|
}
|
|
62
|
-
return this.enableRangeDates ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa';
|
|
63
69
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
return this.enableRangeDates ? 'dateRange' : 'date';
|
|
70
|
+
getDateSettings(isRange) {
|
|
71
|
+
return {
|
|
72
|
+
placeholder: this.placeholder || (isRange ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa'),
|
|
73
|
+
mask: isRange ? 'dateRange' : 'date',
|
|
74
|
+
mode: isRange ? 'range' : 'single',
|
|
75
|
+
};
|
|
71
76
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
*
|
|
75
|
-
* @returns {'range' | 'single'}
|
|
76
|
-
*/
|
|
77
|
-
setMode() {
|
|
78
|
-
return this.enableRangeDates ? 'range' : 'single';
|
|
77
|
+
shouldUpdateDateSettings(newSettings) {
|
|
78
|
+
return this.dateSettings.placeholder !== newSettings.placeholder || this.dateSettings.mask !== newSettings.mask || this.dateSettings.mode !== newSettings.mode;
|
|
79
79
|
}
|
|
80
80
|
handleClick(ev) {
|
|
81
81
|
if (this.el.contains(ev.target)) {
|
|
@@ -104,8 +104,7 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
|
|
|
104
104
|
this.dateChange.emit(this.value);
|
|
105
105
|
}
|
|
106
106
|
else {
|
|
107
|
-
this.
|
|
108
|
-
this.dates = [];
|
|
107
|
+
this.resetDates();
|
|
109
108
|
}
|
|
110
109
|
}
|
|
111
110
|
else if (simpleDateRegex.test(inputValue)) {
|
|
@@ -118,8 +117,7 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
|
|
|
118
117
|
this.dateChange.emit(this.value);
|
|
119
118
|
}
|
|
120
119
|
else {
|
|
121
|
-
this.
|
|
122
|
-
this.dates = [];
|
|
120
|
+
this.resetDates();
|
|
123
121
|
}
|
|
124
122
|
}
|
|
125
123
|
else {
|
|
@@ -132,6 +130,7 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
|
|
|
132
130
|
this.status = 'default';
|
|
133
131
|
this.value = '';
|
|
134
132
|
this.dateChange.emit(this.value);
|
|
133
|
+
this.statusInputChange.emit(this.status);
|
|
135
134
|
}
|
|
136
135
|
}
|
|
137
136
|
isDateValid(date) {
|
|
@@ -153,9 +152,14 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
|
|
|
153
152
|
const year = date.getFullYear();
|
|
154
153
|
return `${day}/${month}/${year}`;
|
|
155
154
|
}
|
|
155
|
+
resetDates() {
|
|
156
|
+
this.status = 'error';
|
|
157
|
+
this.dates = [];
|
|
158
|
+
this.statusInputChange.emit(this.status);
|
|
159
|
+
}
|
|
156
160
|
renderCalendarOrHelperText() {
|
|
157
161
|
if (this.isCalendarVisible) {
|
|
158
|
-
return (h("div", { class: "calendar" }, h("cura-calendar", { customDates: this.dates, mode: this.
|
|
162
|
+
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 => {
|
|
159
163
|
const days = e.detail.days;
|
|
160
164
|
if (days.length === 1) {
|
|
161
165
|
this.value = this.parseDateToString(days[0]);
|
|
@@ -174,39 +178,32 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
|
|
|
174
178
|
}
|
|
175
179
|
}
|
|
176
180
|
render() {
|
|
177
|
-
return (h(Host, { key: '
|
|
181
|
+
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()))));
|
|
178
182
|
}
|
|
179
183
|
static get formAssociated() { return true; }
|
|
180
184
|
get el() { return this; }
|
|
181
185
|
static get watchers() { return {
|
|
182
|
-
"enableRangeDates": ["
|
|
183
|
-
"disableFutureDates": ["isDateValid", "renderCalendarOrHelperText"],
|
|
184
|
-
"disablePassDates": ["isDateValid"],
|
|
185
|
-
"dates": ["renderCalendarOrHelperText"],
|
|
186
|
-
"isCalendarVisible": ["renderCalendarOrHelperText"]
|
|
186
|
+
"enableRangeDates": ["updateDateSettings"]
|
|
187
187
|
}; }
|
|
188
188
|
static get style() { return CuraInputDateStyle0; }
|
|
189
189
|
}, [65, "cura-input-date", {
|
|
190
190
|
"label": [513],
|
|
191
191
|
"status": [1537],
|
|
192
|
-
"size": [
|
|
192
|
+
"size": [513],
|
|
193
193
|
"name": [513],
|
|
194
|
-
"helperText": [
|
|
195
|
-
"enableRangeDates": [
|
|
196
|
-
"disableFutureDates": [
|
|
197
|
-
"disablePassDates": [
|
|
198
|
-
"iconName": [
|
|
194
|
+
"helperText": [513, "helper-text"],
|
|
195
|
+
"enableRangeDates": [516, "enable-range-dates"],
|
|
196
|
+
"disableFutureDates": [516, "disable-future-dates"],
|
|
197
|
+
"disablePassDates": [516, "disable-pass-dates"],
|
|
198
|
+
"iconName": [513, "icon-name"],
|
|
199
199
|
"placeholder": [513],
|
|
200
200
|
"styles": [32],
|
|
201
201
|
"isCalendarVisible": [32],
|
|
202
202
|
"dates": [32],
|
|
203
|
-
"value": [32]
|
|
203
|
+
"value": [32],
|
|
204
|
+
"dateSettings": [32]
|
|
204
205
|
}, [[8, "click", "handleClick"]], {
|
|
205
|
-
"enableRangeDates": ["
|
|
206
|
-
"disableFutureDates": ["isDateValid", "renderCalendarOrHelperText"],
|
|
207
|
-
"disablePassDates": ["isDateValid"],
|
|
208
|
-
"dates": ["renderCalendarOrHelperText"],
|
|
209
|
-
"isCalendarVisible": ["renderCalendarOrHelperText"]
|
|
206
|
+
"enableRangeDates": ["updateDateSettings"]
|
|
210
207
|
}]);
|
|
211
208
|
function defineCustomElement$1() {
|
|
212
209
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-input-date.js","mappings":"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","names":["CuraInputDate"],"sources":["src/components/forms/cura-input-date/cura-input-date.scss?tag=cura-input-date&encapsulation=shadow","src/components/forms/cura-input-date/cura-input-date.tsx"],"sourcesContent":["@import '../../../../src/scss/mixins/shadows.scss';\n@import '../../../../src/scss/mixins/spacing.scss';\n\n:host {\n display: block;\n}\n\n.container{\n display: flex;\n flex-direction: column;\n\n .calendar{\n padding: #{$spacing-none} #{$spacing-xxxs};\n margin-top: -8px;\n border-radius: 0px 0px 4px 4px;\n border-top: 0px;\n border-right: 2px solid #D4D4D4;\n border-bottom:2px solid #D4D4D4;\n border-left: 2px solid #D4D4D4;\n @include shadow-level3(--neutral-black-shadow);\n }\n}\n","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"],"version":3}
|
|
1
|
+
{"file":"cura-input-date.js","mappings":"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","names":["CuraInputDate"],"sources":["src/components/forms/cura-input-date/cura-input-date.scss?tag=cura-input-date&encapsulation=shadow","src/components/forms/cura-input-date/cura-input-date.tsx"],"sourcesContent":["@import '../../../../src/scss/mixins/shadows.scss';\n@import '../../../../src/scss/mixins/spacing.scss';\n\n:host {\n display: block;\n}\n\n.container{\n display: flex;\n flex-direction: column;\n position: relative;\n\n .calendar{\n padding: #{$spacing-none} #{$spacing-xxxs};\n margin-top: -8px;\n border-radius: 0px 0px 4px 4px;\n border-top: 0px;\n border-right: 2px solid #D4D4D4;\n border-bottom:2px solid #D4D4D4;\n border-left: 2px solid #D4D4D4;\n @include shadow-level3(--neutral-black-shadow);\n position: absolute;\n top: 100%; \n z-index: 10; \n display: none; \n opacity: 0;\n pointer-events: none; \n }\n\n .calendar.visible {\n box-sizing: border-box;\n display: block;\n opacity: 1;\n pointer-events: auto; \n width: 100%;\n background-color: #fff;\n }\n}\n","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"],"version":3}
|
|
@@ -53,7 +53,7 @@ const CuraLabel = /*@__PURE__*/ proxyCustomElement(class CuraLabel extends HTMLE
|
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: '8d691e1d4c38c30d1e50bc981b9e6de89b3506e0', style: this.hostCSSProperties() }, h("p", { key: 'b68944f4fe1e65aecf6a627f3bba547418bc125b', style: this.styles, class: this.getClasses() }, h("slot", { key: 'f8ac467674d94fe94adc075743b12111d1e32469' }))));
|
|
57
57
|
}
|
|
58
58
|
get host() { return this; }
|
|
59
59
|
static get watchers() { return {
|
|
@@ -23,7 +23,7 @@ const CuraLoaderBar = /*@__PURE__*/ proxyCustomElement(class CuraLoaderBar exten
|
|
|
23
23
|
this.setProgress();
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
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" }))));
|
|
27
27
|
}
|
|
28
28
|
setColor() {
|
|
29
29
|
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) });
|
|
@@ -26,7 +26,7 @@ const CuraLoaderCircle = /*@__PURE__*/ proxyCustomElement(class CuraLoaderCircle
|
|
|
26
26
|
};
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
|
-
return (h(Host, { key: '
|
|
29
|
+
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" }))))));
|
|
30
30
|
}
|
|
31
31
|
static get style() { return CuraLoaderCircleStyle0; }
|
|
32
32
|
}, [1, "cura-loader-circle", {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface CuraModal extends Components.CuraModal, HTMLElement {}
|
|
4
|
+
export const CuraModal: {
|
|
5
|
+
prototype: CuraModal;
|
|
6
|
+
new (): CuraModal;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
import { d as defineCustomElement$3 } from './cura-icon2.js';
|
|
3
|
+
import { d as defineCustomElement$2 } from './cura-paragraph2.js';
|
|
4
|
+
|
|
5
|
+
const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:0px;bottom:0px;z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:100}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:90;animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);width:700px;max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:100;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
|
|
6
|
+
const CuraModalStyle0 = curaModalCss;
|
|
7
|
+
|
|
8
|
+
const CuraModal$1 = /*@__PURE__*/ proxyCustomElement(class CuraModal extends HTMLElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
this.__registerHost();
|
|
12
|
+
this.__attachShadow();
|
|
13
|
+
this.modalClose = createEvent(this, "modalClose", 7);
|
|
14
|
+
this.handleClose = () => {
|
|
15
|
+
this.modalClose.emit();
|
|
16
|
+
this.open = false;
|
|
17
|
+
};
|
|
18
|
+
this.open = false;
|
|
19
|
+
this.background = 'light';
|
|
20
|
+
this.topOffset = 0;
|
|
21
|
+
this.styles = {};
|
|
22
|
+
}
|
|
23
|
+
setColors() {
|
|
24
|
+
const backgroundTheme = {
|
|
25
|
+
dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),
|
|
26
|
+
light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),
|
|
27
|
+
};
|
|
28
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': backgroundTheme[this.background] });
|
|
29
|
+
}
|
|
30
|
+
setOffsetTop() {
|
|
31
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--offset-top': `${this.topOffset}px` });
|
|
32
|
+
}
|
|
33
|
+
connectedCallback() {
|
|
34
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'), '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
|
|
35
|
+
this.setColors();
|
|
36
|
+
this.setOffsetTop();
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
return (h(Host, { key: '002525d3ad03f3271b11b0dacfd748ccfbfbaf1c', role: "dialog", "aria-modal": "true" }, h("div", { key: 'a684163919124acc33469b38cffeb6826dd2dd8d', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: 'bff07303351e5f7a75870b9c0f2b4a16736110bc', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: '4e8ac2fd00c10abf24060c644bbdcd6a5275bacb', class: "wrapper" }, h("button", { key: '6a0ab79a39181216882559f115107edf1c20a2c7', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: '3be3e5ee04fc5caa8786efaac0e03c946d0bdd14', name: "close", color: "error-dark", size: "small" })), h("slot", { key: '90fbd8951a449d41e2409ba10445a61e296c45e5' }), h("button", { key: '3075523254d90f7f7f4ca75f28a5724b2402f7d5', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '9bfd171b87d0f1ff625b17f043ff90fa9dbad6e7', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: 'c17191a5570c08400cfb1409fa1ebf3f0e03a270', color: "error-dark", size: "small", marginBlock: "0" }, "Fechar"))))));
|
|
40
|
+
}
|
|
41
|
+
static get watchers() { return {
|
|
42
|
+
"background": ["setColors"],
|
|
43
|
+
"topOffset": ["setOffsetTop"]
|
|
44
|
+
}; }
|
|
45
|
+
static get style() { return CuraModalStyle0; }
|
|
46
|
+
}, [1, "cura-modal", {
|
|
47
|
+
"open": [1540],
|
|
48
|
+
"background": [1],
|
|
49
|
+
"topOffset": [2, "top-offset"],
|
|
50
|
+
"styles": [32]
|
|
51
|
+
}, undefined, {
|
|
52
|
+
"background": ["setColors"],
|
|
53
|
+
"topOffset": ["setOffsetTop"]
|
|
54
|
+
}]);
|
|
55
|
+
function defineCustomElement$1() {
|
|
56
|
+
if (typeof customElements === "undefined") {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const components = ["cura-modal", "cura-icon", "cura-paragraph"];
|
|
60
|
+
components.forEach(tagName => { switch (tagName) {
|
|
61
|
+
case "cura-modal":
|
|
62
|
+
if (!customElements.get(tagName)) {
|
|
63
|
+
customElements.define(tagName, CuraModal$1);
|
|
64
|
+
}
|
|
65
|
+
break;
|
|
66
|
+
case "cura-icon":
|
|
67
|
+
if (!customElements.get(tagName)) {
|
|
68
|
+
defineCustomElement$3();
|
|
69
|
+
}
|
|
70
|
+
break;
|
|
71
|
+
case "cura-paragraph":
|
|
72
|
+
if (!customElements.get(tagName)) {
|
|
73
|
+
defineCustomElement$2();
|
|
74
|
+
}
|
|
75
|
+
break;
|
|
76
|
+
} });
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
const CuraModal = CuraModal$1;
|
|
80
|
+
const defineCustomElement = defineCustomElement$1;
|
|
81
|
+
|
|
82
|
+
export { CuraModal, defineCustomElement };
|
|
83
|
+
|
|
84
|
+
//# sourceMappingURL=cura-modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"cura-modal.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,k6DAAk6D,CAAC;AACx7D,wBAAe,YAAY;;MCMdA,WAAS;;;;;;QAuDZ,gBAAW,GAAG;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;oBArDuD,KAAK;0BAKtB,OAAO;yBAKlB,CAAC;sBAMZ,EAAE;;IAGpB,SAAS;QACP,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;YAChE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,GACvD,CAAC;KACH;IAGD,YAAY;QACV,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,GACtC,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM,IACnC,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,sBAAsB,GAAG,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IACpF,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,qBAAqB,GAAG,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAQ,EACnG,4DAAK,KAAK,EAAC,SAAS,IAElB,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACrD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAa,CAC7D,EACT,8DAAa,EAEb,+DAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAa,EACjE,uEAAgB,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,aAE9C,CACV,CACL,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraModal"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n display: block;\n}\n\n.modal {\n position: fixed;\n height: 100%;\n width: 100%;\n top: #{$spacing-none};\n bottom: #{$spacing-none};\n z-index: -1;\n margin-top: var(--offset-top);\n\n &.open {\n z-index: 100;\n\n .backdrop,\n .wrapper {\n opacity: 1;\n visibility: visible;\n animation: fadeIn 0.3s ease-out;\n }\n }\n}\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n background-color: var(--background-color);\n z-index: 90;\n animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n position: fixed;\n background-color: var(--neutral-white);\n border: 2px solid var(--neutral-light);\n border-radius: #{$spacing-xxxs};\n width: 700px;\n max-width: 600px;\n min-width: 200px;\n padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n z-index: 100;\n\n @include shadow-level4();\n\n transform: scale(0.95);\n transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n ::slotted(*) {\n max-height: 80vh;\n overflow: auto;\n padding-right: #{$spacing-xs};\n }\n}\n\n.modal.open .wrapper {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n.close {\n justify-self: flex-end;\n padding-top: #{$spacing-xxs};\n background: none;\n border: none;\n cursor: pointer;\n\n &.mobile {\n display: none;\n }\n\n &.desktop {\n display: flex;\n }\n}\n\n@include mobile-only() {\n .wrapper {\n position: fixed;\n bottom: #{$spacing-none};\n width: 80%;\n padding-top: #{$spacing-xxs};\n padding-bottom: #{$spacing-none};\n border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n border-bottom: none;\n }\n\n .close {\n align-items: center;\n border-top: 1px dashed var(--neutral-light);\n margin-top: #{$spacing-xxs};\n padding: #{$spacing-xxs} #{$spacing-none};\n justify-content: center;\n width: 100%;\n\n &.mobile {\n display: flex;\n gap: #{$spacing-mini};\n }\n\n &.desktop {\n display: none;\n }\n }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-modal',\n styleUrl: 'cura-modal.scss',\n shadow: true,\n})\nexport class CuraModal {\n /**\n * Property open to control modal visibility.\n * Default: false\n */\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /**\n * Property background to control modal backdrop color.\n * Default: light\n */\n @Prop() background?: 'dark' | 'light' = 'light';\n /**\n * Property offsetTop to control modal top position.\n * Default: 0px\n */\n @Prop() topOffset?: number = 0;\n /**\n * Event close to handle modal close.\n */\n @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n @State() styles = {};\n\n @Watch('background')\n setColors() {\n const backgroundTheme = {\n dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n };\n\n this.styles = {\n ...this.styles,\n '--background-color': backgroundTheme[this.background],\n };\n }\n\n @Watch('topOffset')\n setOffsetTop() {\n this.styles = {\n ...this.styles,\n '--offset-top': `${this.topOffset}px`,\n };\n }\n\n connectedCallback() {\n this.styles = {\n ...this.styles,\n '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n };\n this.setColors();\n this.setOffsetTop();\n }\n\n private handleClose = () => {\n this.modalClose.emit();\n this.open = false;\n };\n\n render() {\n return (\n <Host role=\"dialog\" aria-modal=\"true\">\n <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n <div class=\"wrapper\">\n {/* Desktop button */}\n <button class=\"close desktop\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n </button>\n <slot></slot>\n {/* Mobile button */}\n <button class=\"close mobile\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n Fechar\n </cura-paragraph>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -21,7 +21,7 @@ const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class CuraPageTempla
|
|
|
21
21
|
return classes;
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: 'd79c3d22ccbd93d8a56c700e3016507d18720464' }, h("div", { key: 'a717f44d6b5df9f00ffe61fff816721705748040', style: this.styles, class: "grid-template" }, h("div", { key: '7a3d585d4213799b32e2043327442b21833fd4fc', id: "sub-header" }, h("slot", { key: 'dbab9738fe221a426642e5d63e88130e1f351591', name: 'sub-header' })), h("div", { key: '39f2878cac260b70b8e53b57b6b9b5b07f658251', id: "header" }, h("slot", { key: '511af91f30dfcfde3ced7bce4c341a2802c88db8', name: 'header' })), h("div", { key: 'ed8d1b1e0d5ffca939c525ee8320da7f2afde95d', id: "pre-content" }, h("slot", { key: 'dd8c722ddd113f49965a6397625980aace8b78e8', name: 'pre-content' })), h("div", { key: '64a5767bbc858f18e44a3339b6bb567b3e5a8c0d', id: "content-container", class: this.getClasses() }, h("div", { key: '919e9d54e10f1469264f193545e80b680b63c801', id: "sidebar-left" }, h("slot", { key: '8ddeb7358bd9f6d0e08b1e3f323219b8980eec9c', name: 'sidebar-left' })), h("div", { key: '48e3860c1674658c386124c80a35b85bdb085e3e', id: "content" }, h("slot", { key: '8bc21a187897a5e9cd2e922285364a02425cefa6', name: "content" }), h("slot", { key: '587d13eed3fedcbf9e33dc4084cb2554ba70125d' })), h("div", { key: '7f620fd04b4cf4a051954dca8a95293c2a7c1d9a', id: "sidebar-right" }, h("slot", { key: '3499275e67a00fcaab4f044535dbeb19c1040569', name: 'sidebar-right' }))), h("div", { key: '59b9e4a5fe541f2ad6dac53a40588482b33e0cad', id: "post-body" }, h("slot", { key: '7493b3b330cabf263990a149c1b526501260de95', name: 'post-body' })), h("div", { key: '4a35c95f7ad04f04bb8673babc06d243e1b8f931', id: "footer" }, h("slot", { key: 'f69ffbd9c9cabe72e1ee4f147f7a1448311a7f0c', name: 'footer' })), h("div", { key: 'd53b60b2d9170797e7dc12b3179c24b7f76ac41d', id: "sub-footer" }, h("slot", { key: '75dcebb2f223ed1d0b1181ea3773fbb6bf096e33', name: 'sub-footer' })))));
|
|
25
25
|
}
|
|
26
26
|
get host() { return this; }
|
|
27
27
|
static get style() { return CuraPageTemplateStyle0; }
|
|
@@ -52,7 +52,7 @@ const CuraParagraph = /*@__PURE__*/ proxyCustomElement(class CuraParagraph exten
|
|
|
52
52
|
};
|
|
53
53
|
}
|
|
54
54
|
render() {
|
|
55
|
-
return (h(Host, { key: '
|
|
55
|
+
return (h(Host, { key: 'fc146c5173887dd80bb1798d58b7fbe29775e2de', style: this.hostCSSProperties() }, h("p", { key: '0defc510c08182261e22a4ab47a24d939199db24', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'e70c68a1da0596dc8d2273f5679c9193a354e313' }))));
|
|
56
56
|
}
|
|
57
57
|
get host() { return this; }
|
|
58
58
|
static get watchers() { return {
|
|
@@ -131,7 +131,7 @@ const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTM
|
|
|
131
131
|
return statusColors[this.status][type];
|
|
132
132
|
}
|
|
133
133
|
render() {
|
|
134
|
-
return (h(Host, { key: '
|
|
134
|
+
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 }))));
|
|
135
135
|
}
|
|
136
136
|
static get formAssociated() { return true; }
|
|
137
137
|
get host() { return this; }
|
|
@@ -42,7 +42,7 @@ const CuraSelectOption = /*@__PURE__*/ proxyCustomElement(class CuraSelectOption
|
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (h(Host, { key: '
|
|
45
|
+
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" }))));
|
|
46
46
|
}
|
|
47
47
|
get host() { return this; }
|
|
48
48
|
static get watchers() { return {
|
|
@@ -276,13 +276,13 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
|
|
|
276
276
|
return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
|
|
277
277
|
}
|
|
278
278
|
render() {
|
|
279
|
-
return (h(Host, { key: '
|
|
279
|
+
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: {
|
|
280
280
|
'cura-input-field': true,
|
|
281
281
|
'open': this.isOpen
|
|
282
|
-
} }, this.renderIcon(), h("input", { key: '
|
|
282
|
+
} }, 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: {
|
|
283
283
|
'menu': true,
|
|
284
284
|
'open': this.isOpen
|
|
285
|
-
} }, h("slot", { key: '
|
|
285
|
+
} }, h("slot", { key: '1330a45037f002b5fd20a356f1fe5b982999e512', name: 'option' }))))));
|
|
286
286
|
}
|
|
287
287
|
static get formAssociated() { return true; }
|
|
288
288
|
get host() { return this; }
|
|
@@ -102,7 +102,7 @@ const CuraSwitch$1 = /*@__PURE__*/ proxyCustomElement(class CuraSwitch extends H
|
|
|
102
102
|
return classes;
|
|
103
103
|
}
|
|
104
104
|
render() {
|
|
105
|
-
return (h(Host, { key: '
|
|
105
|
+
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 }))))));
|
|
106
106
|
}
|
|
107
107
|
static get formAssociated() { return true; }
|
|
108
108
|
static get watchers() { return {
|
|
@@ -33,7 +33,7 @@ const CuraToast$1 = /*@__PURE__*/ proxyCustomElement(class CuraToast extends HTM
|
|
|
33
33
|
this.setStyle();
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '467952f8386d659d44090163f3e14c0231dfcafd' }, h("div", { key: 'f510e12d309c79842d30cc24409b61433a6fe58e', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'acd2a9d52ad91565c7bd36bc205753bdfe6e3e59', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'dced39ca17901673360dacbf27764b1387eff20d', class: "content" }, h("cura-heading", { key: '6ac55c8ae757f654c808b72b4f44b54dc822107c', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'e8e83b891e0b7e02901999f1622a183afc94c28e', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '080891767b1b552520d7d3ed59002a9478eb0288' })), h("slot", { key: '0a43f99bbaf2e4cdd2fd7dc1d5a0431602b76361', name: "actions" })), this.closeButton && h("cura-icon", { key: '1ec27e6d6d44b82ed26a59cb6ba967858b4c8809', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '6457bb003e4706d3f60b85aa3faa3e0b6b276869', color: `${this.type}-base`, progress: this.progress }))));
|
|
37
37
|
}
|
|
38
38
|
componentDidLoad() {
|
|
39
39
|
this.openContainer();
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface CuraTooltip extends Components.CuraTooltip, HTMLElement {}
|
|
4
|
+
export const CuraTooltip: {
|
|
5
|
+
prototype: CuraTooltip;
|
|
6
|
+
new (): CuraTooltip;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|