@sankhyalabs/sankhyablocks 1.1.24 → 1.1.25

package/dist/components/ez-calendar2.js

@@ -0,0 +1,242 @@
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
+import { FloatingManager } from '@sankhyalabs/core';
+
+const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"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\"/></svg>');--ez-calendar__nav-btn--next-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"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\"/></svg>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);padding:0px;font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;background-color:var(--ez-calendar__time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:136px;padding:0px;margin:0px;overflow:auto}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";
+
+const EzCalendar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    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"];
+    /**
+     * A data selecionada no calendário
+     */
+    this.value = new Date();
+    /**
+     * No modo floating o calendário só se tornará visível
+     * quando o método show() for acionado.
+     */
+    this.floating = false;
+    /**
+     * Exibe ou não as horas e minutos no calendario
+     */
+    this.time = false;
+    /**
+    * Exibe ou não os segundos no calendario
+    */
+    this.showSeconds = false;
+  }
+  /**
+   * Usado no modo floating. Faz com que o componente seja exibido.
+   * É possível determinar ajustes de posicionamento através dos parâmetros
+   * top, left, bottom e right. Esses parâmetros devem ser informados como
+   * strings no formato css.
+   */
+  async show(top, left, bottom, right) {
+    if (this.floating) {
+      this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
+      window.requestAnimationFrame(() => {
+        this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      });
+      this.scroll();
+    }
+  }
+  /**
+  * Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
+  */
+  async fitVertical(topOffset, bottomOffset) {
+    const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
+    const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
+    if (availableBottom) {
+      this.show(topOffset + "px", undefined, "unset");
+    }
+    else {
+      this.show("unset", undefined, bottomOffset + "px");
+    }
+  }
+  /**
+   * Usado no modo floating. Faz com que o componente seja ocultado.
+   */
+  async hide() {
+    if (this._floatingID !== undefined) {
+      FloatingManager.close(this._floatingID);
+      this._floatingID = undefined;
+    }
+  }
+  valueChanged() {
+    if (this.value) {
+      this._currentPosition.setTime(this.value.getTime());
+      this._currentPosition.setDate(1);
+    }
+  }
+  getMonthLabel() {
+    return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
+  }
+  isSelectedDate(d) {
+    if (this.value) {
+      return this.value.getDate() == d.getDate() && this.value.getMonth() == d.getMonth() && this.value.getFullYear() == d.getFullYear();
+    }
+    return false;
+  }
+  changeMonth(offset) {
+    this._currentPosition.setMonth(this._currentPosition.getMonth() + offset);
+    forceUpdate(this);
+  }
+  selectDate(d) {
+    let newDate = d;
+    if (this.value && (this.time || this.showSeconds)) {
+      newDate.setHours(this.value.getHours());
+      newDate.setMinutes(this.value.getMinutes());
+      if (this.showSeconds) {
+        newDate.setSeconds(this.value.getSeconds());
+      }
+      else {
+        newDate.setSeconds(0);
+      }
+    }
+    this.value = newDate;
+    this.ezChange.emit(this.value);
+  }
+  selectHours(hour) {
+    if (!this.value) {
+      this.value = new Date();
+    }
+    this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), hour, this.value.getMinutes(), this.value.getSeconds());
+    this.ezChange.emit(this.value);
+  }
+  selectMinutes(minute) {
+    if (!this.value) {
+      this.value = new Date();
+    }
+    this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), minute, this.value.getSeconds());
+    this.ezChange.emit(this.value);
+  }
+  selectSeconds(second) {
+    if (!this.value) {
+      this.value = new Date();
+    }
+    this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), this.value.getMinutes(), second);
+    this.ezChange.emit(this.value);
+  }
+  updateScroll(element) {
+    if (element) {
+      const { scrollHeight, clientHeight, scrollTop } = element;
+      const remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
+      if (remainingScroll > 0) {
+        element.classList.add("endHidden");
+      }
+      else {
+        element.classList.remove("endHidden");
+      }
+    }
+  }
+  componentDidRender() {
+    if (this.floating && this._firstRender) {
+      this._calendarHeight = this._box.clientHeight;
+      this._box.remove();
+      this._firstRender = false;
+    }
+    this.updateScroll(this._hoursScroll);
+    this.updateScroll(this._minutesScroll);
+    this.updateScroll(this._secondsScroll);
+  }
+  componentDidLoad() {
+    this.scroll();
+  }
+  scroll() {
+    if (this.time || this.showSeconds) {
+      this._hoursScroll.scrollTop = this._hoursSelect.offsetTop - 64;
+      this._minutesScroll.scrollTop = this._minutesSelect.offsetTop - 64;
+      this.updateScroll(this._hoursScroll);
+      this.updateScroll(this._minutesScroll);
+      if (this.showSeconds) {
+        this._secondsScroll.scrollTop = this._secondsSelect.offsetTop - 64;
+        this.updateScroll(this._secondsScroll);
+      }
+    }
+  }
+  render() {
+    if (this._currentPosition == null) {
+      this._currentPosition = new Date();
+      if (this.value) {
+        this._currentPosition.setTime(this.value.getTime());
+      }
+      this._currentPosition.setDate(1);
+    }
+    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", { 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 => {
+      const date = new Date();
+      date.setTime(firstDate.getTime());
+      date.setDate(date.getDate() + offset + index);
+      let classNames = "calendar__cell";
+      if (this._currentPosition.getMonth() != date.getMonth()) {
+        classNames += " calendar__cell--secondary";
+      }
+      else if (this.isSelectedDate(date)) {
+        classNames += " calendar__cell--selected";
+      }
+      return h("div", { 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-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) => {
+        if (index === this.value.getHours()) {
+          return (h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
+        }
+        else {
+          return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
+        }
+      })), h("div", { class: "calendar__column", ref: elem => this._minutesScroll = elem, onScroll: () => this.updateScroll(this._minutesScroll) }, this._minutosLabel.map((offset, index) => {
+        if (index === this.value.getMinutes()) {
+          return (h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
+        }
+        else {
+          return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
+        }
+      })), this.showSeconds &&
+        h("div", { class: "calendar__column", ref: elem => this._secondsScroll = elem, onScroll: () => this.updateScroll(this._secondsScroll) }, this._minutosLabel.map((offset, index) => {
+          if (index === this.value.getSeconds()) {
+            return (h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
+          }
+          else {
+            return (h("div", { class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
+          }
+        })))))));
+  }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+  static get style() { return ezCalendarCss; }
+}, [1, "ez-calendar", {
+    "value": [1040],
+    "floating": [516],
+    "time": [516],
+    "showSeconds": [516, "show-seconds"],
+    "show": [64],
+    "fitVertical": [64],
+    "hide": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ez-calendar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ez-calendar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EzCalendar);
+      }
+      break;
+  } });
+}
+
+export { EzCalendar as E, defineCustomElement as d };

