@sankhyalabs/sankhyablocks 1.3.30 → 1.3.31-beta.3

package/dist/components/snk-form.js

@@ -0,0 +1,121 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { d as defineCustomElement$2 } from './snk-taskbar2.js';
+
+const snkFormCss = ".sc-snk-form-h{display:block}";
+
+const SnkForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.exit = createEvent(this, "exit", 7);
+    this.actionClick = createEvent(this, "actionClick", 7);
+  }
+  getFormConfig() {
+    return (this._dataState && this._dataState.insertionMode ? this._insertionFormConfig : this._editionFormConfig);
+  }
+  getInsertionHiddenFields(formConfig) {
+    const hiddenFields = [];
+    formConfig === null || formConfig === void 0 ? void 0 : formConfig.forEach(cfg => {
+      const def = this._dataUnit.getField(cfg.name);
+      if (def === null || def === void 0 ? void 0 : def.readOnly) {
+        hiddenFields.push(cfg.name);
+      }
+    });
+    return hiddenFields;
+  }
+  exitForm() {
+    if (this._dataUnit.isDirty()) {
+      this._dataUnit.cancelEdition({ after: () => this.exit.emit() });
+    }
+    else {
+      this.exit.emit();
+    }
+  }
+  getDisabledButtons() {
+    const disabled = [];
+    if (!this._dataState.hasPrevious) {
+      disabled.push("PREVIOUS");
+    }
+    if (!this._dataState.hasNext) {
+      disabled.push("NEXT");
+    }
+    return disabled;
+  }
+  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._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+  componentWillRender() {
+    if (this._dataUnit && !this._configLoaded) {
+      const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      if (snkApplication) {
+        snkApplication.loadFormConfig(this.configName).then(cfg => {
+          this._configLoaded = true;
+          this._editionFormConfig = cfg;
+          this._insertionFormConfig = cfg.filter(fieldCfg => {
+            const def = this._dataUnit.getField(fieldCfg.name);
+            if (def === null || def === void 0 ? void 0 : def.readOnly) {
+              return false;
+            }
+            return true;
+          });
+        });
+      }
+    }
+  }
+  render() {
+    if (!this._configLoaded || !this._dataUnit || !this._dataState) {
+      return undefined;
+    }
+    return (h("section", { class: "ez-padding--large" }, h("div", { class: "ez-row ez-padding-bottom--medium" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.formTitle)), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", buttons: this._dataState.isDirty ? "CANCEL,SAVE" : "PREVIOUS,NEXT,DIVIDER,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,GRID_MODE,INSERT", primaryButton: this._dataState.isDirty ? "SAVE" : "INSERT", disabledButtons: this.getDisabledButtons(), actionsList: this.actionsList, dataUnit: this._dataUnit }))), h("div", { class: "ez-padding--small" }), 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, dataUnit: this._dataUnit, config: this.getFormConfig() }))))));
+  }
+  get _element() { return this; }
+  static get style() { return snkFormCss; }
+}, [2, "snk-form", {
+    "formTitle": [1, "form-title"],
+    "configName": [1, "config-name"],
+    "actionsList": [16],
+    "_dataUnit": [32],
+    "_configLoaded": [32],
+    "_dataState": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-form", "snk-taskbar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkForm$1);
+      }
+      break;
+    case "snk-taskbar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SnkForm = SnkForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkForm, defineCustomElement };

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

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

package/dist/components/snk-grid.js

@@ -0,0 +1,88 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
+
+const snkGridCss = ".sc-snk-grid-h{display:flex;height:100%;width:100%}";
+
+const SnkGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.actionClick = createEvent(this, "actionClick", 7);
+  }
+  getHeaderButtons() {
+    return this._dataState && this._dataState.selectedRecords.length > 0 ? "UPDATE,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,REFRESH" : "REFRESH";
+  }
+  actionClickHandler(evt) {
+    if (evt.detail === TaskbarElement.CONFIG_GRID && this._grid) {
+      this._grid.openGridConfig();
+    }
+  }
+  componentWillLoad() {
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        if (!this._dataUnit) {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+  componentWillRender() {
+    if (this._dataUnit && !this._configLoaded) {
+      const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      if (snkApplication) {
+        snkApplication.loadGridConfig(this.configName).then(cfg => {
+          this._gridConfig = cfg;
+          this._configLoaded = true;
+        });
+      }
+    }
+  }
+  render() {
+    if (!this._configLoaded || !this._dataUnit) {
+      return undefined;
+    }
+    return (h("div", { class: "ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "ez-row ez-padding-bottom--medium ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-col--sd-9 ez-col--tb-9 ez-align--bottom" }, h("slot", null)), h("div", { class: "ez-col ez-col--sd-3 ez-col--tb-3 ez-align--right" }, h("snk-taskbar", { onActionClick: evt => this.actionClickHandler(evt), key: "topTaskbar", dataUnit: this._dataUnit, buttons: "FORM_MODE,CONFIG_GRID,INSERT", primaryButton: "INSERT" }))), h("ez-grid", { ref: ref => this._grid = ref, dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig }, h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this.getHeaderButtons(), slot: "leftButtons", actionsList: this.actionsList }))));
+  }
+  get _element() { return this; }
+  static get style() { return snkGridCss; }
+}, [6, "snk-grid", {
+    "configName": [1, "config-name"],
+    "actionsList": [16],
+    "_dataUnit": [32],
+    "_configLoaded": [32],
+    "_dataState": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-grid", "snk-taskbar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkGrid$1);
+      }
+      break;
+    case "snk-taskbar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SnkGrid = SnkGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkGrid, defineCustomElement };

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

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

package/dist/components/snk-taskbar.js

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

package/dist/components/snk-taskbar2.js

@@ -0,0 +1,239 @@
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { ApplicationContext } from '@sankhyalabs/core';
+
+const SnkPopupButton = ({ className, title, source, opened, setOpened, actionClick }) => {
+  return (h("div", { class: "ez-flex " + className },
+    h("ez-button", { id: "moreOptionsButton", title: title, mode: "icon", iconName: "dots-vertical", size: "small", onClick: () => setOpened(true) }),
+    h("ez-popover", { opened: opened, autoClose: true, innerElement: ["moreOptionsButton", "moreOptionsDiv"], onEzVisibilityChange: (event) => setOpened(event.detail) },
+      h("div", { id: "moreOptionsDiv", class: "ez-padding--small" }, source.map((option, index) => h("ez-button", { className: "btn-options", size: "small", label: option.label, key: index, onClick: () => actionClick(option) }))))));
+};
+
+var TaskbarElement;
+(function (TaskbarElement) {
+  TaskbarElement["PREVIOUS"] = "PREVIOUS";
+  TaskbarElement["NEXT"] = "NEXT";
+  TaskbarElement["REFRESH"] = "REFRESH";
+  TaskbarElement["UPDATE"] = "UPDATE";
+  TaskbarElement["CLONE"] = "CLONE";
+  TaskbarElement["REMOVE"] = "REMOVE";
+  TaskbarElement["INSERT"] = "INSERT";
+  TaskbarElement["CANCEL"] = "CANCEL";
+  TaskbarElement["SAVE"] = "SAVE";
+  TaskbarElement["GRID_MODE"] = "GRID_MODE";
+  TaskbarElement["FORM_MODE"] = "FORM_MODE";
+  TaskbarElement["CONFIG_GRID"] = "CONFIG_GRID";
+  TaskbarElement["MORE_OPTIONS"] = "MORE_OPTIONS";
+  TaskbarElement["DIVIDER"] = "DIVIDER";
+})(TaskbarElement || (TaskbarElement = {}));
+var AuthorizationElements;
+(function (AuthorizationElements) {
+  AuthorizationElements["UPDATE"] = "UPDATE";
+  AuthorizationElements["CLONE"] = "CLONE";
+  AuthorizationElements["REMOVE"] = "REMOVE";
+  AuthorizationElements["INSERT"] = "INSERT";
+  AuthorizationElements["CONFIG_GRID"] = "CONFIG_GRID";
+})(AuthorizationElements || (AuthorizationElements = {}));
+const buildElem = (element, className, getTitle, action, isEnabled) => {
+  switch (element) {
+    case TaskbarElement.PREVIOUS:
+      return iconButton("chevron-left", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.NEXT:
+      return iconButton("chevron-right", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.REFRESH:
+      return iconButton("sync", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.UPDATE:
+      return iconButton("edit", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CLONE:
+      return iconButton("copy", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.REMOVE:
+      return iconButton("delete", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.INSERT:
+      return iconTextButton("plus", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CANCEL:
+      return h("ez-button", { label: getTitle(element), size: "small", enabled: isEnabled(element), onClick: () => action(element) });
+    case TaskbarElement.SAVE:
+      return iconTextButton("save", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.GRID_MODE:
+      return iconButton("table", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.FORM_MODE:
+      return iconButton("list", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CONFIG_GRID:
+      return iconButton("settings-inverted", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.DIVIDER:
+      return h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-horizontal--medium" });
+  }
+};
+function iconButton(iconName, element, className, getTitle, action, isEnabled) {
+  return h("ez-button", { key: iconName, title: getTitle(element), mode: "icon", size: "small", class: className, iconName: iconName, enabled: isEnabled(element), onClick: () => action(element) });
+}
+function iconTextButton(iconName, element, className, getTitle, action, isEnabled) {
+  return h("ez-button", { key: iconName, title: getTitle(element), label: getTitle(element), size: "small", class: className, enabled: isEnabled(element), onClick: () => action(element) },
+    h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
+}
+
+const snkTaskbarCss = ".sc-snk-taskbar-h{display:flex}";
+
+const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.actionClick = createEvent(this, "actionClick", 7);
+    this._moreOptionsOpened = false;
+  }
+  observeButtons() {
+    this._definitions = undefined;
+  }
+  // Internal methods
+  elementsFromString(strButtons) {
+    const elements = [];
+    if (strButtons) {
+      strButtons.split(",").forEach(buttonName => {
+        buttonName = buttonName.trim();
+        if (this.isAllowed(buttonName)) {
+          elements.push(buttonName.trim());
+        }
+      });
+    }
+    return elements;
+  }
+  isAllowed(buttonName) {
+    if (AuthorizationElements[buttonName]) {
+      return this._permissions ? this._permissions.isSup || this._permissions[buttonName] : false;
+    }
+    return true;
+  }
+  getTitle(element) {
+    const pt_br = {
+      [TaskbarElement.UPDATE]: "Editar",
+      [TaskbarElement.PREVIOUS]: "Anterior",
+      [TaskbarElement.NEXT]: "Próximo",
+      [TaskbarElement.REFRESH]: "Atualizar",
+      [TaskbarElement.CLONE]: "Duplicar",
+      [TaskbarElement.REMOVE]: "Excluir",
+      [TaskbarElement.MORE_OPTIONS]: "Mais Opções",
+      [TaskbarElement.INSERT]: "Cadastrar",
+      [TaskbarElement.CANCEL]: "Cancelar",
+      [TaskbarElement.SAVE]: "Salvar",
+      [TaskbarElement.GRID_MODE]: "Modo Grade",
+      [TaskbarElement.CONFIG_GRID]: "Configuração da grade",
+      [TaskbarElement.FORM_MODE]: "Modo Formulário"
+    };
+    return pt_br[element] ? pt_br[element] : "";
+  }
+  elementClick(elem) {
+    if (this.dataUnit) {
+      switch (elem) {
+        case TaskbarElement.PREVIOUS:
+          this.dataUnit.previousRecord();
+          break;
+        case TaskbarElement.NEXT:
+          this.dataUnit.nextRecord();
+          break;
+        case TaskbarElement.REFRESH:
+          this.dataUnit.loadData();
+          break;
+        case TaskbarElement.CLONE:
+          this.dataUnit.copySelected();
+          break;
+        case TaskbarElement.REMOVE:
+          this.dataUnit.removeSelectedRecords();
+          break;
+        case TaskbarElement.INSERT:
+          this.dataUnit.addRecord();
+          break;
+        case TaskbarElement.CANCEL:
+          this.dataUnit.cancelEdition();
+          break;
+        case TaskbarElement.SAVE:
+          this.dataUnit.saveData();
+          break;
+      }
+    }
+    this.actionClick.emit(elem);
+  }
+  actionClickHandler(act) {
+    this._moreOptionsOpened = false;
+    this.actionClick.emit(act.key);
+  }
+  isEnabled(elem) {
+    return !(this.disabledButtons && this.disabledButtons.includes(elem));
+  }
+  getElement(index, def) {
+    let element;
+    let className = def === this.primaryButton ? "ez-button--primary " : "";
+    if (index > 1) {
+      className += "ez-padding-left--medium";
+    }
+    if (def === TaskbarElement.MORE_OPTIONS) {
+      element = this.actionsList ? h(SnkPopupButton, { className: className, title: this.getTitle(def), source: this.actionsList, opened: this._moreOptionsOpened, setOpened: opened => this._moreOptionsOpened = opened, actionClick: act => this.actionClickHandler(act) }) : undefined;
+    }
+    else {
+      element = buildElem(def, className, elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem));
+    }
+    return element;
+  }
+  // Lifecycle
+  componentWillRender() {
+    if (this._permissions === undefined) {
+      const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      if (snkApplication) {
+        snkApplication.getAllAccess().then(access => this._permissions = access);
+      }
+      else {
+        this._permissions = {};
+      }
+    }
+    else {
+      if (this._definitions == undefined) {
+        this._definitions = this.elementsFromString(this.buttons);
+      }
+    }
+  }
+  render() {
+    if (this._definitions === undefined) {
+      return undefined;
+    }
+    let index = 0;
+    return (h(Host, null, this._definitions.map((btn) => {
+      if (btn === TaskbarElement.DIVIDER) {
+        index = 0;
+      }
+      else {
+        index++;
+      }
+      if (TaskbarElement[btn]) {
+        return this.getElement(index, TaskbarElement[btn]);
+      }
+      else {
+        return h("slot", { name: btn });
+      }
+    })));
+  }
+  static get watchers() { return {
+    "buttons": ["observeButtons"]
+  }; }
+  static get style() { return snkTaskbarCss; }
+}, [6, "snk-taskbar", {
+    "buttons": [1],
+    "actionsList": [16],
+    "primaryButton": [1, "primary-button"],
+    "disabledButtons": [16],
+    "dataUnit": [16],
+    "_moreOptionsOpened": [32],
+    "_permissions": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-taskbar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-taskbar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkTaskbar);
+      }
+      break;
+  } });
+}
+
+export { SnkTaskbar as S, TaskbarElement as T, defineCustomElement as d };