@sankhyalabs/ezui 7.2.0-rc.8 → 7.2.0

package/dist/collection/components/ez-multi-select-input/ez-multi-select-input.js

@@ -0,0 +1,555 @@
+import { h, Host } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+/**
+ * Campo de formulário de múltipla seleção. Possui o mesmo layout visual do
+ * `ez-text-input` (label flutuante, estados de foco/erro/desabilitado) e, ao ser
+ * acionado, abre um `ez-popover-plus` ancorado ao campo contendo um
+ * `ez-multi-selection-list`. O campo exibe o texto "N selecionado(s)" com a
+ * contagem de itens marcados.
+ *
+ * Suporta tanto lista estática (`options`) quanto carregamento dinâmico via
+ * `dataSource`/`columnName`. O valor selecionado é exposto pela prop `value` e
+ * pelo evento `ezChange` (ambos no formato `IMultiSelectionOption[]`), o que
+ * permite a vinculação automática a formulários através do `DataBinder` quando o
+ * metadata informa `userInterface: "MULTISELECTOR"`.
+ */
+export class EzMultiSelectInput {
+  constructor() {
+    /**
+     * Chave da última seleção conhecida (valores marcados, ordenados). Usada para
+     * deduplicar emissões de `ezChange`: o ez-multi-selection-list emite
+     * `changeFilteredOptions` também ao montar e a cada sincronização programática
+     * de `options`/`value`, então só propagamos mudanças reais de seleção.
+     */
+    this._lastSelectionKey = '';
+    this.label = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.hasInvalid = false;
+    this.canShowError = true;
+    this.mode = 'regular';
+    this.noBorder = false;
+    this.options = undefined;
+    this.dataSource = undefined;
+    this.columnName = undefined;
+    this.useOptions = false;
+    this.isTextSearch = false;
+    this.orderSelectedFirst = false;
+    this.value = undefined;
+    this._selectedCount = 0;
+    this._isOpen = false;
+  }
+  //---------------------------------------------
+  // Watchers
+  //---------------------------------------------
+  observeHasInvalid(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    }
+  }
+  observeOptions(newOptions) {
+    if (!newOptions) {
+      this._selectedCount = 0;
+      this._lastSelectionKey = '';
+      return;
+    }
+    this._selectedCount = newOptions.filter(o => o.check).length;
+    this._lastSelectionKey = this.selectionKey(newOptions);
+  }
+  observeValue(newValue) {
+    if (!Array.isArray(newValue)) {
+      return;
+    }
+    if (this.selectionKey(newValue) === this._lastSelectionKey) {
+      return;
+    }
+    this.options = newValue;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Retorna as opções com o estado de check atual.
+   */
+  async getSelectedOptions() {
+    var _a, _b;
+    const source = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.options) !== null && _b !== void 0 ? _b : [];
+    return source.filter(o => o.check);
+  }
+  /**
+   * Limpa todas as seleções. Delega ao ez-multi-selection-list.
+   */
+  async clearSelection() {
+    var _a, _b;
+    const list = (_a = this._list) !== null && _a !== void 0 ? _a : (_b = this._popover) === null || _b === void 0 ? void 0 : _b.querySelector('ez-multi-selection-list');
+    await (list === null || list === void 0 ? void 0 : list.clearSelection());
+    this._selectedCount = 0;
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  handleTogglePopover() {
+    if (!this.enabled) {
+      return;
+    }
+    if (this._isOpen) {
+      this._popover.hide();
+    }
+    else {
+      this._popover.showUnder(this._trigger);
+    }
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+      event.preventDefault();
+      this.handleTogglePopover();
+    }
+  }
+  handleVisibilityChange(event) {
+    this._isOpen = event.detail;
+  }
+  stopInnerChangeEvents(event) {
+    event.stopPropagation();
+  }
+  handleSelectionChange(event) {
+    var _a;
+    const opts = (_a = event.detail) !== null && _a !== void 0 ? _a : [];
+    this._selectedCount = opts.filter(o => o.check).length;
+    const key = this.selectionKey(opts);
+    if (key === this._lastSelectionKey) {
+      return;
+    }
+    this._lastSelectionKey = key;
+    this.value = opts;
+    this.ezChange.emit(opts);
+  }
+  selectionKey(opts) {
+    return (opts || [])
+      .filter(o => o.check)
+      .map(o => o.value)
+      .sort()
+      .join('|');
+  }
+  buildDisplayText() {
+    return this._selectedCount > 0 ? `${this._selectedCount} selecionado(s)` : '';
+  }
+  buildTriggerClass() {
+    const classes = ['trigger'];
+    if (!this.enabled)
+      classes.push('trigger--disabled');
+    if (this._isOpen)
+      classes.push('trigger--focused');
+    if (this.hasError())
+      classes.push('trigger--error');
+    if (this.noBorder)
+      classes.push('trigger--no-border');
+    if (this.mode === 'slim')
+      classes.push('trigger--slim');
+    return classes.join(' ');
+  }
+  hasError() {
+    if (!this.canShowError) {
+      return false;
+    }
+    return this.hasInvalid || (typeof this.errorMessage === 'string' && this.errorMessage.trim() !== '');
+  }
+  //---------------------------------------------
+  // Lifecycle
+  //---------------------------------------------
+  componentWillLoad() {
+    if (Array.isArray(this.value) && this.value !== this.options) {
+      this.options = this.value;
+    }
+    const source = this.options;
+    if (source) {
+      this._selectedCount = source.filter(o => o.check).length;
+      this._lastSelectionKey = this.selectionKey(source);
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'multi-select-input');
+    const displayText = this.buildDisplayText();
+    const hasError = this.hasError();
+    const isFloated = this._selectedCount > 0 || this._isOpen;
+    return (h(Host, null, h("div", { ref: el => this._trigger = el, class: this.buildTriggerClass(), tabindex: this.enabled ? '0' : '-1', onClick: () => this.handleTogglePopover(), onKeyDown: (e) => this.handleKeyDown(e), "data-element-id": ElementIDUtils.getInternalIDInfo('trigger') }, this.label && this.mode !== 'slim' && (h("label", { class: {
+        'trigger__label': true,
+        'trigger__label--floated': isFloated,
+        'trigger__label--disabled': !this.enabled,
+        'trigger__label--error': hasError,
+      }, title: this.label }, this.label)), h("span", { class: {
+        'trigger__value': true,
+        'trigger__value--placeholder': this._selectedCount === 0,
+        'trigger__value--with-label': !!this.label && this.mode !== 'slim',
+      } }, displayText || (this.mode === 'slim' && this.label ? this.label : '')), h("ez-icon", { class: "trigger__chevron", iconName: this._isOpen ? 'chevron-up' : 'chevron-down' }), hasError && this.mode !== 'slim' && this.errorMessage && (
+    // strategy="fixed": o tooltip fica dentro de `.trigger` (que tem
+    // overflow: hidden); com position:fixed o balão escapa do recorte do
+    // container — z-index sozinho não resolve recorte por overflow.
+    h("ez-tooltip", { type: "error", message: this.errorMessage, strategy: "fixed" }, h("ez-icon", { class: "tooltip-icon hasError", "data-element-id": ElementIDUtils.getInternalIDInfo('tooltip-icon'), iconName: "alert-circle" })))), h("ez-popover-core", { ref: el => this._popover = el, overlayType: "light", fitInViewport: true, useAnchorSize: true, onEzVisibilityChange: (e) => this.handleVisibilityChange(e) }, h("ez-multi-selection-list", { ref: el => {
+        this._list = el;
+        el === null || el === void 0 ? void 0 : el.removeEventListener('ezChange', this.stopInnerChangeEvents);
+        el === null || el === void 0 ? void 0 : el.addEventListener('ezChange', this.stopInnerChangeEvents);
+      }, columnName: this.columnName, dataSource: this.dataSource, useOptions: this.useOptions, options: this.options, isTextSearch: this.isTextSearch, orderSelectedFirst: this.orderSelectedFirst, onChangeFilteredOptions: (e) => this.handleSelectionChange(e) }))));
+  }
+  static get is() { return "ez-multi-select-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-multi-select-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-multi-select-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o campo."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido."
+        },
+        "attribute": "error-message",
+        "reflect": true
+      },
+      "hasInvalid": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o campo est\u00E1 em estado inv\u00E1lido (bordas vermelhas)."
+        },
+        "attribute": "has-invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'slim' | 'regular'",
+          "resolved": "\"regular\" | \"slim\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do campo."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "'regular'"
+      },
+      "noBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo n\u00E3o ter\u00E1 bordas."
+        },
+        "attribute": "no-border",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IMultiSelectionOption[]",
+          "resolved": "IMultiSelectionOption[]",
+          "references": {
+            "IMultiSelectionOption": {
+              "location": "import",
+              "path": "../ez-multi-selection-list/interfaces/IMultiSelectionOption"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Op\u00E7\u00F5es est\u00E1ticas passadas para o ez-multi-selection-list."
+        }
+      },
+      "dataSource": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IMultiSelectionListDataSource",
+          "resolved": "IMultiSelectionListDataSource",
+          "references": {
+            "IMultiSelectionListDataSource": {
+              "location": "import",
+              "path": "../ez-multi-selection-list/interfaces/IMultiSelectionListDataSource"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Datasource din\u00E2mico passado para o ez-multi-selection-list."
+        }
+      },
+      "columnName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da coluna para o datasource."
+        },
+        "attribute": "column-name",
+        "reflect": true
+      },
+      "useOptions": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alterna entre lista est\u00E1tica (true) e datasource (false)."
+        },
+        "attribute": "use-options",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "isTextSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se a pesquisa \u00E9 do tipo texto ou num\u00E9rico."
+        },
+        "attribute": "is-text-search",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "orderSelectedFirst": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se as op\u00E7\u00F5es marcadas devem ser reordenadas para o topo da lista.\nQuando `false` (padr\u00E3o), a ordem original das op\u00E7\u00F5es \u00E9 preservada \u2014 os itens\nn\u00E3o \"pulam\" para o topo ao serem selecionados. Defina `true` para manter os\nselecionados no topo (ordenados)."
+        },
+        "attribute": "order-selected-first",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IMultiSelectionOption[]",
+          "resolved": "IMultiSelectionOption[]",
+          "references": {
+            "IMultiSelectionOption": {
+              "location": "import",
+              "path": "../ez-multi-selection-list/interfaces/IMultiSelectionOption"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Valor do campo: as op\u00E7\u00F5es com o estado de check atual (mesmo formato do payload\nde `ezChange`). Usado para a vincula\u00E7\u00E3o com formul\u00E1rios (read-back do DataBinder).\nN\u00E3o reflete como atributo pois arrays n\u00E3o serializam bem em HTML."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_selectedCount": {},
+      "_isOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando a sele\u00E7\u00E3o de itens na lista \u00E9 alterada.\nO payload \u00E9 o array completo das op\u00E7\u00F5es com seu estado de check."
+        },
+        "complexType": {
+          "original": "IMultiSelectionOption[]",
+          "resolved": "IMultiSelectionOption[]",
+          "references": {
+            "IMultiSelectionOption": {
+              "location": "import",
+              "path": "../ez-multi-selection-list/interfaces/IMultiSelectionOption"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getSelectedOptions": {
+        "complexType": {
+          "signature": "() => Promise<IMultiSelectionOption[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IMultiSelectionOption": {
+              "location": "import",
+              "path": "../ez-multi-selection-list/interfaces/IMultiSelectionOption"
+            }
+          },
+          "return": "Promise<IMultiSelectionOption[]>"
+        },
+        "docs": {
+          "text": "Retorna as op\u00E7\u00F5es com o estado de check atual.",
+          "tags": []
+        }
+      },
+      "clearSelection": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLEzMultiSelectionListElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Limpa todas as sele\u00E7\u00F5es. Delega ao ez-multi-selection-list.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "hasInvalid",
+        "methodName": "observeHasInvalid"
+      }, {
+        "propName": "errorMessage",
+        "methodName": "observeHasInvalid"
+      }, {
+        "propName": "canShowError",
+        "methodName": "observeHasInvalid"
+      }, {
+        "propName": "options",
+        "methodName": "observeOptions"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
+}

package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.css

@@ -1,30 +1,51 @@
 :host {
   --ez-check--outter-gap: 0px;
-  --ez-multi-selection-default-height: 322px;
+  --ez-multi-selection-default-max-height: calc(100vh - 435px);
 
-  display: block;
-  width: 304px;
-  height: var(--ez-multi-selection-default-height);
-  min-height: fit-content;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--ez-multi-selection-default-width, 304px);
+  min-width: 0;
+  max-width: 100%;
+  height: var(--ez-multi-selection-default-height, 322px);
+  min-height: 0;
   max-height: calc(100vh - 350px);
 }
 
+.multi-selection {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
 .multi-selection__input {
   margin-bottom: var(--space--2xs, 8px);
+  flex: 0 0 auto;
 }
 
 .multi-selection__content-options {
   position: relative;
   left: -4px;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .multi-selection__select-all {
   height: var(--space--xl);
   margin: 0 var(--space--small, 6px);
+  flex: 0 0 auto;
 }
 
 .multi-selection__list {
-  max-height: calc(100vh - 435px);
+  max-height: var(--ez-multi-selection-default-max-height);
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
   overflow-x: clip;
 }