@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,239 @@
+import { Host, h } from "@stencil/core";
+import { FloatingManager } from '@sankhyalabs/core';
+export class EzModal {
+  constructor() {
+    this.handleKeyboardEvent = (ev) => {
+      if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
+        this.closeModal();
+      }
+    };
+    this.modalSize = undefined;
+    this.align = undefined;
+    this.heightMode = "regular";
+    this.opened = true;
+    this.closeEsc = false;
+    this.closeOutsideClick = false;
+    this.scrim = "medium";
+  }
+  observeOpened() {
+    if (this.opened) {
+      this._overlayId = FloatingManager.subscribeOverlayControl(this._modalRef);
+      document.addEventListener("keydown", this.handleKeyboardEvent);
+    }
+    else {
+      FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
+      document.removeEventListener("keydown", this.handleKeyboardEvent);
+    }
+  }
+  closeModal() {
+    this.opened = false;
+    this.ezCloseModal.emit(this.opened);
+  }
+  componentDidLoad() {
+    this.observeOpened();
+  }
+  componentDidRender() {
+    if (this.opened) {
+      this.ezOpenModal.emit();
+    }
+  }
+  onMouseDownHandler(event) {
+    if (this.closeOutsideClick && event.target === this._overlay) {
+      this.closeModal();
+    }
+  }
+  render() {
+    const positionSufix = this.align === "left" ? "left" : "right";
+    const regularVerticalPaddingClass = this.heightMode === "regular" ? 'modal__vertical-padding' : '';
+    const modalContentHeightMode = this.heightMode === "regular" ? `modal__content--${positionSufix}` : '';
+    const scrimType = `modal__screen-${this.scrim}`;
+    return (h(Host, null, this.opened
+      ?
+        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt) }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
+      :
+        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": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do ez-modal. Devem ser definidas seguindo grid-layout. Exemplo: `col-sd-3`."
+        },
+        "attribute": "modal-size",
+        "reflect": false
+      },
+      "align": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"right\" | \"left\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o alinhamento do ez-modal."
+        },
+        "attribute": "align",
+        "reflect": false
+      },
+      "heightMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "keyof THeightMode",
+          "resolved": "\"full\" | \"regular\"",
+          "references": {
+            "THeightMode": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Ativa o modo Full, permitindo que o Modal expanda-se verticalmente e ocupe todo o espa\u00E7o dispon\u00EDvel."
+        },
+        "attribute": "height-mode",
+        "reflect": false,
+        "defaultValue": "\"regular\""
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o ez-modal est\u00E1 aberto."
+        },
+        "attribute": "opened",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "closeEsc": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o ez-modal ser\u00E1 fechado ao clicar `ESC`."
+        },
+        "attribute": "close-esc",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "closeOutsideClick": {
+        "type": "boolean",
+        "mutable": false,
+        "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": "close-outside-click",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "scrim": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"medium\" | \"light\"",
+          "resolved": "\"light\" | \"medium\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de scrim a ser aplicado no overlay do modal"
+        },
+        "attribute": "scrim",
+        "reflect": false,
+        "defaultValue": "\"medium\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezCloseModal",
+        "name": "ezCloseModal",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o modal \u00E9 fechado."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "ezOpenModal",
+        "name": "ezOpenModal",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o modal \u00E9 aberto."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "opened",
+        "methodName": "observeOpened"
+      }];
+  }
+}

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

