@rededor/cura 1.8.2-alpha.0 → 2.0.0-alpha.4

package/dist/cura/p-5ed7ce95.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as t,h as e,H as i}from"./p-PPMZr_VE.js";import"./p-BPKQjAwN.js";const s=":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.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:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-light);border-radius:calc(var(--cura-spacing-base) * 3px);max-width:600px;min-width:200px;padding:calc(calc(var(--cura-spacing-base) * 1px) / 2) calc(var(--cura-spacing-base) * 4px) calc(var(--cura-spacing-base) * 4px) calc(var(--cura-spacing-base) * 4px);z-index:var(--zIndex);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(--cura-spacing-base) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--cura-spacing-base) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex;padding:0;margin-right:-8px}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--cura-spacing-base) * 4px);padding-bottom:0px;border-radius:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--cura-spacing-base) * 4px);padding:calc(var(--cura-spacing-base) * 2px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--cura-spacing-base) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";const o=class{constructor(e){a(this,e);this.modalClose=t(this,"modalClose");this.open=false;this.background="light";this.top=0;this.bottom=0;this.left=0;this.right=0;this.mobileCloseLabel="Fechar";this.canClose=true;this.zindex="100";this.styles={};this.handleCloseOnEsc=a=>{if(a.key!=="Escape"||!this.open||!this.canClose){return}this.open=false;this.modalClose.emit()};this.handleClose=()=>{if(!this.canClose){return}this.modalClose.emit();this.open=false}}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]})}setOffset(a,t){this.styles=Object.assign(Object.assign({},this.styles),{[`--${a}-offset`]:`${t}px`})}setTop(){this.setOffset("top",this.top)}setBottom(){this.setOffset("bottom",this.bottom)}setLeft(){this.setOffset("left",this.left)}setRight(){this.setOffset("right",this.right)}connectedCallback(){this.styles=Object.assign(Object.assign({},this.styles),{"--neutral-purewhite":window.CuraAPI.theme.colors.getColor("neutral-purewhite"),"--neutral-light":window.CuraAPI.theme.colors.getColor("neutral-light"),"--base-spacing":window.CuraAPI.theme.spacing.getSpacing()});this.setColors();this.setTop();this.setBottom();this.setLeft();this.setRight()}disconnectedCallback(){window.removeEventListener("keydown",this.handleCloseOnEsc)}componentDidLoad(){window.addEventListener("keydown",this.handleCloseOnEsc)}render(){return e(i,{key:"a6f81dd34ff6bea8c00a6ea08ba2967d8b37890b",role:"dialog","aria-modal":"true",style:{"--zIndex":this.zindex}},e("div",{key:"87c8a89c0ae261fd6d8ed8259ed4a18b92a6bf55",class:this.open?"modal container open":"modal container",style:this.styles},e("div",{key:"1377054aaf87f31e2f27a32b813f21a3227a0679",class:this.open?"modal backdrop open":"modal backdrop",onClick:this.canClose?this.handleClose:undefined}),e("div",{key:"b8764e38f17fc18f6390b1454f73adc5b0f28024",class:"wrapper"},this.canClose&&e("div",{key:"e3b741e2885d879368b041c0da3ffa8ff1f6b1c4",class:"close desktop"},e("cura-button-transparent",{key:"5c85f8cb21415741e3af4ab8833b031597faed50",iconName:"close",color:"error",size:"small",onClick:this.handleClose,iconOnly:true})),e("slot",{key:"fd0b51474b2fc973ad1dd6b626f42726e0972afb"}),this.canClose&&e("div",{key:"da7b3e03af84967a38f398cde77495d6baa8af35",class:"close mobile",onClick:this.handleClose},e("cura-button-transparent",{key:"d95e7ed4963e6ad678dca0b23e5fdfb609dc7f6f",color:"error",iconName:"close",size:"small"},this.mobileCloseLabel)))))}static get watchers(){return{background:["setColors"],top:["setTop"],bottom:["setBottom"],left:["setLeft"],right:["setRight"]}}};o.style=s;export{o as cura_modal};
+//# sourceMappingURL=p-5ed7ce95.entry.js.map

