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

package/dist/components/snk-form-summary.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkFormSummary extends Components.SnkFormSummary, HTMLElement {}
+export const SnkFormSummary: {
+  prototype: SnkFormSummary;
+  new (): SnkFormSummary;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-form-summary.js

@@ -0,0 +1,6 @@
+import { S as SnkFormSummary$1, d as defineCustomElement$1 } from './snk-form-summary2.js';
+
+const SnkFormSummary = SnkFormSummary$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkFormSummary, defineCustomElement };

package/dist/components/snk-form-summary2.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return snkFormSummaryCss; }
+}, [2, "snk-form-summary", {
+    "fixed": [1540],
+    "contracted": [1540],
+    "summary": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-form-summary"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-form-summary":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFormSummary);
+      }
+      break;
+  } });
+}
+
+export { SnkFormSummary as S, defineCustomElement as d };

package/dist/components/snk-form-view.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkFormView extends Components.SnkFormView, HTMLElement {}
+export const SnkFormView: {
+  prototype: SnkFormView;
+  new (): SnkFormView;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-form-view.js

@@ -0,0 +1,6 @@
+import { S as SnkFormView$1, d as defineCustomElement$1 } from './snk-form-view2.js';
+
+const SnkFormView = SnkFormView$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkFormView, defineCustomElement };

package/dist/components/snk-form-view2.js

@@ -0,0 +1,129 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { DataBinder } from '@sankhyalabs/ezui/dist/collection/utils/form';
+import { d as defineCustomElement$1 } from './snk-form-summary2.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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) })));
+  }
+  static get style() { return snkFormViewCss; }
+}, [6, "snk-form-view", {
+    "levelPath": [1, "level-path"],
+    "label": [1],
+    "name": [1],
+    "fields": [16],
+    "formMetadata": [8, "form-metadata"],
+    "dataUnit": [16],
+    "contracted": [4],
+    "fixed": [1540],
+    "summaryFields": [16],
+    "canExpand": [4, "can-expand"],
+    "canFix": [4, "can-fix"],
+    "recordsValidator": [16],
+    "showUp": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-form-view", "snk-form-summary"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-form-view":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFormView);
+      }
+      break;
+    case "snk-form-summary":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SnkFormView as S, defineCustomElement as d };

package/dist/components/snk-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkForm extends Components.SnkForm, HTMLElement {}
+export const SnkForm: {
+  prototype: SnkForm;
+  new (): SnkForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-form.js

@@ -0,0 +1,126 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { S as SnkFormConfigManager } from './SnkFormConfigManager.js';
+import { d as defineCustomElement$5 } from './snk-config-options2.js';
+import { d as defineCustomElement$4 } from './snk-field-config2.js';
+import { d as defineCustomElement$3 } from './snk-form-config2.js';
+import { d as defineCustomElement$2 } from './snk-tab-config2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return snkFormCss; }
+}, [2, "snk-form", {
+    "configName": [1, "config-name"],
+    "recordsValidator": [16],
+    "messagesBuilder": [1040],
+    "_dataUnit": [32],
+    "_dataState": [32],
+    "_showFormConfig": [32],
+    "_configManager": [32],
+    "showConfig": [64],
+    "hideConfig": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-form", "snk-config-options", "snk-field-config", "snk-form-config", "snk-tab-config"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkForm$1);
+      }
+      break;
+    case "snk-config-options":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "snk-field-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "snk-form-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "snk-tab-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SnkForm = SnkForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkForm, defineCustomElement };

package/dist/components/snk-grid-config.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkGridConfig extends Components.SnkGridConfig, HTMLElement {}
+export const SnkGridConfig: {
+  prototype: SnkGridConfig;
+  new (): SnkGridConfig;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-grid-config.js

@@ -0,0 +1,6 @@
+import { S as SnkGridConfig$1, d as defineCustomElement$1 } from './snk-grid-config2.js';
+
+const SnkGridConfig = SnkGridConfig$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkGridConfig, defineCustomElement };