@sankhyalabs/ezui 1.1.6 → 1.1.10

package/dist/collection/components/ez-modal/ez-modal.css

@@ -1,87 +1,87 @@
-:host {
-  --modal-z-index: var(--most-visible, 3);
-  --modal-vertical-padding: var(--space--extra-large, 48px);
-  display: block;
-}
-
-.modal {
-  position: fixed;
-  padding: var(--modal-vertical-padding) 0;
-  display: flex;
-  top: 0px;
-  z-index: var(--modal-z-index);
-  left: 0px;
-  width: 100%;
-  height: 100vh;
-  backdrop-filter: blur(4px);
-  background: rgb(0 4 12 / 40%);
-}
-
-@keyframes expand-modal--left {
-  from {
-    transform: translate(-100%)
-  }
-}
-
-@keyframes expand-modal--right {
-  from {
-    transform: translate(100%)
-  }
-}
-
-.modal__container {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  align-items: flex-start;
-}
-
-.modal__container--right {
-  animation: expand-modal--right .2s ease-in-out 1;
-  justify-content: flex-end;
-}
-
-.modal__container--left {
-  animation: expand-modal--left .2s ease-in-out 1;
-  justify-content: flex-start;
-}
-
-.modal__content {
-  display: flex;
-  flex-wrap: wrap;
-  /* position: fixed; */
-  max-height: 89.6vh;
-  overflow-y: auto;
-  background-color: #fff;
-  padding: 24px;
-  border-radius: 12px 0px 0px 12px;
-  box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12);
-}
-
-.modal__content--right {
-  border-radius: 12px 0px 0px 12px;
-}
-
-.modal__content--left {
-  border-radius: 0px 12px 12px 0px;
-}
-
-.modal__box__container {
-  display: flex;
-  flex-wrap: wrap;
-  background-color: #fff;
-  width: 100%;
-  border-radius: 12px;
-}
-
-.small {
-  width: 30%;
-}
-
-.medium {
-  width: 50%;
-}
-
-.large {
-  width: 70%;
+:host {
+  --modal-z-index: var(--most-visible, 3);
+  --modal-vertical-padding: var(--space--extra-large, 48px);
+  display: block;
+}
+
+.modal {
+  position: fixed;
+  padding: var(--modal-vertical-padding) 0;
+  display: flex;
+  top: 0px;
+  z-index: var(--modal-z-index);
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  backdrop-filter: blur(4px);
+  background: rgb(0 4 12 / 40%);
+}
+
+@keyframes expand-modal--left {
+  from {
+    transform: translate(-100%)
+  }
+}
+
+@keyframes expand-modal--right {
+  from {
+    transform: translate(100%)
+  }
+}
+
+.modal__container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.modal__container--right {
+  animation: expand-modal--right .2s ease-in-out 1;
+  justify-content: flex-end;
+}
+
+.modal__container--left {
+  animation: expand-modal--left .2s ease-in-out 1;
+  justify-content: flex-start;
+}
+
+.modal__content {
+  display: flex;
+  flex-wrap: wrap;
+  /* position: fixed; */
+  max-height: 89.6vh;
+  overflow-y: auto;
+  background-color: #fff;
+  padding: 24px;
+  border-radius: 12px 0px 0px 12px;
+  box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12);
+}
+
+.modal__content--right {
+  border-radius: 12px 0px 0px 12px;
+}
+
+.modal__content--left {
+  border-radius: 0px 12px 12px 0px;
+}
+
+.modal__box__container {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #fff;
+  width: 100%;
+  border-radius: 12px;
+}
+
+.small {
+  width: 30%;
+}
+
+.medium {
+  width: 50%;
+}
+
+.large {
+  width: 70%;
 }

package/dist/collection/components/ez-modal/ez-modal.js

