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

package/dist/collection/components/ez-loading-bar/ez-loading-bar.css

@@ -0,0 +1,85 @@
+:host {
+    position: fixed;
+    top: 0px;
+    width: 100%;
+}
+
+.loading-bar { 
+    width:100%; 
+    margin:0 auto;
+    position: absolute;
+    background-color: var(--color--primary-300, #e2f4ef);
+    height: 5px;
+}
+
+.loading-bar:before {
+    content:'';
+    position:absolute;
+}
+
+.loading-bar__container { 
+    position:absolute;
+    top:0;
+    right:100%;
+    bottom:0;
+    left:0;
+    background-color: var(--color--primary, #008561); 
+    width:0;
+    animation: loading 2s linear infinite;
+}
+  
+@keyframes loading {
+    0% {
+        left:0%;
+        right:100%;
+        width:0%;
+    }
+    25% {
+        left:0%;
+        right:75%;
+        width:25%;
+    }
+    50% {
+        left:0%;
+        right:50%;
+        width:90%;
+    }
+    70% {
+        right:0%;
+        left:75%;
+        width:25%;
+    }
+    100% {
+        left:100%;
+        right:0%;
+        width:0%;
+    }
+}
+
+@-webkit-keyframes loading {
+    0% {
+        left:0%;
+        right:100%;
+        width:0%;
+    }
+    25% {
+        left:0%;
+        right:75%;
+        width:25%;
+    }
+    50% {
+        left:0%;
+        right:50%;
+        width:90%;
+    }
+    70% {
+        right:0%;
+        left:75%;
+        width:25%;
+    }
+    100% {
+        left:100%;
+        right:0%;
+        width:0%;
+    }
+}

package/dist/collection/components/ez-loading-bar/ez-loading-bar.js

@@ -0,0 +1,74 @@
+import { h, Host } from '@stencil/core';
+export class EzLoadingBar {
+  constructor() {
+    this._showLoading = true;
+  }
+  /**
+   * Oculta o ez-loading-bar.
+   */
+  async hide() {
+    this._showLoading = false;
+  }
+  /**
+   * Exibe o ez-loading-bar.
+   */
+  async show() {
+    this._showLoading = true;
+  }
+  render() {
+    return (h(Host, null, this._showLoading && h("div", { class: "loading-bar" }, h("div", { class: "loading-bar__container" }))));
+  }
+  static get is() { return "ez-loading-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-loading-bar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-loading-bar.css"]
+    };
+  }
+  static get states() {
+    return {
+      "_showLoading": {}
+    };
+  }
+  static get methods() {
+    return {
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Oculta o ez-loading-bar.",
+          "tags": []
+        }
+      },
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Exibe o ez-loading-bar.",
+          "tags": []
+        }
+      }
+    };
+  }
+}

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

