@sankhyalabs/ezui 1.1.6 → 1.1.10

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

@@ -1,125 +1,125 @@
-import { Component, h, Prop } from '@stencil/core';
-export class EzButton {
-  constructor() {
-    /**
-     * Deixa o botão disponível ou não para interação com o usuário.
-     */
-    this.enabled = true;
-    /**
-       * Define o modo de uso do botão; opções: icon, link e regular
-       */
-    this.mode = "regular";
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (this.mode == "link") {
-      content.style.display = "inline";
-      if (slot.name == "leftIcon") {
-        content.style.paddingRight = "var(--bt__inline__icon--padding)";
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--bt__inline__icon--padding)";
-      }
-    }
-  }
-  render() {
-    if (this.mode == "icon") {
-      return (h("button", { class: "icon", type: "button", disabled: !this.enabled },
-        h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => { if (!this.enabled)
-            evt.stopPropagation(); } })));
-    }
-    else if (this.mode == "link") {
-      return (h("a", null,
-        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-        this.label,
-        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-    else {
-      return (h("button", { type: "button", disabled: !this.enabled },
-        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-        this.label,
-        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-  }
-  static get is() { return "ez-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-button.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-button.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Texto indicativo da a\u00E7\u00E3o do bot\u00E3o."
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "enabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Deixa o bot\u00E3o dispon\u00EDvel ou n\u00E3o para intera\u00E7\u00E3o com o usu\u00E1rio."
-      },
-      "attribute": "enabled",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o modo de uso do bot\u00E3o; op\u00E7\u00F5es: icon, link e regular"
-      },
-      "attribute": "mode",
-      "reflect": true,
-      "defaultValue": "\"regular\""
-    },
-    "image": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o, est\u00E1 propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo 'icon'"
-      },
-      "attribute": "image",
-      "reflect": true
-    }
-  }; }
-}
+import { Component, h, Prop } from '@stencil/core';
+export class EzButton {
+  constructor() {
+    /**
+     * Deixa o botão disponível ou não para interação com o usuário.
+     */
+    this.enabled = true;
+    /**
+       * Define o modo de uso do botão; opções: icon, link e regular
+       */
+    this.mode = "regular";
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (this.mode == "link") {
+      content.style.display = "inline";
+      if (slot.name == "leftIcon") {
+        content.style.paddingRight = "var(--bt__inline__icon--padding)";
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.paddingLeft = "var(--bt__inline__icon--padding)";
+      }
+    }
+  }
+  render() {
+    if (this.mode == "icon") {
+      return (h("button", { class: "icon", type: "button", disabled: !this.enabled },
+        h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => { if (!this.enabled)
+            evt.stopPropagation(); } })));
+    }
+    else if (this.mode == "link") {
+      return (h("a", null,
+        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+        this.label,
+        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+    else {
+      return (h("button", { type: "button", disabled: !this.enabled },
+        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+        this.label,
+        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+  }
+  static get is() { return "ez-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-button.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Texto indicativo da a\u00E7\u00E3o do bot\u00E3o."
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o bot\u00E3o dispon\u00EDvel ou n\u00E3o para intera\u00E7\u00E3o com o usu\u00E1rio."
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo de uso do bot\u00E3o; op\u00E7\u00F5es: icon, link e regular"
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
+    },
+    "image": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o, est\u00E1 propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo 'icon'"
+      },
+      "attribute": "image",
+      "reflect": true
+    }
+  }; }
+}

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