package/dist/components/ez-check.js

@@ -0,0 +1,6 @@
+import { E as EzCheck$1, d as defineCustomElement$1 } from './ez-check2.js';
+
+const EzCheck = EzCheck$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EzCheck, defineCustomElement };

package/dist/components/ez-check2.js

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const ezCheckCss = ":host{--ez-check--box--width:18px;--ez-check--box--height:18px;--ez-check--width:calc(var(--ez-check--box--width) + 14px);--ez-check--height:calc(var(--ez-check--box--width) + 14px);--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:20px;--ez-switch--pin--height:20px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--checked--background-color:var(--color--primary-300);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-secondary);--ez-switch--pin--checked--background-color:var(--color--primary);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;width:100%;align-items:center;margin:0}input.regularMode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.regularMode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regularMode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regularMode:disabled{cursor:auto;background:none}input.regularMode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regularMode:disabled::before{border:var(--ez-check--disabled--border)}input.regularMode:checked:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regularMode:checked:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regularMode:checked::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regularMode:checked:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regularMode:checked::after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regularMode:checked:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switchMode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--text--secondary, #a2abb9);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switchMode:disabled{background-color:var(--ez-switch--disabled--background-color)}input.switchMode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transform:translateX(-2px) translateY(-3px);border-radius:50%;width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switchMode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color)}input.switchMode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switchMode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width))/2);background-color:var(--ez-switch--pin--focus--background-color)}input.switchMode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switchMode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width)))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-3px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color)}input.switchMode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);text-shadow:var(--text-shadow);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;padding-left:var(--space--small)}.label--disabled{color:var(--ez-check--label--disabled--color)}";
+
+const EzCheck = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    /**
+     * Deixa o campo disponível ou não para interação com o usuário.
+     */
+    this.enabled = true;
+    /**
+     * Existem dois modos de visualização: regular e switch.
+     * Se esta propriedade for omitida, o componete assume o formato "regular".
+     * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
+     * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
+     */
+    this.mode = "regular";
+  }
+  adjustMode() {
+    if (this.mode === "switch") {
+      this._inputElem.classList.remove("regularMode");
+      this._inputElem.classList.add("switchMode");
+    }
+    else {
+      this._inputElem.classList.remove("switchMode");
+      this._inputElem.classList.add("regularMode");
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Devolve o modo escolhido para o componente
+   */
+  async getMode() {
+    return this.mode;
+  }
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  componentDidLoad() {
+    this.adjustMode();
+  }
+  changeValue() {
+    if (!this.enabled) {
+      return;
+    }
+    this.value = !this.value;
+    this.ezChange.emit(this.value);
+  }
+  getLabelClasses() {
+    let classes = "label";
+    if (!this.enabled) {
+      classes += " label--disabled";
+    }
+    return classes;
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
+  }
+  static get watchers() { return {
+    "mode": ["adjustMode"]
+  }; }
+  static get style() { return ezCheckCss; }
+}, [1, "ez-check", {
+    "label": [513],
+    "value": [1540],
+    "enabled": [516],
+    "mode": [513],
+    "getMode": [64],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ez-check"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ez-check":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EzCheck);
+      }
+      break;
+  } });
+}
+
+export { EzCheck as E, defineCustomElement as d };

