@sankhyalabs/ezui 1.2.0-beta.6 → 1.2.0-beta.7

package/dist/ezui/ez-check.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-1e9d524f.js';
+
+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:19px;--ez-switch--pin--height:19px;--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--disabled--checked--background-color:var(--color--primary-300);--ez-switch--checked--background-color:var(--color--primary);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-primary);--ez-switch--pin--checked--background-color:var(--background--xlight);--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-switch--pin--border-color:var(--text--primary);--ez-switch--pin--disabled--border-color:var(--text--secondary);--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(--ez-switch--pin--border-color, #626e82);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);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switchMode:checked:disabled{background-color:var(--ez-switch--disabled--checked--background-color)}input.switchMode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(-2px) translateY(-4px);border-radius:50%;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);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);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}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) - 2px) / 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) + 2px))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}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)}";
+
+let EzCheck = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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";
+  }
+  observeMode() {
+    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.observeMode();
+  }
+  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": ["observeMode"]
+  }; }
+};
+EzCheck.style = ezCheckCss;
+
+export { EzCheck as ez_check };

package/dist/ezui/ez-chip.entry.js

@@ -0,0 +1,97 @@
+import { r as registerInstance, e as createEvent, h } from './index-1e9d524f.js';
+
+const ezChipCss = ":host{--ez-label-chip--height:30px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--medium, 400);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #2B3A54);--ez-label-chip__label--text--primary:var(--text--primary, #626e82);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:var(--color--primary-300);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--active:var(--color--primary, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-300, #f2faf8);--ez-label-chip__label__container--default--color--hover:var(--color--primary, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__label__container--default--border-color--active:var(--color--primary)}.lbl{display:flex;align-items:center;font-weight:var(--ez-label-chip__label--font-weight);cursor:pointer;color:var(--ez-label-chip__label--title--primary);user-select:none;height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size)}.lbl--active{color:var(--ez-label-chip__label__container--default--color--hover)}.lbl--disabled{color:var(--ez-label-chip__label__container--text--disabled)}.label__container{cursor:pointer;width:fit-content;display:flex;flex-wrap:wrap;align-items:center;background-color:#FFFFFF;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium)}.label__content{display:flex;align-items:center;flex-wrap:wrap;--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--disabled{cursor:default;border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__container--active{border-color:var(--ez-label-chip__label__container--default--background-color--hover);background-color:var(--ez-label-chip__label__container--default--background-color--hover);color:var(--ez-label-chip__label__container--default--color--hover);fill:var(--ez-label-chip__label__container--default--color--hover);--ez-icon--color:var(--ez-label-chip__label__container--default--color--hover)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container--disabled:hover{cursor:default;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__content__icon{display:flex;cursor:pointer;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--row-reverse{flex-direction:row-reverse}.label__container .btn-close{padding:0px 0px 0px 8px}.label__container--row-reverse .btn-close{padding:0px 8px 0px 0px}.cursor-disable{cursor:default}ez-icon{--ez-icon--color:inherit}";
+
+let EzChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.removeChip = createEvent(this, "removeChip", 7);
+    this.actionClick = createEvent(this, "actionClick", 7);
+    /**
+     * Deixa o componente disponível ou não para seleção.
+     */
+    this.enabled = true;
+    /**
+     * Indica se o componente está ou não ativado.
+     */
+    this.value = false;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._labelElem.focus();
+  }
+  /**
+   * Remove o foco no componente de input
+   */
+  async setBlur() {
+    this._labelElem.blur();
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
+  }
+  handleValueChange() {
+    this.swichState();
+    this.valueChange.emit(this.value);
+  }
+  handleClick(ev) {
+    const target = ev.target;
+    if (!this.enabled)
+      return;
+    if (this.mode === "action")
+      return this.actionClick.emit();
+    if (target.tagName.toLowerCase() !== "ez-icon")
+      return this.handleValueChange();
+    if (target.classList.contains("btn-close"))
+      return this.removeChip.emit();
+  }
+  swichState() {
+    if (this.enabled) {
+      this.value = !this.value;
+    }
+  }
+  observeValue() {
+    (this.value && this.mode !== "action") ? this._divElem.classList.add("label__container--active") : this._divElem.classList.remove("label__container--active");
+  }
+  observeEnabled() {
+    if (this.enabled) {
+      this._divElem.classList.remove("label__container--disabled");
+      this._labelElem.classList.remove("lbl--disabled");
+      this._labelElem.classList.remove("cursor-disable");
+    }
+    else {
+      this._divElem.classList.add("label__container--disabled");
+      this._labelElem.classList.add("lbl--disabled");
+      this._labelElem.classList.add("cursor-disable");
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    if (this._divElem) {
+      this.observeValue();
+      this.observeEnabled();
+    }
+  }
+  render() {
+    return (h("div", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._divElem = el }, h("div", { class: "label__content" }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("label", { class: "lbl " + (this.value ? "lbl--active " : ""), ref: (el) => this._labelElem = el }, this.label), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })), this.mode !== 'action' && this.removePosition && h("ez-icon", { class: "btn-close", size: "small", "icon-name": "close" })));
+  }
+  static get watchers() { return {
+    "value": ["observeValue"],
+    "enabled": ["observeEnabled"]
+  }; }
+};
+EzChip.style = ezChipCss;
+
+export { EzChip as ez_chip };

package/dist/ezui/ez-collapsible-box.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, e as createEvent, h } from './index-1e9d524f.js';
+
+const ezCollapsibleBoxCss = ":host{--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--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
+
+let EzCollapsibleBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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";
+    /**
+    * Define se o titulo irá ocupar toda a largura do componente.
+    */
+    this.stretchTitle = false;
+  }
+  observeCollapsedValue() {
+    this.ezChange.emit(this.value);
+  }
+  /**
+   * Esconde ou revela o conteúdo do componente.
+   */
+  async showHide() {
+    this.value = !this.value;
+  }
+  /**
+   * Retorna o tamanho configurado do texto e do ícone.
+   */
+  getHeaderSize() {
+    const sizeAlias = ["xsmall", "xlarge"];
+    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
+    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
+    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
+    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
+  }
+  render() {
+    return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
+        (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
+        (this.stretchTitle ? " collapsible-box__title--stretched" : "") +
+        (this.value ? " collapsible-box__title--no-margin" : "") }, h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }), h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "value": ["observeCollapsedValue"]
+  }; }
+};
+EzCollapsibleBox.style = ezCollapsibleBoxCss;
+
+export { EzCollapsibleBox as ez_collapsible_box };