@rededor/cura 1.3.0 → 1.4.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/cura-accordion_12.cjs.entry.js +9 -9
- package/dist/cjs/cura-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/cura-display.cjs.entry.js +1 -1
- package/dist/cjs/cura-dropdown-search-option-title.cjs.entry.js +1 -1
- package/dist/cjs/cura-dropdown-search-option.cjs.entry.js +2 -2
- package/dist/cjs/cura-dropdown-search.cjs.entry.js +24 -15
- package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-input-date.cjs.entry.js +1 -1
- package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
- package/dist/cjs/cura-modal.cjs.entry.js +50 -0
- package/dist/cjs/cura-modal.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-radio.cjs.entry.js +1 -1
- package/dist/cjs/cura-switch.cjs.entry.js +1 -1
- package/dist/cjs/cura-toast.cjs.entry.js +1 -1
- package/dist/cjs/cura-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/cura.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/cura-modal/cura-modal.css +211 -0
- package/dist/collection/components/cura-modal/cura-modal.js +134 -0
- package/dist/collection/components/cura-modal/cura-modal.js.map +1 -0
- package/dist/collection/components/cura-modal/cura-modal.stories.js +85 -0
- package/dist/collection/components/cura-modal/cura-modal.stories.js.map +1 -0
- package/dist/collection/components/cura-page-template/cura-page-template.js +1 -1
- package/dist/collection/components/cura-toast/cura-toast.js +1 -1
- package/dist/collection/components/cura-tooltip/cura-tooltip.js +1 -1
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +1 -1
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js +2 -2
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js +1 -1
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js +26 -16
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
- package/dist/collection/components/forms/cura-input-date/cura-input-date.js +1 -1
- package/dist/collection/components/forms/cura-label/cura-label.js +1 -1
- package/dist/collection/components/forms/cura-radio/cura-radio.js +1 -1
- package/dist/collection/components/forms/cura-select/cura-select.js +3 -3
- package/dist/collection/components/forms/cura-select-options/cura-select-option.js +1 -1
- package/dist/collection/components/forms/cura-switch/cura-switch.js +1 -1
- package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js +1 -1
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +1 -1
- package/dist/collection/components/text/cura-display/cura-display.js +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
- package/dist/components/cura-checkbox.js +1 -1
- package/dist/components/cura-display.js +1 -1
- package/dist/components/cura-dropdown-search-option-title.js +1 -1
- package/dist/components/cura-dropdown-search-option.js +2 -2
- package/dist/components/cura-dropdown-search.js +26 -16
- package/dist/components/cura-dropdown-search.js.map +1 -1
- package/dist/components/cura-heading2.js +1 -1
- package/dist/components/cura-input-date.js +1 -1
- package/dist/components/cura-label2.js +1 -1
- package/dist/components/cura-loader-bar2.js +1 -1
- package/dist/components/cura-loader-circle2.js +1 -1
- package/dist/components/cura-modal.d.ts +11 -0
- package/dist/components/cura-modal.js +84 -0
- package/dist/components/cura-modal.js.map +1 -0
- package/dist/components/cura-page-template.js +1 -1
- package/dist/components/cura-paragraph2.js +1 -1
- package/dist/components/cura-radio.js +1 -1
- package/dist/components/cura-select-option2.js +1 -1
- package/dist/components/cura-select2.js +3 -3
- package/dist/components/cura-switch.js +1 -1
- package/dist/components/cura-toast.js +1 -1
- package/dist/components/cura-tooltip.js +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/cura.esm.js.map +1 -1
- package/dist/cura/{p-022b22b6.entry.js → p-075b02de.entry.js} +2 -2
- package/dist/cura/{p-df851816.entry.js → p-0e28f1c8.entry.js} +2 -2
- package/dist/cura/{p-c444e692.entry.js → p-1f53580a.entry.js} +2 -2
- package/dist/cura/{p-2b9eadc7.entry.js → p-3536c96b.entry.js} +2 -2
- package/dist/cura/{p-93525d68.entry.js → p-71a2dcef.entry.js} +2 -2
- package/dist/cura/p-9a7e3f48.entry.js +2 -0
- package/dist/cura/p-9a7e3f48.entry.js.map +1 -0
- package/dist/cura/{p-e3d3bc3d.entry.js → p-dbd9eab3.entry.js} +2 -2
- package/dist/cura/p-deadde8d.entry.js +2 -0
- package/dist/cura/p-deadde8d.entry.js.map +1 -0
- package/dist/cura/{p-b883e098.entry.js → p-e5b0dd74.entry.js} +2 -2
- package/dist/cura/p-ebed83d1.entry.js +2 -0
- package/dist/cura/{p-639c1b67.entry.js → p-ed839f1e.entry.js} +2 -2
- package/dist/cura/{p-2c0f5497.entry.js → p-eea093b2.entry.js} +2 -2
- package/dist/cura/{p-9e3d26fe.entry.js → p-f375a612.entry.js} +2 -2
- package/dist/esm/cura-accordion_12.entry.js +9 -9
- package/dist/esm/cura-checkbox.entry.js +1 -1
- package/dist/esm/cura-display.entry.js +1 -1
- package/dist/esm/cura-dropdown-search-option-title.entry.js +1 -1
- package/dist/esm/cura-dropdown-search-option.entry.js +2 -2
- package/dist/esm/cura-dropdown-search.entry.js +24 -15
- package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
- package/dist/esm/cura-input-date.entry.js +1 -1
- package/dist/esm/cura-loader-bar.entry.js +1 -1
- package/dist/esm/cura-modal.entry.js +46 -0
- package/dist/esm/cura-modal.entry.js.map +1 -0
- package/dist/esm/cura-radio.entry.js +1 -1
- package/dist/esm/cura-switch.entry.js +1 -1
- package/dist/esm/cura-toast.entry.js +1 -1
- package/dist/esm/cura-tooltip.entry.js +1 -1
- package/dist/esm/cura.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cura-modal/cura-modal.d.ts +28 -0
- package/dist/types/components/cura-modal/cura-modal.stories.d.ts +70 -0
- package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search.d.ts +8 -0
- package/dist/types/components.d.ts +56 -0
- package/package.json +2 -2
- package/dist/cura/p-22e921d9.entry.js +0 -2
- package/dist/cura/p-22e921d9.entry.js.map +0 -1
- package/dist/cura/p-9991f7db.entry.js +0 -2
- /package/dist/cura/{p-022b22b6.entry.js.map → p-075b02de.entry.js.map} +0 -0
- /package/dist/cura/{p-df851816.entry.js.map → p-0e28f1c8.entry.js.map} +0 -0
- /package/dist/cura/{p-c444e692.entry.js.map → p-1f53580a.entry.js.map} +0 -0
- /package/dist/cura/{p-2b9eadc7.entry.js.map → p-3536c96b.entry.js.map} +0 -0
- /package/dist/cura/{p-93525d68.entry.js.map → p-71a2dcef.entry.js.map} +0 -0
- /package/dist/cura/{p-e3d3bc3d.entry.js.map → p-dbd9eab3.entry.js.map} +0 -0
- /package/dist/cura/{p-b883e098.entry.js.map → p-e5b0dd74.entry.js.map} +0 -0
- /package/dist/cura/{p-9991f7db.entry.js.map → p-ebed83d1.entry.js.map} +0 -0
- /package/dist/cura/{p-639c1b67.entry.js.map → p-ed839f1e.entry.js.map} +0 -0
- /package/dist/cura/{p-2c0f5497.entry.js.map → p-eea093b2.entry.js.map} +0 -0
- /package/dist/cura/{p-9e3d26fe.entry.js.map → p-f375a612.entry.js.map} +0 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,c as e,h as o,H as i}from"./p-fd5ed6b0.js";const s=":host{display:block}.modal{position:fixed;height:100%;width:100%;top:0px;bottom:0px;z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:100}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:90;animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);width:700px;max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:100;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";const t=s;const c=class{constructor(o){a(this,o);this.modalClose=e(this,"modalClose",7);this.handleClose=()=>{this.modalClose.emit();this.open=false};this.open=false;this.background="light";this.topOffset=0;this.styles={}}setColors(){const a={dark:window.CuraAPI.theme.colors.getColor("neutral-black",.4),light:window.CuraAPI.theme.colors.getColor("primary-darker",.8)};this.styles=Object.assign(Object.assign({},this.styles),{"--background-color":a[this.background]})}setOffsetTop(){this.styles=Object.assign(Object.assign({},this.styles),{"--offset-top":`${this.topOffset}px`})}connectedCallback(){this.styles=Object.assign(Object.assign({},this.styles),{"--neutral-white":window.CuraAPI.theme.colors.getColor("neutral-white"),"--neutral-light":window.CuraAPI.theme.colors.getColor("neutral-light"),"--base-spacing":window.CuraAPI.theme.spacing.getSpacing()});this.setColors();this.setOffsetTop()}render(){return o(i,{key:"002525d3ad03f3271b11b0dacfd748ccfbfbaf1c",role:"dialog","aria-modal":"true"},o("div",{key:"a684163919124acc33469b38cffeb6826dd2dd8d",class:this.open?"modal container open":"modal container",style:this.styles},o("div",{key:"bff07303351e5f7a75870b9c0f2b4a16736110bc",class:this.open?"modal backdrop open":"modal backdrop",onClick:this.handleClose}),o("div",{key:"4e8ac2fd00c10abf24060c644bbdcd6a5275bacb",class:"wrapper"},o("button",{key:"6a0ab79a39181216882559f115107edf1c20a2c7",class:"close desktop",onClick:this.handleClose},o("cura-icon",{key:"3be3e5ee04fc5caa8786efaac0e03c946d0bdd14",name:"close",color:"error-dark",size:"small"})),o("slot",{key:"90fbd8951a449d41e2409ba10445a61e296c45e5"}),o("button",{key:"3075523254d90f7f7f4ca75f28a5724b2402f7d5",class:"close mobile",onClick:this.handleClose},o("cura-icon",{key:"9bfd171b87d0f1ff625b17f043ff90fa9dbad6e7",name:"close",color:"error-dark",size:"16"}),o("cura-paragraph",{key:"c17191a5570c08400cfb1409fa1ebf3f0e03a270",color:"error-dark",size:"small",marginBlock:"0"},"Fechar")))))}static get watchers(){return{background:["setColors"],topOffset:["setOffsetTop"]}}};c.style=t;export{c as cura_modal};
|
|
2
|
+
//# sourceMappingURL=p-9a7e3f48.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["curaModalCss","CuraModalStyle0","CuraModal","this","handleClose","modalClose","emit","open","setColors","backgroundTheme","dark","window","CuraAPI","theme","colors","getColor","light","styles","Object","assign","background","setOffsetTop","topOffset","connectedCallback","spacing","getSpacing","render","h","Host","key","role","class","style","onClick","name","color","size","marginBlock"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n display: block;\n}\n\n.modal {\n position: fixed;\n height: 100%;\n width: 100%;\n top: #{$spacing-none};\n bottom: #{$spacing-none};\n z-index: -1;\n margin-top: var(--offset-top);\n\n &.open {\n z-index: 100;\n\n .backdrop,\n .wrapper {\n opacity: 1;\n visibility: visible;\n animation: fadeIn 0.3s ease-out;\n }\n }\n}\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n background-color: var(--background-color);\n z-index: 90;\n animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n position: fixed;\n background-color: var(--neutral-white);\n border: 2px solid var(--neutral-light);\n border-radius: #{$spacing-xxxs};\n width: 700px;\n max-width: 600px;\n min-width: 200px;\n padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n z-index: 100;\n\n @include shadow-level4();\n\n transform: scale(0.95);\n transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n ::slotted(*) {\n max-height: 80vh;\n overflow: auto;\n padding-right: #{$spacing-xs};\n }\n}\n\n.modal.open .wrapper {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n.close {\n justify-self: flex-end;\n padding-top: #{$spacing-xxs};\n background: none;\n border: none;\n cursor: pointer;\n\n &.mobile {\n display: none;\n }\n\n &.desktop {\n display: flex;\n }\n}\n\n@include mobile-only() {\n .wrapper {\n position: fixed;\n bottom: #{$spacing-none};\n width: 80%;\n padding-top: #{$spacing-xxs};\n padding-bottom: #{$spacing-none};\n border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n border-bottom: none;\n }\n\n .close {\n align-items: center;\n border-top: 1px dashed var(--neutral-light);\n margin-top: #{$spacing-xxs};\n padding: #{$spacing-xxs} #{$spacing-none};\n justify-content: center;\n width: 100%;\n\n &.mobile {\n display: flex;\n gap: #{$spacing-mini};\n }\n\n &.desktop {\n display: none;\n }\n }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-modal',\n styleUrl: 'cura-modal.scss',\n shadow: true,\n})\nexport class CuraModal {\n /**\n * Property open to control modal visibility.\n * Default: false\n */\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /**\n * Property background to control modal backdrop color.\n * Default: light\n */\n @Prop() background?: 'dark' | 'light' = 'light';\n /**\n * Property offsetTop to control modal top position.\n * Default: 0px\n */\n @Prop() topOffset?: number = 0;\n /**\n * Event close to handle modal close.\n */\n @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n @State() styles = {};\n\n @Watch('background')\n setColors() {\n const backgroundTheme = {\n dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n };\n\n this.styles = {\n ...this.styles,\n '--background-color': backgroundTheme[this.background],\n };\n }\n\n @Watch('topOffset')\n setOffsetTop() {\n this.styles = {\n ...this.styles,\n '--offset-top': `${this.topOffset}px`,\n };\n }\n\n connectedCallback() {\n this.styles = {\n ...this.styles,\n '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n };\n this.setColors();\n this.setOffsetTop();\n }\n\n private handleClose = () => {\n this.modalClose.emit();\n this.open = false;\n };\n\n render() {\n return (\n <Host role=\"dialog\" aria-modal=\"true\">\n <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n <div class=\"wrapper\">\n {/* Desktop button */}\n <button class=\"close desktop\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n </button>\n <slot></slot>\n {/* Mobile button */}\n <button class=\"close mobile\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n Fechar\n </cura-paragraph>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,m6DACrB,MAAAC,EAAeD,E,MCMFE,EAAS,M,gEAuDZC,KAAAC,YAAc,KACpBD,KAAKE,WAAWC,OAChBH,KAAKI,KAAO,KAAK,E,UApDsC,M,gBAKjB,Q,eAKX,E,YAMX,E,CAGlB,SAAAC,GACE,MAAMC,EAAkB,CACtBC,KAAMC,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,gBAAiB,IAC5DC,MAAOL,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBAAkB,KAGhEZ,KAAKc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNhB,KAAKc,QAAM,CACd,qBAAsBR,EAAgBN,KAAKiB,a,CAK/C,YAAAC,GACElB,KAAKc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNhB,KAAKc,QAAM,CACd,eAAgB,GAAGd,KAAKmB,e,CAI5B,iBAAAC,GACEpB,KAAKc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNhB,KAAKc,QAAM,CACd,kBAAmBN,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBACxD,kBAAmBJ,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBACxD,iBAAkBJ,OAAOC,QAAQC,MAAMW,QAAQC,eAEjDtB,KAAKK,YACLL,KAAKkB,c,CAQP,MAAAK,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAY,QAC7BH,EAAA,OAAAE,IAAA,2CAAKE,MAAO5B,KAAKI,KAAO,uBAAyB,kBAAmByB,MAAO7B,KAAKc,QAC9EU,EAAA,OAAAE,IAAA,2CAAKE,MAAO5B,KAAKI,KAAO,sBAAwB,iBAAkB0B,QAAS9B,KAAKC,cAChFuB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,WAETJ,EAAA,UAAAE,IAAA,2CAAQE,MAAM,gBAAgBE,QAAS9B,KAAKC,aAC1CuB,EAAA,aAAAE,IAAA,2CAAWK,KAAK,QAAQC,MAAM,aAAaC,KAAK,WAElDT,EAAA,QAAAE,IAAA,6CAEAF,EAAA,UAAAE,IAAA,2CAAQE,MAAM,eAAeE,QAAS9B,KAAKC,aACzCuB,EAAA,aAAAE,IAAA,2CAAWK,KAAK,QAAQC,MAAM,aAAaC,KAAK,OAChDT,EAAA,kBAAAE,IAAA,2CAAgBM,MAAM,aAAaC,KAAK,QAAQC,YAAY,KAAG,a","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as r,h as a,H as s,g as t}from"./p-fd5ed6b0.js";import{f as c}from"./p-f9b8f665.js";const o='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}';const i=o;const n=class{constructor(a){e(this,a);this.onchange=r(this,"onchange",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.isDarkBackground=()=>this.background==="dark";this.isDarkIconColor=()=>this.iconColor==="dark";this.handleClick=()=>{if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.internals.setFormValue(this.value);this.onchange.emit({value:this.value,checked:this.checked,indeterminate:this.indeterminate})};this.checked=false;this.indeterminate=false;this.status="default";this.disabled=false;this.required=false;this.label=undefined;this.ontabindex=0;this.position="left";this.value=undefined;this.name=undefined;this.size="medium";this.background="light";this.iconColor="dark";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size":`${c[this.size].size}px`,"--gap":`${c[this.size].gap}px`})}setColors(){const e=[{name:"--color-base",background:`${this.color}-base`},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--info-base",background:"info-base"},{name:"--error-base",background:"error-base"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--success-dark",background:"success-dark"},{name:"--error-lighter",background:"error-lighter"},{name:"--neutral-black",background:"neutral-black"},{name:"--primary-base-neutral-white",background:this.isDarkBackground()?"primary-base":"neutral-white"},{name:"--neutral-base-neutral-medium",background:this.isDarkBackground()?"neutral-base":"neutral-medium"},{name:"--neutral-black-neutral-purewhite",background:this.isDarkBackground()?"neutral-black":"neutral-purewhite"},{name:"--neutral-black-neutral-white",background:this.isDarkBackground()?"neutral-black":"neutral-white"},{name:"--neutral-darker-neutral-base",background:this.isDarkBackground()?"neutral-darker":"neutral-base"},{name:"--neutral-base-neutral-base",background:this.isDarkBackground()?"primary-base":"neutral-base"},{name:"--neutral-purewhite-neutral-dark",background:this.isDarkBackground()?"neutral-purewhite":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkBackground()?"primary-base":"neutral-medium"},{name:"--success-base-lighter",background:this.isDarkBackground()?"success-base":"success-lighter"},{name:"--success-dark-base",background:this.isDarkBackground()?"success-dark":"success-base"},{name:"--error-base-lighter",background:this.isDarkBackground()?"error-base":"error-lighter"},{name:"--error-dark-base",background:this.isDarkBackground()?"error-dark":"error-base"}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}formAssociatedCallback(e){e.ariaLabel=this.label}formStateRestoreCallback(e){this.value=e.value;this.checked=e.checked;this.indeterminate=e.indeterminate;this.internals.setFormValue(this.value)}formResetCallback(){this.value="";this.checked=false;this.indeterminate=false;this.internals.setValidity({});this.internals.setFormValue(this.value)}formDisabledCallback(e){this.disabled=e}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e[this.background]=true;e["indeterminate"]=this.indeterminate;e["position"]=this.position==="right";e[this.status]=true;return e}assignColor(e){if(this.disabled)return this.isDarkBackground()?"neutral-dark":"neutral-dark";const r={success:{icon:"success-dark",label:this.isDarkBackground()?"success-lighter":"success-darker",message:this.isDarkBackground()?"success-base":"success-dark"},error:{icon:"error-dark",label:this.isDarkBackground()?"error-lighter":"neutral-darker",message:this.isDarkBackground()?"error-base":"error-dark"},default:{icon:this.isDarkIconColor()?"neutral-black":"neutral-purewhite",label:this.isDarkBackground()?"neutral-white":"neutral-black",message:this.isDarkBackground()?"primary-lighter":"neutral-dark"}};return r[this.status][e]}getIcon(){const e=this.indeterminate?"minus":"check";const r=this.assignColor("icon");const s=this.size==="large"?20:"micro";return a("cura-icon",{class:"icon",name:e,size:s,color:r})}render(){return a(s,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as r,h as a,H as s,g as t}from"./p-fd5ed6b0.js";import{f as c}from"./p-f9b8f665.js";const o='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}';const i=o;const n=class{constructor(a){e(this,a);this.onchange=r(this,"onchange",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.isDarkBackground=()=>this.background==="dark";this.isDarkIconColor=()=>this.iconColor==="dark";this.handleClick=()=>{if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.internals.setFormValue(this.value);this.onchange.emit({value:this.value,checked:this.checked,indeterminate:this.indeterminate})};this.checked=false;this.indeterminate=false;this.status="default";this.disabled=false;this.required=false;this.label=undefined;this.ontabindex=0;this.position="left";this.value=undefined;this.name=undefined;this.size="medium";this.background="light";this.iconColor="dark";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size":`${c[this.size].size}px`,"--gap":`${c[this.size].gap}px`})}setColors(){const e=[{name:"--color-base",background:`${this.color}-base`},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--info-base",background:"info-base"},{name:"--error-base",background:"error-base"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--success-dark",background:"success-dark"},{name:"--error-lighter",background:"error-lighter"},{name:"--neutral-black",background:"neutral-black"},{name:"--primary-base-neutral-white",background:this.isDarkBackground()?"primary-base":"neutral-white"},{name:"--neutral-base-neutral-medium",background:this.isDarkBackground()?"neutral-base":"neutral-medium"},{name:"--neutral-black-neutral-purewhite",background:this.isDarkBackground()?"neutral-black":"neutral-purewhite"},{name:"--neutral-black-neutral-white",background:this.isDarkBackground()?"neutral-black":"neutral-white"},{name:"--neutral-darker-neutral-base",background:this.isDarkBackground()?"neutral-darker":"neutral-base"},{name:"--neutral-base-neutral-base",background:this.isDarkBackground()?"primary-base":"neutral-base"},{name:"--neutral-purewhite-neutral-dark",background:this.isDarkBackground()?"neutral-purewhite":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkBackground()?"primary-base":"neutral-medium"},{name:"--success-base-lighter",background:this.isDarkBackground()?"success-base":"success-lighter"},{name:"--success-dark-base",background:this.isDarkBackground()?"success-dark":"success-base"},{name:"--error-base-lighter",background:this.isDarkBackground()?"error-base":"error-lighter"},{name:"--error-dark-base",background:this.isDarkBackground()?"error-dark":"error-base"}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}formAssociatedCallback(e){e.ariaLabel=this.label}formStateRestoreCallback(e){this.value=e.value;this.checked=e.checked;this.indeterminate=e.indeterminate;this.internals.setFormValue(this.value)}formResetCallback(){this.value="";this.checked=false;this.indeterminate=false;this.internals.setValidity({});this.internals.setFormValue(this.value)}formDisabledCallback(e){this.disabled=e}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e[this.background]=true;e["indeterminate"]=this.indeterminate;e["position"]=this.position==="right";e[this.status]=true;return e}assignColor(e){if(this.disabled)return this.isDarkBackground()?"neutral-dark":"neutral-dark";const r={success:{icon:"success-dark",label:this.isDarkBackground()?"success-lighter":"success-darker",message:this.isDarkBackground()?"success-base":"success-dark"},error:{icon:"error-dark",label:this.isDarkBackground()?"error-lighter":"neutral-darker",message:this.isDarkBackground()?"error-base":"error-dark"},default:{icon:this.isDarkIconColor()?"neutral-black":"neutral-purewhite",label:this.isDarkBackground()?"neutral-white":"neutral-black",message:this.isDarkBackground()?"primary-lighter":"neutral-dark"}};return r[this.status][e]}getIcon(){const e=this.indeterminate?"minus":"check";const r=this.assignColor("icon");const s=this.size==="large"?20:"micro";return a("cura-icon",{class:"icon",name:e,size:s,color:r})}render(){return a(s,{key:"876fa0a7aa0fc7110cbf0ffeb2d95d529fa78e64"},a("div",{key:"3e6d730765590ee75d7e045cadc7d03e5fc035e2",class:this.getClasses(),style:this.styles,onClick:this.handleClick},a("div",{key:"0f7f6f3bc61a80e899d940d76fee266af1914f5a",class:"info"},a("div",{key:"a836cb0d7751a1a812364fe93a30403b02ec5c95",class:"label-wrapper"},a("cura-label",{key:"5d180552ec71e22ddd8822727bd32d4167215f33",class:"label",weight:"bold",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{key:"047413aa21a28bc33984d19ad4dc10a38289c205",lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{key:"68c9dd6f228ec3204647795f1cae32a8f8797bc2",color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",{key:"3a35a1219f135002f1b9ae64c0eb4227529bc904"}))),a("div",{key:"fe969ee332b3c64a259ec552f411b5d2d4bc81e4",class:"checkbox",tabIndex:this.ontabindex},a("input",{key:"2cbcbe56130bddb5853cfcc3a8ef1b421f39bc7b",type:"checkbox",name:this.name,value:this.value,disabled:this.disabled,required:this.required,checked:this.checked,indeterminate:this.indeterminate}),this.getIcon())))}static get formAssociated(){return true}get host(){return t(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}}};n.style=i;export{n as cura_checkbox};
|
|
2
|
+
//# sourceMappingURL=p-dbd9eab3.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as o,H as e,g as s}from"./p-fd5ed6b0.js";const r=":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:1%;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:calc(100vh - var(--dynamic-input-search-height, 0));max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";const d=r;const n=class{constructor(o){t(this,o);this.valueChanged=i(this,"valueChanged",7);this.onselect=i(this,"onselect",7);this.overlayElement=null;this.adjustInputPosition=()=>{window.visualViewport.addEventListener("resize",(()=>{var t;const i=window.innerHeight<window.screen.height*.8;const o=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".dropdown-mobile");if(o){o.style.position=i?"absolute":"fixed";o.style.bottom=i?`${window.screen.height-window.innerHeight}px`:"0";window.scroll({top:0,left:0,behavior:"smooth"})}}))};this.handleSlotChange=()=>{this.options=Array.from(this.host.querySelectorAll("cura-dropdown-search-option"));this.addClickListenersToOptions();this.updateHoveredIndex()};this.handleInputChange=t=>{const i=t.target;this.value=i.value;this.onValueChange(this.value)};this.handleKeyDown=t=>{if(t.key==="ArrowDown"){t.preventDefault();this.moveHighlight(1)}else if(t.key==="ArrowUp"){t.preventDefault();this.moveHighlight(-1)}else if(t.key==="Enter"){t.preventDefault();if(this.hoveredIndex>-1){this.handleOnBlur();this.onSelectedOption(this.hoveredIndex)}}};this.handleResize=()=>{this.isMobile=window.innerWidth<768;if(this.isDropdownOpen){if(this.isMobile){this.showOverlay()}else{this.resetDropdownStyles();this.removeOverlay()}}};this.size="large";this.status="default";this.disabled=false;this.name=undefined;this.required=false;this.selected=false;this.value="";this.placeholder="";this.label="";this.iconName="search";this.dropdownMaxHeight="630px";this.overlayVisible=false;this.isDropdownOpen=false;this.styles={};this.isMobile=window.innerWidth<768;this.mode="default";this.inputTextRef=undefined;this.isOnBlurInput=true;this.hoveredIndex=-1;this.options=[];this.originalOverflow=""}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--info-base"]=window.CuraAPI.theme.colors.getColor("info-base");this.styles["--neutral-purewhite"]=window.CuraAPI.theme.colors.getColor("neutral-purewhite");this.styles["--neutral-light"]=window.CuraAPI.theme.colors.getColor("neutral-light");this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor("neutral-dark");this.styles["--neutral-black-shadow"]=window.CuraAPI.theme.colors.getColor(`neutral-black`,.16);this.styles["--error-dark"]=window.CuraAPI.theme.colors.getColor("error-dark");this.styles["--error-lighter"]=window.CuraAPI.theme.colors.getColor("error-lighter");this.styles["--breakpoints"]=window.CuraAPI.theme.breakpoints.get();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}onValueChange(t){this.updateSelectedOption(t);this.valueChanged.emit(t)}componentWillLoad(){this.updateSelectedOption(this.value)}componentDidRender(){if(this.isDropdownOpen&&this.isMobile){this.showOverlay();this.getDropdownSearchListHeight()}else{this.removeOverlay()}}componentDidLoad(){window.addEventListener("resize",this.handleResize);window.addEventListener("resize",this.adjustInputPosition)}disconnectedCallback(){window.removeEventListener("resize",this.handleResize);window.removeEventListener("resize",this.adjustInputPosition)}showOverlay(){if(!this.overlayElement){this.overlayElement=document.createElement("div");this.overlayElement.className="dropdown-overlay";this.overlayElement.style.position="fixed";this.overlayElement.style.top="0";this.overlayElement.style.left="0";this.overlayElement.style.width="100%";this.overlayElement.style.height="100%";this.overlayElement.style.zIndex="9999";this.overlayElement.style.backgroundColor="white";document.body.appendChild(this.overlayElement);this.originalOverflow=document.body.style.overflow;document.body.style.overflow="hidden"}}removeOverlay(){if(this.overlayElement&&this.overlayElement.parentNode===document.body){document.body.removeChild(this.overlayElement);this.overlayElement=null;document.body.style.overflow=this.originalOverflow}}addClickListenersToOptions(){this.options.forEach(((t,i)=>{t.addEventListener("optionSelected",(()=>this.onSelectedOption(i)))}))}updateSelectedOption(t){const i=this.options.findIndex((i=>i.getAttribute("value")===t));this.hoveredIndex=i;this.updateOptionAttribute("hovered",this.hoveredIndex);this.updateOptionAttribute("selected",this.hoveredIndex);this.scrollIntoView();this.adjustInputPosition()}onSelectedOption(t){const i=this.options[t];if(i.selectable){const t=i.getAttribute("value")||i.textContent;this.value=t||"";this.updateSelectedOption(this.value);this.isDropdownOpen=false;this.isOnBlurInput=true;this.resetDropdownStyles();this.removeOverlay()}}moveHighlight(t){const i=this.options;const o=(this.hoveredIndex+t+i.length)%i.length;this.hoveredIndex=o;this.updateOptionAttribute("hovered",this.hoveredIndex);this.scrollIntoView()}updateOptionAttribute(t,i){this.options.forEach(((o,e)=>{o[t]=e===i}))}updateHoveredIndex(){const t=this.options;const i=this.value;this.hoveredIndex=t.findIndex((t=>t.getAttribute("value")===i))}scrollIntoView(){var t;const i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".dropdown-search-list");const o=this.options[this.hoveredIndex];if(i&&o){const t=o.getBoundingClientRect();const e=i.getBoundingClientRect();if(t.bottom>e.bottom){i.scrollTop+=t.bottom-e.bottom}if(t.top<e.top){i.scrollTop-=e.top-t.top}}}handleOnBlur(){if(this.isOnBlurInput===true){setTimeout((()=>{this.isDropdownOpen=false;this.resetDropdownStyles();this.removeOverlay()}),200)}}getClasses(){return{"dropdown-input-search":true,"dropdown-open":this.isDropdownOpen,disabled:this.disabled,[this.status]:true}}getDropdownClasses(){return{"dropdown-search-list":true,visible:this.options.length&&this.isDropdownOpen?true:false}}hostCSSProperties(){return{"--dropdown-max-height":this.dropdownMaxHeight}}handleOnFocus(){this.isDropdownOpen=true}getDropdownSearchListHeight(){var t;const i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".dropdown-input-search");if(i){this.host.style.setProperty("--dynamic-input-search-height",`${i.offsetHeight}px`)}}handleGoBack(){this.resetDropdownStyles();this.isMobile=false}resetDropdownStyles(){var t;const i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".dropdown-mobile");if(i&&i.style.position==="fixed"){i.style.position="relative";i.style.removeProperty("bottom")}}render(){const t=this.isMobile&&this.isDropdownOpen;return o(e,{key:"21f8601dd62ce272ac6856e6f951268b2fbbf32d",style:this.hostCSSProperties(),class:"dropdown-overlay"},o("div",{key:"a6841c5564454fcc33a4d053cd506c17f53026d3",class:`dropdown ${t?"dropdown-mobile":""}`,style:this.styles},o("div",{key:"3653377bc88d97c60a049731f6286aa5d7fc516c",class:this.getClasses()},this.isMobile&&this.isDropdownOpen&&o("cura-button-transparent",{key:"bd4614e2859df22d74d27532171e73de1cf60979",fontColor:"dark",onClick:()=>this.handleGoBack(),iconName:"arrowLeft",size:"medium",iconOnly:true,color:"primary"}),o("cura-input-text",{key:"811d3745b6963d3aff02d58a39f7f1be472646fa",disabled:this.disabled,label:this.label,part:"cura-input-field",mode:t?"transparent":"default",required:this.required,hideErrorIcon:this.status==="error",iconName:this.iconName||"search",value:this.value,status:this.status,onValueChange:t=>this.onValueChange(t.target.value),onInput:t=>this.handleInputChange(t),onFocus:()=>this.handleOnFocus(),onClick:()=>window.innerWidth<768?this.isMobile=true:null,onBlur:()=>{this.handleOnBlur()},placeholder:this.placeholder,size:this.size,onKeyDown:this.handleKeyDown},o("slot",{key:"a928b64d301c0cd674612698839a213344dc6798",name:"helperText"}))),o("div",{key:"06ba9b411e46969ccf7378869bc37d202084ead0",id:"dropdown-search-list",class:this.getDropdownClasses()},o("slot",{key:"8915959d70f28a28c7b8035e77c34ed1f7035727",name:"dropdown-search-option",onSlotchange:this.handleSlotChange}))))}get host(){return s(this)}static get watchers(){return{value:["onValueChange"]}}};n.style=d;export{n as cura_dropdown_search};
|
|
2
|
+
//# sourceMappingURL=p-deadde8d.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["curaDropdownSearchCss","CuraDropdownSearchStyle0","CuraDropdownSearch","this","overlayElement","adjustInputPosition","window","visualViewport","addEventListener","isKeyboardOpen","innerHeight","screen","height","dropdown","_a","host","shadowRoot","querySelector","style","position","bottom","scroll","top","left","behavior","handleSlotChange","options","Array","from","querySelectorAll","addClickListenersToOptions","updateHoveredIndex","handleInputChange","event","input","target","value","onValueChange","handleKeyDown","key","preventDefault","moveHighlight","hoveredIndex","handleOnBlur","onSelectedOption","handleResize","isMobile","innerWidth","isDropdownOpen","showOverlay","resetDropdownStyles","removeOverlay","connectedCallback","weights","CuraAPI","theme","fonts","getWeights","styles","colors","getColor","breakpoints","get","getSize","getFamily","medium","newValue","updateSelectedOption","valueChanged","emit","componentWillLoad","componentDidRender","getDropdownSearchListHeight","componentDidLoad","disconnectedCallback","removeEventListener","document","createElement","className","width","zIndex","backgroundColor","body","appendChild","originalOverflow","overflow","parentNode","removeChild","forEach","option","index","selectedOptionIndex","findIndex","getAttribute","updateOptionAttribute","scrollIntoView","selectedOption","selectable","selectedValue","textContent","isOnBlurInput","direction","visibleOptions","newIndex","length","attribute","indexToUpdate","currentValue","container","hoveredOption","optionRect","getBoundingClientRect","containerRect","scrollTop","setTimeout","getClasses","disabled","status","getDropdownClasses","visible","hostCSSProperties","dropdownMaxHeight","handleOnFocus","dropdownInputSearchElement","setProperty","offsetHeight","handleGoBack","removeProperty","render","isMobileDropdown","h","Host","class","fontColor","onClick","iconName","size","iconOnly","color","label","part","mode","required","hideErrorIcon","e","onInput","onFocus","onBlur","placeholder","onKeyDown","name","id","onSlotchange"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown {\n display: flex;\n position: relative;\n\n flex-direction: column;\n width: inherit;\n\n .dropdown-search-list {\n z-index: 1000;\n }\n\n &-input-search {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n\n\n &.dropdown-open {\n ::part(cura-input-field) {\n border-radius: 4px 4px 0px 0px;\n }\n ::slotted([slot='helperText']) {\n display: none;\n }\n\n cura-input-text {\n ::slotted([slot='helperText']) {\n display: none;\n }\n }\n }\n }\n\n &-search-list {\n position: absolute;\n top: calc(100% - 8px);\n width: 100%;\n max-height: var(--dropdown-max-height);\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n @include shadow-level3(--neutral-black-shadow);\n border-radius: 0px 0px 4px 4px;\n border-top: 0 var(--neutral-light);\n border-right: 2px solid var(--neutral-light);\n border-bottom: 2px solid var(--neutral-light);\n border-left: 2px solid var(--neutral-light);\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n display: none;\n\n &.visible {\n display: block;\n }\n\n &-input-search {\n width: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 2px solid var(--info-base);\n background-color: var(--neutral-purewhite);\n\n cura-input-text {\n width: inherit;\n }\n\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n }\n }\n\n &-mobile {\n position: fixed;\n top: 1%;\n left: 0;\n right: 0;\n width: 100%;\n\n z-index: 10000;\n .dropdown-input-search {\n display: flex;\n gap: 4px;\n padding: 12px 8px;\n background-color: var(--neutral-purewhite);\n border-bottom: 2px solid var(--info-base);\n z-index: 10000;\n cura-button-transparent {\n display: flex;\n }\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n &.dropdown-open {\n display: flex;\n\n ::slotted([slot='helperText']) {\n display: block;\n }\n }\n }\n .dropdown-search-list {\n position: static;\n width: 100%;\n height: calc(100vh - var(--dynamic-input-search-height, 0));\n max-height: none;\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n box-shadow: none;\n border: none;\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n z-index: 10000;\n }\n }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /**\n * Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n */\n @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Define the status of the dropdown search.\n */\n @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n /**\n * Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the dropdown search component.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Indicates if the dropdown search is required.\n */\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /**\n * Indicates if the dropdown search is selected.\n */\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /**\n * The value of the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * The placeholder text for the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /**\n * The label for the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /**\n * Custom icon name. Default: search.\n */\n @Prop({ reflect: true }) iconName = 'search';\n\n /**\n * CSS max-height property for dropdown item.\n * Default to 630px\n */\n @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n /**\n * Reference to the host element.\n */\n @Element() host: HTMLElement;\n\n /**\n * Indicates if the overlay is visible.\n */\n @State() overlayVisible: boolean = false;\n\n /**\n * Event emitted when the value changes.\n */\n @Event() valueChanged: EventEmitter<string>;\n\n /**\n * Indicates if the dropdown is open.\n */\n @State() isDropdownOpen: boolean = false;\n\n /**\n * Styles for the component.\n\n */\n @State() styles = {};\n\n /**\n * Indicates if the component is being viewed on a mobile device.\n */\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /**\n * The mode of the dropdown search.\n */\n @State() mode: 'default' | 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /**\n * Indicates if the input is on blur.\n */\n @State() isOnBlurInput: boolean = true;\n\n /**\n * The index of the currently hovered option.\n */\n @State() hoveredIndex: number = -1;\n\n /**\n * The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n */\n\n weights;\n\n private overlayElement: HTMLDivElement | null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n /**\n *\n * Stores the original value of the 'overflow' style of the body\n * before blocking the scroll.\n */\n @State() originalOverflow: string = '';\n\n private adjustInputPosition = () => {\n window.visualViewport.addEventListener('resize', () => {\n const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n if (dropdown) {\n dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';\n dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';\n window.scroll({ top: 0, left: 0, behavior: 'smooth' });\n }\n });\n };\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n this.getDropdownSearchListHeight();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n window.addEventListener('resize', this.adjustInputPosition);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n window.removeEventListener('resize', this.adjustInputPosition);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n\n this.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n document.body.style.overflow = this.originalOverflow;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n this.adjustInputPosition();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if (selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n this.value = selectedValue || '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.resetDropdownStyles();\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.resetDropdownStyles();\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.resetDropdownStyles();\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n handleOnFocus() {\n this.isDropdownOpen = true;\n }\n\n getDropdownSearchListHeight() {\n const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n if (dropdownInputSearchElement) {\n this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n }\n }\n\n handleGoBack() {\n this.resetDropdownStyles();\n this.isMobile = false;\n }\n\n resetDropdownStyles() {\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n if (dropdown && dropdown.style.position === 'fixed') {\n dropdown.style.position = 'relative';\n dropdown.style.removeProperty('bottom');\n }\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent fontColor=\"dark\" onClick={() => this.handleGoBack()} iconName=\"arrowLeft\" size=\"medium\" iconOnly color=\"primary\"></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName || 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => this.handleOnFocus()}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size={this.size}\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as s,H as h,g as o}from"./p-fd5ed6b0.js";const l=":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.2857142857em;letter-spacing:-1.68px}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.8571428571em;letter-spacing:-1.92px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.5714285714em;letter-spacing:-1.2px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(i),:host ::slotted(em){font-style:italic;font-weight:var(--font-weight-medium)}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";const e=l;const i=class{constructor(s){t(this,s);this.theme=window.CuraAPI.theme;this.level=1;this.size="large";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="1.25em";this.lineHeight="120%";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.setFontProperties();this.setColors()}setFontProperties(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":window.CuraAPI.theme.fonts.getFamily("display"),"--font-size":window.CuraAPI.theme.fonts.getSize(),"--font-weight-bold":this.weights.bold,"--font-weight-medium":this.weights.medium}}hostCSSProperties(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}}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}`)})}getClasses(){var t;const s={};s[`${(t=this.size)===null||t===void 0?void 0:t.toLowerCase()}`]=true;return s}getHeadingTag(){const t=this.getClasses();const h={1:s("h1",{style:this.styles,class:t},s("slot",null)),2:s("h2",{style:this.styles,class:t},s("slot",null)),3:s("h3",{style:this.styles,class:t},s("slot",null)),4:s("h4",{style:this.styles,class:t},s("slot",null)),5:s("h5",{style:this.styles,class:t},s("slot",null)),6:s("h6",{style:this.styles,class:t},s("slot",null)),default:s("h1",{style:this.styles,class:t},s("slot",null))};return h[`${this.level}`]||h["default"]}render(){return s(h,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as s,H as h,g as o}from"./p-fd5ed6b0.js";const l=":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.2857142857em;letter-spacing:-1.68px}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.8571428571em;letter-spacing:-1.92px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.5714285714em;letter-spacing:-1.2px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(i),:host ::slotted(em){font-style:italic;font-weight:var(--font-weight-medium)}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";const e=l;const i=class{constructor(s){t(this,s);this.theme=window.CuraAPI.theme;this.level=1;this.size="large";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="1.25em";this.lineHeight="120%";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.setFontProperties();this.setColors()}setFontProperties(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":window.CuraAPI.theme.fonts.getFamily("display"),"--font-size":window.CuraAPI.theme.fonts.getSize(),"--font-weight-bold":this.weights.bold,"--font-weight-medium":this.weights.medium}}hostCSSProperties(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}}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}`)})}getClasses(){var t;const s={};s[`${(t=this.size)===null||t===void 0?void 0:t.toLowerCase()}`]=true;return s}getHeadingTag(){const t=this.getClasses();const h={1:s("h1",{style:this.styles,class:t},s("slot",null)),2:s("h2",{style:this.styles,class:t},s("slot",null)),3:s("h3",{style:this.styles,class:t},s("slot",null)),4:s("h4",{style:this.styles,class:t},s("slot",null)),5:s("h5",{style:this.styles,class:t},s("slot",null)),6:s("h6",{style:this.styles,class:t},s("slot",null)),default:s("h1",{style:this.styles,class:t},s("slot",null))};return h[`${this.level}`]||h["default"]}render(){return s(h,{key:"9d75215eaa43baaf9ca9aada36dfdbff4596afb2",style:this.hostCSSProperties()},this.getHeadingTag())}get host(){return o(this)}static get watchers(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}}};i.style=e;export{i as cura_display};
|
|
2
|
+
//# sourceMappingURL=p-e5b0dd74.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as o,H as e}from"./p-fd5ed6b0.js";const r=":host{display:block;box-sizing:border-box;width:100%}cura-label{padding:12px 0px;border-bottom:1px solid var(--neutral-light)}";const t=r;const c=class{constructor(o){a(this,o)}render(){return o(e,{key:"ed1d2aeeba08c3c53f04f434fa46cb178271f405",slot:"dropdown-search-option"},o("cura-label",{key:"910b1ada8d333ace0171a3180ba6320e813e4fce",color:"neutral-dark",size:"xsmall",lineHeight:"16px",marginBlock:"0"},o("slot",{key:"20816c3a0c9805a88074f36e060ad850157427e2"})))}};c.style=t;export{c as cura_dropdown_search_option_title};
|
|
2
|
+
//# sourceMappingURL=p-ebed83d1.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,H as a,g as o}from"./p-fd5ed6b0.js";const s=":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:328px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";const n=s;const r=class{constructor(i){t(this,i);this.toastClosed=e(this,"toastClosed",7);this.handleClose=()=>{this.closeContainer()};this.type="info";this.position="top-right";this.icon=undefined;this.label=undefined;this.closeButton=true;this.loader=true;this.autoCloseDelay=1e4;this.styles={};this.progress=0}handleChangeType(){this.setStyle()}connectedCallback(){this.setStyle()}render(){return i(a,{key:"467952f8386d659d44090163f3e14c0231dfcafd"},i("div",{key:"f510e12d309c79842d30cc24409b61433a6fe58e",class:this.getClasses(),style:this.styles},i("cura-icon",{key:"acd2a9d52ad91565c7bd36bc205753bdfe6e3e59",class:"default-icon",name:this.getNameIcon(),size:16,color:`${this.type}-dark`}),i("div",{key:"dced39ca17901673360dacbf27764b1387eff20d",class:"content"},i("cura-heading",{key:"6ac55c8ae757f654c808b72b4f44b54dc822107c",level:4,size:"xsmall",color:`${this.type}-dark`,weight:"bold","margin-block":"0"},this.label),i("cura-paragraph",{key:"e8e83b891e0b7e02901999f1622a183afc94c28e",color:`${this.type}-darker`,size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},i("slot",{key:"080891767b1b552520d7d3ed59002a9478eb0288"})),i("slot",{key:"0a43f99bbaf2e4cdd2fd7dc1d5a0431602b76361",name:"actions"})),this.closeButton&&i("cura-icon",{key:"1ec27e6d6d44b82ed26a59cb6ba967858b4c8809",class:"close-icon",name:"close",size:16,color:"error-dark",onClick:this.handleClose}),this.loader&&!!this.autoCloseDelay&&i("cura-loader-bar",{key:"6457bb003e4706d3f60b85aa3faa3e0b6b276869",color:`${this.type}-base`,progress:this.progress})))}componentDidLoad(){this.openContainer();this.startAnimation()}setStyle(){this.styles=Object.assign(Object.assign({},this.styles),{"--neutral-purewhite":window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),"--neutral-base":window.CuraAPI.theme.colors.getColor(`neutral-base`,.2),"--primary-base":window.CuraAPI.theme.colors.getColor(`primary-base`),"--color-base":window.CuraAPI.theme.colors.getColor(`${this.type}-base`)})}getClasses(){const[t,e]=this.position.split("-");const i={};i["container"]=true;i[t]=true;i[e]=true;if(this.loader){i["loader"]=true}return i}getNameIcon(){const t={info:"infoCircle",success:"checkCircle",warning:"alertCircle",error:"alertTriangle"};return this.icon?this.icon:t[this.type]}openContainer(){this.container=this.host.shadowRoot.querySelector(".container");this.container.classList.add("active")}closeContainer(){this.container.classList.remove("active");setTimeout((()=>{this.toastClosed.emit();this.host.remove()}),500)}startAnimation(){if(!!this.autoCloseDelay){if(this.loader){this.progress=0;let t=setInterval((()=>{if(this.progress>=100){clearInterval(t);this.closeContainer()}else{this.progress++}}),this.autoCloseDelay/100)}else{let t=setInterval((()=>{clearInterval(t);this.closeContainer()}),this.autoCloseDelay)}}}get host(){return o(this)}static get watchers(){return{type:["handleChangeType"],position:["handleChangeType"]}}};r.style=n;export{r as cura_toast};
|
|
2
|
+
//# sourceMappingURL=p-ed839f1e.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as o,g as n}from"./p-fd5ed6b0.js";const a=":host{display:block;box-sizing:border-box;width:100%}:host(:last-of-type) .content-container{border-bottom:none}.option-container{width:100%;display:flex}.option-container:hover:not(.disabled):not(.selected) .content-container{background-color:var(--neutral-white)}.option-container.selected .content-container{background-color:var(--primary-lighter)}.option-container.disabled{cursor:default}.content-container{display:flex;width:100%;box-sizing:border-box;padding:calc(var(--base-spacing) * 2px) calc(var(--base-spacing) * 1px);background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light)}.content-container ::slotted(div[slot=action]){display:flex;justify-content:end}.option-info{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:calc(var(--base-spacing) * 2px);flex-direction:row;box-sizing:border-box;cursor:pointer}.option-info cura-heading{width:100%;margin-block:0px}.option-info ::slotted(div[slot=image]){min-width:calc(var(--base-spacing) * 8px);display:flex;justify-content:center;align-items:center}";const
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,H as o,g as n}from"./p-fd5ed6b0.js";const a=":host{display:block;box-sizing:border-box;width:100%}:host(:last-of-type) .content-container{border-bottom:none}.option-container{width:100%;display:flex}.option-container:hover:not(.disabled):not(.selected) .content-container{background-color:var(--neutral-white)}.option-container.selected .content-container{background-color:var(--primary-lighter)}.option-container.disabled{cursor:default}.content-container{display:flex;width:100%;box-sizing:border-box;padding:calc(var(--base-spacing) * 2px) calc(var(--base-spacing) * 1px);background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light)}.content-container ::slotted(div[slot=action]){display:flex;justify-content:end}.option-info{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:calc(var(--base-spacing) * 2px);flex-direction:row;box-sizing:border-box;cursor:pointer}.option-info cura-heading{width:100%;margin-block:0px}.option-info ::slotted(div[slot=image]){min-width:calc(var(--base-spacing) * 8px);display:flex;justify-content:center;align-items:center}";const c=a;const s=class{constructor(i){t(this,i);this.optionSelected=e(this,"optionSelected",7);this.handleOptionClick=t=>{if(this.selectable){this.selected=!this.selected;this.optionSelected.emit(this.value);this.updateIconColor()}else{t.preventDefault();t.stopImmediatePropagation()}};this.value=undefined;this.selected=false;this.selectable=true;this.hovered=false;this.styles={}}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-purewhite"]=window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);this.styles["--neutral-light"]=window.CuraAPI.theme.colors.getColor(`neutral-light`);this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor(`neutral-white`);this.styles["--primary-lighter"]=window.CuraAPI.theme.colors.getColor(`primary-lighter`,50)}componentDidLoad(){this.updateIconColor()}updateIconColor(){const t=this.hostElement.querySelector('[slot="image"] cura-icon');if(t){t.setAttribute("color",this.selected?"primary":"neutral-dark")}}render(){return i(o,{key:"0dfb8d67f1aee692af5abdad170f2fc3e6c5ffc6",slot:"dropdown-search-option"},i("div",{key:"6596c224bbfc0e9b5c3d2a39d064852019af5b74",style:this.styles,class:{"option-container":true,hovered:this.selectable?this.hovered:false,selected:this.selected,disabled:!this.selectable}},i("div",{key:"b73badabbcde37615c58707d8a62832363deb694",class:"content-container"},i("div",{key:"6ea1e5cfa3aa5f7bb7d0a4a2c9c8aff6e076304c",class:"option-info",onClick:t=>this.handleOptionClick(t)},i("slot",{key:"9e6272b220a723fbc1b52a23f59873cb4eea0986",name:"image"}),i("cura-heading",{key:"4bec4f91fd5ef5759373d846c0876678e67b1b48",size:"xsmall",lineHeight:"16px",marginBlock:"0px",weight:"bold",color:"neutral-black"},i("slot",{key:"c485bfd68ddf4b5bcfa0c590c11344352939fe87"}))),i("slot",{key:"0ce8978f72401af3580c72919b6079ef222dcc0d",name:"action"}))))}get hostElement(){return n(this)}static get watchers(){return{selected:["updateIconColor"]}}};s.style=c;export{s as cura_dropdown_search_option};
|
|
2
|
+
//# sourceMappingURL=p-eea093b2.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as s,H as i,g as a}from"./p-fd5ed6b0.js";import{i as n,a as h}from"./p-272c784a.js";const r=":host{display:block}.container{display:flex;flex-direction:column;position:relative}.container .calendar{padding:0px calc(var(--base-spacing) * 3px);margin-top:-8px;border-radius:0px 0px 4px 4px;border-top:0px;border-right:2px solid #D4D4D4;border-bottom:2px solid #D4D4D4;border-left:2px solid #D4D4D4;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));position:absolute;top:100%;z-index:10;display:none;opacity:0;pointer-events:none}.container .calendar.visible{box-sizing:border-box;display:block;opacity:1;pointer-events:auto;width:100%;background-color:#fff}";const o=r;const d=class{constructor(s){t(this,s);this.dateChange=e(this,"dateChange",7);this.statusInputChange=e(this,"statusInputChange",7);this.label="";this.status="default";this.size="medium";this.name="";this.helperText=undefined;this.enableRangeDates=undefined;this.disableFutureDates=undefined;this.disablePassDates=undefined;this.iconName="";this.placeholder=null;this.styles={};this.isCalendarVisible=false;this.dates=[];this.value="";this.dateSettings={placeholder:null,mask:"date",mode:"single"}}connectedCallback(){const{fonts:t,colors:e,spacing:s}=window.CuraAPI.theme;const i=t.getWeights();this.styles={"--base-spacing":s.getSpacing(),"--neutral-purewhite":e.getColor("neutral-purewhite"),"--neutral-lighter":e.getColor("neutral-lighter"),"--neutral-base":e.getColor("neutral-base"),"--font-size":t.getSize(),"--font-color":t.getColor(),"--font-family":t.getFamily(),"--font-weight-regular":i.regular}}componentWillLoad(){this.updateDateSettings()}formAssociatedCallback(t){t.ariaLabel=this.label}updateDateSettings(){const t=this.getDateSettings(this.enableRangeDates);if(this.shouldUpdateDateSettings(t)){this.dateSettings=t}}getDateSettings(t){return{placeholder:this.placeholder||(t?"dd/mm/aaaa - dd/mm/aaaa":"dd/mm/aaaa"),mask:t?"dateRange":"date",mode:t?"range":"single"}}shouldUpdateDateSettings(t){return this.dateSettings.placeholder!==t.placeholder||this.dateSettings.mask!==t.mask||this.dateSettings.mode!==t.mode}handleClick(t){if(this.el.contains(t.target)){return}this.hideCalendar()}hideCalendar(){this.isCalendarVisible=false}showCalendar(){this.isCalendarVisible=true}handleInputDates(t){const e=t.target.value;const s=/^(\d{2}\/\d{2}\/\d{4})\s*-\s*(\d{2}\/\d{2}\/\d{4})$/;const i=/^(\d{2}\/\d{2}\/\d{4})$/;if(s.test(e)){const t=e.match(s);const i=this.parseStringToDate(t[1]);const a=this.parseStringToDate(t[2]);if(this.isDateValid(i)&&this.isDateValid(a)){this.status="default";this.dates=[i,a];this.value=`${this.parseDateToString(i)} - ${this.parseDateToString(a)}`;this.dateChange.emit(this.value)}else{this.resetDates()}}else if(i.test(e)){const t=e.match(i);const s=this.parseStringToDate(t[1]);if(this.isDateValid(s)){this.status="default";this.dates=[s];this.value=this.parseDateToString(s);this.dateChange.emit(this.value)}else{this.resetDates()}}else{this.dates=[]}}handleChangeDates(t){if(t.detail===""){this.dates=[];this.status="default";this.value="";this.dateChange.emit(this.value);this.statusInputChange.emit(this.status)}}isDateValid(t){const e=new Date;e.setHours(0,0,0,0);if(this.disablePassDates)return!n(t,e);if(this.disableFutureDates)return!h(t,e);return true}parseStringToDate(t){const[e,s,i]=t.split("/").map(Number);return new Date(i,s-1,e)}parseDateToString(t){const e=String(t.getDate()).padStart(2,"0");const s=String(t.getMonth()+1).padStart(2,"0");const i=t.getFullYear();return`${e}/${s}/${i}`}resetDates(){this.status="error";this.dates=[];this.statusInputChange.emit(this.status)}renderCalendarOrHelperText(){if(this.isCalendarVisible){return s("div",{class:"calendar visible"},s("cura-calendar",{customDates:this.dates,mode:this.dateSettings.mode,width:"100%",maxWidth:"400px",embedded:false,floating:false,disableFutureDates:this.disableFutureDates,disablePassDates:this.disablePassDates,onOnchangeday:t=>{const e=t.detail.days;if(e.length===1){this.value=this.parseDateToString(e[0])}else if(e.length>0){this.value=`${this.parseDateToString(e[0])} - ${this.parseDateToString(e[e.length-1])}`}else{this.value=""}this.dateChange.emit(this.value)}}))}else{return this.helperText}}render(){return s(i,{key:"bcda0a8a2601f24d445775e40535d1c8a80be5c0"},s("div",{key:"3a3e11f1bd7082d563537a8679f69f976f242a4a",class:"container",style:this.styles},s("cura-input-text",{key:"86ce4be158090c4ad4bfaa1e5196548fa5e1c105",label:this.label,name:this.name,status:this.status,value:this.value,onFocus:()=>this.showCalendar(),size:this.size,"icon-name":this.iconName,placeholder:this.dateSettings.placeholder,"mask-preset":this.dateSettings.mask,"enable-selection-mode":true,onKeyUp:t=>this.handleInputDates(t),autocomplete:"off",onValueChange:t=>this.handleChangeDates(t)},this.renderCalendarOrHelperText())))}static get formAssociated(){return true}get el(){return a(this)}static get watchers(){return{enableRangeDates:["updateDateSettings"]}}};d.style=o;export{d as cura_input_date};
|
|
2
|
+
//# sourceMappingURL=p-f375a612.entry.js.map
|
|
@@ -303,7 +303,7 @@ const CuraHeading = class {
|
|
|
303
303
|
return tags[`${this.level}`] || tags['default'];
|
|
304
304
|
}
|
|
305
305
|
render() {
|
|
306
|
-
return (h(Host, { key: '
|
|
306
|
+
return (h(Host, { key: '83a6a2a08051c3654f609f0e1824f41f48a6ff83', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
307
307
|
}
|
|
308
308
|
get host() { return getElement(this); }
|
|
309
309
|
static get watchers() { return {
|
|
@@ -4365,7 +4365,7 @@ const CuraLabel = class {
|
|
|
4365
4365
|
};
|
|
4366
4366
|
}
|
|
4367
4367
|
render() {
|
|
4368
|
-
return (h(Host, { key: '
|
|
4368
|
+
return (h(Host, { key: '8d691e1d4c38c30d1e50bc981b9e6de89b3506e0', style: this.hostCSSProperties() }, h("p", { key: 'b68944f4fe1e65aecf6a627f3bba547418bc125b', style: this.styles, class: this.getClasses() }, h("slot", { key: 'f8ac467674d94fe94adc075743b12111d1e32469' }))));
|
|
4369
4369
|
}
|
|
4370
4370
|
get host() { return getElement(this); }
|
|
4371
4371
|
static get watchers() { return {
|
|
@@ -4399,7 +4399,7 @@ const CuraLoaderCircle = class {
|
|
|
4399
4399
|
};
|
|
4400
4400
|
}
|
|
4401
4401
|
render() {
|
|
4402
|
-
return (h(Host, { key: '
|
|
4402
|
+
return (h(Host, { key: '9ef3dd91b5958a5aeb90fe51120f5d9cc768ca62', style: this.getStyles() }, h("svg", { key: '96b6a2ac1ee77c14b68ea7ee462bae4a122f0c1f', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '01e9425e96b2f8b63a0115dfba358a46d86574c5' }, h("circle", { key: '5ba2e9d288de3b48d33c57ef9c8c282511683739', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'b2069b38fc2a810c6b838eb4c924619a14ef5648', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '4e04a92c3cb8ba0084112f1a14a7815317ca92c5' }, h("linearGradient", { key: '4369f1a5c6d66b37cc00ca88c3e5c77867867fbf', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '224eac239fcd4f22e3ca7b044d89942757381b9e' }), h("stop", { key: '35236a39f2156fefea7878a60dd1e559d3d1f850', offset: "1" }))))));
|
|
4403
4403
|
}
|
|
4404
4404
|
};
|
|
4405
4405
|
CuraLoaderCircle.style = CuraLoaderCircleStyle0;
|
|
@@ -4423,7 +4423,7 @@ const CuraPageTemplate = class {
|
|
|
4423
4423
|
return classes;
|
|
4424
4424
|
}
|
|
4425
4425
|
render() {
|
|
4426
|
-
return (h(Host, { key: '
|
|
4426
|
+
return (h(Host, { key: 'd79c3d22ccbd93d8a56c700e3016507d18720464' }, h("div", { key: 'a717f44d6b5df9f00ffe61fff816721705748040', style: this.styles, class: "grid-template" }, h("div", { key: '7a3d585d4213799b32e2043327442b21833fd4fc', id: "sub-header" }, h("slot", { key: 'dbab9738fe221a426642e5d63e88130e1f351591', name: 'sub-header' })), h("div", { key: '39f2878cac260b70b8e53b57b6b9b5b07f658251', id: "header" }, h("slot", { key: '511af91f30dfcfde3ced7bce4c341a2802c88db8', name: 'header' })), h("div", { key: 'ed8d1b1e0d5ffca939c525ee8320da7f2afde95d', id: "pre-content" }, h("slot", { key: 'dd8c722ddd113f49965a6397625980aace8b78e8', name: 'pre-content' })), h("div", { key: '64a5767bbc858f18e44a3339b6bb567b3e5a8c0d', id: "content-container", class: this.getClasses() }, h("div", { key: '919e9d54e10f1469264f193545e80b680b63c801', id: "sidebar-left" }, h("slot", { key: '8ddeb7358bd9f6d0e08b1e3f323219b8980eec9c', name: 'sidebar-left' })), h("div", { key: '48e3860c1674658c386124c80a35b85bdb085e3e', id: "content" }, h("slot", { key: '8bc21a187897a5e9cd2e922285364a02425cefa6', name: "content" }), h("slot", { key: '587d13eed3fedcbf9e33dc4084cb2554ba70125d' })), h("div", { key: '7f620fd04b4cf4a051954dca8a95293c2a7c1d9a', id: "sidebar-right" }, h("slot", { key: '3499275e67a00fcaab4f044535dbeb19c1040569', name: 'sidebar-right' }))), h("div", { key: '59b9e4a5fe541f2ad6dac53a40588482b33e0cad', id: "post-body" }, h("slot", { key: '7493b3b330cabf263990a149c1b526501260de95', name: 'post-body' })), h("div", { key: '4a35c95f7ad04f04bb8673babc06d243e1b8f931', id: "footer" }, h("slot", { key: 'f69ffbd9c9cabe72e1ee4f147f7a1448311a7f0c', name: 'footer' })), h("div", { key: 'd53b60b2d9170797e7dc12b3179c24b7f76ac41d', id: "sub-footer" }, h("slot", { key: '75dcebb2f223ed1d0b1181ea3773fbb6bf096e33', name: 'sub-footer' })))));
|
|
4427
4427
|
}
|
|
4428
4428
|
get host() { return getElement(this); }
|
|
4429
4429
|
};
|
|
@@ -4479,7 +4479,7 @@ const CuraParagraph = class {
|
|
|
4479
4479
|
};
|
|
4480
4480
|
}
|
|
4481
4481
|
render() {
|
|
4482
|
-
return (h(Host, { key: '
|
|
4482
|
+
return (h(Host, { key: 'fc146c5173887dd80bb1798d58b7fbe29775e2de', style: this.hostCSSProperties() }, h("p", { key: '0defc510c08182261e22a4ab47a24d939199db24', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'e70c68a1da0596dc8d2273f5679c9193a354e313' }))));
|
|
4483
4483
|
}
|
|
4484
4484
|
get host() { return getElement(this); }
|
|
4485
4485
|
static get watchers() { return {
|
|
@@ -4767,13 +4767,13 @@ const CuraSelect = class {
|
|
|
4767
4767
|
return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
|
|
4768
4768
|
}
|
|
4769
4769
|
render() {
|
|
4770
|
-
return (h(Host, { key: '
|
|
4770
|
+
return (h(Host, { key: 'f01b52d0da1c417723c9da0ce7002155b3cbb07d', style: this.styles }, h("div", { key: '2798e5cd7f16e8679520900374e569cca1e5bee8', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '5f9f645c3199e6299f000f5ab167139f536442b8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '2bca7ed64c1d44152161c2d71173f70b8b2fbacc', class: 'required' }, "* "))), h("div", { key: 'c1e77ccc2d1853b8749fea57e5ca3554363ef168', class: {
|
|
4771
4771
|
'cura-input-field': true,
|
|
4772
4772
|
'open': this.isOpen
|
|
4773
|
-
} }, this.renderIcon(), h("input", { key: '
|
|
4773
|
+
} }, this.renderIcon(), h("input", { key: '66e99e0a7c3b00516cc2f1240d08511c9434201b', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: '4efde985b30016b633818f9fafe6c1f538b4776e', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'ead6b6a9f95acc7f2cf2e7474f72c1627e0bd8cd', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'e01c6c99fecb78822d092a41db0b969ca160cea1' })), this.isOpen && (h("div", { key: '0fedad3cac056457810c984eb471bd9a703f2ff4', class: {
|
|
4774
4774
|
'menu': true,
|
|
4775
4775
|
'open': this.isOpen
|
|
4776
|
-
} }, h("slot", { key: '
|
|
4776
|
+
} }, h("slot", { key: '1330a45037f002b5fd20a356f1fe5b982999e512', name: 'option' }))))));
|
|
4777
4777
|
}
|
|
4778
4778
|
static get formAssociated() { return true; }
|
|
4779
4779
|
get host() { return getElement(this); }
|
|
@@ -4823,7 +4823,7 @@ const CuraSelectOption = class {
|
|
|
4823
4823
|
};
|
|
4824
4824
|
}
|
|
4825
4825
|
render() {
|
|
4826
|
-
return (h(Host, { key: '
|
|
4826
|
+
return (h(Host, { key: '42fe72a8cadcb2745fa41cced2bf8f571ca0fb81', slot: "option" }, h("div", { key: '275c6ba6baaf1c28af3c6cce6abc36dc8c496e13', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'a5f2e672f55fe16b749f6f5d33c1ba64eb415ca8', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '37b09097f6f51515fe63f07a5b6bb2449ba51e60' })), this.selected && h("cura-icon", { key: '88b01b9505ea9c46ddd19be78db4bd084601687d', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
|
|
4827
4827
|
}
|
|
4828
4828
|
get host() { return getElement(this); }
|
|
4829
4829
|
static get watchers() { return {
|
|
@@ -160,7 +160,7 @@ const CuraCheckbox = class {
|
|
|
160
160
|
return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
|
|
161
161
|
}
|
|
162
162
|
render() {
|
|
163
|
-
return (h(Host, { key: '
|
|
163
|
+
return (h(Host, { key: '876fa0a7aa0fc7110cbf0ffeb2d95d529fa78e64' }, h("div", { key: '3e6d730765590ee75d7e045cadc7d03e5fc035e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '0f7f6f3bc61a80e899d940d76fee266af1914f5a', class: "info" }, h("div", { key: 'a836cb0d7751a1a812364fe93a30403b02ec5c95', class: "label-wrapper" }, h("cura-label", { key: '5d180552ec71e22ddd8822727bd32d4167215f33', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '047413aa21a28bc33984d19ad4dc10a38289c205', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '68c9dd6f228ec3204647795f1cae32a8f8797bc2', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '3a35a1219f135002f1b9ae64c0eb4227529bc904' }))), h("div", { key: 'fe969ee332b3c64a259ec552f411b5d2d4bc81e4', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '2cbcbe56130bddb5853cfcc3a8ef1b421f39bc7b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
|
|
164
164
|
}
|
|
165
165
|
static get formAssociated() { return true; }
|
|
166
166
|
get host() { return getElement(this); }
|
|
@@ -65,7 +65,7 @@ const CuraDisplay = class {
|
|
|
65
65
|
return tags[`${this.level}`] || tags['default'];
|
|
66
66
|
}
|
|
67
67
|
render() {
|
|
68
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: '9d75215eaa43baaf9ca9aada36dfdbff4596afb2', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
69
69
|
}
|
|
70
70
|
get host() { return getElement(this); }
|
|
71
71
|
static get watchers() { return {
|
|
@@ -8,7 +8,7 @@ const CuraDropdownSearchOptionTitle = class {
|
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: 'ed1d2aeeba08c3c53f04f434fa46cb178271f405', slot: "dropdown-search-option" }, h("cura-label", { key: '910b1ada8d333ace0171a3180ba6320e813e4fce', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '20816c3a0c9805a88074f36e060ad850157427e2' }))));
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
CuraDropdownSearchOptionTitle.style = CuraDropdownSearchOptionTitleStyle0;
|
|
@@ -42,12 +42,12 @@ const CuraDropdownSearchOption = class {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (h(Host, { key: '
|
|
45
|
+
return (h(Host, { key: '0dfb8d67f1aee692af5abdad170f2fc3e6c5ffc6', slot: "dropdown-search-option" }, h("div", { key: '6596c224bbfc0e9b5c3d2a39d064852019af5b74', style: this.styles, class: {
|
|
46
46
|
"option-container": true,
|
|
47
47
|
hovered: this.selectable ? this.hovered : false,
|
|
48
48
|
selected: this.selected,
|
|
49
49
|
disabled: !this.selectable
|
|
50
|
-
} }, h("div", { key: '
|
|
50
|
+
} }, h("div", { key: 'b73badabbcde37615c58707d8a62832363deb694', class: "content-container" }, h("div", { key: '6ea1e5cfa3aa5f7bb7d0a4a2c9c8aff6e076304c', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '9e6272b220a723fbc1b52a23f59873cb4eea0986', name: "image" }), h("cura-heading", { key: '4bec4f91fd5ef5759373d846c0876678e67b1b48', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'c485bfd68ddf4b5bcfa0c590c11344352939fe87' }))), h("slot", { key: '0ce8978f72401af3580c72919b6079ef222dcc0d', name: "action" })))));
|
|
51
51
|
}
|
|
52
52
|
get hostElement() { return getElement(this); }
|
|
53
53
|
static get watchers() { return {
|
|
@@ -15,20 +15,10 @@ const CuraDropdownSearch = class {
|
|
|
15
15
|
const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
|
|
16
16
|
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
17
17
|
if (dropdown) {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
else {
|
|
23
|
-
dropdown.style.position = 'fixed';
|
|
24
|
-
dropdown.style.bottom = '0';
|
|
25
|
-
}
|
|
18
|
+
dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
19
|
+
dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';
|
|
20
|
+
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
|
26
21
|
}
|
|
27
|
-
window.scroll({
|
|
28
|
-
top: 0,
|
|
29
|
-
left: 0,
|
|
30
|
-
behavior: 'smooth',
|
|
31
|
-
});
|
|
32
22
|
});
|
|
33
23
|
};
|
|
34
24
|
this.handleSlotChange = () => {
|
|
@@ -66,6 +56,7 @@ const CuraDropdownSearch = class {
|
|
|
66
56
|
this.showOverlay();
|
|
67
57
|
}
|
|
68
58
|
else {
|
|
59
|
+
this.resetDropdownStyles();
|
|
69
60
|
this.removeOverlay();
|
|
70
61
|
}
|
|
71
62
|
}
|
|
@@ -90,6 +81,7 @@ const CuraDropdownSearch = class {
|
|
|
90
81
|
this.isOnBlurInput = true;
|
|
91
82
|
this.hoveredIndex = -1;
|
|
92
83
|
this.options = [];
|
|
84
|
+
this.originalOverflow = '';
|
|
93
85
|
}
|
|
94
86
|
connectedCallback() {
|
|
95
87
|
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
@@ -141,12 +133,15 @@ const CuraDropdownSearch = class {
|
|
|
141
133
|
this.overlayElement.style.zIndex = '9999';
|
|
142
134
|
this.overlayElement.style.backgroundColor = 'white';
|
|
143
135
|
document.body.appendChild(this.overlayElement);
|
|
136
|
+
this.originalOverflow = document.body.style.overflow;
|
|
137
|
+
document.body.style.overflow = 'hidden';
|
|
144
138
|
}
|
|
145
139
|
}
|
|
146
140
|
removeOverlay() {
|
|
147
141
|
if (this.overlayElement && this.overlayElement.parentNode === document.body) {
|
|
148
142
|
document.body.removeChild(this.overlayElement);
|
|
149
143
|
this.overlayElement = null;
|
|
144
|
+
document.body.style.overflow = this.originalOverflow;
|
|
150
145
|
}
|
|
151
146
|
}
|
|
152
147
|
addClickListenersToOptions() {
|
|
@@ -170,6 +165,7 @@ const CuraDropdownSearch = class {
|
|
|
170
165
|
this.updateSelectedOption(this.value);
|
|
171
166
|
this.isDropdownOpen = false;
|
|
172
167
|
this.isOnBlurInput = true;
|
|
168
|
+
this.resetDropdownStyles();
|
|
173
169
|
this.removeOverlay();
|
|
174
170
|
}
|
|
175
171
|
}
|
|
@@ -209,6 +205,7 @@ const CuraDropdownSearch = class {
|
|
|
209
205
|
if (this.isOnBlurInput === true) {
|
|
210
206
|
setTimeout(() => {
|
|
211
207
|
this.isDropdownOpen = false;
|
|
208
|
+
this.resetDropdownStyles();
|
|
212
209
|
this.removeOverlay();
|
|
213
210
|
}, 200);
|
|
214
211
|
}
|
|
@@ -242,11 +239,23 @@ const CuraDropdownSearch = class {
|
|
|
242
239
|
this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
|
|
243
240
|
}
|
|
244
241
|
}
|
|
242
|
+
handleGoBack() {
|
|
243
|
+
this.resetDropdownStyles();
|
|
244
|
+
this.isMobile = false;
|
|
245
|
+
}
|
|
246
|
+
resetDropdownStyles() {
|
|
247
|
+
var _a;
|
|
248
|
+
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
249
|
+
if (dropdown && dropdown.style.position === 'fixed') {
|
|
250
|
+
dropdown.style.position = 'relative';
|
|
251
|
+
dropdown.style.removeProperty('bottom');
|
|
252
|
+
}
|
|
253
|
+
}
|
|
245
254
|
render() {
|
|
246
255
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
247
|
-
return (h(Host, { key: '
|
|
256
|
+
return (h(Host, { key: '21f8601dd62ce272ac6856e6f951268b2fbbf32d', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'a6841c5564454fcc33a4d053cd506c17f53026d3', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '3653377bc88d97c60a049731f6286aa5d7fc516c', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'bd4614e2859df22d74d27532171e73de1cf60979', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '811d3745b6963d3aff02d58a39f7f1be472646fa', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
|
|
248
257
|
this.handleOnBlur();
|
|
249
|
-
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '
|
|
258
|
+
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: 'a928b64d301c0cd674612698839a213344dc6798', name: "helperText" }))), h("div", { key: '06ba9b411e46969ccf7378869bc37d202084ead0', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '8915959d70f28a28c7b8035e77c34ed1f7035727', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
250
259
|
}
|
|
251
260
|
get host() { return getElement(this); }
|
|
252
261
|
static get watchers() { return {
|