@sankhyalabs/sankhyablocks 1.1.25 → 1.2.0

package/dist/esm/ez-button_4.entry.js

@@ -1,653 +0,0 @@
-import { r as registerInstance, h, c as createEvent, H as Host } from './index-35088a3f.js';
-
-const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--text--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover--background-color:var(--background--strong, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--ez-button--border);--ez-button--focus--box-shadow:none;--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-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)}button:hover{background-color:var(--ez-button--hover--background-color)}button:focus{outline:none;border:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;cursor:no-drop}button.icon{padding:0px}button.small{width:32px;min-width:32px;height:32px}button.medium{width:42px;min-width:42px;height:42px}button.large{width:52px;min-width:52px;height:52px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--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)}a{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;}a:hover{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)}";
-
-const EzButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Deixa o botão disponível ou não para interação com o usuário.
-     */
-    this.enabled = true;
-    /**
-       * Define o modo de uso do botão; opções: icon, link e regular
-       */
-    this.mode = "regular";
-    /**
-     * É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
-     */
-    this.size = "medium";
-  }
-  /**
-   * Realiza o foco no botão
-   */
-  async setFocus() {
-    this._button.focus();
-  }
-  /**
-   * Remove o foco no botão
-   */
-  async setBlur() {
-    this._button.blur();
-  }
-  getIconSize() {
-    return this.size;
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (this.mode == "link") {
-      content.style.display = "inline";
-      if (slot.name == "leftIcon") {
-        content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
-      }
-    }
-    else {
-      content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
-    }
-  }
-  render() {
-    if (this.mode == "icon") {
-      return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
-          if (!this.enabled)
-            evt.stopPropagation();
-        } })));
-    }
-    else if (this.mode == "label-icon") {
-      return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: "large", onClick: evt => {
-          if (!this.enabled)
-            evt.stopPropagation();
-        } })), h("label", { title: this.label }, this.label)));
-    }
-    else if (this.mode == "link") {
-      return (h("a", { class: this.size, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-    else {
-      return (h("button", { type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-  }
-};
-EzButton.style = ezButtonCss;
-
-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 = 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";
-  }
-  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"]
-  }; }
-};
-EzCheck.style = ezCheckCss;
-
-const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon__padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item__margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Sora\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item__border-radius:var(--border--radius-small, 6px);--ez-list__selected-item__background:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Sora\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group__overlay--font-family:var(--font-pattern, \"Sora\");--ez-list__group__overlay--font-size:var(--text--medium, 14px);--ez-list__group-container__scrollbar--border-radius:var(--border--radius-large, 24px);--ez-list__group-container__scrollbar--width:var(--space--medium, 12px);--ez-list__group-container__scrollbar--background-color:var(--text--primary, #626e82);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__draggable__list--padding-bottom:var(--space--small, 6px);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable__scrollbar--border-radius:var(--border--radius-large, 24px);--ez-list__draggable__scrollbar--width:var(--space--medium, 12px);--ez-list__draggable__scrollbar--background-color:var(--text--primary, #626e82);--ez-list__draggable__icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{display:flex;align-items:center;border-top:1px dashed #fff;justify-content:space-between;background-color:#fff;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);flex:1}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.item-content{display:flex;justify-content:center;align-items:center}.draggable-list{color:var(--text-color);padding:0;margin:0;width:100%;max-height:100%}.draggable-list li{background-color:#fff;display:flex;margin:var(--ez-list__item__margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color);height:32px}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar-track{background-color:#f0f2f5}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable__scrollbar--background-color);border-radius:var(--ez-list__draggable__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__draggable__scrollbar--width);max-width:var(--ez-list__draggable__scrollbar--width);min-width:var(--ez-list__draggable__scrollbar--width)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;background-color:var(--ez-list__icon--color);width:18px;height:18px;-webkit-mask-image:var(--ez-list__draggable__icon--image);mask-image:var(--ez-list__draggable__icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%}.group-name{font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom);-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar-track{background-color:#f0f2f5}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__group-container__scrollbar--background-color);border-radius:var(--ez-list__group-container__scrollbar--border-radius)}.group-container::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__group-container__scrollbar--width);max-width:var(--ez-list__group-container__scrollbar--width);min-width:var(--ez-list__group-container__scrollbar--width)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar-track{background-color:#f0f2f5}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable__scrollbar--background-color);border-radius:var(--ez-list__draggable__scrollbar--border-radius)}.items-container::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__draggable__scrollbar--width);max-width:var(--ez-list__draggable__scrollbar--width);min-width:var(--ez-list__draggable__scrollbar--width)}.group-overlay{font-family:var(--ez-list__group__overlay--font-family);font-size:var(--ez-list__group__overlay--font-size);background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item__background);border-radius:var(--ez-list__selected-item__border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
-
-const EzList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezChange = createEvent(this, "ezChange", 7);
-    this._listItems = [];
-    this._listGroupItems = [];
-    this._listItemsHistory = [];
-    /**
-    * Define a lista inicial do componente.
-    */
-    this.dataSource = [];
-    /**
-    * Define se o componente renderizará os itens separados em grupos..
-    */
-    this.useGroups = false;
-    /**
-    * Define se o componente terá o comportamento de arrasto de linhas.
-    */
-    this.ezDraggable = false;
-    /**
-    * Define se os items da lista serão selecionáveis.
-    */
-    this.ezSelectable = false;
-  }
-  createList() {
-    if (this.useGroups) {
-      let list = [...this.dataSource];
-      list.forEach(itemGroup => {
-        this.sortGroup(itemGroup);
-      });
-      this._listGroupItems = list;
-    }
-    else {
-      this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : [...this.dataSource];
-    }
-  }
-  sortGroup(itemGroup) {
-    if (itemGroup.sort) {
-      itemGroup.items.sort(function (a, b) {
-        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
-      });
-      if (itemGroup.sort === "DSC") {
-        itemGroup.items.reverse();
-      }
-    }
-  }
-  /**
-  * Recebe   como argumento um ListItem {label: string} e um booleano que define se o componente deve fazer scroll para exibir o item específico (opcional).
-  */
-  async setSelection(selectedItem, scrollToOption) {
-    if (selectedItem && this.ezSelectable) {
-      if (this.useGroups) {
-        let newList = [...this._listGroupItems];
-        newList.forEach(groupItem => {
-          groupItem.items.forEach(item => {
-            if (item.label == selectedItem.label) {
-              item.selected = true;
-            }
-            else {
-              item.selected = false;
-            }
-          });
-        });
-        this._listGroupItems = newList;
-      }
-      else {
-        let newList = [...this._listItems];
-        newList.forEach(item => {
-          if (item.label === selectedItem.label) {
-            item.selected = true;
-          }
-          else {
-            item.selected = false;
-          }
-        });
-        this._listItems = newList;
-      }
-      if (scrollToOption) {
-        let liElem = this.useGroups ?
-          this._groupContainer.querySelector('li#item_' + this.getItemId(selectedItem.label))
-          : this._itemContainer.querySelector('li#item_' + this.getItemId(selectedItem.label));
-        if (liElem) {
-          liElem.scrollIntoView();
-        }
-      }
-    }
-    else {
-      this.removeSelection();
-    }
-  }
-  removeSelection() {
-    if (this.useGroups) {
-      let newList = [...this._listGroupItems];
-      newList.forEach(groupItem => {
-        groupItem.items.forEach(item => {
-          item.selected = false;
-        });
-      });
-      this._listGroupItems = newList;
-    }
-    else {
-      let newList = [...this._listItems];
-      newList.forEach(item => {
-        item.selected = false;
-      });
-      this._listItems = newList;
-    }
-  }
-  /**
-   * Retorna   o item selecionado.
-  */
-  async getSelection() {
-    let selectedItem;
-    if (this.useGroups) {
-      this._listGroupItems.every(group => {
-        let item = group.items.find((item) => item.selected == true);
-        if (item) {
-          selectedItem = item;
-          return false;
-        }
-        return true;
-      });
-    }
-    else {
-      selectedItem = this._listItems.find((item) => item.selected == true);
-    }
-    return selectedItem;
-  }
-  /**
-   * Retorna   a lista de items conforme o modo de uso.
-   */
-  async getList() {
-    if (this.useGroups) {
-      return this._listGroupItems;
-    }
-    return this._listItems;
-  }
-  componentWillLoad() {
-    this._listItemsHistory = [];
-  }
-  componentWillRender() {
-    this.createList();
-  }
-  onDrop(ev, dragEndItem) {
-    this.removeOverClass();
-    this.setSelection(undefined);
-    if (this._dragStartItem) {
-      if (this.useGroups) {
-        let newList = [...this._listGroupItems];
-        let groupEnd = this._listGroupItems.find(group => dragEndItem.groupName == group.group);
-        //Remove item arrastado
-        newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
-        //Adiciona item arrastado
-        if (groupEnd.sort) {
-          newList.find(group => group.group == dragEndItem.groupName).items.push(this._dragStartItem.item);
-          newList.find(group => group.group == dragEndItem.groupName).items.sort(function (a, b) {
-            return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
-          });
-          if (groupEnd.sort === "DSC") {
-            newList.find(group => group.group == dragEndItem.groupName).items.reverse();
-          }
-        }
-        else {
-          let indexForAdd = (dragEndItem.index > this._dragStartItem.index) ? dragEndItem.index - 1 : dragEndItem.index;
-          newList.find(group => group.group == dragEndItem.groupName).items.splice(indexForAdd, 0, this._dragStartItem.item);
-        }
-        this._listGroupItems = newList;
-        this.ezChange.emit(this._listGroupItems);
-      }
-      else {
-        let newList = [...this._listItems];
-        newList.splice(this._dragStartItem.index, 1);
-        newList.splice(dragEndItem.index, 0, this._dragStartItem.item);
-        this._listItems = newList;
-        this._listItemsHistory = newList;
-        this.ezChange.emit(this._listItems);
-      }
-    }
-    ev.stopPropagation();
-  }
-  onDropLastIndex(ev, groupDropped) {
-    this.removeOverClass();
-    this.setSelection(undefined);
-    if (this._dragStartItem) {
-      if (this.useGroups) {
-        let newList = [...this._listGroupItems];
-        let groupEnd = this._listGroupItems.find(group => groupDropped.group == group.group);
-        //Remove item arrastado
-        newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
-        //Adiciona item arrastado
-        newList.find(group => group.group == groupDropped.group).items.push(this._dragStartItem.item);
-        if (groupEnd.sort) {
-          newList.find(group => group.group == groupDropped.group).items.sort(function (a, b) {
-            return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
-          });
-          if (groupEnd.sort === "DSC") {
-            newList.find(group => group.group == groupDropped.group).items.reverse();
-          }
-        }
-        this._listGroupItems = newList;
-        this.ezChange.emit(this._listGroupItems);
-      }
-      else {
-        let newList = [...this._listItems];
-        newList.splice(this._dragStartItem.index, 1);
-        newList.push(this._dragStartItem.item);
-        this._listItems = newList;
-        this._listItemsHistory = newList;
-        this.ezChange.emit(this._listItems);
-      }
-    }
-    ev.stopPropagation();
-  }
-  onDropGroup(groupSelected) {
-    var _a;
-    let newList = [...this._listGroupItems];
-    this.setSelection(undefined);
-    let newGroup = newList.find(group => group.group === groupSelected.group);
-    if (newGroup) {
-      if (((_a = newGroup.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-        let newItem;
-        newGroup.items.forEach((item, index) => {
-          if (item.label === this._dragStartItem.item.label) {
-            newItem = { item: item, index: index };
-          }
-        });
-        if (newItem) {
-          newGroup.items.splice(newItem.index, 1);
-          newGroup.items.unshift(newItem.item);
-          this.sortGroup(newGroup);
-        }
-        else {
-          newGroup.items.unshift(this._dragStartItem.item);
-          this.sortGroup(newGroup);
-          newList.find(group => group.group === this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
-        }
-      }
-      else {
-        newList.find(group => group.group === this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
-        newGroup.items = [this._dragStartItem.item];
-      }
-      this._listGroupItems = newList;
-    }
-  }
-  onDragEnd() {
-    this._dragStartItem = undefined;
-    if (this.useGroups) {
-      this.hideOverlays();
-    }
-    if (this._draggingElement) {
-      try {
-        this._element.shadowRoot.removeChild(this._draggingElement);
-      }
-      catch (err) { }
-      this._draggingElement = undefined;
-    }
-  }
-  addOverClass(element) {
-    if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains("draggable")) {
-      element.classList.add('over');
-    }
-    else if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains("draggable-list")) {
-      this.addOverClass(element.parentElement);
-    }
-  }
-  addOverGroupClass(ev, group) {
-    if (ev.target) {
-      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
-      let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
-      if (group.items.length > 0) {
-        groupOverlay.setAttribute("style", "display:grid");
-      }
-      else {
-        groupOverlay.classList.add("presetedHeight");
-        groupOverlay.setAttribute("style", "display:grid");
-        groupOverlay.scrollIntoView(false);
-      }
-    }
-  }
-  removeOverClass() {
-    var _a, _b;
-    let overCollection;
-    let overLastDroppableCollection;
-    if (this.useGroups) {
-      overCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('over');
-      overLastDroppableCollection = this._groupContainer.getElementsByClassName('last-droppable-space');
-    }
-    else {
-      overCollection = (_b = this._itemContainer) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('over');
-      overLastDroppableCollection = this._itemContainer.getElementsByClassName('last-droppable-space');
-    }
-    if (overCollection) {
-      Array.from(overCollection).forEach(function (element) {
-        element.classList.remove('over');
-      });
-    }
-    if (overLastDroppableCollection) {
-      Array.from(overLastDroppableCollection).forEach(function (element) {
-        element.classList.remove('over');
-      });
-    }
-  }
-  removeOverGroupClass(ev, group) {
-    if (ev.target) {
-      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
-      let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
-      if (groupOverlay) {
-        groupOverlay.classList.remove("presetedHeight");
-        groupOverlay.setAttribute("style", "display:none");
-      }
-    }
-  }
-  onDragStart(item, group, index) {
-    if (this._changeDeboucingTimeout) {
-      window.clearTimeout(this._changeDeboucingTimeout);
-    }
-    if (this.useGroups) {
-      this._dragStartItem = { groupName: group.group, item: item, index: index };
-      this._changeDeboucingTimeout = window.setTimeout(() => {
-        this.showOverlays(group);
-      }, 10);
-    }
-    else {
-      this._dragStartItem = { item: item.item, index: item.index };
-    }
-  }
-  selectFirstItem() {
-    if (this.useGroups) {
-      this.setSelection(this._listGroupItems[0].items[0]);
-    }
-    {
-      this.setSelection(this._listItems[0]);
-    }
-  }
-  nextOption(selectedItem) {
-    let nextItem = undefined;
-    if (this.useGroups) {
-      this._listGroupItems.every((group, groupIndex, listGroupItems) => {
-        let item = undefined;
-        let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
-        if (itemIndex != undefined && itemIndex != -1) {
-          if (itemIndex === group.items.length - 1) {
-            if (groupIndex + 1 <= listGroupItems.length - 1) {
-              item = { label: listGroupItems[groupIndex + 1].items[0].label };
-            }
-          }
-          else {
-            item = { label: group.items[itemIndex + 1].label };
-          }
-        }
-        if (item != undefined) {
-          nextItem = item;
-          return false;
-        }
-        return true;
-      });
-    }
-    else {
-      let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
-      if (itemIndex >= 0 && itemIndex < this._listItems.length) {
-        nextItem = this._listItems[itemIndex + 1];
-      }
-    }
-    this.setSelection(nextItem, true);
-  }
-  previousOption(selectedItem) {
-    let previousItem = undefined;
-    if (this.useGroups) {
-      this._listGroupItems.every((group, groupIndex, listGroupItems) => {
-        let item = undefined;
-        let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
-        if (itemIndex != undefined && itemIndex != -1) {
-          if (itemIndex === 0) {
-            if ((groupIndex - 1 >= 0)) {
-              item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
-            }
-          }
-          else {
-            item = { label: group.items[itemIndex - 1].label };
-          }
-        }
-        if (item != undefined) {
-          previousItem = item;
-          return false;
-        }
-        return true;
-      });
-    }
-    else {
-      let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
-      if (itemIndex > 0 && itemIndex < this._listItems.length) {
-        previousItem = this._listItems[itemIndex - 1];
-      }
-    }
-    this.setSelection(previousItem, true);
-  }
-  keyDownHandler(event) {
-    event.preventDefault();
-    this.getSelection().then(selectedItem => {
-      if (selectedItem) {
-        switch (event.key) {
-          case "ArrowDown":
-            this.nextOption(selectedItem);
-            break;
-          case "ArrowUp":
-            this.previousOption(selectedItem);
-            break;
-        }
-      }
-      else {
-        this.selectFirstItem();
-      }
-    });
-    event.stopPropagation();
-  }
-  getItemId(itemLabel) {
-    if (itemLabel) {
-      return itemLabel.replace(/[^a-z0-9_]/gi, "_");
-    }
-    return undefined;
-  }
-  getDivGroupId(groupName) {
-    if (groupName) {
-      return "group-" + groupName.replace(/[^a-z0-9_]/gi, "_");
-    }
-    return undefined;
-  }
-  getGroupOverlayId(groupName) {
-    if (groupName) {
-      return "group-overlay-" + groupName.replace(/[^a-z0-9_]/gi, "_");
-    }
-    return undefined;
-  }
-  onDragOverGroup(event, group) {
-    if (this._dragStartItem && this._dragStartItem.groupName !== group.group && group.sort) {
-      event.preventDefault();
-      this.addOverGroupClass(event, group);
-    }
-  }
-  onDragOverItem(event) {
-    if (this._dragStartItem) {
-      event.preventDefault();
-      this.addOverClass(event.target);
-      event.stopPropagation();
-    }
-  }
-  onDragOverLastIndex(ev) {
-    ev.preventDefault();
-    if (this._dragStartItem) {
-      ev.target.classList.add('over');
-      ev.stopPropagation();
-    }
-  }
-  showOverlays(groupDragStart) {
-    let groupOverlayCollection = this._groupContainer.getElementsByClassName("group-overlay");
-    Array.from(groupOverlayCollection).forEach(groupOverlay => {
-      let groupOverlayID = this.getGroupOverlayId(groupDragStart.group);
-      if (groupOverlayID && groupOverlay.getAttribute("id") && groupOverlayID != groupOverlay.getAttribute("id")) {
-        groupOverlay.classList.add("presetedHeight");
-        groupOverlay.setAttribute("style", "display:grid");
-      }
-    });
-  }
-  hideOverlays() {
-    var _a;
-    let groupOverlayCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName("group-overlay");
-    Array.from(groupOverlayCollection).forEach(groupOverlay => {
-      groupOverlay.classList.remove("presetedHeight");
-      groupOverlay.setAttribute("style", "display:none");
-    });
-  }
-  render() {
-    return (h(Host, { ref: (el) => this._element = el }, this.useGroups ?
-      h("div", { class: "group-container", ref: (el) => this._groupContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, this._listGroupItems.map(group => {
-        return h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name" }, group.group), h("section", { class: "section-container", onDragOver: (ev) => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => {
-          return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) }, h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onClick: () => { this.setSelection(item); }, onDragLeave: () => { group.sort ? undefined : this.removeOverClass(); }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: (event) => { group.sort ? undefined : this.onDragOverItem(event); }, onDrop: (event) => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)), this.itemSlotBuilder ?
-            h("div", { class: "slot-item" }, this.itemSlotBuilder(item, group))
-            : undefined));
-        })), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event, group) })), group.sort ?
-          h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)
-          : undefined));
-      }))
-      :
-        h("div", { class: "items-container", ref: (el) => this._itemContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => {
-          return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) }, h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => { this.setSelection(item); }, onDragLeave: () => this.removeOverClass(), onDragOver: (event) => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)), this.itemSlotBuilder ?
-            h("div", null, this.itemSlotBuilder(item))
-            : undefined));
-        }), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event) })))));
-  }
-};
-EzList.style = ezListCss;
-
-const selectBoxCss = "ez-combo-box{width:100px}.grid-config-combo{--ez-text-input--height:28px;--ez-text-input__input--background-color:#fff;--ez-text-input__input--border-color:#dce0e8}";
-
-const SelectBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezChange = createEvent(this, "ezChange", 7);
-    this.selectedOption = { value: "na", label: "N/A" };
-  }
-  render() {
-    return (h("ez-combo-box", { class: "grid-config-combo inverted", label: "", value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true }, h("option", { value: "na" }, "N/A"), h("option", { value: "asc" }, "A-Z"), h("option", { value: "desc" }, "Z-A")));
-  }
-  static get assetsDirs() { return ["../assets"]; }
-};
-SelectBox.style = selectBoxCss;
-
-export { EzButton as ez_button, EzCheck as ez_check, EzList as ez_list, SelectBox as select_box };