@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

package/dist/esm/snk-form-summary.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a7d3d3f1.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+const BOUNDARY_FALSE_POSITIVE_VALUE = 14;
+const cardFormResizeObserver = new ResizeObserver((entries) => {
+  var _a;
+  for (let entry of entries) {
+    const children = ((_a = entry === null || entry === void 0 ? void 0 : entry.target) === null || _a === void 0 ? void 0 : _a.children) || [];
+    const { parentElement } = (entry === null || entry === void 0 ? void 0 : entry.target) || {};
+    if (!(parentElement === null || parentElement === void 0 ? void 0 : parentElement.clientWidth))
+      return;
+    const limitWidth = parentElement.clientWidth - BOUNDARY_FALSE_POSITIVE_VALUE;
+    if (entry.target.hasChildNodes()) {
+      const listWidth = [];
+      for (const node of children)
+        listWidth.push(node);
+      listWidth.reduce((total, child) => {
+        const totalWidth = total + child.clientWidth;
+        if (totalWidth > limitWidth) {
+          child.style.visibility = 'hidden';
+        }
+        else {
+          child.style.visibility = 'visible';
+        }
+        return totalWidth;
+      }, 0);
+    }
+  }
+});
+
+const snkFormSummaryCss = ".sc-snk-form-summary-h{display:flex;width:100%;--ez-form-card-summary-field-content-weight:700}.summary-wrapper.sc-snk-form-summary{display:flex;overflow:hidden}.summary-container.sc-snk-form-summary{display:flex;flex-direction:column;padding-right:calc(var(--space--extra-large) / 1.5)}.summary-field.sc-snk-form-summary{min-width:30px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-field__title.sc-snk-form-summary{color:var(--text--primary, #626e82);font-size:var(--title--small);white-space:nowrap;font-weight:var(--text-weight--medium)}.summary-field__content.sc-snk-form-summary{color:var(--title--primary, #2b3a54);font-size:var(--text--large);font-weight:var(--ez-form-card-summary-field-content-weight)}";
+
+const SnkFormSummary = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fixed = false;
+    this.contracted = false;
+    this.summary = undefined;
+  }
+  componentDidRender() {
+    cardFormResizeObserver.disconnect();
+    if (this._summaryElement) {
+      cardFormResizeObserver.observe(this._summaryElement);
+    }
+  }
+  disconnectedCallback() {
+    cardFormResizeObserver.disconnect();
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'ezFormCard');
+    return (h(Host, null, h("div", { ref: el => this._summaryElement = el, class: "summary-wrapper" }, Object.entries(this.summary).map(([key, value]) => h("div", { class: "summary-container", title: `${key}: ${value}` }, h("label", { class: "ez-text summary-field summary-field__title" }, key), h("label", { class: " ez-text summary-field summary-field__content" }, value))))));
+  }
+  get _elem() { return getElement(this); }
+};
+SnkFormSummary.style = snkFormSummaryCss;
+
+export { SnkFormSummary as snk_form_summary };

package/dist/esm/snk-form-view.entry.js

