@sankhyalabs/ezui 7.3.4 → 7.3.5-dev.1

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

@@ -0,0 +1,422 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { DataType, DataUnit, Action, KeyboardManager, ElementIDUtils } from '@sankhyalabs/core';
+import { D as DataBinder } from './DataBinder-81d15b1b.js';
+import { b as buildFormMetadata } from './FormMetadata-112f11d8.js';
+import { i as initI18n } from './index-d37095f4.js';
+import './ApplicationUtils-aaf24be5.js';
+import './DialogType-54a62731.js';
+
+const ezFilterCss = ":host{--ez-filter--width:320px;--ez-filter--background-color:var(--color--gray-70, #ffffff);--ez-filter--padding:var(--space--16, 16px);--ez-filter--border-radius:var(--border--radius-0, 0px);--ez-filter--z-index:var(--elevation--22, 22);--ez-filter--transition-duration:0.2s;--ez-filter--transition-timing:ease-in-out;--ez-filter--scrim-color:rgba(0, 4, 12, 0.4);--ez-filter--scrim-blur:blur(4px);--ez-filter--box-shadow:0px 0px 16px 0px rgba(0, 38, 111, 0.12);--ez-filter--title-color:var(--color--petroleum-900, #141b27);--ez-filter--title-font-size:var(--font-size--medium, 16px);--ez-filter--divider-color:var(--color--gray-90, #eaeaea);--ez-filter--header-gap:var(--space--8, 8px);--ez-filter--footer-gap:var(--space--8, 8px);display:block;box-sizing:border-box;font-family:var(--font--pattern, \"Roboto\")}:host([interaction-mode=\"push\"]){width:0;height:100%;overflow:hidden;transition:width var(--ez-filter--transition-duration) var(--ez-filter--transition-timing)}:host([interaction-mode=\"push\"][opened]){width:var(--ez-filter--width)}:host([interaction-mode=\"overlay\"]){display:contents}.ez-filter__panel{display:flex;flex-direction:column;box-sizing:border-box;height:100%;background-color:var(--ez-filter--background-color);border-radius:var(--ez-filter--border-radius);outline:none}.ez-filter__panel--push{position:relative;width:var(--ez-filter--width)}.ez-filter__panel--overlay{position:fixed;top:0;left:0;width:var(--ez-filter--width);max-width:100%;height:100vh;z-index:var(--ez-filter--z-index);box-shadow:var(--ez-filter--box-shadow);visibility:hidden;transform:translateX(-100%);transition:transform var(--ez-filter--transition-duration) var(--ez-filter--transition-timing),\n    visibility 0s linear var(--ez-filter--transition-duration)}.ez-filter__panel--overlay.ez-filter__panel--opened{visibility:visible;transform:translateX(0);transition:transform var(--ez-filter--transition-duration) var(--ez-filter--transition-timing),\n    visibility 0s}.ez-filter__scrim{position:fixed;inset:0;z-index:calc(var(--ez-filter--z-index) - 1);background:var(--ez-filter--scrim-color);backdrop-filter:var(--ez-filter--scrim-blur);-webkit-backdrop-filter:var(--ez-filter--scrim-blur)}.ez-filter__header{display:flex;align-items:center;justify-content:space-between;gap:var(--ez-filter--header-gap);padding:var(--ez-filter--padding);border-bottom:1px solid var(--ez-filter--divider-color)}.ez-filter__title{margin:0;font-size:var(--ez-filter--title-font-size);font-weight:var(--font-weight--bold, 700);line-height:var(--line-height--24, 24px);color:var(--ez-filter--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ez-filter__body{flex:1 1 auto;overflow-y:auto;padding:var(--ez-filter--padding)}.ez-filter__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--ez-filter--footer-gap);padding:var(--ez-filter--padding);border-top:1px solid var(--ez-filter--divider-color)}";
+
+const EzFilter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezApplyFilter = createEvent(this, "ezApplyFilter", 7);
+    this.ezClearFilter = createEvent(this, "ezClearFilter", 7);
+    this.ezRemoveFilter = createEvent(this, "ezRemoveFilter", 7);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezOpen = createEvent(this, "ezOpen", 7);
+    this.ezClose = createEvent(this, "ezClose", 7);
+    this._bound = false;
+    this._loaded = false;
+    this._customFields = new Map();
+    this._pendingEditors = new Map();
+    this.stopInternalChange = (event) => {
+      event.stopPropagation();
+    };
+    this.opened = false;
+    this.interactionMode = "overlay";
+    this.dataUnit = undefined;
+    this.metadata = undefined;
+    this.fields = undefined;
+    this.initialValues = undefined;
+    this.panelTitle = undefined;
+    this.recordValidator = undefined;
+    this.showScrim = true;
+    this.closeOnScrimClick = true;
+    this.closeOnEsc = true;
+    this.applyOnEnter = true;
+    this.clearButtonLabel = undefined;
+    this.applyButtonLabel = undefined;
+    this._viewFields = [];
+  }
+  /**
+   * Abre o painel de filtros.
+   */
+  async open() {
+    this.opened = true;
+  }
+  /**
+   * Fecha o painel de filtros.
+   */
+  async close() {
+    this.opened = false;
+  }
+  /**
+   * Alterna o estado de abertura do painel.
+   */
+  async toggle() {
+    this.opened = !this.opened;
+  }
+  /**
+   * Altera o valor de um filtro.
+   * @param fieldName - Nome do campo.
+   * @param value - Novo valor.
+   */
+  async setFieldValue(fieldName, value) {
+    var _a;
+    await this.ensureRecord();
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.setFieldValue(fieldName, value);
+  }
+  /**
+   * Retorna os valores atuais dos filtros preenchidos.
+   * @returns Mapa `nomeDoCampo` → `valor`.
+   */
+  async getValues() {
+    return this.collectValues();
+  }
+  /**
+   * Limpa todos os filtros (esvazia o valor de cada campo) e emite `ezClearFilter`.
+   */
+  async clear() {
+    const dataUnit = this.dataUnit;
+    if (dataUnit) {
+      await this.ensureRecord();
+      this.getFieldNames().forEach((name) => dataUnit.setFieldValue(name, null));
+    }
+    this.ezClearFilter.emit();
+  }
+  /**
+   * Remove um filtro específico (limpa seu valor) e emite `ezRemoveFilter`.
+   * @param fieldName - Nome do campo a remover.
+   */
+  async removeFilter(fieldName) {
+    await this.setFieldValue(fieldName, null);
+    this.ezRemoveFilter.emit({ fieldName });
+  }
+  /**
+   * Valida os filtros (campos obrigatórios e validador customizado).
+   * @returns `true` quando válido; `false` caso contrário.
+   */
+  async validate() {
+    if (!this._bound || !this._dataBinder) {
+      return true;
+    }
+    try {
+      await this._dataBinder.validate();
+      return true;
+    }
+    catch (_a) {
+      return false;
+    }
+  }
+  /**
+   * Valida e, quando válido, emite `ezApplyFilter` com os valores atuais.
+   * @returns `true` quando aplicado; `false` quando bloqueado pela validação.
+   */
+  async apply() {
+    const isValid = await this.validate();
+    if (!isValid) {
+      return false;
+    }
+    this.ezApplyFilter.emit({ values: this.collectValues() });
+    return true;
+  }
+  /**
+   * Registra um editor customizado para um campo já existente na metadata.
+   * @param fieldName - Nome do campo.
+   * @param editor - Editor customizado.
+   */
+  async addCustomEditor(fieldName, editor) {
+    if (this._formView) {
+      await this._formView.addCustomEditor(fieldName, editor);
+      return;
+    }
+    this._pendingEditors.set(fieldName, editor);
+  }
+  /**
+   * Adiciona um campo customizado que não existe na metadata padrão do core.
+   * @param field - Definição do campo customizado.
+   */
+  async registerCustomField(field) {
+    var _a;
+    this._customFields.set(field.name, field);
+    if (this.dataUnit && !this.dataUnit.getField(field.name)) {
+      this.dataUnit.addField({
+        name: field.name,
+        label: field.label,
+        dataType: (_a = field.dataType) !== null && _a !== void 0 ? _a : DataType.TEXT,
+        userInterface: field.userInterface,
+        required: field.required,
+      });
+    }
+    if (field.editor) {
+      this._pendingEditors.set(field.name, field.editor);
+    }
+    this.rebuildMetadata();
+    if (field.defaultValue !== undefined) {
+      await this.setFieldValue(field.name, field.defaultValue);
+    }
+  }
+  watchMetadata() {
+    if (!this.dataUnit) {
+      return;
+    }
+    if (this.metadata) {
+      this.dataUnit.metadata = this.metadata;
+    }
+    this.rebuildMetadata();
+  }
+  async watchInitialValues() {
+    await this.applyInitialValues();
+  }
+  async watchDataUnit(newDataUnit, oldDataUnit) {
+    var _a;
+    // Durante o load inicial o wiring é feito por componentWillLoad; evita init duplo.
+    if (!this._loaded || newDataUnit === oldDataUnit) {
+      return;
+    }
+    if (this._duObserver && oldDataUnit) {
+      oldDataUnit.unsubscribe(this._duObserver);
+    }
+    (_a = this._dataBinder) === null || _a === void 0 ? void 0 : _a.onDisconnectedCallback();
+    this._dataBinder = undefined;
+    this._bound = false;
+    if (!newDataUnit) {
+      this._viewFields = [];
+      return;
+    }
+    if (this.metadata && !newDataUnit.metadata) {
+      newDataUnit.metadata = this.metadata;
+    }
+    await this.ensureRecord();
+    this._dataBinder = new DataBinder(newDataUnit);
+    this.subscribeDataUnit();
+    this.rebuildMetadata();
+    await this.applyInitialValues();
+  }
+  watchOpened(opened) {
+    if (opened) {
+      this._previousFocus = document.activeElement;
+      this.lockScroll(true);
+      this.ezOpen.emit();
+      requestAnimationFrame(() => this.focusPanel());
+    }
+    else {
+      this.lockScroll(false);
+      this.ezClose.emit();
+      this.restoreFocus();
+    }
+  }
+  async componentWillLoad() {
+    this._i18n = await initI18n();
+    await this.ensureDataUnit();
+    this._dataBinder = new DataBinder(this.dataUnit);
+    this.subscribeDataUnit();
+    this.rebuildMetadata();
+    await this.applyInitialValues();
+  }
+  componentDidLoad() {
+    var _a;
+    this._loaded = true;
+    // Os inputs internos emitem `ezChange` (composed + bubbles). Como o ez-filter tem um
+    // evento público de mesmo nome, o evento interno vazaria do Shadow DOM e chegaria ao
+    // consumidor como um segundo `ezChange` com detalhe inválido. Barramos a propagação no
+    // corpo do painel; o DataBinder ouve no próprio campo (fase de destino), então continua
+    // capturando, e o ez-filter re-emite `ezChange` a partir do host com o detalhe correto.
+    (_a = this._bodyElement) === null || _a === void 0 ? void 0 : _a.addEventListener("ezChange", this.stopInternalChange);
+    this.initKeyboardManager();
+    this.addInfoId();
+    if (this.opened) {
+      this.lockScroll(true);
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b, _c, _d;
+    if (this._duObserver) {
+      (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._duObserver);
+    }
+    (_b = this._bodyElement) === null || _b === void 0 ? void 0 : _b.removeEventListener("ezChange", this.stopInternalChange);
+    (_c = this._dataBinder) === null || _c === void 0 ? void 0 : _c.onDisconnectedCallback();
+    (_d = this._keyboardManager) === null || _d === void 0 ? void 0 : _d.unbindAllShortcutKeys();
+    this.lockScroll(false);
+  }
+  async ensureDataUnit() {
+    if (!this.dataUnit) {
+      this.dataUnit = new DataUnit("ez-filter");
+    }
+    if (this.metadata && !this.dataUnit.metadata) {
+      this.dataUnit.metadata = this.metadata;
+    }
+    await this.ensureRecord();
+  }
+  async ensureRecord() {
+    var _a, _b;
+    if (this.dataUnit && ((_b = (_a = this.dataUnit.records) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) === 0) {
+      await this.dataUnit.addRecord();
+      this.dataUnit.selectFirst();
+    }
+  }
+  subscribeDataUnit() {
+    var _a;
+    this._duObserver = (action) => {
+      var _a, _b;
+      if ((action === null || action === void 0 ? void 0 : action.type) === Action.DATA_CHANGED) {
+        const fieldName = Object.keys((_a = action.payload) !== null && _a !== void 0 ? _a : {})[0];
+        if (fieldName) {
+          this.ezChange.emit({ fieldName, value: (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.getFieldValue(fieldName) });
+        }
+      }
+      else if ((action === null || action === void 0 ? void 0 : action.type) === Action.METADATA_LOADED) {
+        // `addField` (com interceptor ativo) e carregamentos assíncronos de metadata
+        // aplicam a mudança de forma deferida, emitindo METADATA_LOADED. Reconstruímos
+        // os campos aqui para que campos customizados/assíncronos apareçam no mesmo ciclo.
+        this.rebuildMetadata();
+      }
+    };
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.subscribe(this._duObserver);
+  }
+  rebuildMetadata() {
+    var _a;
+    if (!((_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.metadata)) {
+      this._viewFields = [];
+      return;
+    }
+    const config = this.fields
+      ? { emptyConfig: false, fields: this.fields }
+      : { emptyConfig: true, fields: [] };
+    this._formMetadata = buildFormMetadata(config, this.dataUnit);
+    this._viewFields = this.flattenFields(this._formMetadata);
+  }
+  flattenFields(metadata) {
+    const result = [];
+    metadata.getAllSheets().forEach((sheet) => {
+      if (sheet.fields) {
+        result.push(...sheet.fields);
+      }
+    });
+    return result;
+  }
+  async applyInitialValues() {
+    if (!this.initialValues || !this.dataUnit) {
+      return;
+    }
+    await this.ensureRecord();
+    Object.entries(this.initialValues).forEach(([fieldName, value]) => {
+      var _a;
+      (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.setFieldValue(fieldName, value);
+    });
+  }
+  onContentReady(fieldElements) {
+    if (!this._dataBinder || !this._formMetadata || !this.dataUnit) {
+      return;
+    }
+    this._dataBinder.bind(fieldElements, this.dataUnit.dataUnitId, this._formMetadata, this.recordValidator);
+    this._bound = true;
+    this.flushPendingEditors();
+  }
+  flushPendingEditors() {
+    if (!this._formView) {
+      return;
+    }
+    this._pendingEditors.forEach((editor, fieldName) => {
+      var _a;
+      (_a = this._formView) === null || _a === void 0 ? void 0 : _a.addCustomEditor(fieldName, editor);
+      this._pendingEditors.delete(fieldName);
+    });
+  }
+  getFieldNames() {
+    const names = new Set();
+    this._viewFields.forEach((field) => names.add(field.name));
+    this._customFields.forEach((_field, name) => names.add(name));
+    return Array.from(names);
+  }
+  collectValues() {
+    const values = {};
+    if (!this.dataUnit) {
+      return values;
+    }
+    this.getFieldNames().forEach((name) => {
+      var _a;
+      const value = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getFieldValue(name);
+      if (value !== undefined && value !== null && value !== "") {
+        values[name] = value;
+      }
+    });
+    return values;
+  }
+  onScrimClick() {
+    if (this.closeOnScrimClick) {
+      this.close();
+    }
+  }
+  lockScroll(lock) {
+    if (this.interactionMode !== "overlay") {
+      return;
+    }
+    document.body.style.overflow = lock ? "hidden" : "";
+  }
+  focusPanel() {
+    var _a, _b;
+    (_b = (_a = this._element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ez-filter__panel")) === null || _b === void 0 ? void 0 : _b.focus();
+  }
+  restoreFocus() {
+    var _a;
+    if (typeof ((_a = this._previousFocus) === null || _a === void 0 ? void 0 : _a.focus) === "function") {
+      this._previousFocus.focus();
+    }
+    this._previousFocus = undefined;
+  }
+  initKeyboardManager() {
+    this._keyboardManager = new KeyboardManager({
+      propagate: false,
+      element: this._element,
+      enableShadowDom: true,
+    })
+      .bind("Escape", () => this.onEscape())
+      .bind("Esc", () => this.onEscape());
+    if (this.applyOnEnter) {
+      this._keyboardManager.bind("Enter", () => {
+        if (this.opened) {
+          this.apply();
+        }
+      });
+    }
+  }
+  onEscape() {
+    if (this.opened && this.closeOnEsc) {
+      this.close();
+    }
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  getTitle() {
+    var _a, _b, _c;
+    return (_c = (_a = this.panelTitle) !== null && _a !== void 0 ? _a : (_b = this._i18n) === null || _b === void 0 ? void 0 : _b.call(this, "ez-filter.title")) !== null && _c !== void 0 ? _c : "";
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const title = this.getTitle();
+    const isOverlay = this.interactionMode === "overlay";
+    return (h(Host, null, isOverlay && this.showScrim && this.opened && (h("div", { class: "ez-filter__scrim", part: "scrim", onClick: () => this.onScrimClick() })), h("aside", { class: {
+        "ez-filter__panel": true,
+        "ez-filter__panel--overlay": isOverlay,
+        "ez-filter__panel--push": !isOverlay,
+        "ez-filter__panel--opened": this.opened,
+      }, part: "panel", role: "complementary", "aria-label": title, "aria-hidden": (!this.opened).toString(), tabindex: "-1" }, h("header", { class: "ez-filter__header", part: "header" }, h("h2", { class: "ez-filter__title", part: "title" }, title), h("ez-button", { class: "ez-filter__close", mode: "icon", iconName: "close", "aria-label": (_a = this._i18n) === null || _a === void 0 ? void 0 : _a.call(this, "app.close"), onClick: () => this.close() })), h("div", { class: "ez-filter__body", part: "body", ref: (el) => (this._bodyElement = el) }, h("ez-form-view", { ref: (element) => (this._formView = element), fields: this._viewFields, singleColumn: true, selectedRecord: (_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.getSelectedRecord) === null || _c === void 0 ? void 0 : _c.call(_b), onEzContentReady: (evt) => this.onContentReady(evt.detail) }), h("slot", { name: "custom-fields" })), h("footer", { class: "ez-filter__footer", part: "footer" }, h("ez-button", { class: "ez-filter__clear", variant: "tertiary", label: (_d = this.clearButtonLabel) !== null && _d !== void 0 ? _d : (_e = this._i18n) === null || _e === void 0 ? void 0 : _e.call(this, "ez-filter.clear"), onClick: () => this.clear() }), h("ez-button", { class: "ez-filter__apply", variant: "primary", label: (_f = this.applyButtonLabel) !== null && _f !== void 0 ? _f : (_g = this._i18n) === null || _g === void 0 ? void 0 : _g.call(this, "ez-filter.apply"), onClick: () => this.apply() })))));
+  }
+  get _element() { return getElement(this); }
+  static get watchers() { return {
+    "metadata": ["watchMetadata"],
+    "fields": ["watchMetadata"],
+    "initialValues": ["watchInitialValues"],
+    "dataUnit": ["watchDataUnit"],
+    "opened": ["watchOpened"]
+  }; }
+};
+EzFilter.style = ezFilterCss;
+
+export { EzFilter as ez_filter };