@@ -1,210 +1,210 @@
-:host {
-  --cal--font-family: var(--font-pattern, Arial);
-  --cal--color: var(--title--primary, #626e82);
-  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535,0 0 1px transparent);
-  
-  /* cal__body */
-  --cal__body--background-color: var(--background--xlight, #FFF);
-  --cal__body--padding: var(--space--medium, 12px);
-  --cal__body--border-radius: var(--border--radius-medium, 12px);
-  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
-  
-  /* cal__header */
-  --cal__header-line--stroke: 2px;
-  --cal__header-line--color: var(--color--strokes, #C0C0C0);
-  
-  /* nav buttons */
-  --cal__nav-btn--fill: var(--text--primary, #008561);
-  --cal__nav-btn--over--fill: var(--color--primary, #350404);
-  --cal__nav-btn--width: 10px;
-  --cal__nav-btn--height: 16px;
-  --cal__nav-btn--previous-path: path("M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z");
-  --cal__nav-btn--next-path: path("M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z");
-
-  /* cell */
-  --cal__cell--margin: 0px var(--space--small, 12px);
-  --cal__cell--width: var(--space--large, 24px);
-  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
-  --cal__cell--border-radius: var(--border--radius-small, 6px);
-  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
-  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
-  --cal__cell--selected--background-color: var(--color--primary, #008561);
-  --cal__cell--selected--color: var(--color--inverted, #FFF);
-
-  /* btn today */
-  --cal__btn-today--color: var(--color--primary);
-  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
-  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
-
-  /***************
-     host style  
-  ***************/
-  /*private*/
-  position: relative;
-  display: flex;
-  user-select: none;
-}
-
-.calendar{
-  /*private*/
-  z-index: var(--more-visible, 2);
-  display: flex;
-  flex-direction: column;
-  
-  /*public*/
-  background-color: var(--cal__body--background-color);
-  padding: var(--cal__body--padding);
-  border-radius: var(--cal__body--border-radius);
-  box-shadow: var(--cal__body--shadow);
-}
-
-.calendar__header{
-  /*private*/
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: var(--space--medium, 12px);
-  margin: var(--space--small, 6px) var(--space--, 12px);
-  
-  /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
-}
-
-.calendar__btn-next, .calendar__btn-previous{
-  /*private*/
-  outline: none;
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  padding: 0px;
-}
-
-.calendar__btn-next::after, .calendar__btn-previous::after{
-  /*private*/
-  content: '';
-  display: flex;
-
-  /*public*/
-  background-color: var(--cal__nav-btn--fill);/*parece estranho, mas o bg funciona como fill pq aplicaremos clip-path.*/
-  width: var(--cal__nav-btn--width);
-  height: var(--cal__nav-btn--height);
-}
-
-.calendar__btn-previous::after{
-  /*public*/
-  clip-path: var(--cal__nav-btn--previous-path);
-}
-
-.calendar__btn-next::after{
-  /*public*/
-  clip-path: var(--cal__nav-btn--next-path);
-}
-
-.calendar__btn-next:hover::after, .calendar__btn-previous:hover::after{
-  /*public*/
-  background-color: var(--cal__nav-btn--over--fill);
-}
-
-.calendar__lbl-month{
-  /*private*/
-  font-weight: var(--text-weight--large, 600);
-  font-size: var(--title--medium, 16px);
-
-  /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-}
-
-.calendar__line{
-  /*private*/
-  display: flex;
-  padding: 0px;
-  margin: 0px;
-}
-
-.calendar__cell{
-  /*private*/
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  cursor: pointer;
-  font-size: var(--text--small, 12px);
-
-  /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  padding: var(--cal__cell--padding);
-  margin: var(--cal__cell--margin);
-  min-width: var(--cal__cell--width);
-  border-radius: var(--cal__cell--border-radius);
-}
-
-
-.calendar__cell:hover{
-  /*public*/
-  background-color: var(--cal__cell--over--background-color);
-}
-
-.calendar__cell--secondary{
-  /*public*/
-  color: var(--cal__cell--outset--color);
-}
-
-.calendar__cell--unselectable:hover{
-  /*private*/
-  background-color: unset;
-  border-radius: unset;
-  cursor: unset;
-}
-
-.calendar__cell--unselectable{
-  /*private*/
-  font-weight: var(--text-weight--large, 600);
-
-  /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-}
-
-.calendar__cell--selected, .calendar__cell--selected:hover{
-  /*public*/
-  background-color: var(--cal__cell--selected--background-color);
-  color: var(--cal__cell--selected--color);
-}
-
-.calendar__body {
-  /*private*/
-  padding: var(--space--small, 6px) 0px;
-}
-
-.calendar__footer{
-  /*private*/
-  display: flex;
-  flex-direction: column;
-}
-
-.calendar__btn-today{
-  /*private*/
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  font-weight: var(--text-weight--large, 600);
-  font-size: var(--title--small);
-  padding: var(--space--extra-small, 6px);
-
-  /*public*/
-  font-family: var(--cal--font-family);
-  text-shadow: var(--cal--text-shadow);
-  color: var(--cal__btn-today--color);
-  border-radius: var(--cal__btn-today--border-radius);
-}
-
-.calendar__btn-today:hover{
-  /*public*/
-  background-color: var(--cal__btn-today--hover--background-color);
-}
+:host {
+  --cal--font-family: var(--font-pattern, Arial);
+  --cal--color: var(--title--primary, #626e82);
+  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535,0 0 1px transparent);
+  
+  /* cal__body */
+  --cal__body--background-color: var(--background--xlight, #FFF);
+  --cal__body--padding: var(--space--medium, 12px);
+  --cal__body--border-radius: var(--border--radius-medium, 12px);
+  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+  
+  /* cal__header */
+  --cal__header-line--stroke: 2px;
+  --cal__header-line--color: var(--color--strokes, #C0C0C0);
+  
+  /* nav buttons */
+  --cal__nav-btn--fill: var(--text--primary, #008561);
+  --cal__nav-btn--over--fill: var(--color--primary, #350404);
+  --cal__nav-btn--width: 10px;
+  --cal__nav-btn--height: 16px;
+  --cal__nav-btn--previous-path: path("M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z");
+  --cal__nav-btn--next-path: path("M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z");
+
+  /* cell */
+  --cal__cell--margin: 0px var(--space--small, 12px);
+  --cal__cell--width: var(--space--large, 24px);
+  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
+  --cal__cell--border-radius: var(--border--radius-small, 6px);
+  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
+  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
+  --cal__cell--selected--background-color: var(--color--primary, #008561);
+  --cal__cell--selected--color: var(--color--inverted, #FFF);
+
+  /* btn today */
+  --cal__btn-today--color: var(--color--primary);
+  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
+  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  position: relative;
+  display: flex;
+  user-select: none;
+}
+
+.calendar{
+  /*private*/
+  z-index: var(--more-visible, 2);
+  display: flex;
+  flex-direction: column;
+  
+  /*public*/
+  background-color: var(--cal__body--background-color);
+  padding: var(--cal__body--padding);
+  border-radius: var(--cal__body--border-radius);
+  box-shadow: var(--cal__body--shadow);
+}
+
+.calendar__header{
+  /*private*/
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--space--medium, 12px);
+  margin: var(--space--small, 6px) var(--space--, 12px);
+  
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
+}
+
+.calendar__btn-next, .calendar__btn-previous{
+  /*private*/
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  padding: 0px;
+}
+
+.calendar__btn-next::after, .calendar__btn-previous::after{
+  /*private*/
+  content: '';
+  display: flex;
+
+  /*public*/
+  background-color: var(--cal__nav-btn--fill);/*parece estranho, mas o bg funciona como fill pq aplicaremos clip-path.*/
+  width: var(--cal__nav-btn--width);
+  height: var(--cal__nav-btn--height);
+}
+
+.calendar__btn-previous::after{
+  /*public*/
+  clip-path: var(--cal__nav-btn--previous-path);
+}
+
+.calendar__btn-next::after{
+  /*public*/
+  clip-path: var(--cal__nav-btn--next-path);
+}
+
+.calendar__btn-next:hover::after, .calendar__btn-previous:hover::after{
+  /*public*/
+  background-color: var(--cal__nav-btn--over--fill);
+}
+
+.calendar__lbl-month{
+  /*private*/
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--medium, 16px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+}
+
+.calendar__line{
+  /*private*/
+  display: flex;
+  padding: 0px;
+  margin: 0px;
+}
+
+.calendar__cell{
+  /*private*/
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+  font-size: var(--text--small, 12px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+  padding: var(--cal__cell--padding);
+  margin: var(--cal__cell--margin);
+  min-width: var(--cal__cell--width);
+  border-radius: var(--cal__cell--border-radius);
+}
+
+
+.calendar__cell:hover{
+  /*public*/
+  background-color: var(--cal__cell--over--background-color);
+}
+
+.calendar__cell--secondary{
+  /*public*/
+  color: var(--cal__cell--outset--color);
+}
+
+.calendar__cell--unselectable:hover{
+  /*private*/
+  background-color: unset;
+  border-radius: unset;
+  cursor: unset;
+}
+
+.calendar__cell--unselectable{
+  /*private*/
+  font-weight: var(--text-weight--large, 600);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+}
+
+.calendar__cell--selected, .calendar__cell--selected:hover{
+  /*public*/
+  background-color: var(--cal__cell--selected--background-color);
+  color: var(--cal__cell--selected--color);
+}
+
+.calendar__body {
+  /*private*/
+  padding: var(--space--small, 6px) 0px;
+}
+
+.calendar__footer{
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar__btn-today{
+  /*private*/
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--small);
+  padding: var(--space--extra-small, 6px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  text-shadow: var(--cal--text-shadow);
+  color: var(--cal__btn-today--color);
+  border-radius: var(--cal__btn-today--border-radius);
+}
+
+.calendar__btn-today:hover{
+  /*public*/
+  background-color: var(--cal__btn-today--hover--background-color);
+}