@@ -0,0 +1,95 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a7d3d3f1.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { DataBinder } from '@sankhyalabs/ezui/dist/collection/utils/form';
+
+const snkFormViewCss = ".sc-snk-form-view-h{display:flex;width:100%;--ez-form-card-summary-field-content-weight:700}.level-path.sc-snk-form-view{color:var(--color--title-primary, #2B3A54);font-weight:var(--text-weight--medium, 400);padding-right:3px}.summary-wrapper.sc-snk-form-view{display:flex;overflow:hidden}.summary-header.sc-snk-form-view{border-bottom:1px solid var(--color--strokes);margin-bottom:var(--space--medium);padding-bottom:var(--space--medium)}.summary-container.sc-snk-form-view{display:flex;flex-direction:column}.summary-container.sc-snk-form-view{padding-right:calc(var(--space--extra-large) / 1.5)}.summary-field.sc-snk-form-view{min-width:30px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-field__title.sc-snk-form-view{color:var(--text--primary, #626e82);font-size:var(--title--small);white-space:nowrap;font-weight:var(--text-weight--medium)}.summary-field__content.sc-snk-form-view{color:var(--title--primary, #2b3a54);font-size:var(--text--large);font-weight:var(--ez-form-card-summary-field-content-weight)}";
+
+const SnkFormView = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.snkContentCardChanged = createEvent(this, "snkContentCardChanged", 7);
+    this.levelPath = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.fields = undefined;
+    this.formMetadata = undefined;
+    this.dataUnit = undefined;
+    this.contracted = undefined;
+    this.fixed = false;
+    this.summaryFields = undefined;
+    this.canExpand = true;
+    this.canFix = true;
+    this.recordsValidator = undefined;
+  }
+  async showUp() {
+    if (this._formView) {
+      this._formView.showUp();
+    }
+  }
+  changeFix() {
+    this.fixed = !this.fixed;
+    this.emitEvent("fixed");
+  }
+  changeContracted() {
+    this.contracted = !this.contracted;
+    this.emitEvent("presentation");
+  }
+  emitEvent(propertyChanged) {
+    this.snkContentCardChanged.emit({
+      formName: this.name,
+      cardConfig: {
+        fixed: this.fixed,
+        presentation: this.contracted ? "CONTRACTED" : "EXPANDED"
+      },
+      propertyChanged
+    });
+  }
+  getCardSummary() {
+    const summary = {};
+    this.getSummaryFields().forEach(({ field, label }) => {
+      var _a;
+      const value = this.dataUnit.getFormattedValue(field);
+      if (value !== "") {
+        if (label == undefined) {
+          label = (_a = this.dataUnit.getField(field)) === null || _a === void 0 ? void 0 : _a.label;
+        }
+        summary[label] = value;
+      }
+    });
+    return summary;
+  }
+  getSummaryFields() {
+    if (this.summaryFields == undefined) {
+      return this.fields.map(field => {
+        const descriptor = this.dataUnit.getField(field.name);
+        return { field: field.name, label: field.label || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.label) };
+      });
+    }
+    return this.summaryFields;
+  }
+  bindFields(fields) {
+    if (this._dataBinder == undefined && this.dataUnit != undefined) {
+      this._dataBinder = new DataBinder(this.dataUnit);
+    }
+    if (this._dataBinder) {
+      this._dataBinder.bind(fields, this.dataUnit.dataUnitId, this.formMetadata, this.recordsValidator);
+    }
+  }
+  disconnectedCallback() {
+    if (this._dataBinder != undefined) {
+      this._dataBinder.onDisconnectedCallback();
+    }
+  }
+  render() {
+    return (h(Host, { class: "ez-box__container" }, h("div", { class: "summary-header ez-flex ez-size-width--full" }, h("div", { class: "ez-flex ez-text ez-title--primary ez-text--bold ez-flex--justify-start ez-flex--align-items-center ez-col--sd-9" }, this.levelPath ? h("span", { class: "level-path" }, this.levelPath + " /") : undefined, this.label), h("div", { class: "ez-flex ez-flex--justify-end ez-col--sd-3" }, this.canFix &&
+      h("ez-button", { class: "ez-padding-left--medium", mode: "icon", size: "small", iconName: this.fixed ? "un-pin" : "push-pin", "data-element-id": ElementIDUtils.getInternalIDInfo("toggleFixed_ezFormCard"), onClick: () => this.changeFix(), title: this.fixed ? "Desafixar" : "Fixar" }), this.canExpand &&
+      h("ez-button", { class: "ez-padding-left--medium", mode: "icon", size: "small", iconName: this.contracted ? "chevron-down" : "chevron-up", "data-element-id": ElementIDUtils.getInternalIDInfo("toggleExpand_ezFormCard"), onClick: () => this.changeContracted(), title: this.contracted ? "Expandir" : "Resumir" }))), h("slot", null), this.contracted
+      ?
+        h("snk-form-summary", { summary: this.getCardSummary() })
+      :
+        h("ez-form-view", { ref: ref => this._formView = ref, fields: this.fields, onEzContentReady: evt => this.bindFields(evt.detail) })));
+  }
+};
+SnkFormView.style = snkFormViewCss;
+
+export { SnkFormView as snk_form_view };

package/dist/esm/snk-form.entry.js

@@ -0,0 +1,83 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a7d3d3f1.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { S as SnkFormConfigManager } from './SnkFormConfigManager-1a42eb02.js';
+import './ConfigStorage-19a7260b.js';
+import './form-config-fetcher-9e167008.js';
+import './DataFetcher-e0fc5549.js';
+import './_commonjsHelpers-9943807e.js';
+import '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
+import './resource-fetcher-768d5556.js';
+import './filter-bar-config-fetcher-06e02851.js';
+import './filter-item-type.enum-5028ed3f.js';
+
+const snkFormCss = ".sc-snk-form-h{--snk-form__header--min-height:94px;display:block}.snk-form__form--hidden.sc-snk-form{display:none}";
+
+const SnkForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.exit = createEvent(this, "exit", 7);
+    this.actionClick = createEvent(this, "actionClick", 7);
+    this._dataUnit = undefined;
+    this._dataState = undefined;
+    this._showFormConfig = false;
+    this._configManager = undefined;
+    this.configName = undefined;
+    this.recordsValidator = undefined;
+    this.messagesBuilder = undefined;
+  }
+  /**
+   * Exibe a janela de configurações do formulário.
+   */
+  async showConfig() {
+    this._showFormConfig = true;
+  }
+  /**
+   * Fecha a janela de configurações do formulário.
+   */
+  async hideConfig() {
+    this._showFormConfig = false;
+  }
+  closeConfig() {
+    this.hideConfig();
+  }
+  dataunitReady() {
+    const dataInfo = { dataUnit: this._dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  componentWillLoad() {
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        this._dataState = this._snkDataUnit.dataState;
+        if (this._dataUnit) {
+          this.dataunitReady();
+        }
+        else {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    this._configManager = new SnkFormConfigManager(this.configName);
+    this._configManager.loadConfig();
+  }
+  render() {
+    if (!this._dataUnit || !this._dataState) {
+      return undefined;
+    }
+    return (h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this._configManager.getConfig(this._dataState.insertionMode, this._dataUnit), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
+      h("snk-form-config", { messagesBuilder: this.messagesBuilder, dataUnit: this._dataUnit, configManager: this._configManager, onConfigClose: () => this.closeConfig() })))));
+  }
+  get _element() { return getElement(this); }
+};
+SnkForm.style = snkFormCss;
+
+export { SnkForm as snk_form };