@sankhyalabs/ezui 6.3.3 → 6.4.0-dev.1

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

@@ -1,19 +1,54 @@
 import { ElementIDUtils } from "@sankhyalabs/core";
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class EzButton {
   constructor() {
+    this.createRipple = (event) => {
+      const button = this._button;
+      if (!button || this.isDisabled || !this.enabled)
+        return;
+      const rect = button.getBoundingClientRect();
+      let clientX, clientY;
+      if (event instanceof MouseEvent) {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      }
+      else {
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+      }
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      const newRipple = { x, y, id: Date.now() };
+      this.ripples = [...this.ripples, newRipple];
+      this.isPressed = true;
+      setTimeout(() => {
+        this.isPressed = false;
+      }, 150);
+      setTimeout(() => {
+        this.ripples = this.ripples.filter(ripple => ripple.id !== newRipple.id);
+      }, 600);
+    };
+    this.ripples = [];
+    this.isPressed = false;
     this.label = undefined;
     this.enabled = true;
+    this.isDisabled = false;
     this.mode = "regular";
     this.image = undefined;
     this.iconName = undefined;
-    this.size = undefined;
+    this.size = "medium";
+    this.variant = undefined;
+    this.type = "button";
+    this.leftIconName = undefined;
+    this.rightIconName = undefined;
+    this.suppressAnimation = false;
   }
   /**
    * Aplica o foco no botão.
    */
   async setFocus() {
     this._button.focus();
+    this._button.classList.add("force-focus-visible");
   }
   /**
    * Remove o foco do botão.
@@ -21,12 +56,32 @@ export class EzButton {
   async setBlur() {
     this._button.blur();
   }
+  onMouseDown(event) {
+    this.createRipple(event);
+  }
+  onTouchStart(event) {
+    this.createRipple(event);
+  }
   clickListener(evt) {
-    if (!this.enabled) {
+    const isDisabled = !this.enabled ||
+      this.isDisabled === true ||
+      this.isDisabled === "" ||
+      this.isDisabled === "full";
+    if (isDisabled) {
       evt.stopImmediatePropagation();
     }
   }
+  removeForcedFocusVisible() {
+    var _a;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.classList.remove('force-focus-visible');
+  }
+  connectedCallback() {
+    var _a, _b;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.removeForcedFocusVisible.bind(this));
+    (_b = this._button) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.removeForcedFocusVisible.bind(this));
+  }
   componentDidLoad() {
+    var _a;
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element);
     }
@@ -34,17 +89,23 @@ export class EzButton {
       const dataInfo = { id: 'embedded' };
       ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
     }
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', this.removeForcedFocusVisible.bind(this));
+  }
+  disconnectCallback() {
+    var _a;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.removeForcedFocusVisible.bind(this));
   }
   getButtonSize(sizeParam = "medium") {
     const sizeList = ["x-small", "small", "medium", "large"];
     const sizeLowerCase = this.size && this.size.toLowerCase();
     return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
   }
-  getIconSize(sizeParam = "medium") {
-    const sizeList = ["small", "medium", "large"];
-    const sizeLowerCase = this.size && this.size.toLowerCase();
-    const sizeMapped = sizeLowerCase === "x-small" ? "small" : sizeLowerCase;
-    return sizeList.includes(sizeMapped) ? sizeMapped : sizeParam;
+  getButtonSizeClass() {
+    return this.getButtonSize() ? `btn-icon--${this.getButtonSize()}` : "";
+  }
+  getIconSize() {
+    const iconSize = this.size === "x-small" ? "small" : this.size;
+    return iconSize;
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -52,31 +113,40 @@ export class EzButton {
     if (!!content) {
       if (this.mode == "link") {
         content.style.display = "inline";
-        if (slot.name == "leftIcon") {
-          content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
-        }
-        else if (slot.name == "rightIcon") {
-          content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
-        }
       }
       else {
         content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
       }
     }
   }
+  renderRipples() {
+    return this.ripples.map((ripple) => (h("span", { key: ripple.id, class: "ripple", style: {
+        left: `${ripple.x - 10}px`,
+        top: `${ripple.y - 10}px`,
+      } })));
+  }
   render() {
-    if (this.mode == "icon") {
-      return (h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
-    }
-    else if (this.mode == "label-icon") {
-      return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), h("label", { title: this.label }, this.label)));
-    }
-    else if (this.mode == "link") {
-      return (h("a", { class: `${this.getIconSize()} ${!this.enabled ? "disabled" : ""}`, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-    else {
-      return (h("button", { class: this.getButtonSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
+    const renderButton = () => {
+      if (this.mode == "icon") {
+        return (h("button", { class: `btn-icon ${this.getButtonSizeClass()} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() }), !this.suppressAnimation && this.renderRipples()));
+      }
+      if (this.mode == "label-icon") {
+        return (h("div", { class: `label-icon  ${(this.isDisabled === "full" || this.isDisabled === "" || this.isDisabled === true || !this.enabled) ? "disabled" : ""}` }, h("button", { class: `btn-icon ${this.getButtonSizeClass()} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() }), !this.suppressAnimation && this.renderRipples()), h("label", { title: this.label }, this.label)));
+      }
+      if (this.mode == "link") {
+        return (h("a", { class: `${this.getIconSize()} ${(this.isDisabled === "full" || this.isDisabled === "" || this.isDisabled === true || !this.enabled) ? "disabled" : ""}`, tabIndex: 0, ref: (el) => this._button = el }, this.leftIconName
+          ? h("ez-icon", { class: "leftIcon", iconName: this.leftIconName, size: this.getIconSize() })
+          : h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, this.rightIconName
+          ? h("ez-icon", { class: "rightIcon", iconName: this.rightIconName, size: this.getIconSize() })
+          : h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+      }
+      return (h("button", { class: `${this.getButtonSize("")} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, this.leftIconName
+        ? h("ez-icon", { class: "leftIcon", iconName: this.leftIconName, size: this.getIconSize() })
+        : h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, this.rightIconName
+        ? h("ez-icon", { class: "rightIcon", iconName: this.rightIconName, size: this.getIconSize() })
+        : h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), !this.suppressAnimation && this.renderRipples()));
+    };
+    return (h(Host, { class: `${this.variant ? `ez-button--${this.variant}` : ""}` }, renderButton()));
   }
   static get is() { return "ez-button"; }
   static get encapsulation() { return "shadow"; }
@@ -120,13 +190,34 @@ export class EzButton {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use `isDisabled` prop instead."
+            }],
           "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
         },
         "attribute": "enabled",
         "reflect": true,
         "defaultValue": "true"
       },
+      "isDisabled": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | \"full\" | \"\"",
+          "resolved": "\"\" | \"full\" | boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se verdadeiro o clique no bot\u00E3o fica desabilitado mas a navega\u00E7\u00E3o continua funcional.\nSe full, o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
+        },
+        "attribute": "is-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "mode": {
         "type": "string",
         "mutable": false,
@@ -183,7 +274,7 @@ export class EzButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\"",
           "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
           "references": {}
         },
@@ -194,10 +285,104 @@ export class EzButton {
           "text": "Define o tamanho do ez-button."
         },
         "attribute": "size",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "\"medium\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a variante do ez-button."
+        },
+        "attribute": "variant",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo do bot\u00E3o.\nPode ser `button`, `submit` ou `reset`."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"button\""
+      },
+      "leftIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone esquerdo do ez-button.\nTem prioridade sobre o slot `leftIcon`."
+        },
+        "attribute": "left-icon-name",
+        "reflect": false
+      },
+      "rightIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone direto do ez-button.\nTem prioridade sobre o slot `rightIcon`."
+        },
+        "attribute": "right-icon-name",
+        "reflect": false
+      },
+      "suppressAnimation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Se verdadeiro, desabilita a anima\u00E7\u00E3o de ripple."
+        },
+        "attribute": "suppress-animation",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "ripples": {},
+      "isPressed": {}
+    };
+  }
   static get methods() {
     return {
       "setFocus": {
@@ -237,6 +422,18 @@ export class EzButton {
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{
+        "name": "mousedown",
+        "method": "onMouseDown",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchstart",
+        "method": "onTouchStart",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
         "name": "click",
         "method": "clickListener",
         "target": undefined,

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

@@ -1,11 +1,9 @@
 import { FloatingManager } from "@sankhyalabs/core";
 import { forceUpdate, h } from "@stencil/core";
+import initI18n from "../../utils/i18n";
 export class EzCalendar {
   constructor() {
     this._firstRender = true;
-    this._todayLabel = "Hoje";
-    this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
-    this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
     this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
     this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
     this.value = new Date();
@@ -82,7 +80,7 @@ export class EzCalendar {
     return this._hostElem.dataset.isFixed === "true";
   }
   getMonthLabel() {
-    return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
+    return this.i18n(`ez-calendar.month.${this._currentPosition.getMonth()}`) + " " + this._currentPosition.getFullYear();
   }
   isSelectedDate(d) {
     if (this.value) {
@@ -142,6 +140,9 @@ export class EzCalendar {
       }
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidRender() {
     if (this.floating && this._firstRender) {
       this._calendarHeight = this._box.clientHeight;
@@ -179,7 +180,7 @@ export class EzCalendar {
     const firstDate = new Date();
     firstDate.setTime(this._currentPosition.getTime());
     firstDate.setDate(1 - firstDate.getDay());
-    return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { "data-day": day, class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
+    return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, [...Array(7).keys()].map(day => h("div", { "data-day": this.i18n(`ez-calendar.weekDay.${day}`), class: "calendar__cell calendar__cell--unselectable" }, this.i18n(`ez-calendar.weekDay.${day}`)))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
       const date = new Date();
       date.setTime(firstDate.getTime());
       date.setDate(date.getDate() + offset + index);
@@ -192,7 +193,7 @@ export class EzCalendar {
         classNames += " calendar__cell--selected";
       }
       return h("div", { "data-day-month": dataDayMonth, class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
-    })))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
+    })))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this.i18n('ez-calendar.today')))), (this.time || this.showSeconds) &&
       h("div", { class: "calendar-time" }, h("div", { class: "calendar-time__header" }, h("div", null, "H"), h("div", { class: "separatorTime" }, ":"), h("div", null, "M"), this.showSeconds &&
         h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
         h("div", null, "S")), h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {

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

@@ -351,7 +351,7 @@ input.switch-mode:checked:disabled::after {
   font-family: var(--ez-check--label--font-family);
   cursor: default;
   width: inherit;
-  display: flex;
+  display: block;
   align-content: center;
   gap: var(--space--small);
 }