@rededor/cura 1.8.2-alpha.0 → 1.8.3-alpha.0

package/dist/types/components/cura-modal/cura-modal.stories.d.ts

@@ -46,6 +46,16 @@ declare const _default: {
                 category: string;
             };
         };
+        canClose: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
         zindex: {
             control: {
                 type: string;
@@ -124,6 +134,7 @@ export declare const CuraModal: {
         left: number;
         right: number;
         mobileCloseLabel: string;
+        canClose: boolean;
         zindex: string;
     };
 };

package/dist/types/components.d.ts

@@ -1127,6 +1127,11 @@ export namespace Components {
           * @default 0
          */
         "bottom"?: number;
+        /**
+          * Controls whether the modal can be closed. When false, hides all close buttons and prevents closing via backdrop click or ESC key. Default: true
+          * @default true
+         */
+        "canClose": boolean;
         /**
           * Property left to control modal left position. Default: 0px
           * @default 0
@@ -3348,6 +3353,11 @@ declare namespace LocalJSX {
           * @default 0
          */
         "bottom"?: number;
+        /**
+          * Controls whether the modal can be closed. When false, hides all close buttons and prevents closing via backdrop click or ESC key. Default: true
+          * @default true
+         */
+        "canClose"?: boolean;
         /**
           * Property left to control modal left position. Default: 0px
           * @default 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rededor/cura",
-  "version": "1.8.2-alpha.0",
+  "version": "1.8.3-alpha.0",
   "description": "Cura Design System",
   "author": "Rede D`Or São Luiz",
   "license": "MIT",
@@ -52,5 +52,5 @@
     "storybook": "^7.6.7",
     "svgo": "^3.3.2"
   },
-  "gitHead": "0bc9f01fc82ec57c78e4ac6b6c96e29b230d615e"
+  "gitHead": "701711ea3a77be90041538b1ed92c98574cf99d5"
 }

package/dist/cura/p-df7cb250.entry.js

@@ -1,2 +0,0 @@
-import{r as a,c as e,h as t,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(t){a(this,t);this.modalClose=e(this,"modalClose");this.open=false;this.background="light";this.top=0;this.bottom=0;this.left=0;this.right=0;this.mobileCloseLabel="Fechar";this.zindex="100";this.styles={};this.handleCloseOnEsc=a=>{if(a.key!=="Escape"||!this.open){return}this.open=false;this.modalClose.emit()};this.handleClose=()=>{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,e){this.styles=Object.assign(Object.assign({},this.styles),{[`--${a}-offset`]:`${e}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 t(i,{key:"4ccdb55c36abada0f1a7c8f44b79603e3e3432cc",role:"dialog","aria-modal":"true",style:{"--zIndex":this.zindex}},t("div",{key:"1b7248b7549a903a7a9b08aa219f209e0f159d30",class:this.open?"modal container open":"modal container",style:this.styles},t("div",{key:"6977bffb5232d6e45d217bf2db4f61748daf7ccf",class:this.open?"modal backdrop open":"modal backdrop",onClick:this.handleClose}),t("div",{key:"71f7c2cf8c56d4f0fdf443209e0f5e96e285e36e",class:"wrapper"},t("div",{key:"80b99d594ee94b214318479e815194be75f3fea7",class:"close desktop"},t("cura-button-transparent",{key:"9abea3d67b08611313ee28b44bf6775a37b9ab79",iconName:"close",color:"error",size:"small",onClick:this.handleClose,iconOnly:true})),t("slot",{key:"85364906c3b59f2ac7b95cd316babff55de10a0f"}),t("div",{key:"a4106cee880560a7fdcb92b63f98feefbe8f283a",class:"close mobile",onClick:this.handleClose},t("cura-button-transparent",{key:"794ab5cfdece8aa94ff85d37655a83c9df7a854a",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-df7cb250.entry.js.map

package/dist/cura/p-df7cb250.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaModalCss","CuraModal","constructor","hostRef","this","open","background","top","bottom","left","right","mobileCloseLabel","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","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   * 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) {\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    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.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\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            <slot></slot>\n            {/* Mobile button */}\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          </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,KAAMQ,OAAW,MAMjCR,KAAMS,OAAG,GA0ClBT,KAAAU,iBAAoBC,IAClB,GAAIA,EAAIC,MAAQ,WAAaZ,KAAKC,KAAM,CACtC,M,CAGFD,KAAKC,KAAO,MACZD,KAAKa,WAAWC,MAAM,EAiBhBd,KAAWe,YAAG,KACpBf,KAAKa,WAAWC,OAChBd,KAAKC,KAAO,KAAK,CAiCpB,CAjGC,SAAAe,GACE,MAAMC,EAAkB,CACtBC,KAAMC,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,gBAAiB,IAC5DC,MAAOL,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBAAkB,KAGhEvB,KAAKS,OAAMgB,OAAAC,OAAAD,OAAAC,OAAA,GACN1B,KAAKS,QACR,sBAAsBQ,EAAgBjB,KAAKE,a,CAI/C,SAAAyB,CAAUC,EAAcC,GACtB7B,KAAKS,OAAMgB,OAAAC,OAAAD,OAAAC,OAAA,GACN1B,KAAKS,QACR,EAAC,KAAKmB,YAAgB,GAAGC,O,CAK7B,MAAAC,GACE9B,KAAK2B,UAAU,MAAO3B,KAAKG,I,CAI7B,SAAA4B,GACE/B,KAAK2B,UAAU,SAAU3B,KAAKI,O,CAIhC,OAAA4B,GACEhC,KAAK2B,UAAU,OAAQ3B,KAAKK,K,CAI9B,QAAA4B,GACEjC,KAAK2B,UAAU,QAAS3B,KAAKM,M,CAY/B,iBAAA4B,GACElC,KAAKS,OACAgB,OAAAC,OAAAD,OAAAC,OAAA,GAAA1B,KAAKS,QAAM,CACd,sBAAuBU,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,qBAC5D,kBAAmBJ,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBACxD,iBAAkBJ,OAAOC,QAAQC,MAAMc,QAAQC,eAEjDpC,KAAKgB,YACLhB,KAAK8B,SACL9B,KAAK+B,YACL/B,KAAKgC,UACLhC,KAAKiC,U,CAQP,oBAAAI,GACElB,OAAOmB,oBAAoB,UAAWtC,KAAKU,iB,CAG7C,gBAAA6B,GACEpB,OAAOqB,iBAAiB,UAAWxC,KAAKU,iB,CAG1C,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAA/B,IAAA,2CAACgC,KAAK,SAAoB,oBAAOC,MAAO,CAAE,WAAY7C,KAAKQ,SAC9DkC,EAAA,OAAA9B,IAAA,2CAAKkC,MAAO9C,KAAKC,KAAO,uBAAyB,kBAAmB4C,MAAO7C,KAAKS,QAC9EiC,EAAA,OAAA9B,IAAA,2CAAKkC,MAAO9C,KAAKC,KAAO,sBAAwB,iBAAkB8C,QAAS/C,KAAKe,cAChF2B,EAAK,OAAA9B,IAAA,2CAAAkC,MAAM,WAETJ,EAAK,OAAA9B,IAAA,2CAAAkC,MAAM,iBACTJ,EAAyB,2BAAA9B,IAAA,2CAAAoC,SAAS,QAAQC,MAAM,QAAQC,KAAK,QAAQH,QAAS/C,KAAKe,YAAaoC,SAAQ,QAE1GT,EAAa,QAAA9B,IAAA,6CAEb8B,EAAK,OAAA9B,IAAA,2CAAAkC,MAAM,eAAeC,QAAS/C,KAAKe,aACtC2B,EAAyB,2BAAA9B,IAAA,2CAAAqC,MAAM,QAAQD,SAAS,QAAQE,KAAK,SAC1DlD,KAAKO,qB","ignoreList":[]}