@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,373 @@
+import { h } from '@stencil/core';
+import { ElementIDUtils, JSUtils, ObjectUtils } from '@sankhyalabs/core';
+import { BreadcrumbItem } from './subcomponents/breadcrumb-item';
+export class EzBreadcrumb {
+  constructor() {
+    this._ellipsesPositionedEnd = false;
+    this._renderSecond = false;
+    this.INDEX_ITEM_TO_REMOVE = 1; // sempre removemos o segundo item.
+    this.CHEVRON_SIZE = 28;
+    this.handleShowDropdown = (newState) => {
+      this.showDropdown = newState;
+    };
+    this.items = [];
+    this.fillMode = "auto";
+    this.maxItems = 4;
+    this.positionEllipsis = 1;
+    this.visibleItems = undefined;
+    this.hiddenItems = [];
+    this.showDropdown = false;
+    this.collapseConfigPosition = -1;
+  }
+  watchPropHandler(newValue, oldValue) {
+    if (ObjectUtils.objectToString(newValue || []) !== ObjectUtils.objectToString(oldValue || [])) {
+      this.loadItems();
+    }
+    this.fillMode === "auto" && this.handleResize();
+  }
+  watchPropHiddenItems() {
+    if (this.fillMode === 'auto') {
+      this.collapseConfigPosition = this.hiddenItems.length > 0 ? 1 : -1;
+    }
+  }
+  componentDidUpdate() {
+    this.positionDropdown();
+    this.setEvents();
+  }
+  componentWillLoad() {
+    this.loadItems();
+  }
+  loadItems() {
+    this.visibleItems = [...this.items];
+    this.hiddenItems = [];
+    if (this.fillMode === 'regular') {
+      this.configModeRegular();
+    }
+    else if (this.fillMode === 'auto') {
+      this.startResize();
+    }
+    this.setEvents();
+  }
+  closeDropdown(evt) {
+    const target = evt === null || evt === void 0 ? void 0 : evt.target;
+    if (target == undefined) {
+      return;
+    }
+    if (target !== this._element.shadowRoot.querySelector(".ellipses__item")) {
+      this.showDropdown = false;
+    }
+  }
+  setEvents() {
+    document.removeEventListener("click", this.closeDropdown.bind(this));
+    document.addEventListener("click", this.closeDropdown.bind(this));
+    document.removeEventListener("scroll", this.positionDropdown.bind(this));
+    document.addEventListener("scroll", this.positionDropdown.bind(this));
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
+  componentDidRender() {
+    if (this.fillMode === 'auto') {
+      this.configResize();
+    }
+  }
+  configResize() {
+    if (this._resizeObserver != undefined) {
+      this._resizeObserver.unobserve(this._element.parentElement);
+    }
+    this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.handleResize.bind(this), 200));
+    this._resizeObserver.observe(this._element.parentElement);
+  }
+  handleResize() {
+    const ELLIPSIS_SIZE = 39;
+    if (!this._renderSecond) {
+      this._renderSecond = true;
+      return;
+    }
+    if (this._element.parentElement == undefined) {
+      return;
+    }
+    let { offsetWidth } = this._element.parentElement;
+    let sumVisibleItems = 0;
+    this.visibleItems.forEach(item => sumVisibleItems += item.width);
+    //Se existe o ellipsis, devemos cconsidera-lo no calculo
+    const offset = this.collapseConfigPosition > -1 ? ELLIPSIS_SIZE : 0;
+    if (offsetWidth < sumVisibleItems + offset) {
+      this.handleCollapse(offsetWidth, sumVisibleItems);
+    }
+    else if (offsetWidth >= sumVisibleItems + offset) {
+      this.handleExpand(offsetWidth);
+    }
+  }
+  handleCollapse(containerWidth, itemsWidth) {
+    const MIN_VISIBLE_ITEMS = 2;
+    if (this.visibleItems.length <= MIN_VISIBLE_ITEMS) {
+      return;
+    }
+    let tmpVisibleItems = [...this.visibleItems];
+    let tmpHiddenItems = [...this.hiddenItems];
+    let secondItem = tmpVisibleItems[this.INDEX_ITEM_TO_REMOVE];
+    let hasChange = false;
+    while (tmpVisibleItems.length > MIN_VISIBLE_ITEMS &&
+      secondItem != undefined &&
+      itemsWidth > containerWidth) {
+      hasChange = true;
+      tmpVisibleItems = tmpVisibleItems.filter((_, index) => index !== this.INDEX_ITEM_TO_REMOVE);
+      tmpHiddenItems = [...tmpHiddenItems, secondItem];
+      itemsWidth -= secondItem.width;
+      secondItem = tmpVisibleItems[this.INDEX_ITEM_TO_REMOVE];
+    }
+    if (hasChange) {
+      this.visibleItems = tmpVisibleItems;
+      this.hiddenItems = tmpHiddenItems;
+      this.showDropdown = false;
+    }
+  }
+  handleExpand(containerWidth) {
+    if (!this.hiddenItems.length) {
+      return;
+    }
+    let widthFreeZone = Math.abs(this._elBreadcrumbList.offsetWidth - containerWidth);
+    let tmpVisibleItems = [...this.visibleItems];
+    let tmpHiddenItems = [...this.hiddenItems];
+    let lastHiddenElement = tmpHiddenItems[tmpHiddenItems.length - 1];
+    let hasChange = false;
+    while (lastHiddenElement && widthFreeZone >= lastHiddenElement.width) {
+      widthFreeZone -= lastHiddenElement.width;
+      tmpHiddenItems.pop();
+      tmpVisibleItems.splice(this.INDEX_ITEM_TO_REMOVE, 0, lastHiddenElement);
+      lastHiddenElement = tmpHiddenItems[tmpHiddenItems.length - 1];
+      hasChange = true;
+    }
+    if (hasChange) {
+      this.visibleItems = tmpVisibleItems;
+      this.hiddenItems = tmpHiddenItems;
+      this.showDropdown = false;
+    }
+  }
+  configModeRegular() {
+    if (this.visibleItems.length > this.maxItems) {
+      const amountsItemsToHide = Math.abs(this.visibleItems.length - this.maxItems);
+      if (this.positionEllipsis === 0) {
+        const itemsToTransfer = this.visibleItems.slice(0, amountsItemsToHide);
+        this.hiddenItems.push(...itemsToTransfer);
+        this.visibleItems.splice(0, amountsItemsToHide);
+      }
+      else if (this.positionEllipsis >= this.maxItems) {
+        const itemsToTransfer = this.visibleItems.slice(this.maxItems);
+        this.hiddenItems.push(...itemsToTransfer);
+        this.visibleItems.splice(this.maxItems);
+        this._ellipsesPositionedEnd = true;
+      }
+      else {
+        const removedItems = this.visibleItems.splice(this.positionEllipsis, amountsItemsToHide);
+        this.hiddenItems.push(...removedItems);
+      }
+      this.collapseConfigPosition = this.positionEllipsis;
+    }
+  }
+  positionDropdown() {
+    var _a;
+    const bounding = (_a = this._element.shadowRoot.querySelector(".ellipses__item")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const elDropdown = this._element.shadowRoot.querySelector(".dropdown-ellipsis");
+    if (bounding == undefined || elDropdown == undefined) {
+      return;
+    }
+    elDropdown.style.top = (bounding.y + bounding.height + 5) + "px";
+    elDropdown.style.left = bounding.x + "px";
+  }
+  ;
+  async startResize() {
+    const areaAvailable = this._element.parentElement.offsetWidth;
+    const ELLIPSIS_SIZE = 10;
+    const measureItemSize = async (item, index) => {
+      item.width = await this.measureSizeHTMLElement(item);
+      /*
+        Se é o ultimo item, desconsideramos o icone CHEVRON
+      */
+      if (index === this.visibleItems.length - 1) {
+        item.width -= this.CHEVRON_SIZE;
+      }
+      return item;
+    };
+    const measuredItems = await Promise.all(this.visibleItems.map(measureItemSize));
+    const sizeBreadcrumb = measuredItems.reduce((total, item) => total + item.width, 0);
+    if (sizeBreadcrumb > areaAvailable) {
+      const tempItemsVisible = [];
+      const tempItemsHidden = [...measuredItems];
+      const firstItem = tempItemsHidden.shift();
+      const lastItem = tempItemsHidden.pop();
+      lastItem.width += ELLIPSIS_SIZE;
+      tempItemsVisible.push(firstItem, lastItem);
+      let sizeTempItemsHiddenResult = tempItemsVisible.reduce((total, item) => total + item.width, 0);
+      let newAreaAvailable = Math.abs(sizeTempItemsHiddenResult - areaAvailable);
+      tempItemsHidden.reverse().forEach((item) => {
+        if (item.width < newAreaAvailable) {
+          const firstItemForListHidden = tempItemsHidden.shift();
+          tempItemsVisible.splice(1, 0, firstItemForListHidden);
+          sizeTempItemsHiddenResult = tempItemsVisible.reduce((total, item) => total + item.width, 0);
+          newAreaAvailable = Math.abs(sizeTempItemsHiddenResult - areaAvailable);
+        }
+      });
+      this.visibleItems = [...tempItemsVisible];
+      this.hiddenItems = [...tempItemsHidden.reverse()];
+    }
+  }
+  measureSizeHTMLElement(item) {
+    return new Promise((resolve) => {
+      const ICON_SIZE = 19;
+      this.waitFontLoad().then(() => {
+        if (this._textMesurement === undefined) {
+          this._textMesurement = this._element.shadowRoot.ownerDocument.createElement("canvas");
+        }
+        const context = this._textMesurement.getContext("2d");
+        context.font = "14px Roboto, Algerian";
+        resolve((item.iconName ? ICON_SIZE : 0) + this.CHEVRON_SIZE + context.measureText(item.label).width);
+      });
+    });
+  }
+  waitFontLoad() {
+    return new Promise((resolve) => {
+      document.fonts.load("14px Roboto").then(() => resolve(), resolve());
+    });
+  }
+  getItemContent() {
+    return (h("nav", { class: "breadcrumb" }, h("ol", { class: "breadcrumb__list", ref: elem => this._elBreadcrumbList = elem }, h(BreadcrumbItem, { items: this.visibleItems, selectedItem: this.selectedItem, itemsHidden: this.hiddenItems, showDropdown: this.showDropdown, handleShowDropdown: this.handleShowDropdown, collapseConfigPosition: this.collapseConfigPosition, ellipsesPositionedEnd: this._ellipsesPositionedEnd }))));
+  }
+  render() {
+    return this.getItemContent();
+  }
+  static get is() { return "ez-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-breadcrumb.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-breadcrumb.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<IBreadcrumbItem>",
+          "resolved": "IBreadcrumbItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IBreadcrumbItem": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de itens do breadcrumb."
+        },
+        "defaultValue": "[]"
+      },
+      "fillMode": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"auto\" | \"regular\"",
+          "resolved": "\"auto\" | \"regular\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de uso do Breadcrumb."
+        },
+        "attribute": "fill-mode",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "maxItems": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o limite m\u00E1ximo de itens a serem renderizados."
+        },
+        "attribute": "max-items",
+        "reflect": false,
+        "defaultValue": "4"
+      },
+      "positionEllipsis": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a posi\u00E7\u00E3o do Ellipsis nos itens vis\u00EDveis do Breadcrumb."
+        },
+        "attribute": "position-ellipsis",
+        "reflect": false,
+        "defaultValue": "1"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visibleItems": {},
+      "hiddenItems": {},
+      "showDropdown": {},
+      "collapseConfigPosition": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectedItem",
+        "name": "selectedItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando um item do breadcrumb \u00E9 selecionado."
+        },
+        "complexType": {
+          "original": "IBreadcrumbItem",
+          "resolved": "IBreadcrumbItem",
+          "references": {
+            "IBreadcrumbItem": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "items",
+        "methodName": "watchPropHandler"
+      }, {
+        "propName": "hiddenItems",
+        "methodName": "watchPropHiddenItems"
+      }];
+  }
+}

