@sankhyalabs/ezui 1.1.4 → 1.1.5

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

@@ -0,0 +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);
+}

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

@@ -0,0 +1,215 @@
+import { FloatingManager } from '@sankhyalabs/core';
+import { Component, forceUpdate, h, Prop, Method, Event, Watch } from '@stencil/core';
+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'];
+    /**
+     * 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;
+  }
+  /**
+   * 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 });
+    }
+  }
+  /**
+   * 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) {
+    this.value = d;
+    this.ezChange.emit();
+  }
+  componentDidRender() {
+    if (this.floating && this._firstRender) {
+      this._box.remove();
+      this._firstRender = false;
+    }
+  }
+  render() {
+    if (this._currentPosition == null) {
+      this._currentPosition = new Date();
+      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", { class: "calendar", ref: elem => this._box = elem },
+        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)))));
+  }
+  static get is() { return "ez-calendar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-calendar.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-calendar.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A data selecionada no calend\u00E1rio"
+      },
+      "defaultValue": "new Date()"
+    },
+    "floating": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "No modo floating o calend\u00E1rio s\u00F3 se tornar\u00E1 vis\u00EDvel\nquando o m\u00E9todo show() for acionado."
+      },
+      "attribute": "floating",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Quando o usu\u00E1rio escolhe uma data, esse evento \u00E9 emitido."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "(top?: string, left?: string, bottom?: string, right?: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Usado no modo floating. Faz com que o componente seja exibido.\n\u00C9 poss\u00EDvel determinar ajustes de posicionamento atrav\u00E9s dos par\u00E2metros\ntop, left, bottom e right. Esses par\u00E2metros devem ser informados como\nstrings no formato css.",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Usado no modo floating. Faz com que o componente seja ocultado.",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueChanged"
+    }]; }
+}

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

@@ -0,0 +1,266 @@
+:host {
+
+  /***************
+     Regular mode
+  ***************/
+  /*dimensions */
+  /*@doc Define a largura do box do checkbox */
+  --chk--box--width: 18px;
+  /*@doc Define a altura do box do checkbox */
+  --chk--box--height: 18px;
+  --chk--width: calc(var(--chk--box--width) + 14px);
+  --chk--height: calc(var(--chk--box--width) + 14px);
+  
+  /*general*/
+  --chk--border-radius: var(--border--radius-small);
+  
+  /*box*/
+  --chk--checked--background-color: var(--color--primary-200);
+  --chk--focus--background-color: var(--color--strokes, #FFFFFF);
+  --chk--hover--background-color: var(--background--medium);
+  --chk--checked--disabled--background-color: var(--color--disable-secondary);
+  
+  --chk--border:  var(--border--medium) var(--title--primary);
+  --chk--disabled--border: var(--border--medium) var(--color--strokes);
+  --chk--checked--border: var(--border--medium) var(--color--primary);
+  
+  
+  --chk--checked--hover--background-color: var(--color--primary-200);
+  --chk--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
+  
+  /*check*/
+  --chk--check--clip-path: polygon(40% 70%, 46% 73%, 51% 71%, 93% 21%, 93% 16%, 83% 8%, 76% 9%, 47% 45%, 43% 44%, 38% 39%, 30% 37%, 22% 47%, 23% 54%, 40% 70%);
+  --chk--check--background-color: var(--color--primary);
+  --chk--check--disabled--background-color: var(--color--strokes);
+  
+  /***************
+    Switch mode
+  ***************/
+  /*dimensions */
+  --swt--slider--width: 34px;
+  --swt--slider--height: 14px;
+  --swt--pin--width: 20px;
+  --swt--pin--height: 20px;
+  --swt--focus--width: 32px;
+  --swt--focus--height: 32px;
+  
+  /*background*/
+  --swt--background-color: var(--color--strokes);
+  --swt--disabled--background-color: var(--color--disable-secondary);
+  --swt--checked--background-color: var(--color--primary-300);
+    
+  /*pin*/
+  --swt--pin--background-color: var(--background--xlight);
+  --swt--pin--disabled--background-color: var(--color--disable-secondary);
+  --swt--pin--checked--background-color: var(--color--primary);
+  --swt--pin--checked--disabled--background-color: #E8F7F4;
+  --swt--pin--focus--background-color: var(--text--disable);
+  --swt--pin--checked--focus--background-color: var(--color--primary);
+  
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  width: 100%;
+}
+
+/******** REGULAR MODE ********/
+/*---------------------------unchecked------------------------------*/
+input.regularMode {
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  cursor: pointer;
+  border-radius: 50%;
+
+  /*public*/
+  width: var(--chk--width);
+  height: var(--chk--height);
+}
+
+
+input.regularMode:enabled:hover{
+  /*public*/
+  background-color: var(--chk--hover--background-color);
+}
+
+input.regularMode:enabled:focus{
+  /*private*/
+  outline: none;
+  
+  /*public*/
+  background-color: var(--chk--focus--background-color);
+}
+
+input.regularMode:disabled{
+  /*private*/
+  cursor: auto;
+  background: none;
+}
+
+input.regularMode::before{
+  /*private*/
+  box-sizing: border-box;
+  content: "";
+  display: block;
+
+  /*public*/
+  width: var(--chk--box--width);
+  height: var(--chk--box--height);
+  border-radius: var(--chk--border-radius);
+  border: var(--chk--border);
+}
+
+input.regularMode:disabled::before{
+  /*public*/
+  border: var(--chk--disabled--border);
+}
+
+/*-------------------------------checked---------------------------------*/
+input.regularMode:checked:enabled:hover{
+  /*public*/
+  background-color: var(--chk--checked--hover--background-color);
+}
+
+input.regularMode:checked:enabled:focus{
+  /*public*/
+  background-color: var(--chk--checked--focus--background-color);
+}
+
+input.regularMode:checked::before{
+  /*public*/
+  border: var(--chk--checked--border);
+  background-color: var(--chk--checked--background-color);
+}
+
+input.regularMode:checked:disabled:before{
+  /*public*/
+  border: var(--chk--disabled--border);
+  background-color: var(--chk--checked--disabled--background-color);
+}
+
+input.regularMode:checked::after{
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  content: "";
+  position: absolute;
+  margin-top: 3px;
+  margin-left: -1px;
+  width: 12px;
+  height: 12px;
+  background-color: var(--chk--check--background-color);
+
+  /*public*/
+  clip-path: var(--chk--check--clip-path);
+}
+
+input.regularMode:checked:disabled::after{
+  /*public*/
+  background-color: var(--chk--check--disabled--background-color);
+}
+
+/******** SWITCH MODE ********/
+/*-------------------------------OFF---------------------------------*/
+input.switchMode{
+  /*private*/
+  appearance: none;
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  border-radius: 20px;
+  border: none;
+  transition: background-color var(--transition);
+
+  /*public*/
+  width: var(--swt--slider--width);
+  height: var(--swt--slider--height);
+  background-color: var(--swt--background-color);
+}
+
+input.switchMode:disabled{
+  /*public*/
+  background-color:var(--swt--disabled--background-color);
+}
+
+input.switchMode::after{
+  /*private*/
+  content: "";
+  display: block;
+  position: absolute;
+  box-shadow: var(--shadow);
+  transition: transform var(--transition);
+  transition: background-color var(--transition);
+  transform: translateY(-3px);
+  border-radius: 50%;
+
+  /*public*/
+  width: var(--swt--pin--width);
+  height: var(--swt--pin--height);
+  background-color: var(--swt--pin--background-color);
+}
+
+input.switchMode:disabled::after{
+  /*public*/
+  background-color: var(--swt--pin--disabled--background-color);
+}
+
+/*-------------------------------ON---------------------------------*/
+input.switchMode:checked{
+  /*private*/
+  transition: background-color var(--transition);
+
+  /*public*/
+  background-color: var(--swt--checked--background-color);
+}
+
+input.switchMode::before{
+   /*private*/
+  display: block;
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+
+   /*public*/
+  width: var(--swt--focus--width);
+  height: var(--swt--focus--height);
+  top: calc((var(--swt--slider--height) - var(--swt--focus--height)) / 2);
+  left: calc((var(--swt--pin--width) - var(--swt--focus--width))/2);
+  background-color: var(--swt--pin--focus--background-color);
+}
+
+input.switchMode:focus::before{
+   /*private*/
+  opacity: 0.24;
+  transition: opacity var(--transition);
+}
+
+input.switchMode:checked:focus::before{
+  /*private*/
+  background-color: var(--swt--pin--checked--focus--background-color);
+  transform: translateX(calc(var(--swt--slider--width) - var(--swt--pin--width)));
+}
+
+input.switchMode:checked::after{
+  /*private*/
+  transition: transform var(--transition);
+  transition: background-color var(--transition);
+  transform: translateX(calc(var(--swt--slider--width) - var(--swt--pin--width))) translateY(-3px);
+  box-shadow: var(--shadow);
+  
+  /*public*/
+  background-color: var(--swt--pin--checked--background-color);
+}
+
+input.switchMode:checked:disabled::after{
+  /*public*/
+  background-color: var(--swt--pin--checked--disabled--background-color);
+}