package/dist/components/ez-collapsible-box.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--height:42px;--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__btn--image--xsmall:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"12px\" width=\"7.5px\"><path d=\"M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z\"/></svg>');--ez-collapsible-box__btn--image--small:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"14px\" width=\"8.68px\"><path d=\"M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z\"/></svg>');--ez-collapsible-box__btn--image--medium:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"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\"/></svg>');--ez-collapsible-box__btn--image--large:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"18px\" width=\"11.25px\"><path d=\"M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z\"/></svg>');--ez-collapsible-box__btn--image--xlarge:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"20px\" width=\"12.5px\"><path d=\"M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z\"/></svg>');--ez-collapsible-box__btn--fill:var(--ez-collapsible-box--color);--ez-collapsible-box__btn--width:10px;--ez-collapsible-box__btn--height:16px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box__title{width:100%;align-self:center;display:flex;box-sizing:border-box}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;width:100%;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__label--icon-right{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__btn{outline:none;border:none;background-color:unset;cursor:pointer;padding:1px 6px}.collapsible-box__btn::after{content:'';display:flex;background-color:var(--ez-collapsible-box__btn--fill);width:var(--ez-collapsible-box__btn--width);height:var(--ez-collapsible-box__btn--height);transition:transform var(--transition);transform:rotate(90deg)}.collapsible-box__btn--xsmall::after{width:7.5px;height:12px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--xsmall);mask-image:var(--ez-collapsible-box__btn--image--xsmall)}.collapsible-box__btn--small::after{width:8.68px;height:14px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--small);mask-image:var(--ez-collapsible-box__btn--image--small)}.collapsible-box__btn--medium::after{width:10px;height:16px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--medium);mask-image:var(--ez-collapsible-box__btn--image--medium)}.collapsible-box__btn--large::after{width:11.25px;height:18px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--large);mask-image:var(--ez-collapsible-box__btn--image--large)}.collapsible-box__btn--xlarge::after{width:12.5px;height:20px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--xlarge);mask-image:var(--ez-collapsible-box__btn--image--xlarge)}.collapsible-box__btn--collapsed::after{transform:rotate(0deg)}.font--xsmall{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--xlarge{font-size:20px}";
+
+const EzCollapsibleBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    /**
+     * Valor externalizado que garante a exibição ou não do componente
+     */
+    this.value = false;
+    /**
+    * Define o tamanho do texto e do ícone do componente.
+    */
+    this.headerSize = "small";
+    /**
+    * Define o local onde o ícone será renderizado.
+    */
+    this.iconPlacement = "left";
+  }
+  observeValue() {
+    this.ezChange.emit(this.value);
+  }
+  /**
+   * Esconde ou revela o conteúdo do componente
+   */
+  async showHide() {
+    this.value = !this.value;
+  }
+  render() {
+    return (h(Host, null, this.iconPlacement == "right" ?
+      h("div", { class: "collapsible-box__title" }, h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label), h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }))
+      :
+        h("div", { class: "collapsible-box__title" }, h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }), h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label)), !this.value ? h("slot", null) : null));
+  }
+  static get watchers() { return {
+    "value": ["observeValue"]
+  }; }
+  static get style() { return ezCollapsibleBoxCss; }
+}, [1, "ez-collapsible-box", {
+    "value": [1540],
+    "label": [513],
+    "headerSize": [513, "header-size"],
+    "iconPlacement": [513, "icon-placement"],
+    "showHide": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ez-collapsible-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ez-collapsible-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EzCollapsibleBox$1);
+      }
+      break;
+  } });
+}
+
+const EzCollapsibleBox = EzCollapsibleBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EzCollapsibleBox, defineCustomElement };

package/dist/components/ez-combo-box.js

@@ -0,0 +1,6 @@
+import { E as EzComboBox$1, d as defineCustomElement$1 } from './ez-combo-box2.js';
+
+const EzComboBox = EzComboBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EzComboBox, defineCustomElement };