package/dist/collection/components/ez-breadcrumb/subcomponents/breadcrumb-item.js

@@ -0,0 +1,20 @@
+import { h } from "@stencil/core";
+import { ElementIDUtils } from '@sankhyalabs/core';
+export const BreadcrumbItem = (props) => {
+  const { items, selectedItem, itemsHidden, showDropdown, handleShowDropdown, collapseConfigPosition, ellipsesPositionedEnd } = props;
+  const formatDropdownItems = () => {
+    return itemsHidden.map((item) => (Object.assign(Object.assign({}, item), { type: 'item', children: null, iconName: item.iconName || null, subAction: null, group: null })));
+  };
+  const onClickEllipsis = (evt) => {
+    evt.stopPropagation();
+    handleShowDropdown(!showDropdown);
+  };
+  const createEllipsis = (item) => {
+    return (h("li", Object.assign({ class: "breadcrumb__item", onClick: evt => onClickEllipsis(evt) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumbItem_ellipsis`) }), ellipsesPositionedEnd && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })), h("span", { class: "ellipses__item" }, "..."), ellipsesPositionedEnd || h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })), showDropdown &&
+      h("ez-dropdown", Object.assign({ class: "dropdown-ellipsis", items: formatDropdownItems(), onEzClick: (evt) => selectedItem.emit(evt.detail) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("dropdown")}` }))));
+  };
+  return (h("div", { class: "breadcrumb__items" }, items.map((item, index) => {
+    const isLastItem = index === (items.length - 1);
+    return (h("div", { class: "breadcrumb__group" }, collapseConfigPosition === index && createEllipsis(item), h("li", Object.assign({ class: "breadcrumb__item", id: item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumb_item_${item.id}_${item.label}`) }), item.iconName && h("ez-icon", Object.assign({ class: `breadcrumb__item--icon ${(isLastItem && !ellipsesPositionedEnd) ? 'active-icon' : ''}`, size: "small", iconName: item.iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconItem${item.id}`)}` })), h("p", { class: `breadcrumb__item--label ${(isLastItem && !ellipsesPositionedEnd) ? 'active' : ''}`, onClick: (ellipsesPositionedEnd || !isLastItem) ? () => selectedItem.emit(item) : undefined }, item.label), !isLastItem && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` }))), (collapseConfigPosition - 1 === index && ellipsesPositionedEnd) && createEllipsis(item)));
+  })));
+};

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