@@ -0,0 +1,369 @@
+:host {
+  /*@doc Define a camada em que o componente será exibido.*/
+  --ez-modal-z-index: var(--most-visible, 3);
+  /*@doc Define o espaçamento vertical do conteúdo do modal.*/
+  --ez-modal-vertical-padding: var(--space--large, 24px);
+  /*@doc Define o padding entre o conteúdo e o modal */
+  --ez-modal-content-padding: 24px;
+  display: block;
+}
+
+.modal {
+  position: fixed;
+  display: flex;
+  top: 0px;
+  z-index: var(--ez-modal-z-index);
+  left: 0px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 100vh;
+}
+
+.modal__screen-light{
+  background: rgba(0, 4, 12, 0.1);
+}
+
+.modal__screen-medium{
+  backdrop-filter: blur(4px);
+  background: rgba(0, 4, 12, 0.4)
+}
+
+.modal__vertical-padding{
+  padding: var(--ez-modal-vertical-padding) 0;
+}
+
+@keyframes expand-modal--left {
+  from {
+    transform: translate(-100%)
+  }
+}
+
+@keyframes expand-modal--right {
+  from {
+    transform: translate(100%)
+  }
+}
+
+.modal__container {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  box-sizing: border-box;
+  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;
+  box-sizing: border-box;
+  max-height: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background-color: rgb(255, 255, 255);
+  padding: var(--ez-modal-content-padding);
+  box-shadow: rgb(0 38 111 / 12%) 0px 0px 16px 0px;
+}
+
+.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;
+}
+
+/* //////// GRID SYSTEM //////// */
+
+.row {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.col {
+  display: flex;
+  flex-wrap: wrap;
+  align-self: flex-start;
+  box-sizing: border-box;
+}
+
+.col--stretch {
+  align-self: stretch;
+}
+
+.col--undefined {
+  width: unset;
+}
+
+.col--nowrap {
+  flex-wrap: nowrap;
+}
+
+@media screen and (min-width: 320px) {
+  .col--sd-1 {
+    width: 8.33333%;
+  }
+
+  .col--sd-2 {
+    width: 16.66667%;
+  }
+
+  .col--sd-3 {
+    width: 25%;
+  }
+
+  .col--sd-4 {
+    width: 33.33333%;
+  }
+
+  .col--sd-5 {
+    width: 41.66667%;
+  }
+
+  .col--sd-6 {
+    width: 50%;
+  }
+
+  .col--sd-7 {
+    width: 58.33333%;
+  }
+
+  .col--sd-8 {
+    width: 66.66667%;
+  }
+
+  .col--sd-9 {
+    width: 75%;
+  }
+
+  .col--sd-10 {
+    width: 83.33333%;
+  }
+
+  .col--sd-11 {
+    width: 91.66667%;
+  }
+
+  .col--sd-12 {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 480px) {
+  .col--pn-1 {
+    width: 8.33333%;
+  }
+
+  .col--pn-2 {
+    width: 16.66667%;
+  }
+
+  .col--pn-3 {
+    width: 25%;
+  }
+
+  .col--pn-4 {
+    width: 33.33333%;
+  }
+
+  .col--pn-5 {
+    width: 41.66667%;
+  }
+
+  .col--pn-6 {
+    width: 50%;
+  }
+
+  .col--pn-7 {
+    width: 58.33333%;
+  }
+
+  .col--pn-8 {
+    width: 66.66667%;
+  }
+
+  .col--pn-9 {
+    width: 75%;
+  }
+
+  .col--pn-10 {
+    width: 83.33333%;
+  }
+
+  .col--pn-11 {
+    width: 91.66667%;
+  }
+
+  .col--pn-12 {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .col--tb-1 {
+    width: 8.33333%;
+  }
+
+  .col--tb-2 {
+    width: 16.66667%;
+  }
+
+  .col--tb-3 {
+    width: 25%;
+  }
+
+  .col--tb-4 {
+    width: 33.33333%;
+  }
+
+  .col--tb-5 {
+    width: 41.66667%;
+  }
+
+  .col--tb-6 {
+    width: 50%;
+  }
+
+  .col--tb-7 {
+    width: 58.33333%;
+  }
+
+  .col--tb-8 {
+    width: 66.66667%;
+  }
+
+  .col--tb-9 {
+    width: 75%;
+  }
+
+  .col--tb-10 {
+    width: 83.33333%;
+  }
+
+  .col--tb-11 {
+    width: 91.66667%;
+  }
+
+  .col--tb-12 {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .col--md-1 {
+    width: 8.33333%;
+  }
+
+  .col--md-2 {
+    width: 16.66667%;
+  }
+
+  .col--md-3 {
+    width: 25%;
+  }
+
+  .col--md-4 {
+    width: 33.33333%;
+  }
+
+  .col--md-5 {
+    width: 41.66667%;
+  }
+
+  .col--md-6 {
+    width: 50%;
+  }
+
+  .col--md-7 {
+    width: 58.33333%;
+  }
+
+  .col--md-8 {
+    width: 66.66667%;
+  }
+
+  .col--md-9 {
+    width: 75%;
+  }
+
+  .col--md-10 {
+    width: 83.33333%;
+  }
+
+  .col--md-11 {
+    width: 91.66667%;
+  }
+
+  .col--md-12 {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .col--ld-1 {
+    width: 8.33333%;
+  }
+
+  .col--ld-2 {
+    width: 16.66667%;
+  }
+
+  .col--ld-3 {
+    width: 25%;
+  }
+
+  .col--ld-4 {
+    width: 33.33333%;
+  }
+
+  .col--ld-5 {
+    width: 41.66667%;
+  }
+
+  .col--ld-6 {
+    width: 50%;
+  }
+
+  .col--ld-7 {
+    width: 58.33333%;
+  }
+
+  .col--ld-8 {
+    width: 66.66667%;
+  }
+
+  .col--ld-9 {
+    width: 75%;
+  }
+
+  .col--ld-10 {
+    width: 83.33333%;
+  }
+
+  .col--ld-11 {
+    width: 91.66667%;
+  }
+
+  .col--ld-12 {
+    width: 100%;
+  }
+}