@@ -1,200 +1,222 @@
-import { Component, Host, h, Prop, Watch } from '@stencil/core';
-export class EzModal {
-  constructor() {
-    /**
-    * Controle de exibição do Modal
-    */
-    this.oppened = true;
-    /**
-    * Define se o modal será fechado ao digitar ESC
-    */
-    this.closeesc = false;
-    /**
-    * Define se o modal será fechado ao clicar fora do conteúdo.
-    */
-    this.closeoutsideclick = false;
-    this.handleKeyboardEvent = (ev) => {
-      console.log(ev === null || ev === void 0 ? void 0 : ev.key);
-      if ((ev === null || ev === void 0 ? void 0 : ev.key) === 'Escape' && this.closeesc) {
-        this.oppened = false;
-      }
-    };
-  }
-  handleClickOverlay(ev) {
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    if (ev instanceof PointerEvent && this.closeoutsideclick) {
-      this.oppened = false;
-    }
-  }
-  handleOppenedChange() {
-    if (this.oppened) {
-      document.addEventListener('keydown', this.handleKeyboardEvent);
-    }
-    else {
-      document.removeEventListener('keydown', this.handleKeyboardEvent);
-    }
-  }
-  ///////
-  // trapTabKey(e) {
-  //   // Check for TAB key press
-  //   if (e.keyCode === 9) {
-  //     // SHIFT + TAB
-  //     if (e.shiftKey) {
-  //       if (document.activeElement === this._firstTabStop) {
-  //         e.preventDefault();
-  //         this._lastTabStop.focus();
-  //       }
-  //       // TAB
-  //     } else {
-  //       if (document.activeElement === this._lastTabStop) {
-  //         e.preventDefault();
-  //         this._firstTabStop.focus();
-  //       }
-  //     }
-  //   }
-  //   if (e.keyCode === 27) {
-  //     this.closeModal();
-  //   }
-  // }
-  // closeModal() {
-  //   this.oppened = false;
-  //   this._focusedElementBeforeModal.focus();
-  // }
-  // componentDidLoad() {
-  //   this._overlay.addEventListener('keydown', (ev) => { this.trapTabKey(ev) });
-  //   // Save current focus
-  //   this._focusedElementBeforeModal = document.activeElement;
-  //   // Find all focusable children
-  //   var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
-  //   var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
-  //   // Convert NodeList to Array
-  //   focusableElements = Array.prototype.slice.call(focusableElements);
-  //   this._firstTabStop = focusableElements[0];
-  //   this._lastTabStop = focusableElements[focusableElements.length - 1];
-  //   // Focus first child
-  //   this._firstTabStop.focus();
-  // }
-  // componentDidUpdate() {
-  //   var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
-  //   var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
-  // }
-  /////
-  render() {
-    return (h(Host, null, this.oppened ?
-      h("div", { class: 'modal' /* ref={el => this._overlay = el} */, onClick: (ev) => this.handleClickOverlay(ev) },
-        this.align === 'left'
-          ?
-            h("div", { onClick: (ev) => this.handleClickOverlay(ev), class: "modal__container modal__container--left" },
-              h("div", { onClick: (ev) => ev.stopPropagation(), class: "modal__content modal__content--left " + this.modalsize },
-                h("slot", null)))
-          : undefined,
-        this.align === 'right' ?
-          h("div", { onClick: (ev) => this.handleClickOverlay(ev), class: "modal__container modal__container--right" },
-            h("div", { onClick: (ev) => ev.stopPropagation(), class: "modal__content modal__content--right " + this.modalsize },
-              h("slot", null)))
-          : undefined)
-      : undefined));
-  }
-  static get is() { return "ez-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-modal.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-modal.css"]
-  }; }
-  static get properties() { return {
-    "modalsize": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o tamanho do modal devem ser utilizados os tamanhos definidos de colunas como \"col-sd-3\""
-      },
-      "attribute": "modalsize",
-      "reflect": true
-    },
-    "align": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o alinhamento do modal, seus valores podem ser 'right' ou 'left'"
-      },
-      "attribute": "align",
-      "reflect": true
-    },
-    "oppened": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controle de exibi\u00E7\u00E3o do Modal"
-      },
-      "attribute": "oppened",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "closeesc": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define se o modal ser\u00E1 fechado ao digitar ESC"
-      },
-      "attribute": "closeesc",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "closeoutsideclick": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define se o modal ser\u00E1 fechado ao clicar fora do conte\u00FAdo."
-      },
-      "attribute": "closeoutsideclick",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get watchers() { return [{
-      "propName": "oppened",
-      "methodName": "handleOppenedChange"
-    }]; }
-}
+import { Component, Host, h, Prop, Watch, Event } from '@stencil/core';
+export class EzModal {
+  constructor() {
+    /**
+    * Controle de exibição do Modal
+    */
+    this.oppened = true;
+    /**
+    * Define se o modal será fechado ao digitar ESC
+    */
+    this.closeesc = false;
+    /**
+    * Define se o modal será fechado ao clicar fora do conteúdo.
+    */
+    this.closeoutsideclick = false;
+    this.handleKeyboardEvent = (ev) => {
+      console.log(ev === null || ev === void 0 ? void 0 : ev.key);
+      if ((ev === null || ev === void 0 ? void 0 : ev.key) === 'Escape' && this.closeesc) {
+        this.oppened = false;
+        this.ezChange.emit(this.oppened);
+      }
+    };
+  }
+  handleClickOverlay(ev) {
+    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+    if (ev instanceof PointerEvent && this.closeoutsideclick) {
+      this.oppened = false;
+      this.ezChange.emit(this.oppened);
+    }
+  }
+  handleOppenedChange() {
+    if (this.oppened) {
+      document.addEventListener('keydown', this.handleKeyboardEvent);
+    }
+    else {
+      document.removeEventListener('keydown', this.handleKeyboardEvent);
+    }
+  }
+  ///////
+  // trapTabKey(e) {
+  //   // Check for TAB key press
+  //   if (e.keyCode === 9) {
+  //     // SHIFT + TAB
+  //     if (e.shiftKey) {
+  //       if (document.activeElement === this._firstTabStop) {
+  //         e.preventDefault();
+  //         this._lastTabStop.focus();
+  //       }
+  //       // TAB
+  //     } else {
+  //       if (document.activeElement === this._lastTabStop) {
+  //         e.preventDefault();
+  //         this._firstTabStop.focus();
+  //       }
+  //     }
+  //   }
+  //   if (e.keyCode === 27) {
+  //     this.closeModal();
+  //   }
+  // }
+  // closeModal() {
+  //   this.oppened = false;
+  //   this._focusedElementBeforeModal.focus();
+  // }
+  // componentDidLoad() {
+  //   this._overlay.addEventListener('keydown', (ev) => { this.trapTabKey(ev) });
+  //   // Save current focus
+  //   this._focusedElementBeforeModal = document.activeElement;
+  //   // Find all focusable children
+  //   var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
+  //   var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
+  //   // Convert NodeList to Array
+  //   focusableElements = Array.prototype.slice.call(focusableElements);
+  //   this._firstTabStop = focusableElements[0];
+  //   this._lastTabStop = focusableElements[focusableElements.length - 1];
+  //   // Focus first child
+  //   this._firstTabStop.focus();
+  // }
+  // componentDidUpdate() {
+  //   var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
+  //   var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
+  // }
+  /////
+  componentDidLoad() {
+    this.handleOppenedChange();
+  }
+  //Ainda teremos ajustes visuais
+  render() {
+    return (h(Host, null, this.oppened ?
+      h("div", { class: 'modal' /* ref={el => this._overlay = el} */, onClick: (ev) => this.handleClickOverlay(ev) },
+        this.align === 'left'
+          ?
+            h("div", { onClick: (ev) => this.handleClickOverlay(ev), class: "modal__container modal__container--left" },
+              h("div", { onClick: (ev) => ev.stopPropagation(), class: "modal__content modal__content--left " + this.modalsize },
+                h("slot", null)))
+          : undefined,
+        this.align === 'right' ?
+          h("div", { onClick: (ev) => this.handleClickOverlay(ev), class: "modal__container modal__container--right" },
+            h("div", { onClick: (ev) => ev.stopPropagation(), class: "modal__content modal__content--right " + this.modalsize },
+              h("slot", null)))
+          : undefined)
+      : undefined));
+  }
+  static get is() { return "ez-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-modal.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-modal.css"]
+  }; }
+  static get properties() { return {
+    "modalsize": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o tamanho do modal devem ser utilizados os tamanhos definidos de colunas como \"col-sd-3\""
+      },
+      "attribute": "modalsize",
+      "reflect": true
+    },
+    "align": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o alinhamento do modal, seus valores podem ser 'right' ou 'left'"
+      },
+      "attribute": "align",
+      "reflect": true
+    },
+    "oppened": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Controle de exibi\u00E7\u00E3o do Modal"
+      },
+      "attribute": "oppened",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "closeesc": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o modal ser\u00E1 fechado ao digitar ESC"
+      },
+      "attribute": "closeesc",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "closeoutsideclick": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o modal ser\u00E1 fechado ao clicar fora do conte\u00FAdo."
+      },
+      "attribute": "closeoutsideclick",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Um evento disparado quando a propriedade oppened \u00E9 alterada."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "oppened",
+      "methodName": "handleOppenedChange"
+    }]; }
+}