@@ -0,0 +1,255 @@
+:host {
+
+  /* dimensions */
+  /*@doc Define a largura mínima do componente.*/
+  --ez-button--min-width: 100px;
+  /*@doc Define a largura do componente.*/
+  --ez-button--width: 'auto';
+  /*@doc Define a altura do componente.*/
+  --ez-button--height: 42px;
+  /*@doc Define a largura do slot que contém o ícone.*/
+  --ez-button__icon--width: 18px;
+  /*@doc Define o espaçamento entre o ícone e o label.*/
+  --ez-button__inline__icon--padding: 12px;
+
+  /*@doc Define o espaçamento superior ao label.*/
+  --ez-button--padding-top: 0px;
+  /*@doc Define o espaçamento inferior ao label.*/
+  --ez-button--padding-bottom: 0px;
+  /*@doc Define o espaçamento à direita do label.*/
+  --ez-button--padding-right: var(--space--large, 24px);
+  /*@doc Define o espaçamento à esquerda do label.*/
+  --ez-button--padding-left: var(--space--large, 24px);
+
+  /* general */
+  /*@doc Define a cor do label.*/
+  --ez-button--color: var(--title--primary, #FFF);
+  /*@doc Define o tamanho do label.*/
+  --ez-button--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do label.*/
+  --ez-button--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label.*/
+  --ez-button--font-weight: var(--text-weight--large);
+  /*@doc Define a cor de fundo do botão.*/
+  --ez-button--background-color: var(--background--medium, #c0c0c0);
+  /*@doc Define o raio da borda do botão.*/
+  --ez-button--border-radius: var(--border--radius-large, 12px);
+  /*@doc Define o estilo da borda do botão.*/
+  --ez-button--border: none;
+  /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
+  --ez-button--justify-content: center;
+
+  /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
+  --ez-button--hover-color: var(--color--primary-600);
+  /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
+  --ez-button--hover--background-color: var(--background--medium, var(--ez-button--background-color));
+
+  /*@doc Define a cor do texto quando o botão está desabilitado.*/
+  --ez-button--disabled-color: var(--text--disable);
+  /*@doc Define a cor de fundo quando o botão está desabilitado.*/
+  --ez-button--disabled--background-color: var(--color--disable-secondary);
+
+  /*@doc Define o estido da borda quando o botão está selecionado.*/
+  --ez-button--focus--border: var(--border--xlarge, 4px solid) var(--color--primary-300);
+  /*@doc Define a sombra do botão quando selecionado.*/
+  --ez-button--focus--box-shadow: none;
+
+  /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
+  --ez-button--active-color: var(--color--primary-700);
+   /*@doc Define a cor do fundo ao ativar o botão.*/
+  --ez-button--active--background-color: var(--background--strong);
+
+  /*@doc Define a cor do texto do botão no modo link.*/
+  --ez-button--link-color: var(--color--primary, '#008561');
+  /*@doc Define a cor do texto do botão no hover do modo link.*/
+  --ez-button--link--hover-color: var(--color--primary-700, '#1C1D22');
+
+  /*@doc Define o tamanho small na fonte do texto do botão no modo link.*/
+  --ez-button--link--small--font-size: var(--text--small, 12px);
+  /*@doc Define o tamanho medium na fonte do texto do botão no modo link.*/
+  --ez-button--link--medium--font-size: var(--text--medium, 14px);
+  /*@doc Define o tamanho large na fonte do texto do botão no modo link.*/
+  --ez-button--link--large--font-size: var(--text--large, 16px);
+}
+
+ez-icon {
+  --ez-icon--color: inherit;
+}
+
+button {
+  /*private*/
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  cursor: pointer;
+  transition: background-color 0.2s linear;
+  white-space: nowrap;
+
+  /*public*/
+  min-width: var(--ez-button--min-width);
+  width: var(--ez-button--width);
+  height: var(--ez-button--height);
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+  padding: var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);
+  border-radius: var(--ez-button--border-radius);
+
+  background-color: var(--ez-button--background-color);
+  color: var(--ez-button--color);
+  fill: var(--ez-button--color);
+  border: var(--ez-button--border);
+  justify-content: var(--ez-button--justify-content);
+}
+
+button:focus {
+  outline: var(--ez-button--focus--border);
+  box-shadow: var(--ez-button--focus--box-shadow);
+}
+
+button:hover {
+  outline: none;
+  background-color: var(--ez-button--hover--background-color);
+  color: var(--ez-button--hover-color);
+  fill: var(--ez-button--hover-color);
+  --ez-icon--color: var(--ez-button--hover-color);
+}
+
+button:active {
+  outline: none;
+  box-shadow: none;
+  background-color: var(--ez-button--active--background-color);
+  color: var(--ez-button--active-color);
+  fill: var(--ez-button--active-color);
+  --ez-icon--color: var(--ez-button--active-color);
+}
+
+button:disabled {
+  background-color: var(--ez-button--disabled--background-color);
+  color: var(--ez-button--disabled-color);
+  fill: var(--ez-button--disabled-color);
+  border: none;
+  --ez-icon--color: var(--ez-button--disabled-color);
+  cursor: no-drop;
+}
+
+.small{
+  height: 32px;
+  --ez-button--font-size: var(--text--small, 12px);
+}
+
+.medium{
+  height: 42px;
+}
+
+.large{
+  height: 46px;
+}
+
+.btn-icon {
+  padding: 0px;
+}
+
+.btn-icon--medium {
+  width: 42px;
+  min-width: 42px;
+  height: 42px;
+}
+
+.btn-icon--small {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+
+.btn-icon--large {
+  width: 46px;
+  min-width: 46px;
+  height: 46px;
+}
+
+.label-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--ez-button--color);
+}
+
+.label-icon:hover {
+  color: var(--ez-button--hover-color);
+  fill: var(--ez-button--hover-color);
+  --ez-icon--color: var(--ez-button--hover-color);
+}
+
+.label-icon:active {
+  color: var(--ez-button--active-color);
+  fill: var(--ez-button--active-color);
+  --ez-icon--color: var(--ez-button--active-color);
+}
+
+.label-icon label {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+  user-select: none;
+}
+
+button:disabled+label {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+  color: var(--ez-button--disabled-color);
+  cursor: no-drop;
+}
+
+div.label-icon{
+  cursor: pointer;
+}
+
+div.label-icon,button:disabled{
+  cursor: no-drop;
+}
+
+
+a {
+  /*private*/
+  font-family: var(--ez-button--font-family);
+  font-weight: var(--ez-button--font-weight);
+  color: var(--ez-button--link-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /*public*/
+}
+
+a:hover {
+  /*public*/
+  color: var(--ez-button--link--hover-color);
+}
+
+a.small{
+  font-size: var(--ez-button--link--small--font-size);
+  line-height: var(--ez-button--link--small--font-size);
+}
+
+a.medium{
+  font-size: var(--ez-button--link--medium--font-size);
+  line-height: var(--ez-button--link--medium--font-size);
+}
+
+a.large{
+  font-size: var(--ez-button--link--large--font-size);
+  line-height: var(--ez-button--link--large--font-size);
+}