@rededor/cura 0.5.2 → 0.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/icons/iconset-default-list.ts +1 -1
- package/dist/assets/icons/iconset-default-tmp.svg +4 -0
- package/dist/assets/icons/iconset-default.svg +1 -1
- package/dist/cjs/cura-accordion_8.cjs.entry.js +10 -17
- package/dist/cjs/cura-accordion_8.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-alert.cjs.entry.js +67 -0
- package/dist/cjs/cura-alert.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-outline.cjs.entry.js +1 -1
- package/dist/cjs/cura-button-select.cjs.entry.js +97 -0
- package/dist/cjs/cura-button-select.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-transparent.cjs.entry.js +1 -1
- package/dist/cjs/cura-checkbox.cjs.entry.js +145 -0
- package/dist/cjs/cura-checkbox.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-display.cjs.entry.js +1 -1
- package/dist/cjs/cura-forms.definitions-11be2ebd.js +20 -0
- package/dist/cjs/cura-forms.definitions-11be2ebd.js.map +1 -0
- package/dist/cjs/cura-icon.definitions-b73b0178.js +21 -0
- package/dist/cjs/cura-icon.definitions-b73b0178.js.map +1 -0
- package/dist/cjs/cura-icons-view.cjs.entry.js +13 -6
- package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-input-text.cjs.entry.js +3907 -0
- package/dist/cjs/cura-input-text.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-label.cjs.entry.js +1 -1
- package/dist/cjs/cura-radio.cjs.entry.js +115 -0
- package/dist/cjs/cura-radio.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-switch.cjs.entry.js +90 -0
- package/dist/cjs/cura-switch.cjs.entry.js.map +1 -0
- package/dist/cjs/cura.cjs.js +2 -2
- package/dist/cjs/{index-404d93e9.js → index-7616f620.js} +35 -1
- package/dist/cjs/index-7616f620.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/assets/icons/iconset-default-list.js +1 -1
- package/dist/collection/assets/icons/iconset-default-list.js.map +1 -1
- package/dist/collection/assets/icons/iconset-default-tmp.svg +4 -0
- package/dist/collection/assets/icons/iconset-default.svg +1 -1
- package/dist/collection/assets-raw/icons/default/swap.svg +3 -0
- package/dist/collection/collection-manifest.json +6 -0
- package/dist/collection/components/buttons/cura-button/cura-button.css +4 -0
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js +2 -2
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.css +4 -0
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js +2 -2
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.css +139 -0
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.js +263 -0
- package/dist/collection/components/buttons/cura-button-select/cura-button-select.js.map +1 -0
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.css +4 -0
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js +2 -2
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js.map +1 -1
- package/dist/collection/components/cura-alert/cura-alert.css +30 -0
- package/dist/collection/components/cura-alert/cura-alert.js +167 -0
- package/dist/collection/components/cura-alert/cura-alert.js.map +1 -0
- package/dist/collection/components/cura-alert/cura-alert.stories.js +95 -0
- package/dist/collection/components/cura-alert/cura-alert.stories.js.map +1 -0
- package/dist/collection/components/cura-icon/cura-icon.definitions.js +15 -0
- package/dist/collection/components/cura-icon/cura-icon.definitions.js.map +1 -0
- package/dist/collection/components/cura-icon/cura-icon.js +9 -16
- package/dist/collection/components/cura-icon/cura-icon.js.map +1 -1
- package/dist/collection/components/cura-icon/cura-icon.stories.js +7 -6
- package/dist/collection/components/cura-icon/cura-icon.stories.js.map +1 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.css +16 -17
- package/dist/collection/components/cura-icons-view/cura-icons-view.js +10 -3
- package/dist/collection/components/cura-icons-view/cura-icons-view.js.map +1 -1
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.css +163 -0
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +432 -0
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js.map +1 -0
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js +196 -0
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js.map +1 -0
- package/dist/collection/components/forms/cura-forms.definitions.js +15 -0
- package/dist/collection/components/forms/cura-forms.definitions.js.map +1 -0
- package/dist/collection/components/forms/cura-input-text/cura-input-text.css +326 -0
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js +655 -0
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js.map +1 -0
- package/dist/collection/components/forms/cura-input-text/cura-input-text.stories.js +224 -0
- package/dist/collection/components/forms/cura-input-text/cura-input-text.stories.js.map +1 -0
- package/dist/collection/components/forms/cura-input-text/mask-presets/input-mask-presets.js +46 -0
- package/dist/collection/components/forms/cura-input-text/mask-presets/input-mask-presets.js.map +1 -0
- package/dist/collection/components/forms/cura-radio/cura-radio.css +146 -0
- package/dist/collection/components/forms/cura-radio/cura-radio.js +366 -0
- package/dist/collection/components/forms/cura-radio/cura-radio.js.map +1 -0
- package/dist/collection/components/forms/cura-radio/cura-radio.stories.js +175 -0
- package/dist/collection/components/forms/cura-radio/cura-radio.stories.js.map +1 -0
- package/dist/collection/components/forms/cura-switch/cura-switch.css +100 -0
- package/dist/collection/components/forms/cura-switch/cura-switch.js +267 -0
- package/dist/collection/components/forms/cura-switch/cura-switch.js.map +1 -0
- package/dist/collection/components/forms/cura-switch/cura-switch.stories.js +137 -0
- package/dist/collection/components/forms/cura-switch/cura-switch.stories.js.map +1 -0
- package/dist/components/cura-alert.d.ts +11 -0
- package/dist/components/cura-alert.js +105 -0
- package/dist/components/cura-alert.js.map +1 -0
- package/dist/components/cura-button-select.d.ts +11 -0
- package/dist/components/cura-button-select.js +127 -0
- package/dist/components/cura-button-select.js.map +1 -0
- package/dist/components/cura-checkbox.d.ts +11 -0
- package/dist/components/cura-checkbox.js +193 -0
- package/dist/components/cura-checkbox.js.map +1 -0
- package/dist/components/cura-forms.definitions.js +18 -0
- package/dist/components/cura-forms.definitions.js.map +1 -0
- package/dist/components/cura-heading.js +1 -100
- package/dist/components/cura-heading.js.map +1 -1
- package/dist/components/cura-heading2.js +104 -0
- package/dist/components/cura-heading2.js.map +1 -0
- package/dist/components/cura-icon2.js +24 -17
- package/dist/components/cura-icon2.js.map +1 -1
- package/dist/components/cura-icons-view.js +31 -7
- package/dist/components/cura-icons-view.js.map +1 -1
- package/dist/components/cura-input-text.d.ts +11 -0
- package/dist/components/cura-input-text.js +3961 -0
- package/dist/components/cura-input-text.js.map +1 -0
- package/dist/components/cura-label.js +1 -84
- package/dist/components/cura-label.js.map +1 -1
- package/dist/components/cura-label2.js +88 -0
- package/dist/components/cura-label2.js.map +1 -0
- package/dist/components/cura-paragraph.js +1 -82
- package/dist/components/cura-paragraph.js.map +1 -1
- package/dist/components/cura-paragraph2.js +86 -0
- package/dist/components/cura-paragraph2.js.map +1 -0
- package/dist/components/cura-radio.d.ts +11 -0
- package/dist/components/cura-radio.js +155 -0
- package/dist/components/cura-radio.js.map +1 -0
- package/dist/components/cura-switch.d.ts +11 -0
- package/dist/components/cura-switch.js +120 -0
- package/dist/components/cura-switch.js.map +1 -0
- package/dist/components/index.js +12 -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/cura.js +1 -1
- package/dist/cura/p-1228e771.entry.js +2 -0
- package/dist/cura/p-1228e771.entry.js.map +1 -0
- package/dist/cura/p-2d42ccf4.entry.js +2 -0
- package/dist/cura/p-2d42ccf4.entry.js.map +1 -0
- package/dist/cura/p-3688570d.js +2 -0
- package/dist/cura/p-3688570d.js.map +1 -0
- package/dist/cura/p-36a83bc7.system.js +3 -0
- package/dist/cura/p-36a83bc7.system.js.map +1 -0
- package/dist/cura/p-3f3355f3.system.entry.js +2 -0
- package/dist/cura/p-3f3355f3.system.entry.js.map +1 -0
- package/dist/cura/p-3f5de5e2.entry.js +2 -0
- package/dist/cura/p-3f5de5e2.entry.js.map +1 -0
- package/dist/cura/p-4db87e8d.system.entry.js +2 -0
- package/dist/cura/p-4db87e8d.system.entry.js.map +1 -0
- package/dist/cura/p-51e00a16.entry.js +2 -0
- package/dist/cura/p-51e00a16.entry.js.map +1 -0
- package/dist/cura/{p-0c79c54e.entry.js → p-72a9ed55.entry.js} +2 -2
- package/dist/cura/{p-7c8f3c77.system.entry.js → p-75b2e4d1.system.entry.js} +2 -2
- package/dist/cura/{p-03047b3e.entry.js → p-880917c1.entry.js} +2 -2
- package/dist/cura/p-8d959fb2.entry.js +2 -0
- package/dist/cura/p-8d959fb2.entry.js.map +1 -0
- package/dist/cura/{p-d47b9cfe.system.entry.js → p-9471c93e.system.entry.js} +2 -2
- package/dist/cura/p-98014544.entry.js +2 -0
- package/dist/cura/p-98014544.entry.js.map +1 -0
- package/dist/cura/{p-223924fb.system.entry.js → p-98352c92.system.entry.js} +2 -2
- package/dist/cura/p-a32889a4.system.js +2 -0
- package/dist/cura/p-a32889a4.system.js.map +1 -0
- package/dist/cura/p-ab8c9a8f.system.entry.js +2 -0
- package/dist/cura/p-ab8c9a8f.system.entry.js.map +1 -0
- package/dist/cura/{p-91b0f78e.entry.js → p-ad194144.entry.js} +2 -2
- package/dist/cura/p-b0e13882.system.entry.js +2 -0
- package/dist/cura/p-b0e13882.system.entry.js.map +1 -0
- package/dist/cura/p-ba66d7be.js +3 -0
- package/dist/cura/{p-c0c00396.system.js.map → p-ba66d7be.js.map} +1 -1
- package/dist/cura/p-bb3f9d05.entry.js +2 -0
- package/dist/cura/p-bb3f9d05.entry.js.map +1 -0
- package/dist/cura/p-c791725b.js +2 -0
- package/dist/cura/p-c791725b.js.map +1 -0
- package/dist/cura/p-cb4e2a0c.system.entry.js +2 -0
- package/dist/cura/p-cb4e2a0c.system.entry.js.map +1 -0
- package/dist/cura/p-d3f9c888.system.js +2 -0
- package/dist/cura/p-d3f9c888.system.js.map +1 -0
- package/dist/cura/{p-ca054b07.system.entry.js → p-e5e259fd.system.entry.js} +2 -2
- package/dist/cura/{p-49813052.entry.js → p-edeffbfc.entry.js} +2 -2
- package/dist/cura/p-f51705c2.system.entry.js +2 -0
- package/dist/cura/p-f51705c2.system.entry.js.map +1 -0
- package/dist/cura/p-f89f2ecc.system.entry.js +2 -0
- package/dist/cura/p-f89f2ecc.system.entry.js.map +1 -0
- package/dist/cura/p-fc4ba4ce.system.js +2 -0
- package/dist/cura/p-fc4ba4ce.system.js.map +1 -0
- package/dist/cura/p-fef52079.entry.js +2 -0
- package/dist/cura/p-fef52079.entry.js.map +1 -0
- package/dist/cura/p-ffd41520.system.entry.js +2 -0
- package/dist/cura/p-ffd41520.system.entry.js.map +1 -0
- package/dist/esm/cura-accordion_8.entry.js +10 -17
- package/dist/esm/cura-accordion_8.entry.js.map +1 -1
- package/dist/esm/cura-alert.entry.js +63 -0
- package/dist/esm/cura-alert.entry.js.map +1 -0
- package/dist/esm/cura-button-outline.entry.js +1 -1
- package/dist/esm/cura-button-select.entry.js +93 -0
- package/dist/esm/cura-button-select.entry.js.map +1 -0
- package/dist/esm/cura-button-transparent.entry.js +1 -1
- package/dist/esm/cura-checkbox.entry.js +141 -0
- package/dist/esm/cura-checkbox.entry.js.map +1 -0
- package/dist/esm/cura-display.entry.js +1 -1
- package/dist/esm/cura-forms.definitions-0f774253.js +18 -0
- package/dist/esm/cura-forms.definitions-0f774253.js.map +1 -0
- package/dist/esm/cura-icon.definitions-a63d1862.js +18 -0
- package/dist/esm/cura-icon.definitions-a63d1862.js.map +1 -0
- package/dist/esm/cura-icons-view.entry.js +13 -6
- package/dist/esm/cura-icons-view.entry.js.map +1 -1
- package/dist/esm/cura-input-text.entry.js +3903 -0
- package/dist/esm/cura-input-text.entry.js.map +1 -0
- package/dist/esm/cura-label.entry.js +1 -1
- package/dist/esm/cura-radio.entry.js +111 -0
- package/dist/esm/cura-radio.entry.js.map +1 -0
- package/dist/esm/cura-switch.entry.js +86 -0
- package/dist/esm/cura-switch.entry.js.map +1 -0
- package/dist/esm/cura.js +3 -3
- package/dist/esm/{index-d99da69e.js → index-81f1a268.js} +35 -2
- package/dist/{esm-es5/index-d99da69e.js.map → esm/index-81f1a268.js.map} +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm-es5/cura-accordion_8.entry.js +1 -1
- package/dist/esm-es5/cura-accordion_8.entry.js.map +1 -1
- package/dist/esm-es5/cura-alert.entry.js +2 -0
- package/dist/esm-es5/cura-alert.entry.js.map +1 -0
- package/dist/esm-es5/cura-button-outline.entry.js +1 -1
- package/dist/esm-es5/cura-button-select.entry.js +2 -0
- package/dist/esm-es5/cura-button-select.entry.js.map +1 -0
- package/dist/esm-es5/cura-button-transparent.entry.js +1 -1
- package/dist/esm-es5/cura-checkbox.entry.js +2 -0
- package/dist/esm-es5/cura-checkbox.entry.js.map +1 -0
- package/dist/esm-es5/cura-display.entry.js +1 -1
- package/dist/esm-es5/cura-forms.definitions-0f774253.js +2 -0
- package/dist/esm-es5/cura-forms.definitions-0f774253.js.map +1 -0
- package/dist/esm-es5/cura-icon.definitions-a63d1862.js +2 -0
- package/dist/esm-es5/cura-icon.definitions-a63d1862.js.map +1 -0
- package/dist/esm-es5/cura-icons-view.entry.js +1 -1
- package/dist/esm-es5/cura-icons-view.entry.js.map +1 -1
- package/dist/esm-es5/cura-input-text.entry.js +2 -0
- package/dist/esm-es5/cura-input-text.entry.js.map +1 -0
- package/dist/esm-es5/cura-label.entry.js +1 -1
- package/dist/esm-es5/cura-radio.entry.js +2 -0
- package/dist/esm-es5/cura-radio.entry.js.map +1 -0
- package/dist/esm-es5/cura-switch.entry.js +2 -0
- package/dist/esm-es5/cura-switch.entry.js.map +1 -0
- package/dist/esm-es5/cura.js +1 -1
- package/dist/esm-es5/cura.js.map +1 -1
- package/dist/esm-es5/index-81f1a268.js +3 -0
- package/dist/esm-es5/index-81f1a268.js.map +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/types/components/buttons/cura-button/cura-button.d.ts +1 -1
- package/dist/types/components/buttons/cura-button-select/cura-button-select.d.ts +51 -0
- package/dist/types/components/cura-alert/cura-alert.d.ts +16 -0
- package/dist/types/components/cura-alert/cura-alert.stories.d.ts +79 -0
- package/dist/types/components/cura-icon/cura-icon.d.ts +0 -42
- package/dist/types/components/cura-icon/cura-icon.definitions.d.ts +47 -0
- package/dist/types/components/cura-icons-view/cura-icons-view.d.ts +2 -1
- package/dist/types/components/forms/cura-checkbox/cura-checkbox.d.ts +100 -0
- package/dist/types/components/forms/cura-checkbox/cura-checkbox.stories.d.ts +199 -0
- package/dist/types/components/forms/cura-forms.definitions.d.ts +14 -0
- package/dist/types/components/forms/cura-input-text/cura-input-text.d.ts +138 -0
- package/dist/types/components/forms/cura-input-text/cura-input-text.stories.d.ts +224 -0
- package/dist/types/components/forms/cura-input-text/mask-presets/input-mask-presets.d.ts +5 -0
- package/dist/types/components/forms/cura-radio/cura-radio.d.ts +81 -0
- package/dist/types/components/forms/cura-radio/cura-radio.stories.d.ts +180 -0
- package/dist/types/components/forms/cura-switch/cura-switch.d.ts +62 -0
- package/dist/types/components/forms/cura-switch/cura-switch.stories.d.ts +135 -0
- package/dist/types/components.d.ts +602 -0
- package/package.json +5 -4
- package/dist/cjs/index-404d93e9.js.map +0 -1
- package/dist/cura/p-46d20db3.js +0 -3
- package/dist/cura/p-46d20db3.js.map +0 -1
- package/dist/cura/p-4bdbcdf0.system.entry.js +0 -2
- package/dist/cura/p-4bdbcdf0.system.entry.js.map +0 -1
- package/dist/cura/p-8b18b5f7.system.js +0 -2
- package/dist/cura/p-8b18b5f7.system.js.map +0 -1
- package/dist/cura/p-a0395f90.entry.js +0 -2
- package/dist/cura/p-a0395f90.entry.js.map +0 -1
- package/dist/cura/p-a7ef255f.entry.js +0 -2
- package/dist/cura/p-a7ef255f.entry.js.map +0 -1
- package/dist/cura/p-c0c00396.system.js +0 -3
- package/dist/cura/p-fc77814b.system.entry.js +0 -2
- package/dist/cura/p-fc77814b.system.entry.js.map +0 -1
- package/dist/esm/index-d99da69e.js.map +0 -1
- package/dist/esm-es5/index-d99da69e.js +0 -3
- /package/dist/cura/{p-0c79c54e.entry.js.map → p-72a9ed55.entry.js.map} +0 -0
- /package/dist/cura/{p-7c8f3c77.system.entry.js.map → p-75b2e4d1.system.entry.js.map} +0 -0
- /package/dist/cura/{p-03047b3e.entry.js.map → p-880917c1.entry.js.map} +0 -0
- /package/dist/cura/{p-d47b9cfe.system.entry.js.map → p-9471c93e.system.entry.js.map} +0 -0
- /package/dist/cura/{p-223924fb.system.entry.js.map → p-98352c92.system.entry.js.map} +0 -0
- /package/dist/cura/{p-91b0f78e.entry.js.map → p-ad194144.entry.js.map} +0 -0
- /package/dist/cura/{p-ca054b07.system.entry.js.map → p-e5e259fd.system.entry.js.map} +0 -0
- /package/dist/cura/{p-49813052.entry.js.map → p-edeffbfc.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["curaCheckboxCss","CuraCheckbox","this","isDarkbackground","background","isDarkIconColor","iconColor","handleClick","disabled","indeterminate","checked","onchange","emit","value","sizeHandler","styles","Object","assign","formsSizes","size","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","icon","label","message","error","default","getIcon","iconName","iconSize","h","class","render","Host","style","required","lineHeight","marginBlock","onClick","tabIndex","ontabindex"],"sources":["./src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","./src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n/* Container e Layout */\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n\n}\n\n.position {\n\n &.container {\n flex-direction: row;\n }\n\n .label-wrapper {\n justify-content: end;\n }\n\n .message {\n text-align: right;\n }\n\n .label {\n order:1\n }\n\n}\n\n.info {\n display: flex;\n flex-direction: column;\n}\n\n.label-wrapper {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 5px;\n}\n\n/* Control e Checkbox */\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox {\n appearance: none;\n border: 2px solid var(--primary-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-lighter-neutral-purewhite);\n flex: 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n}\n\n.icon {\n position: absolute;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n/* Estados de Foco */\n.checkbox:focus {\n border-color: var(--info-base) !important;\n}\n\n/* Estado Disabled */\n.disabled .checkbox {\n background: var(--primary-darker-neutral-white);\n border-color: var(--primary-base-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--primary-base-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--primary-base-neutral-white);\n border-color: var(--primary-base-neutral-base);\n\n &:hover {\n border-color: var(--primary-base-neutral-base) !important;\n background: var(--primary-base-neutral-white);\n\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--primary-base-neutral-base);\n}\n\n/* Estado Checked */\n.checked .checkbox,\n.indeterminate .checkbox {\n border-color: var(--color-dark);\n background: var(--color-base);\n\n &:hover {\n border-color: var(--color-light) !important;\n background: var(--color-lighter);\n }\n}\n\n.checked .icon,\n.indeterminate .icon {\n opacity: 1;\n}\n\n/* Hover para não disabled, checked, indeterminate */\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--primary-base-neutral-dark);\n}\n\n/* Estado Success */\n.success .checkbox {\n border-color: var(--success-base) ;\n background: var(--success-lighter);\n\n &:hover{\n border-color: var(--success-base) !important;\n }\n}\n\n.success.checked .checkbox {\n border-color: var(--success-dark-base);\n background: var(--success-base-lighter);\n\n &:hover {\n border-color: var(--success-dark-base);\n }\n}\n\n/* Estado Error */\n.error .checkbox {\n border-color: var(--error-base);\n background: var(--error-lighter);\n\n &:hover {\n border-color: var(--error-base) !important;\n }\n}\n\n.error.checked .checkbox {\n border-color: var(--error-dark-base);\n background: var(--error-base-lighter);\n\n &:hover {\n border-color: var(--error-dark-base);\n }\n}\n\n/* Input */\ninput {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-checkbox',\n styleUrl: 'cura-checkbox.scss',\n shadow: true,\n})\n\nexport class CuraCheckbox {\n /**\n * Reflects the checked state of the checkbox.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Reflects the indeterminate state of the checkbox.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /**\n * Status of the checkbox.\n * Can be 'error', 'success', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n /**\n * Reflects the disabled state of the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * Reflects the required state of the checkbox.\n */\n @Prop({ reflect: true }) required: boolean = false;\n /**\n * Text label associated with the checkbox.\n */\n @Prop({ reflect: true }) label: string;\n /**\n * Specifies the tabindex of the checkbox.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the checkbox.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n /**\n * Value associated with the checkbox.\n */\n @Prop({ reflect: true }) value: string;\n /**\n * Name attribute of the checkbox.\n */\n @Prop({ reflect: true }) name: string;\n /**\n * Size of the checkbox.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background theme of the checkbox.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * iconColor theme of the checkbox.\n * Can be 'dark' or 'light'.\n */\n @Prop() iconColor: 'dark' | 'light' = 'dark';\n /**\n * Color theme of the checkbox.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string, checked: boolean, indeterminate: boolean }>;\n\n isDarkbackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n\n /**\n * Watches changes in color and background properties to update styles.\n */\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--info-base', background: 'info-base' },\n { name: '--error-base', background: 'error-base' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--success-dark', background: 'success-dark' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-lighter', background: this.isDarkbackground() ? 'success-base' : 'success-lighter' },\n { name: '--success-dark-base', background: this.isDarkbackground() ? 'success-dark' : 'success-base' },\n { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },\n { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n });\n this.styles = { ...this.styles };\n\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n /**\n * Handles click event on the checkbox.\n * Emits onchange event with value, checked, and indeterminate states.\n */\n handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n /**\n * Retrieves classes based on component state for conditional styling.\n */\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['indeterminate'] = this.indeterminate;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n /**\n * Assigns color based on status and background theme.\n * @param defaultColor Default color.\n */\n\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' | 'label' | 'message',) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n const statusColors = {\n success: {\n icon: 'success-dark',\n label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n },\n error: {\n icon: 'error-dark',\n label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n },\n default: {\n icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n }\n };\n\n return statusColors[this.status][type];\n }\n\n /**\n * Retrieves icon element based on checkbox state.\n */\n getIcon() {\n const iconName = this.indeterminate ? 'minus' : \"check\"\n const iconColor = this.assignColor('icon');\n const iconSize = this.size === 'large' ? 20 : \"micro\"\n\n return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>\n }\n\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n color={this.assignColor('label')}>\n {this.label}\n </cura-label>\n {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n </div>\n <cura-label\n color={this.assignColor('message')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={\"checkbox\"} onClick={this.handleClick} tabIndex={this.ontabindex}>\n <input\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n checked={this.checked}\n indeterminate={this.indeterminate}\n />\n {this.getIcon()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["./p-36a83bc7.system.js","./p-d3f9c888.system.js"],(function(e){"use strict";var t,r,a,i,s;return{setters:[function(e){t=e.r;r=e.c;a=e.h;i=e.H},function(e){s=e.f}],execute:function(){var o='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label{text-align:right}.position .message{text-align:right}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.track{background:var(--neutral-base-black-40);border-radius:16px;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;-ms-flex-align:start;align-items:flex-start;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size-track);height:var(--size)}.thumb{background-color:var(--neutral-white-purewhite);border:2px solid var(--neutral-medium);border-radius:50%;position:absolute;-webkit-transition:outline 0.3s, -webkit-transform 0.3s;transition:outline 0.3s, -webkit-transform 0.3s;transition:transform 0.3s, outline 0.3s;transition:transform 0.3s, outline 0.3s, -webkit-transform 0.3s;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size)}.checked .thumb{border-color:var(--color-dark-light);background:var(--color-lighter);-webkit-transform:translateX(var(--size));transform:translateX(var(--size))}.checked .thumb:hover{background:var(--neutral-white-purewhite) !important}.checked .track{background:var(--color-base-lighter-50)}.disabled .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base);cursor:not-allowed}.disabled.checked .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb:hover{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark-light);background:var(--color-lighter)}:not(.disabled) .thumb:focus{border-color:var(--info-base) !important;z-index:1}';var n=e("cura_switch",function(){function e(e){var a=this;t(this,e);this.onchange=r(this,"onchange",7);this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=function(){return a.background==="dark"};this.toggleSwitch=function(){if(a.disabled)return null;a.checked=!a.checked;a.onchange.emit({checked:a.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}e.prototype.sizeHandler=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-track":"".concat(this.sizes[this.size].size,"px"),"--size":"".concat(s[this.size].size,"px"),"--gap":"".concat(s[this.size].gap,"px")})};e.prototype.setColors=function(){var e=this;var t=[{name:"--info-base",background:"info-base"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--color-lighter",background:"".concat(this.color,"-lighter")},{name:"--color-base-lighter-50",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"base":"lighter"),opacity:.5},{name:"--color-base-light",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"base":"light")},{name:"--color-dark-light",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"dark":"light")},{name:"--primary-lighter-neutral-dark",background:this.isDarkbackground()?"primary-lighter":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-white-purewhite",background:"neutral-".concat(this.isDarkbackground()?"white":"purewhite")},{name:"--primary-base-neutral-black-20",background:"".concat(this.isDarkbackground()?"primary-base":"neutral-black"),opacity:.2},{name:"--neutral-base-black-40",background:"neutral-".concat(this.isDarkbackground()?"base":"black"),opacity:.4},{name:"--primary-dark-neutral-base",background:"".concat(this.isDarkbackground()?"primary-dark":"neutral-base")},{name:"--neutral-lighter",background:"".concat(this.isDarkbackground()?"primary-base":"neutral-lighter")}];t.forEach((function(t){e.styles[t.name]=window.CuraAPI.theme.colors.getColor(t.background,t===null||t===void 0?void 0:t.opacity)}));this.styles=Object.assign({},this.styles)};e.prototype.connectedCallback=function(){this.sizeHandler();this.setColors()};e.prototype.assignColor=function(e,t){if(this.disabled)return this.isDarkbackground()?"primary-base":"neutral-medium";return this.isDarkbackground()?e:t};e.prototype.getClasses=function(){var e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e["position"]=this.position==="right";return e};e.prototype.render=function(){return a(i,null,a("div",{class:this.getClasses(),style:this.styles},a("div",{class:"info"},a("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),a("cura-label",{color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},a("slot",null))),a("div",{onClick:this.toggleSwitch,class:"control"},a("div",{class:"track ".concat(this.size.toLowerCase())},a("div",{class:"thumb ".concat(this.size.toLowerCase()),tabIndex:this.ontabindex})))))};Object.defineProperty(e,"watchers",{get:function(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}},enumerable:false,configurable:true});return e}());n.style=o}}}));
|
|
2
|
+
//# sourceMappingURL=p-4db87e8d.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["curaSwitchCss","CuraSwitch","exports","this","sizes","large","size","medium","small","isDarkbackground","_this","background","toggleSwitch","disabled","checked","onchange","emit","class_1","prototype","sizeHandler","styles","Object","assign","concat","formsSizes","gap","setColors","colors","name","color","opacity","forEach","window","CuraAPI","theme","getColor","connectedCallback","assignColor","colorDark","colorLight","getClasses","classes","position","render","h","Host","class","style","lineHeight","label","onClick","toLowerCase","tabIndex","ontabindex"],"sources":["src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\n &.container {\n flex-direction: row;\n }\n\n .label {\n text-align: right;\n }\n\n .message {\n text-align: right;\n }\n}\n\n.control {\n width: fit-content;\n}\n\n/* Estilos para o controle de switch */\n.track {\n background: var(--neutral-base-black-40);\n border-radius: 16px;\n transition: background-color 0.3s;\n align-items: flex-start;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--size-track);\n height: var(--size);\n}\n\n.thumb {\n background-color: var(--neutral-white-purewhite);\n border: 2px solid var(--neutral-medium);\n border-radius: 50%;\n position: absolute;\n transition: transform 0.3s, outline 0.3s;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n}\n\n/* Estado \"checked\" */\n.checked .thumb {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n transform: translateX(var(--size));\n}\n\n.checked .thumb:hover {\n background: var(--neutral-white-purewhite) !important;\n}\n\n.checked .track {\n background: var(--color-base-lighter-50);\n}\n\n/* Estado \"disabled\" */\n\n.disabled .track {\n background: var(--primary-base-neutral-black-20);\n\n}\n\n.disabled .thumb {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base);\n cursor: not-allowed;\n\n}\n\n.disabled.checked .track {\n background: var(--primary-base-neutral-black-20);\n}\n\n.disabled .thumb:hover {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base) !important;\n}\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .thumb:hover {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n}\n\n/* Estado hover para não disabled */\n:not(.disabled) .thumb:focus {\n border-color: var(--info-base) !important;\n z-index: 1;\n}\n","import { Component, Prop, Event, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n})\n\nexport class CuraSwitch {\n /**\n * Indicates whether the switch is checked or not.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Indicates whether the switch is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * The label text to display next to the switch.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Tab index for the switch element.\n * Reflects as an HTML attribute.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n /**\n * Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background style of the switch.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n sizes = {\n \"large\": { size: 64 },\n \"medium\": { size: 48 },\n \"small\": { size: 40 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },\n { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },\n { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },\n { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },\n { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },\n { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },\n { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },\n { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.onchange.emit({ checked: this.checked })\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';\n return this.isDarkbackground() ? colorDark : colorLight\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <cura-label class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}>\n {this.label}\n </cura-label>\n <cura-label\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n\n <div onClick={this.toggleSwitch} class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r,c as t,h as e,H as i}from"./p-ba66d7be.js";import{f as a}from"./p-3688570d.js";const s='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label{text-align:right}.position .message{text-align:right}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.track{background:var(--neutral-base-black-40);border-radius:16px;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;-ms-flex-align:start;align-items:flex-start;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size-track);height:var(--size)}.thumb{background-color:var(--neutral-white-purewhite);border:2px solid var(--neutral-medium);border-radius:50%;position:absolute;-webkit-transition:outline 0.3s, -webkit-transform 0.3s;transition:outline 0.3s, -webkit-transform 0.3s;transition:transform 0.3s, outline 0.3s;transition:transform 0.3s, outline 0.3s, -webkit-transform 0.3s;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size)}.checked .thumb{border-color:var(--color-dark-light);background:var(--color-lighter);-webkit-transform:translateX(var(--size));transform:translateX(var(--size))}.checked .thumb:hover{background:var(--neutral-white-purewhite) !important}.checked .track{background:var(--color-base-lighter-50)}.disabled .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base);cursor:not-allowed}.disabled.checked .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb:hover{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark-light);background:var(--color-lighter)}:not(.disabled) .thumb:focus{border-color:var(--info-base) !important;z-index:1}';const o=class{constructor(e){r(this,e);this.onchange=t(this,"onchange",7);this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=()=>this.background==="dark";this.toggleSwitch=()=>{if(this.disabled)return null;this.checked=!this.checked;this.onchange.emit({checked:this.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-track":`${this.sizes[this.size].size}px`,"--size":`${a[this.size].size}px`,"--gap":`${a[this.size].gap}px`})}setColors(){const r=[{name:"--info-base",background:"info-base"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-base-lighter-50",background:`${this.color}-${this.isDarkbackground()?"base":"lighter"}`,opacity:.5},{name:"--color-base-light",background:`${this.color}-${this.isDarkbackground()?"base":"light"}`},{name:"--color-dark-light",background:`${this.color}-${this.isDarkbackground()?"dark":"light"}`},{name:"--primary-lighter-neutral-dark",background:this.isDarkbackground()?"primary-lighter":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-white-purewhite",background:`neutral-${this.isDarkbackground()?"white":"purewhite"}`},{name:"--primary-base-neutral-black-20",background:`${this.isDarkbackground()?"primary-base":"neutral-black"}`,opacity:.2},{name:"--neutral-base-black-40",background:`neutral-${this.isDarkbackground()?"base":"black"}`,opacity:.4},{name:"--primary-dark-neutral-base",background:`${this.isDarkbackground()?"primary-dark":"neutral-base"}`},{name:"--neutral-lighter",background:`${this.isDarkbackground()?"primary-base":"neutral-lighter"}`}];r.forEach((r=>{this.styles[r.name]=window.CuraAPI.theme.colors.getColor(r.background,r===null||r===void 0?void 0:r.opacity)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}assignColor(r,t){if(this.disabled)return this.isDarkbackground()?"primary-base":"neutral-medium";return this.isDarkbackground()?r:t}getClasses(){const r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";return r}render(){return e(i,null,e("div",{class:this.getClasses(),style:this.styles},e("div",{class:"info"},e("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),e("cura-label",{color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},e("slot",null))),e("div",{onClick:this.toggleSwitch,class:"control"},e("div",{class:`track ${this.size.toLowerCase()}`},e("div",{class:`thumb ${this.size.toLowerCase()}`,tabIndex:this.ontabindex})))))}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}}};o.style=s;export{o as cura_switch};
|
|
2
|
+
//# sourceMappingURL=p-51e00a16.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["curaSwitchCss","CuraSwitch","this","sizes","large","size","medium","small","isDarkbackground","background","toggleSwitch","disabled","checked","onchange","emit","sizeHandler","styles","Object","assign","formsSizes","gap","setColors","colors","name","color","opacity","forEach","window","CuraAPI","theme","getColor","connectedCallback","assignColor","colorDark","colorLight","getClasses","classes","position","render","h","Host","class","style","lineHeight","label","onClick","toLowerCase","tabIndex","ontabindex"],"sources":["./src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","./src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\n &.container {\n flex-direction: row;\n }\n\n .label {\n text-align: right;\n }\n\n .message {\n text-align: right;\n }\n}\n\n.control {\n width: fit-content;\n}\n\n/* Estilos para o controle de switch */\n.track {\n background: var(--neutral-base-black-40);\n border-radius: 16px;\n transition: background-color 0.3s;\n align-items: flex-start;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--size-track);\n height: var(--size);\n}\n\n.thumb {\n background-color: var(--neutral-white-purewhite);\n border: 2px solid var(--neutral-medium);\n border-radius: 50%;\n position: absolute;\n transition: transform 0.3s, outline 0.3s;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n}\n\n/* Estado \"checked\" */\n.checked .thumb {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n transform: translateX(var(--size));\n}\n\n.checked .thumb:hover {\n background: var(--neutral-white-purewhite) !important;\n}\n\n.checked .track {\n background: var(--color-base-lighter-50);\n}\n\n/* Estado \"disabled\" */\n\n.disabled .track {\n background: var(--primary-base-neutral-black-20);\n\n}\n\n.disabled .thumb {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base);\n cursor: not-allowed;\n\n}\n\n.disabled.checked .track {\n background: var(--primary-base-neutral-black-20);\n}\n\n.disabled .thumb:hover {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base) !important;\n}\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .thumb:hover {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n}\n\n/* Estado hover para não disabled */\n:not(.disabled) .thumb:focus {\n border-color: var(--info-base) !important;\n z-index: 1;\n}\n","import { Component, Prop, Event, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n})\n\nexport class CuraSwitch {\n /**\n * Indicates whether the switch is checked or not.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Indicates whether the switch is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * The label text to display next to the switch.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Tab index for the switch element.\n * Reflects as an HTML attribute.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n /**\n * Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background style of the switch.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n sizes = {\n \"large\": { size: 64 },\n \"medium\": { size: 48 },\n \"small\": { size: 40 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },\n { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },\n { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },\n { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },\n { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },\n { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },\n { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },\n { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.onchange.emit({ checked: this.checked })\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';\n return this.isDarkbackground() ? colorDark : colorLight\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <cura-label class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}>\n {this.label}\n </cura-label>\n <cura-label\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n\n <div onClick={this.toggleSwitch} class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as o,H as i}from"./p-46d20db3.js";const a=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted,:host a.inverted{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.inverted:not(.disabled):not(.isLoading):hover,:host a.inverted:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover .label,:host a.inverted:not(.disabled):not(.isLoading):hover .label{color:var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon,:host a.inverted:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.disabled):not(.isLoading):active,:host a.inverted:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active .label,:host a.inverted:not(.disabled):not(.isLoading):active .label{color:var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active cura-icon,:host a.inverted:not(.disabled):not(.isLoading):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';const n=class{constructor(o){t(this,o);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor(`neutral-white`);this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor(`neutral-base`);this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor(`neutral-dark`);this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t[`icon-only`]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t}setColors(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),"--color-light":window.CuraAPI.theme.colors.getColor(`${this.color}-light`),"--color-base":window.CuraAPI.theme.colors.getColor(`${this.color}-base`),"--color-dark":window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)})}getIcon(){if(!this.iconName)return"";const t=this.size==="small"?16:this.size==="medium"?20:24;const i=this.getSymbolColor();return o("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:i})}getSymbolColor(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":`${this.color}-base`}handleClick(t){if(this.disabled||this.isLoading)t.preventDefault()}render(){return o(i,null,this.href?o("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):o("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))}static get watchers(){return{color:["handleChangeColor"]}}};n.style=a;export{n as cura_button_outline};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as o,H as i}from"./p-ba66d7be.js";const a=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted,:host a.inverted{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.inverted:not(.disabled):not(.isLoading):hover,:host a.inverted:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover .label,:host a.inverted:not(.disabled):not(.isLoading):hover .label{color:var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon,:host a.inverted:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.disabled):not(.isLoading):active,:host a.inverted:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active .label,:host a.inverted:not(.disabled):not(.isLoading):active .label{color:var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active cura-icon,:host a.inverted:not(.disabled):not(.isLoading):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';const n=class{constructor(o){t(this,o);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor(`neutral-white`);this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor(`neutral-base`);this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor(`neutral-dark`);this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t[`icon-only`]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t}setColors(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),"--color-light":window.CuraAPI.theme.colors.getColor(`${this.color}-light`),"--color-base":window.CuraAPI.theme.colors.getColor(`${this.color}-base`),"--color-dark":window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)})}getIcon(){if(!this.iconName)return"";const t=this.size==="small"?16:this.size==="medium"?20:24;const i=this.getSymbolColor();return o("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:i})}getSymbolColor(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":`${this.color}-base`}handleClick(t){if(this.disabled||this.isLoading)t.preventDefault()}render(){return o(i,null,this.href?o("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):o("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))}static get watchers(){return{color:["handleChangeColor"]}}};n.style=a;export{n as cura_button_outline};
|
|
2
|
+
//# sourceMappingURL=p-72a9ed55.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["./p-c0c00396.system.js"],(function(t){"use strict";var o,i,e;return{setters:[function(t){o=t.r;i=t.h;e=t.H}],execute:function(){var a=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted,:host a.inverted{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.inverted:not(.disabled):not(.isLoading):hover,:host a.inverted:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover .label,:host a.inverted:not(.disabled):not(.isLoading):hover .label{color:var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon,:host a.inverted:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.disabled):not(.isLoading):active,:host a.inverted:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active .label,:host a.inverted:not(.disabled):not(.isLoading):active .label{color:var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active cura-icon,:host a.inverted:not(.disabled):not(.isLoading):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';var n=t("cura_button_outline",function(){function t(t){o(this,t);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}t.prototype.handleChangeColor=function(){this.setColors()};t.prototype.connectedCallback=function(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor("neutral-white");this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor("neutral-base");this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor("neutral-dark");this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()};t.prototype.getClasses=function(){var t={};t["".concat(this.size.toLowerCase())]=true;t["icon-".concat(this.iconPosition.toLowerCase())]=true;t["icon-only"]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t};t.prototype.setColors=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-lighter")),"--color-light":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-light")),"--color-base":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-base")),"--color-dark":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-dark"))})};t.prototype.getIcon=function(){if(!this.iconName)return"";var t=this.size==="small"?16:this.size==="medium"?20:24;var o=this.getSymbolColor();return i("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:o})};t.prototype.getSymbolColor=function(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":"".concat(this.color,"-base")};t.prototype.handleClick=function(t){if(this.disabled||this.isLoading)t.preventDefault()};t.prototype.render=function(){var t=this;return i(e,null,this.href?i("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:function(o){return t.handleClick(o)}},i("span",{class:"button-container"},this.getIcon(),i("span",{class:{label:true,inverted:this.fontColor==="light"}},i("slot",null))),i("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):i("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:function(o){return t.handleClick(o)}},i("span",{class:"button-container"},this.getIcon(),i("span",{class:{label:true,inverted:this.fontColor==="light"}},i("slot",null))),i("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))};Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"]}},enumerable:false,configurable:true});return t}());n.style=a}}}));
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
System.register(["./p-36a83bc7.system.js"],(function(t){"use strict";var o,i,e;return{setters:[function(t){o=t.r;i=t.h;e=t.H}],execute:function(){var a=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted,:host a.inverted{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.inverted:not(.disabled):not(.isLoading):hover,:host a.inverted:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover .label,:host a.inverted:not(.disabled):not(.isLoading):hover .label{color:var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon,:host a.inverted:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.disabled):not(.isLoading):active,:host a.inverted:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active .label,:host a.inverted:not(.disabled):not(.isLoading):active .label{color:var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active cura-icon,:host a.inverted:not(.disabled):not(.isLoading):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';var n=t("cura_button_outline",function(){function t(t){o(this,t);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}t.prototype.handleChangeColor=function(){this.setColors()};t.prototype.connectedCallback=function(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor("neutral-white");this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor("neutral-base");this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor("neutral-dark");this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()};t.prototype.getClasses=function(){var t={};t["".concat(this.size.toLowerCase())]=true;t["icon-".concat(this.iconPosition.toLowerCase())]=true;t["icon-only"]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t};t.prototype.setColors=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-lighter")),"--color-light":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-light")),"--color-base":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-base")),"--color-dark":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-dark"))})};t.prototype.getIcon=function(){if(!this.iconName)return"";var t=this.size==="small"?16:this.size==="medium"?20:24;var o=this.getSymbolColor();return i("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:o})};t.prototype.getSymbolColor=function(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":"".concat(this.color,"-base")};t.prototype.handleClick=function(t){if(this.disabled||this.isLoading)t.preventDefault()};t.prototype.render=function(){var t=this;return i(e,null,this.href?i("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:function(o){return t.handleClick(o)}},i("span",{class:"button-container"},this.getIcon(),i("span",{class:{label:true,inverted:this.fontColor==="light"}},i("slot",null))),i("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):i("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:function(o){return t.handleClick(o)}},i("span",{class:"button-container"},this.getIcon(),i("span",{class:{label:true,inverted:this.fontColor==="light"}},i("slot",null))),i("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))};Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"]}},enumerable:false,configurable:true});return t}());n.style=a}}}));
|
|
2
|
+
//# sourceMappingURL=p-75b2e4d1.system.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as o,H as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as o,H as i}from"./p-ba66d7be.js";const a=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border-width:0px;border-color:transparent;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;border-color:var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted:not(.isLoading):not(.disabled):hover .label,:host a.inverted:not(.isLoading):not(.disabled):hover .label{color:var(--color-lighter)}:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon,:host a.inverted:not(.isLoading):not(.disabled):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.isLoading):not(.disabled):active .label,:host a.inverted:not(.isLoading):not(.disabled):active .label{color:var(--color-light)}:host button.inverted:not(.isLoading):not(.disabled):active cura-icon,:host a.inverted:not(.isLoading):not(.disabled):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';const n=class{constructor(o){t(this,o);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor(`neutral-white`);this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor(`neutral-base`);this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor(`neutral-dark`);this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t[`icon-only`]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t}setColors(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),"--color-light":window.CuraAPI.theme.colors.getColor(`${this.color}-light`),"--color-base":window.CuraAPI.theme.colors.getColor(`${this.color}-base`),"--color-dark":window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)})}getIcon(){if(!this.iconName)return"";const t=this.size==="small"?16:this.size==="medium"?20:24;const i=this.getSymbolColor();return o("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:i})}getSymbolColor(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":`${this.color}-base`}handleClick(t){if(this.disabled||this.isLoading)t.preventDefault()}render(){return o(i,null,this.href?o("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):o("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))}static get watchers(){return{color:["handleChangeColor"]}}};n.style=a;export{n as cura_button_transparent};
|
|
2
|
+
//# sourceMappingURL=p-880917c1.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r,c as e,h as a,H as s,g as t}from"./p-ba66d7be.js";import{f as o}from"./p-3688570d.js";const i='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box;}:host .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}:host .position.container{-ms-flex-direction:row;flex-direction:row}:host .position .label-wrapper{-ms-flex-pack:end;justify-content:end}:host .position .message{text-align:right}:host .position .label{-ms-flex-order:1;order:1}:host .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}:host .control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}:host .radio{margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--primary-base-neutral-medium);background:var(--neutral-purewhite);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color 0.3s;transition:border-color 0.3s;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}:host .radio::after{content:"";background:var(--color-base-light);border-radius:50%;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}';const c=class{constructor(a){r(this,a);this.onchange=e(this,"onchange",7);this.sizes={large:{size:20},medium:{size:14},small:{size:10}};this.isDarkbackground=()=>this.background==="dark";this.handleClick=()=>{if(this.disabled)return;this.checked=!this.checked;this.onchange.emit({value:this.value,checked:this.checked})};this.checked=false;this.status="default";this.disabled=false;this.required=false;this.label="";this.ontabindex=undefined;this.position="left";this.value="";this.name="";this.background="light";this.size="medium";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-after":`${this.sizes[this.size].size}px`,"--size":`${o[this.size].size}px`,"--gap":`${o[this.size].gap}px`})}setColors(){const r=[{name:"--info-base",background:"info-base"},{name:"--color-light",background:`${this.color}-light`},{name:"--color-base",background:`${this.color}-base`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--neutral-purewhite",background:"neutral-purewhite"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--error-lighter",background:"error-lighter"},{name:"--error-base",background:"error-base"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--primary-base-neutral-white",background:this.isDarkbackground()?"primary-base":"neutral-white"},{name:"--primary-darker-neutral-white",background:this.isDarkbackground()?"primary-darker":"neutral-white"},{name:"--primary-darker-neutral-base",background:this.isDarkbackground()?"primary-darker":"neutral-base"},{name:"--primary-base-neutral-base",background:this.isDarkbackground()?"primary-base":"neutral-base"},{name:"--primary-base-neutral-dark",background:this.isDarkbackground()?"primary-base":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--success-base-dark",background:this.isDarkbackground()?"success-base":"success-dark"},{name:"--error-base-dark",background:this.isDarkbackground()?"error-base":"error-dark"}];r.forEach((r=>{this.styles[r.name]=window.CuraAPI.theme.colors.getColor(r.background)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}getClasses(){const r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";r[this.status]=true;return r}assignColor(r){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";const e={success:{label:this.isDarkbackground()?"success-lighter":"success-darker",message:this.isDarkbackground()?"success-base":"success-dark"},error:{label:this.isDarkbackground()?"error-lighter":"neutral-darker",message:this.isDarkbackground()?"error-base":"error-dark"},default:{label:this.isDarkbackground()?"neutral-white":"neutral-black",message:this.isDarkbackground()?"primary-lighter":"neutral-dark"}};return e[this.status][r]}render(){return a(s,null,a("div",{class:this.getClasses(),style:this.styles},a("div",{class:"info"},a("div",{class:"label-wrapper"},a("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",null))),a("input",{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})))}get host(){return t(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}}};c.style=i;export{c as cura_radio};
|
|
2
|
+
//# sourceMappingURL=p-8d959fb2.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["curaRadioCss","CuraRadio","this","sizes","large","size","medium","small","isDarkbackground","background","handleClick","disabled","checked","onchange","emit","value","sizeHandler","styles","Object","assign","formsSizes","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","label","message","error","default","render","h","Host","class","style","required","lineHeight","marginBlock","toLocaleLowerCase","tabIndex","ontabindex","onClick"],"sources":["./src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","./src/components/forms/cura-radio/cura-radio.tsx"],"sourcesContent":["\n\n:host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\n &.container {\n flex-direction: row;\n }\n\n .label-wrapper {\n justify-content: end;\n }\n\n .message {\n text-align: right;\n }\n\n .label {\n order:1\n }\n\n}\n\n.info {\n display: flex;\n flex-direction: column;\n}\n\n.label-wrapper {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 5px;\n}\n\n\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n\n.radio {\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: 50%;\n border: 2px solid var(--primary-base-neutral-medium);\n background: var(--neutral-purewhite);\n box-sizing: border-box;\n transition: border-color 0.3s;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n\n &::after {\n content: '';\n background: var(--color-base-light);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s;\n width: var(--size-after);\n height: var(--size-after);\n }\n\n &:focus {\n border-color: var(--info-base) !important;\n }\n\n}\n\n\n/* Estado Success */\n.success .radio {\n border-color: var(--success-base);\n background: var(--success-lighter);\n\n &:hover{\n border-color: var(--success-base) !important;\n }\n}\n\n.success.checked .radio {\n border-color: var(--success-base);\n\n &::after {\n background: var(--success-base);\n }\n\n &:hover {\n background: var(--success-lighter) !important;\n border-color: var(--success-base) !important;\n\n &::after {\n background: var(--success-base) !important;\n }\n }\n}\n\n\n/* Estado Error */\n.error .radio {\n border-color: var(--error-base);\n background: var(--error-lighter);\n\n &:hover{\n border-color: var(--error-base) !important;\n }\n}\n\n.error.checked .radio {\n border-color: var(--error-base);\n\n &::after {\n background: var(--error-base);\n }\n\n &:hover {\n background: var(--error-lighter) !important;\n border-color: var(--error-base) !important;\n\n &::after {\n background: var(--error-base) !important;\n }\n }\n}\n\n\n/* Estado checked */\n.checked .radio::after {\n opacity: 1;\n background: var(--color-base);\n}\n\n.checked .radio {\n border-color: var(--color-dark) ;\n}\n\n.checked .radio:hover {\n border-color: var(--color-light) !important;\n}\n\n.checked .radio:hover::after {\n background: var(--color-light);\n}\n\n/* Estado disabled */\n.disabled .radio {\n background: var(--primary-base-neutral-white);\n border-color: var(--primary-darker-neutral-base) ;\n cursor: not-allowed;\n}\n\n.disabled .radio::after {\n background: var(--neutral-lighter);\n}\n\n.disabled.checked .radio {\n border-color: var(--primary-base-neutral-base) !important;\n background: var(--primary-darker-neutral-white) !important;\n}\n\n.disabled.checked .radio::after {\n background: var(--primary-base-neutral-base) !important;\n}\n\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .radio:hover {\n border-color: var(--primary-base-neutral-dark);\n}\n\n\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-radio',\n styleUrl: 'cura-radio.scss',\n shadow: true,\n})\nexport class CuraRadio {\n /**\n * Reflects the checked state of the radio button.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Status of the radio button.\n * Can be 'error', 'success', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n /**\n * Reflects the disabled state of the radio button.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * Reflects the required state of the radio button.\n */\n @Prop({ reflect: true }) required: boolean = false;\n /**\n * Text label associated with the radio button.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Specifies the tabindex of the radio button.\n */\n @Prop({ reflect: true }) ontabindex: number;\n /**\n * Position of the label relative to the radio button.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n /**\n * Value associated with the radio button.\n */\n @Prop({ reflect: true }) value: string = '';\n /**\n * Name attribute of the radio button.\n */\n @Prop({ reflect: true }) name: string = '';\n /**\n * Background theme of the radio button.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Size of the radio button.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Color theme of the radio button.\n */\n @Prop() color = 'accent';\n\n @State() styles = {}\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n sizes = {\n \"large\": { size: 20 },\n \"medium\": { size: 14 },\n \"small\": { size: 10 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-after': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n\n @Watch('color')\n @Watch('background')\n setColors() {\n\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--error-base', background: 'error-base' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n });\n this.styles = { ...this.styles };\n\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n this.onchange.emit({ value: this.value, checked: this.checked });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n @Watch('background')\n assignColor(type: 'label' | 'message',) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n const statusColors = {\n success: {\n label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n },\n error: {\n label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n },\n default: {\n label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n }\n };\n\n return statusColors[this.status][type];\n }\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n color={this.assignColor('label')}>\n {this.label}\n </cura-label>\n {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n </div>\n <cura-label\n color={this.assignColor('message')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <input\n type=\"radio\"\n class={`radio ${this.size.toLocaleLowerCase()}`}\n name={this.name}\n value={this.value}\n required={this.required}\n tabIndex={this.ontabindex}\n disabled={this.disabled}\n checked={this.checked}\n onClick={this.handleClick}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
System.register(["./p-36a83bc7.system.js"],(function(t){"use strict";var e,o,s,i;return{setters:[function(t){e=t.r;o=t.h;s=t.H;i=t.g}],execute:function(){var r=":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}:host p.bold-weight,:host p ::slotted(b),:host p ::slotted(strong),:host p ::slotted(u){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";var n=t("cura_label",function(){function t(t){e(this,t);this.theme=window.CuraAPI.theme;this.size="medium";this.weight="regular";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="0";this.lineHeight="125%";this.styles={}}t.prototype.handleChangeColor=function(){this.setColors()};t.prototype.connectedCallback=function(){this.setFontProperties();this.setColors()};t.prototype.getClasses=function(){var t={};t[this.size.toLowerCase()]=true;t["".concat(this.weight.toLowerCase(),"-weight")]=true;return t};t.prototype.setFontProperties=function(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":this.theme.fonts.getFamily("body"),"--font-weight-medium":this.weights.medium,"--font-weight-bold":this.weights.bold}};t.prototype.setColors=function(){var t=this.color?this.theme.colors.getColor(this.color):this.theme.fonts.getColor();this.styles=Object.assign(Object.assign({},this.styles),{"--color-body":t||this.theme.colors.getColor("neutral-darker"),"--color-link":this.theme.colors.getColor("".concat(this.spotColor))})};t.prototype.hostCSSProperties=function(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}};t.prototype.render=function(){return o(s,{style:this.hostCSSProperties()},o("p",{style:this.styles,class:this.getClasses()},o("slot",null)))};Object.defineProperty(t.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}},enumerable:false,configurable:true});return t}());n.style=r}}}));
|
|
2
|
+
//# sourceMappingURL=p-9471c93e.system.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as a,H as s}from"./p-ba66d7be.js";const i=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:var(--neutral-purewhite);border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-base);box-shadow:inset 0px 0px 0px 2px var(--primary-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background-color:var(--color-lighter);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base)}:host button:not(.disabled):hover .label,:host a:not(.disabled):hover .label{color:var(--neutral-purewhite-black)}:host button:focus,:host a:focus{-webkit-box-shadow:inset 0px 0px 0px 2px var(--info-base) !important;box-shadow:inset 0px 0px 0px 2px var(--info-base) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--primary-base)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;gap:5px}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-base);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-darker);box-shadow:inset 0px 0px 0px 2px var(--color-darker)}:host button.selected .label,:host a.selected .label{color:var(--neutral-purewhite-black)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base)}:host button.disabled .label,:host a.disabled .label{color:var(--neutral-medium-primary-base)}';const o=class{constructor(a){t(this,a);this.onclick=e(this,"onclick",7);this.theme=window.CuraAPI.theme;this.size="medium";this.disabled=false;this.selected=false;this.iconPosition="right";this.color="accent";this.background="light";this.fontcolor="dark";this.hovered=false;this.styles={}}setColors(){const t=[{name:"--color-base",theme:`${this.color}-base`},{name:"--color-darker",theme:`${this.color}-darker`},{name:"--color-lighter",theme:`${this.color}-lighter`},{name:"--neutral-purewhite-black",theme:this.fontcolor==="light"?"neutral-purewhite":"neutral-black"},{name:"--neutral-white-primary-darker",theme:this.background==="light"?"neutral-white":"primary-darker"},{name:"--neutral-medium-primary-base",theme:this.background==="light"?"neutral-medium":"primary-base"}];t.forEach((t=>{this.styles=Object.assign(Object.assign({},this.styles),{[t.name]:this.theme.colors.getColor(t.theme)})}))}setStyles(){this.weights=this.theme.fonts.getWeights();this.styles["--base-spacing"]=this.theme.spacing.getSpacing();this.styles["--font-size"]=this.theme.fonts.getSize();this.styles["--font-family"]=this.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--neutral-purewhite"]=this.theme.colors.getColor("neutral-purewhite");this.styles["--neutral-black"]=this.theme.colors.getColor("neutral-black");this.styles["--primary-base"]=this.theme.colors.getColor("primary-base");this.styles["--info-base"]=this.theme.colors.getColor("info-base")}connectedCallback(){this.setStyles();this.setColors()}handleMouseEnter(){if(this.disabled)return;this.hovered=true}handleMouseLeave(){this.hovered=false}getIcon(){if(!this.selected)return"";const t=this.size==="small"?16:this.size==="medium"?20:24;const e=this.hovered?"closeCircle":"checkCircle";const s=this.disabled?this.background==="light"?"neutral-medium":"primary-base":this.selected&&this.fontcolor==="dark"?"neutral-black":"neutral-purewhite";return a("cura-icon",{class:"button-icon",name:e,size:t,color:s})}handleClick(t){if(this.disabled)t.preventDefault();this.selected=!this.selected;this.onclick.emit({selected:this.selected})}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t["disabled"]=this.disabled;t["selected"]=this.selected;return t}render(){return a(s,null,a("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled,onClick:t=>this.handleClick(t),onMouseEnter:()=>this.handleMouseEnter(),onMouseLeave:()=>this.handleMouseLeave()},a("div",{class:"button-container"},this.getIcon(),a("span",{class:"label"},a("slot",null)))))}static get watchers(){return{background:["setColors","getIcon"],color:["setColors"],fontcolor:["setColors","getIcon"]}}};o.style=i;export{o as cura_button_select};
|
|
2
|
+
//# sourceMappingURL=p-98014544.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["curaButtonSelectCss","CuraButtonOutline","this","theme","window","CuraAPI","setColors","colors","name","color","fontcolor","background","forEach","styles","Object","assign","getColor","setStyles","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","connectedCallback","handleMouseEnter","disabled","hovered","handleMouseLeave","getIcon","selected","iconSize","size","iconName","h","class","handleClick","e","preventDefault","onclick","emit","getClasses","classes","toLowerCase","iconPosition","render","Host","style","onClick","onMouseEnter","onMouseLeave"],"sources":["./src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","./src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n @include button-host();\n\n button, a {\n @include button-element() {\n background-color: var(--neutral-purewhite);\n border: none;\n box-shadow: inset 0px 0px 0px 2px var(--primary-base);\n\n &:not(.disabled):hover {\n background-color: var(--color-lighter);\n box-shadow: inset 0px 0px 0px 2px var(--color-base);\n .label {\n color: var(--neutral-purewhite-black);\n }\n }\n\n &:focus {\n box-shadow: inset 0px 0px 0px 2px var(--info-base) !important;\n }\n }\n\n @include button-sizes();\n\n @include button-label() {\n color: var(--primary-base);\n }\n\n // Children Elements\n @include button-container() {\n gap: 5px;\n }\n\n @mixin button-icon() {\n margin: 0;\n }\n\n // selected state\n @include button-selected() {\n background-color: var(--color-base);\n box-shadow: inset 0px 0px 0px 2px var(--color-darker);\n .label {\n color: var(--neutral-purewhite-black);\n }\n }\n\n // Disabled state\n @include button-disabled() {\n background-color: var(--neutral-white-primary-darker);\n box-shadow: inset 0px 0px 0px 2px var(--neutral-medium-primary-base);\n .label {\n color: var(--neutral-medium-primary-base);\n }\n }\n\n }\n}\n","import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cura-button-select',\n styleUrl: 'cura-button-select.scss',\n shadow: true,\n})\n\nexport class CuraButtonOutline {\n /**\n * Button size: small | medium (default) | large = medium\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Disabled state. Boolean.\n */\n @Prop({ reflect: true }) disabled = false;\n /**\n * selected state. Boolean.\n */\n @Prop({ reflect: true }) selected = false;\n /**\n * Icon position: left (default) | right.\n */\n @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'right';\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop() color = 'accent';\n /**\n * Set the font color to dark or light.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * fontcolor theme of the checkbox.\n * Can be 'dark' or 'light'.\n */\n @Prop() fontcolor: 'dark' | 'light' = 'dark';\n /**\n * hovered state. Boolean.\n */\n @State() hovered = false;\n\n @State() styles = {};\n\n @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n theme = window.CuraAPI.theme\n\n weights;\n\n @Watch('background')\n @Watch('color')\n @Watch('fontcolor')\n setColors() {\n const colors = [\n { name: '--color-base', theme: `${this.color}-base` },\n { name: '--color-darker', theme: `${this.color}-darker` },\n { name: '--color-lighter', theme: `${this.color}-lighter` },\n { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n ];\n\n colors.forEach(color => {\n this.styles = {\n ...this.styles,\n [color.name]: this.theme.colors.getColor(color.theme)\n };\n });\n }\n\n setStyles() {\n this.weights = this.theme.fonts.getWeights();\n this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n this.styles['--font-size'] = this.theme.fonts.getSize();\n this.styles['--font-family'] = this.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n }\n\n connectedCallback() {\n this.setStyles()\n this.setColors();\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n @Watch('background')\n @Watch('fontcolor')\n getIcon() {\n if (!this.selected) return '';\n\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n const fontcolor =\n this.disabled\n ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={fontcolor}></cura-icon>;\n }\n\n\n handleClick(e: Event) {\n if (this.disabled) e.preventDefault();\n this.selected = !this.selected;\n this.onclick.emit({ selected: this.selected });\n }\n\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes['disabled'] = this.disabled;\n classes['selected'] = this.selected;\n return classes;\n }\n\n render() {\n return (\n <Host>\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <div class=\"button-container\">\n {this.getIcon()}\n <span class=\"label\"><slot></slot></span>\n </div>\n </button>\n </Host>\n );\n }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,w1G,MCQfC,EAAiB,M,0DAuC5BC,KAAAC,MAAQC,OAAOC,QAAQF,M,UAnCuC,S,cAI1B,M,cAIA,M,kBAIsB,Q,WAI1C,S,gBAIuB,Q,eAKD,O,aAInB,M,YAED,E,CAWlBG,YACE,MAAMC,EAAS,CACb,CAAEC,KAAM,eAAgBL,MAAO,GAAGD,KAAKO,cACvC,CAAED,KAAM,iBAAkBL,MAAO,GAAGD,KAAKO,gBACzC,CAAED,KAAM,kBAAmBL,MAAO,GAAGD,KAAKO,iBAC1C,CAAED,KAAM,4BAA6BL,MAAOD,KAAKQ,YAAc,QAAU,oBAAsB,iBAC/F,CAAEF,KAAM,iCAAkCL,MAAOD,KAAKS,aAAe,QAAU,gBAAkB,kBACjG,CAAEH,KAAM,gCAAiCL,MAAOD,KAAKS,aAAe,QAAU,iBAAmB,iBAGnGJ,EAAOK,SAAQH,IACbP,KAAKW,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNb,KAAKW,QAAM,CACd,CAACJ,EAAMD,MAAON,KAAKC,MAAMI,OAAOS,SAASP,EAAMN,QAChD,G,CAILc,YACEf,KAAKgB,QAAUhB,KAAKC,MAAMgB,MAAMC,aAChClB,KAAKW,OAAO,kBAAoBX,KAAKC,MAAMkB,QAAQC,aACnDpB,KAAKW,OAAO,eAAiBX,KAAKC,MAAMgB,MAAMI,UAC9CrB,KAAKW,OAAO,iBAAmBX,KAAKC,MAAMgB,MAAMK,YAChDtB,KAAKW,OAAO,wBAA0BX,KAAKgB,QAAQO,OACnDvB,KAAKW,OAAO,uBAAyBX,KAAKC,MAAMI,OAAOS,SAAS,qBAChEd,KAAKW,OAAO,mBAAqBX,KAAKC,MAAMI,OAAOS,SAAS,iBAC5Dd,KAAKW,OAAO,kBAAoBX,KAAKC,MAAMI,OAAOS,SAAS,gBAC3Dd,KAAKW,OAAO,eAAiBX,KAAKC,MAAMI,OAAOS,SAAS,Y,CAG1DU,oBACExB,KAAKe,YACLf,KAAKI,W,CAGPqB,mBACE,GAAIzB,KAAK0B,SAAU,OACnB1B,KAAK2B,QAAU,I,CAGjBC,mBACE5B,KAAK2B,QAAU,K,CAKjBE,UACE,IAAK7B,KAAK8B,SAAU,MAAO,GAE3B,MAAMC,EAAW/B,KAAKgC,OAAS,QAAU,GAAKhC,KAAKgC,OAAS,SAAW,GAAK,GAC5E,MAAMC,EAAWjC,KAAK2B,QAAU,cAAgB,cAChD,MAAMnB,EACJR,KAAK0B,SACA1B,KAAKS,aAAe,QAAU,iBAAmB,eAClDT,KAAK8B,UAAY9B,KAAKQ,YAAc,OAAS,gBAAkB,oBAErE,OAAO0B,EAAA,aAAWC,MAAM,cAAc7B,KAAM2B,EAAUD,KAAMD,EAAUxB,MAAOC,G,CAI/E4B,YAAYC,GACV,GAAIrC,KAAK0B,SAAUW,EAAEC,iBACrBtC,KAAK8B,UAAY9B,KAAK8B,SACtB9B,KAAKuC,QAAQC,KAAK,CAAEV,SAAU9B,KAAK8B,U,CAIrCW,aACE,MAAMC,EAAU,GAChBA,EAAQ,GAAG1C,KAAKgC,KAAKW,iBAAmB,KACxCD,EAAQ,QAAQ1C,KAAK4C,aAAaD,iBAAmB,KACrDD,EAAQ,YAAc1C,KAAK0B,SAC3BgB,EAAQ,YAAc1C,KAAK8B,SAC3B,OAAOY,C,CAGTG,SACE,OACEX,EAACY,EAAI,KACHZ,EAAA,UAAQC,MAAOnC,KAAKyC,aAClBM,MAAO/C,KAAKW,OACZe,SAAU1B,KAAK0B,SACfsB,QAAUX,GAAMrC,KAAKoC,YAAYC,GACjCY,aAAc,IAAMjD,KAAKyB,mBACzByB,aAAc,IAAMlD,KAAK4B,oBACzBM,EAAA,OAAKC,MAAM,oBACRnC,KAAK6B,UACNK,EAAA,QAAMC,MAAM,SAAQD,EAAA,gB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
System.register(["./p-36a83bc7.system.js"],(function(t){"use strict";var o,i,e;return{setters:[function(t){o=t.r;i=t.h;e=t.H}],execute:function(){var a=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border-width:0px;border-color:transparent;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;border-color:var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted:not(.isLoading):not(.disabled):hover .label,:host a.inverted:not(.isLoading):not(.disabled):hover .label{color:var(--color-lighter)}:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon,:host a.inverted:not(.isLoading):not(.disabled):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.isLoading):not(.disabled):active .label,:host a.inverted:not(.isLoading):not(.disabled):active .label{color:var(--color-light)}:host button.inverted:not(.isLoading):not(.disabled):active cura-icon,:host a.inverted:not(.isLoading):not(.disabled):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';var n=t("cura_button_transparent",function(){function t(t){o(this,t);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}t.prototype.handleChangeColor=function(){this.setColors()};t.prototype.connectedCallback=function(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor("neutral-white");this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor("neutral-base");this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor("neutral-dark");this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()};t.prototype.getClasses=function(){var t={};t["".concat(this.size.toLowerCase())]=true;t["icon-".concat(this.iconPosition.toLowerCase())]=true;t["icon-only"]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t};t.prototype.setColors=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-lighter")),"--color-light":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-light")),"--color-base":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-base")),"--color-dark":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-dark"))})};t.prototype.getIcon=function(){if(!this.iconName)return"";var t=this.size==="small"?16:this.size==="medium"?20:24;var o=this.getSymbolColor();return i("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:o})};t.prototype.getSymbolColor=function(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":"".concat(this.color,"-base")};t.prototype.handleClick=function(t){if(this.disabled||this.isLoading)t.preventDefault()};t.prototype.render=function(){var t=this;return i(e,null,this.href?i("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:function(o){return t.handleClick(o)}},i("span",{class:"button-container"},this.getIcon(),i("span",{class:{label:true,inverted:this.fontColor==="light"}},i("slot",null))),i("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):i("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:function(o){return t.handleClick(o)}},i("span",{class:"button-container"},this.getIcon(),i("span",{class:{label:true,inverted:this.fontColor==="light"}},i("slot",null))),i("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))};Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"]}},enumerable:false,configurable:true});return t}());n.style=a}}}));
|
|
2
|
+
//# sourceMappingURL=p-98352c92.system.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register([],(function(e){"use strict";return{execute:function(){var r=e("m",["arrowDown","arrowLeft","arrowRight","arrowUp","check","checkDouble","close","closeCircle","collapse","down","expand","linkExternal","link","left","minus","minusCircle","minusSquare","order","subItem","right","plus","plusCircle","plusSquare","up","filter","swap"]);var s=e("i",{128:{size:128,stroke:5.25},72:{size:72,stroke:3.5},64:{size:64,stroke:3.25},48:{size:48,stroke:2.75},40:{size:40,stroke:2.5},32:{size:32,stroke:2.25},24:{size:24,stroke:2},20:{size:20,stroke:1.75},16:{size:16,stroke:1.5},micro:{size:12,stroke:1.5},default:{size:24,stroke:2}})}}}));
|
|
2
|
+
//# sourceMappingURL=p-a32889a4.system.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["microIcons","exports","iconSizes","size","stroke","micro","default"],"sources":["src/components/cura-icon/cura-icon.definitions.tsx"],"sourcesContent":["export const microIcons = ['arrowDown','arrowLeft','arrowRight','arrowUp','check','checkDouble','close','closeCircle','collapse','down','expand','linkExternal','link','left','minus','minusCircle','minusSquare','order','subItem','right','plus','plusCircle','plusSquare','up','filter','swap'];\n\nexport const iconSizes = {\n \"128\": {size: 128, stroke: 5.25},\n \"72\": {size: 72, stroke: 3.5},\n \"64\": {size: 64, stroke: 3.25},\n \"48\": {size: 48, stroke: 2.75},\n \"40\": {size: 40, stroke: 2.5},\n \"32\": {size: 32, stroke: 2.25},\n \"24\": {size: 24, stroke: 2},\n \"20\": {size: 20, stroke: 1.75},\n \"16\": {size: 16, stroke: 1.5},\n \"micro\": {size: 12, stroke: 1.5 },\n \"default\": {size: 24, stroke: 2}\n};\n"],"mappings":"2EAAaA,EAAUC,EAAA,IAAG,CAAC,YAAY,YAAY,aAAa,UAAU,QAAQ,cAAc,QAAQ,cAAc,WAAW,OAAO,SAAS,eAAe,OAAO,OAAO,QAAQ,cAAc,cAAc,QAAQ,UAAU,QAAQ,OAAO,aAAa,aAAa,KAAK,SAAS,S,IAE9QC,EAASD,EAAA,IAAG,CACvB,IAAO,CAACE,KAAM,IAAKC,OAAQ,MAC3B,GAAM,CAACD,KAAM,GAAIC,OAAQ,KACzB,GAAM,CAACD,KAAM,GAAIC,OAAQ,MACzB,GAAM,CAACD,KAAM,GAAIC,OAAQ,MACzB,GAAM,CAACD,KAAM,GAAIC,OAAQ,KACzB,GAAM,CAACD,KAAM,GAAIC,OAAQ,MACzB,GAAM,CAACD,KAAM,GAAIC,OAAQ,GACzB,GAAM,CAACD,KAAM,GAAIC,OAAQ,MACzB,GAAM,CAACD,KAAM,GAAIC,OAAQ,KACzBC,MAAS,CAACF,KAAM,GAAIC,OAAQ,KAC5BE,QAAW,CAACH,KAAM,GAAIC,OAAQ,I"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["./p-36a83bc7.system.js","./p-a32889a4.system.js"],(function(e){"use strict";var i,a,n,r,l;return{setters:[function(e){i=e.r;a=e.h;n=e.H},function(e){r=e.i;l=e.m}],execute:function(){var t=["360","accessibility","addUser","airdrop","alertCircle","alertTriangle","arrowDown","arrowDownCircle","arrowLeft","arrowLeftCircle","arrowRight","arrowRightCircle","arrowUp","arrowUpCircle","attach","avatarF","avatarM","biometry","bloodGroup","calendar","cam","camOff","central","chatCircle","check","checkBadge","checkCircle","checkDouble","clock","close","closeCircle","collapse","config","currency","delete","desktop","doc","down","download","duplicate","edit","exam","examDoc","expand","facebook","fileBmp","fileJpg","filePdf","filePng","fileUpload","fileXls","filter","fullscreen","gallery","geotag","geotagUnity","geotagUnityGroup","google","graph","healthPlan","heart","height","height2","home","horizontalList","imageUp","infoCircle","instagram","key","lamp","language","language2","languageEN","languagePT","lattes","left","like","link","linkExternal","linkedin","list","login","logout","mail","maintenance","medDoc","medEspec","medImg","medUser","medical","menuHamburguer","menuKebab","menuMeatballs","mic","micOff","minus","minusCircle","minusSquare","mobile","news","notification","npsDeslike","npsHate","npsLike","npsLove","npsNeutral","order","partner","phone","play","plus","plusCircle","plusSquare","print","profile","profileCircle","questionCircle","questionSquare","range","reload","ribbon","right","schedule","scheduleCheck","scheduleHistorico","search","secure","share","siren","sound","soundOff","subItem","swap","target","team","telegram","twitter","unLink","unSecure","unity","unlike","up","upload","verticalList","viewFalse","viewTrue","weight","whatsapp","wifi","wifiOff","youtube","zoomIn","zoomOut"];var s=':host{display:block;padding:24px;font-family:"Roboto", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;-ms-flex-align:center;align-items:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px;margin:8px 0}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#2d2d2d;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;width:105px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;-ms-flex-align:center;align-items:center;margin-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;}.icons .icon cura-label{margin-top:8px}.icons .icon cura-paragraph{margin-top:4px}';var c=e("cura_icons_view",function(){function e(e){var a=this;i(this,e);this.sizes=Object.keys(r).filter((function(e){return e!=="default"}));this.colors=["primary","secondary","accent","info","warning","error","success","neutral"];this.setSelected=function(e){a.selected=e};this.selected=t[0]}e.prototype.connectedCallback=function(){this.sizes.unshift(this.sizes.pop())};e.prototype.render=function(){var e=this;return a(n,null,a("div",{class:"iconDetail"},a("cura-heading",{size:"small","margin-block":"0 24px"},"Icon: ",a("b",null,this.selected)),a("div",{class:"iconSizes"},this.sizes.map((function(i){return i==="micro"&&!l.includes(e.selected)?"":a("div",{class:"size"},a("cura-icon",{name:e.selected,size:i}),a("span",null,i))}))),a("div",{class:"iconSizes invert"},this.sizes.map((function(i){return i==="micro"&&!l.includes(e.selected)?"":a("div",{class:"size"},a("cura-icon",{name:e.selected,size:i,color:"neutral-white"}),a("span",null,i))})))),a("div",{class:"icons"},t.map((function(i){return a("div",{class:{icon:true,selected:i===e.selected},onClick:function(){return e.setSelected(i)}},a("cura-icon",{name:i,size:"32",color:i===e.selected?"accent-dark":"neutral-dark"}),a("cura-label",{size:"xsmall",weight:i===e.selected?"bold":"regular",color:i===e.selected?"accent-dark":"neutral-dark"},i),!l.includes(i)?"":a("cura-paragraph",{color:"success-dark",size:"xsmall","margin-block":"0px","line-height":"100%"},"MICRO"))}))))};return e}());c.style=s}}}));
|
|
2
|
+
//# sourceMappingURL=p-ab8c9a8f.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["iconsetdefaulticons","curaIconsViewCss","CuraIconsView","exports","this","sizes","Object","keys","iconSizes","filter","key","colors","setSelected","icon","_this","selected","class_1","prototype","connectedCallback","unshift","pop","render","h","Host","class","size","map","microIcons","includes","name","color","onClick","weight"],"sources":["src/assets/icons/iconset-default-list.ts","src/components/cura-icons-view/cura-icons-view.scss?tag=cura-icons-view&encapsulation=shadow","src/components/cura-icons-view/cura-icons-view.tsx"],"sourcesContent":["export default [\"360\",\"accessibility\",\"addUser\",\"airdrop\",\"alertCircle\",\"alertTriangle\",\"arrowDown\",\"arrowDownCircle\",\"arrowLeft\",\"arrowLeftCircle\",\"arrowRight\",\"arrowRightCircle\",\"arrowUp\",\"arrowUpCircle\",\"attach\",\"avatarF\",\"avatarM\",\"biometry\",\"bloodGroup\",\"calendar\",\"cam\",\"camOff\",\"central\",\"chatCircle\",\"check\",\"checkBadge\",\"checkCircle\",\"checkDouble\",\"clock\",\"close\",\"closeCircle\",\"collapse\",\"config\",\"currency\",\"delete\",\"desktop\",\"doc\",\"down\",\"download\",\"duplicate\",\"edit\",\"exam\",\"examDoc\",\"expand\",\"facebook\",\"fileBmp\",\"fileJpg\",\"filePdf\",\"filePng\",\"fileUpload\",\"fileXls\",\"filter\",\"fullscreen\",\"gallery\",\"geotag\",\"geotagUnity\",\"geotagUnityGroup\",\"google\",\"graph\",\"healthPlan\",\"heart\",\"height\",\"height2\",\"home\",\"horizontalList\",\"imageUp\",\"infoCircle\",\"instagram\",\"key\",\"lamp\",\"language\",\"language2\",\"languageEN\",\"languagePT\",\"lattes\",\"left\",\"like\",\"link\",\"linkExternal\",\"linkedin\",\"list\",\"login\",\"logout\",\"mail\",\"maintenance\",\"medDoc\",\"medEspec\",\"medImg\",\"medUser\",\"medical\",\"menuHamburguer\",\"menuKebab\",\"menuMeatballs\",\"mic\",\"micOff\",\"minus\",\"minusCircle\",\"minusSquare\",\"mobile\",\"news\",\"notification\",\"npsDeslike\",\"npsHate\",\"npsLike\",\"npsLove\",\"npsNeutral\",\"order\",\"partner\",\"phone\",\"play\",\"plus\",\"plusCircle\",\"plusSquare\",\"print\",\"profile\",\"profileCircle\",\"questionCircle\",\"questionSquare\",\"range\",\"reload\",\"ribbon\",\"right\",\"schedule\",\"scheduleCheck\",\"scheduleHistorico\",\"search\",\"secure\",\"share\",\"siren\",\"sound\",\"soundOff\",\"subItem\",\"swap\",\"target\",\"team\",\"telegram\",\"twitter\",\"unLink\",\"unSecure\",\"unity\",\"unlike\",\"up\",\"upload\",\"verticalList\",\"viewFalse\",\"viewTrue\",\"weight\",\"whatsapp\",\"wifi\",\"wifiOff\",\"youtube\",\"zoomIn\",\"zoomOut\"];",":host {\n display: block;\n padding: 24px;\n font-family: 'Roboto', Arial, Helvetica, sans-serif;\n}\n\n.iconDetail {\n display: block;\n}\n\n.iconSizes {\n display: flex;\n align-items: center;\n\n\n .size {\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n margin-right: 9px;\n padding: 8px;\n\n &:last-child { margin-right: 0; }\n span {\n font-size: 10px;\n margin: 8px 0;\n }\n }\n\n &.invert {\n margin-top: 12px;\n\n .size {\n background-color: #2d2d2d;\n color: #F6F6F6;\n border-radius: 3px;\n }\n }\n}\n\n.icons {\n margin-top: 28px;\n display: flex;\n flex-wrap: wrap;\n position: relative;\n\n .icon {\n position: relative;\n padding: 4px;\n cursor: pointer;\n opacity: .6;\n transition: opacity .2s linear;\n width: 105px;\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n margin-bottom: 16px;\n box-sizing: border-box;\n cura-label {\n margin-top: 8px;\n }\n cura-paragraph {\n margin-top: 4px;\n }\n /* &.selected {\n transform: scale(1.2);\n } */\n }\n}\n\n","import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n tag: 'cura-icons-view',\n styleUrl: 'cura-icons-view.scss',\n shadow: true,\n})\nexport class CuraIconsView {\n\n sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n @State() selected = iconsetdefaulticons[0];\n\n connectedCallback() {\n this.sizes.unshift(this.sizes.pop());\n }\n\n setSelected = (icon) => {\n this.selected = icon;\n }\n\n render() {\n return (\n <Host>\n <div class=\"iconDetail\">\n <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n <div class=\"iconSizes\">\n { this.sizes.map( size =>\n size === 'micro' && !microIcons.includes(this.selected) ? '' :\n <div class=\"size\">\n <cura-icon name={this.selected} size={size}></cura-icon>\n <span>{ size }</span>\n </div>\n )}\n </div>\n <div class=\"iconSizes invert\">\n { this.sizes.map( size =>\n size === 'micro' && !microIcons.includes(this.selected) ? '' :\n <div class=\"size\">\n <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n <span>{ size }</span>\n </div>\n )}\n </div>\n </div>\n <div class=\"icons\">\n { iconsetdefaulticons.map(icon =>\n <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n <cura-icon\n name={icon}\n size=\"32\"\n color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n <cura-label\n size=\"xsmall\"\n weight={icon === this.selected ? 'bold' : 'regular'}\n color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n { !microIcons.includes(icon) ? '' :\n <cura-paragraph\n color='success-dark'\n size=\"xsmall\"\n margin-block=\"0px\"\n line-height='100%'>MICRO</cura-paragraph>\n }\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as e,H as s,g as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as e,H as s,g as i}from"./p-ba66d7be.js";const o=":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}:host p.bold-weight,:host p ::slotted(b),:host p ::slotted(strong),:host p ::slotted(u){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";const h=class{constructor(e){t(this,e);this.theme=window.CuraAPI.theme;this.size="medium";this.weight="regular";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="0";this.lineHeight="125%";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.setFontProperties();this.setColors()}getClasses(){const t={};t[this.size.toLowerCase()]=true;t[`${this.weight.toLowerCase()}-weight`]=true;return t}setFontProperties(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":this.theme.fonts.getFamily("body"),"--font-weight-medium":this.weights.medium,"--font-weight-bold":this.weights.bold}}setColors(){const t=this.color?this.theme.colors.getColor(this.color):this.theme.fonts.getColor();this.styles=Object.assign(Object.assign({},this.styles),{"--color-body":t||this.theme.colors.getColor("neutral-darker"),"--color-link":this.theme.colors.getColor(`${this.spotColor}`)})}hostCSSProperties(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}}render(){return e(s,{style:this.hostCSSProperties()},e("p",{style:this.styles,class:this.getClasses()},e("slot",null)))}get host(){return i(this)}static get watchers(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}}};h.style=o;export{h as cura_label};
|
|
2
|
+
//# sourceMappingURL=p-ad194144.entry.js.map
|