package/dist/cura/p-5ed7ce95.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["curaModalCss","CuraModal","constructor","hostRef","this","open","background","top","bottom","left","right","mobileCloseLabel","canClose","zindex","styles","handleCloseOnEsc","evt","key","modalClose","emit","handleClose","setColors","backgroundTheme","dark","window","CuraAPI","theme","colors","getColor","light","Object","assign","setOffset","name","value","setTop","setBottom","setLeft","setRight","connectedCallback","spacing","getSpacing","disconnectedCallback","removeEventListener","componentDidLoad","addEventListener","render","h","Host","role","style","class","onClick","undefined","iconName","color","size","iconOnly"],"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: var(--top-offset);\n  bottom: var(--bottom-offset);\n  left: var(--left-offset);\n  right: var(--right-offset);\n  z-index: -1;\n  margin-top: var(--offset-top);\n\n  &.open {\n    z-index: var(--zIndex);\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: calc(var(--zIndex) - 10);\n  animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n  position: fixed;\n  background-color: var(--neutral-purewhite);\n  border: 2px solid var(--neutral-light);\n  border-radius: #{$spacing-xxxs};\n  max-width: 600px;\n  min-width: 200px;\n  padding: calc(#{$spacing-tiny} / 2) #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n  z-index: var(--zIndex);\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    padding: 0;\n    margin-right: -8px;\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-mini} #{$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 top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Defines the label for the close button when the modal is viewed on mobile.\n   * Default: Fechar\n   */\n  @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n  /**\n   * Controls whether the modal can be closed. When false, hides all close buttons and prevents closing via backdrop click or ESC key.\n   * Default: true\n   */\n  @Prop({ reflect: true }) canClose: boolean = true;\n  /**\n   * Property zindex to control the z-index value of the component.\n   * Default: 100\n   */\n  @Prop({ reflect: true }) zindex: string = '100';\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  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  handleCloseOnEsc = (evt: KeyboardEvent) => {\n    if (evt.key !== 'Escape' || !this.open || !this.canClose) {\n      return;\n    }\n\n    this.open = false;\n    this.modalClose.emit();\n  };\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    if (!this.canClose) {\n      return;\n    }\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this.handleCloseOnEsc);\n  }\n\n  componentDidLoad() {\n    window.addEventListener('keydown', this.handleCloseOnEsc);\n  }\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\" style={{ '--zIndex': this.zindex }}>\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.canClose ? this.handleClose : undefined}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            {this.canClose && (\n              <div class=\"close desktop\">\n                <cura-button-transparent iconName=\"close\" color=\"error\" size=\"small\" onClick={this.handleClose} iconOnly></cura-button-transparent>\n              </div>\n            )}\n            <slot></slot>\n            {/* Mobile button */}\n            {this.canClose && (\n              <div class=\"close mobile\" onClick={this.handleClose}>\n                <cura-button-transparent color=\"error\" iconName=\"close\" size=\"small\">\n                  {this.mobileCloseLabel}\n                </cura-button-transparent>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iFAAA,MAAMA,EAAe,ypE,MCORC,EAAS,MALtB,WAAAC,CAAAC,G,+CAU0CC,KAAIC,KAAa,MAKjDD,KAAUE,WAAsB,QAKhCF,KAAGG,IAAY,EAKfH,KAAMI,OAAY,EAKlBJ,KAAIK,KAAY,EAKhBL,KAAKM,MAAY,EAKAN,KAAgBO,iBAAW,SAK3BP,KAAQQ,SAAY,KAKpBR,KAAMS,OAAW,MAMjCT,KAAMU,OAAG,GA0ClBV,KAAAW,iBAAoBC,IAClB,GAAIA,EAAIC,MAAQ,WAAab,KAAKC,OAASD,KAAKQ,SAAU,CACxD,M,CAGFR,KAAKC,KAAO,MACZD,KAAKc,WAAWC,MAAM,EAiBhBf,KAAWgB,YAAG,KACpB,IAAKhB,KAAKQ,SAAU,CAClB,M,CAEFR,KAAKc,WAAWC,OAChBf,KAAKC,KAAO,KAAK,CAqCpB,CAxGC,SAAAgB,GACE,MAAMC,EAAkB,CACtBC,KAAMC,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,gBAAiB,IAC5DC,MAAOL,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBAAkB,KAGhExB,KAAKU,OAAMgB,OAAAC,OAAAD,OAAAC,OAAA,GACN3B,KAAKU,QACR,sBAAsBQ,EAAgBlB,KAAKE,a,CAI/C,SAAA0B,CAAUC,EAAcC,GACtB9B,KAAKU,OAAMgB,OAAAC,OAAAD,OAAAC,OAAA,GACN3B,KAAKU,QACR,EAAC,KAAKmB,YAAgB,GAAGC,O,CAK7B,MAAAC,GACE/B,KAAK4B,UAAU,MAAO5B,KAAKG,I,CAI7B,SAAA6B,GACEhC,KAAK4B,UAAU,SAAU5B,KAAKI,O,CAIhC,OAAA6B,GACEjC,KAAK4B,UAAU,OAAQ5B,KAAKK,K,CAI9B,QAAA6B,GACElC,KAAK4B,UAAU,QAAS5B,KAAKM,M,CAY/B,iBAAA6B,GACEnC,KAAKU,OACAgB,OAAAC,OAAAD,OAAAC,OAAA,GAAA3B,KAAKU,QAAM,CACd,sBAAuBU,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,qBAC5D,kBAAmBJ,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBACxD,iBAAkBJ,OAAOC,QAAQC,MAAMc,QAAQC,eAEjDrC,KAAKiB,YACLjB,KAAK+B,SACL/B,KAAKgC,YACLhC,KAAKiC,UACLjC,KAAKkC,U,CAWP,oBAAAI,GACElB,OAAOmB,oBAAoB,UAAWvC,KAAKW,iB,CAG7C,gBAAA6B,GACEpB,OAAOqB,iBAAiB,UAAWzC,KAAKW,iB,CAG1C,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAA/B,IAAA,2CAACgC,KAAK,SAAoB,oBAAOC,MAAO,CAAE,WAAY9C,KAAKS,SAC9DkC,EAAA,OAAA9B,IAAA,2CAAKkC,MAAO/C,KAAKC,KAAO,uBAAyB,kBAAmB6C,MAAO9C,KAAKU,QAC9EiC,EAAA,OAAA9B,IAAA,2CAAKkC,MAAO/C,KAAKC,KAAO,sBAAwB,iBAAkB+C,QAAShD,KAAKQ,SAAWR,KAAKgB,YAAciC,YAC9GN,EAAK,OAAA9B,IAAA,2CAAAkC,MAAM,WAER/C,KAAKQ,UACJmC,EAAK,OAAA9B,IAAA,2CAAAkC,MAAM,iBACTJ,EAAyB,2BAAA9B,IAAA,2CAAAqC,SAAS,QAAQC,MAAM,QAAQC,KAAK,QAAQJ,QAAShD,KAAKgB,YAAaqC,SAAmC,QAGvIV,EAAa,QAAA9B,IAAA,6CAEZb,KAAKQ,UACJmC,EAAK,OAAA9B,IAAA,2CAAAkC,MAAM,eAAeC,QAAShD,KAAKgB,aACtC2B,EAAyB,2BAAA9B,IAAA,2CAAAsC,MAAM,QAAQD,SAAS,QAAQE,KAAK,SAC1DpD,KAAKO,qB","ignoreList":[]}