@@ -0,0 +1,55 @@
+:host {
+  --ez-modal-container-overflow-y: auto;
+  --ez-modal-container-overflow-x: clip;
+  display: grid;
+  grid-template-rows: 0 auto 1fr auto 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ez-modal-container__header {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.ez-modal-container__content {
+  overflow-y: var(--ez-modal-container-overflow-y);
+  overflow-x: var(--ez-modal-container-overflow-x);
+}
+
+.ez-modal-container__content::-webkit-scrollbar {
+  width: var(--space--small);
+  min-width: var(--space--small);
+  max-width: var(--space--small);
+}
+
+.ez-modal-container__footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: var(--space--medium);
+  width: 100%;
+  padding-top: var(--space--small, 6px);
+}
+
+.ez-modal-container__title {
+  display: grid;
+}
+
+.ez-modal-container__close-button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+.ez-modal-container__close-icon {
+  --icon--color: var(--title--primary, #2B3A54)
+}
+
+.ez-modal-container__focus-ctrl {
+  height: 0px;
+  background-color: transparent;
+  border: none;
+}

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

@@ -0,0 +1,191 @@
+import { h, Host } from "@stencil/core";
+import ModalAction from "./modal-action";
+import ModalButtonStatus from "./modal-button-status";
+export class EzModalContainer {
+  constructor() {
+    this.modalTitle = undefined;
+    this.modalSubTitle = undefined;
+    this.showTitleBar = true;
+    this.cancelButtonLabel = undefined;
+    this.okButtonLabel = undefined;
+    this.cancelButtonStatus = undefined;
+    this.okButtonStatus = undefined;
+  }
+  cancelIsVisible() {
+    return (this.cancelButtonStatus !== ModalButtonStatus.HIDDEN && this.cancelButtonLabel != undefined);
+  }
+  okIsVisible() {
+    return (this.okButtonStatus !== ModalButtonStatus.HIDDEN && this.okButtonLabel != undefined);
+  }
+  componentDidLoad() {
+    window.requestAnimationFrame(() => {
+      this.ezModalAction.emit(ModalAction.LOAD);
+    });
+  }
+  focusLast() {
+    if (this._okButton == undefined) {
+      return;
+    }
+    this._okButton.setFocus();
+  }
+  focusFirst() {
+    this._closeButton.focus();
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", null, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+  }
+  static get is() { return "ez-modal-container"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./ez-modal-container.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-modal-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modalTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do modal."
+        },
+        "attribute": "modal-title",
+        "reflect": false
+      },
+      "modalSubTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto do subt\u00EDtulo, geralmente usado para orienta\u00E7\u00E3o do usu\u00E1rio."
+        },
+        "attribute": "modal-sub-title",
+        "reflect": false
+      },
+      "showTitleBar": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o cabe\u00E7alho ser\u00E1 mostrado."
+        },
+        "attribute": "show-title-bar",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "cancelButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o texto do bot\u00E3o de cancelamento."
+        },
+        "attribute": "cancel-button-label",
+        "reflect": false
+      },
+      "okButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina o texto do bot\u00E3o de confirma\u00E7\u00E3o."
+        },
+        "attribute": "ok-button-label",
+        "reflect": false
+      },
+      "cancelButtonStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"HIDDEN\"|\"ENABLED\"|\"DISABLED\"",
+          "resolved": "\"DISABLED\" | \"ENABLED\" | \"HIDDEN\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o estado do bot\u00E3o de cancelamento."
+        },
+        "attribute": "cancel-button-status",
+        "reflect": false
+      },
+      "okButtonStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"HIDDEN\"|\"ENABLED\"|\"DISABLED\"",
+          "resolved": "\"DISABLED\" | \"ENABLED\" | \"HIDDEN\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o estado do bot\u00E3o de confirma\u00E7\u00E3o."
+        },
+        "attribute": "ok-button-status",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezModalAction",
+        "name": "ezModalAction",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Representa a intera\u00E7\u00E3o com o usu\u00E1rio.\nOK - Quando o bot\u00E3o \u00E9 acionado\nCANCEL - Quando o bot\u00E3o de cancelar \u00E9 acionado\nCLOSE - Quando o bot\u00E3o de fechar \u00E9 acionado.\nLOAD - Quando o modal \u00E9 carregado (eventualmente pode ser usado para dar foco a um elemento espec\u00EDfico)"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,2 @@
+export { default as ModalAction } from './modal-action';
+export { default as ModalButtonStatus } from './modal-button-status';

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

@@ -0,0 +1,8 @@
+var ModalAction;
+(function (ModalAction) {
+  ModalAction["CLOSE"] = "CLOSE";
+  ModalAction["OK"] = "OK";
+  ModalAction["CANCEL"] = "CANCEL";
+  ModalAction["LOAD"] = "LOAD";
+})(ModalAction || (ModalAction = {}));
+export default ModalAction;

package/dist/collection/components/ez-modal-container/modal-button-status.js

@@ -0,0 +1,7 @@
+var ModalButtonStatus;
+(function (ModalButtonStatus) {
+  ModalButtonStatus["ENABLED"] = "ENABLED";
+  ModalButtonStatus["DISABLED"] = "DISABLED";
+  ModalButtonStatus["HIDDEN"] = "HIDDEN";
+})(ModalButtonStatus || (ModalButtonStatus = {}));
+export default ModalButtonStatus;

package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.css

@@ -0,0 +1,36 @@
+:host {
+  --ez-check--outter-gap: 0px;
+
+  display: block;
+  width: 304px;
+  height: 322px;
+  max-height: calc(100vh - 350px);
+}
+
+.multi-selection__input {
+  margin-bottom: var(--space--2xs, 8px);
+}
+
+.multi-selection__content-options {
+  position: relative;
+  top: -12px;
+  left: -4px;
+}
+
+.multi-selection__select-all {
+  height: var(--space--xl);
+  margin: 0 var(--space--small, 6px);
+}
+
+.multi-selection__list {
+  height: 235px;
+  max-height: calc(100vh - 435px);
+  overflow-y: auto;
+  overflow-x: clip;
+}
+
+.multi-selection__list::-webkit-scrollbar {
+  width: var(--space--small);
+  min-width: var(--space--small);
+  max-width: var(--space--small);
+}