@sankhyalabs/ezui 1.1.77 → 1.1.80

package/dist/collection/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+export const buildComboBox = ({ name, label }, properties) => {
+  const prop = properties === null || properties === void 0 ? void 0 : properties.options;
+  let options;
+  if (typeof prop === "string") {
+    const parsed = JSON.parse(prop);
+    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+  }
+  else {
+    options = prop;
+  }
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-combo-box", { label: label, "data-field-name": name, key: name, options: options })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildDate = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-date-input", { label: label, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/FileInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildFile = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 padding--small" },
+    h("ez-upload", { label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.js

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+export const buildDecimal = ({ name, label }, properties) => {
+  const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
+  const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
+  return buildNumeric(name, label, precision, prettyPrecision);
+};
+export const buildInteger = ({ name, label }) => {
+  return buildNumeric(name, label, 0, 0);
+};
+function buildNumeric(fieldName, fieldLabel, precision, prettyPrecision) {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-number-input", { label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
+}

package/dist/collection/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildSearch = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-search", { label: label, optionLoader: (_argument) => { }, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/TextArea.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildTextArea = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 padding--small", key: name },
+    h("ez-text-area", { label: label, "data-field-name": name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/TextInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildTextInput = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-text-input", { label: label, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/store/form.slice.js

@@ -0,0 +1,38 @@
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+export function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
+  }
+}
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+export function loadMetadata(formMetadata) {
+  return {
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
+  };
+}
+export function changeTab(currentSheet) {
+  return {
+    type: FormActions.CHANGE_TAB,
+    payload: currentSheet
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+export function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+export function selectCurrentSheet(state) {
+  return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
+}
+///////////////////////////////      TYPES      ///////////////////////////////
+var FormActions;
+(function (FormActions) {
+  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
+  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
+})(FormActions || (FormActions = {}));

package/dist/collection/components/ez-form/structure/FormItem.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+import { buildField } from "../fieldbuilder/FieldBuilder";
+export const FormItem = ({ source }) => {
+  if ("items" in source) {
+    const fieldSet = source;
+    return h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
+  }
+  else {
+    return buildField(source);
+  }
+};

package/dist/collection/components/ez-form/structure/FormSheet.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+import { FormItem } from "./FormItem";
+export const FormSheet = ({ store, source }) => {
+  return (h("div", { class: "box__container" }, source.items.map(item => h(FormItem, { store: store, source: item }))));
+};

package/dist/collection/components/ez-form/structure/FormSheetMetadata.js

@@ -0,0 +1,86 @@
+export class FormMetadata {
+  constructor() {
+    this._sheets = new Map();
+    this._requiredFields = [];
+  }
+  getSheet(name) {
+    return this._sheets.get(name);
+  }
+  getAllSheets() {
+    return this._sheets;
+  }
+  addSheet(sheet) {
+    this._sheets.set(sheet.name, sheet);
+    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
+  }
+  getRequiredFields() {
+    return this._requiredFields;
+  }
+}
+export const buildFromDataUnit = (dataUnit) => {
+  var _a;
+  const unitMD = dataUnit.metadata;
+  const metadata = new FormMetadata();
+  if (unitMD) {
+    const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
+    metadata.addSheet({
+      label: unitMD.label,
+      name: unitMD.name,
+      items: visibleFields.map(descriptor => { return { descriptor }; }),
+      requiredFields: visibleFields
+        .filter(descriptor => descriptor.required)
+        .map(descriptor => descriptor.name)
+    });
+  }
+  return metadata;
+};
+export const buildFromConfig = (fields, dataUnit) => {
+  const sheets = new Map();
+  const requiredFields = [];
+  fields.forEach(config => {
+    if (config.visible !== false) {
+      const tab = config.tab || "Geral";
+      const descriptor = dataUnit.getField(config.name);
+      if (!sheets.has(tab)) {
+        sheets.set(tab, new Map());
+      }
+      let isRequired = false;
+      if (config.required === undefined) {
+        if (descriptor) {
+          isRequired = descriptor.required;
+        }
+      }
+      else {
+        isRequired = config.required;
+      }
+      if (isRequired) {
+        requiredFields.push(config.name);
+      }
+      const tabItens = sheets.get(tab);
+      const fieldMD = { config, descriptor };
+      const group = config.group;
+      if (group) {
+        const key = `group::${group}`;
+        if (!tabItens.has(key)) {
+          tabItens.set(key, { label: group, items: [fieldMD] });
+        }
+        else {
+          tabItens.get(key).items.push(fieldMD);
+        }
+      }
+      else {
+        tabItens.set(config.name, fieldMD);
+      }
+    }
+  });
+  const metadata = new FormMetadata();
+  sheets.forEach((value, key) => {
+    metadata.addSheet({
+      label: key,
+      name: key,
+      items: Array.from(value.values()),
+      requiredFields
+    });
+  });
+  return metadata;
+};

package/dist/collection/components/ez-number-input/ez-number-input.css

@@ -1,13 +1,4 @@
 :host {
   display: block;
   width: 100%;
-  /*@doc Define a cor de fundo do input.*/
-  --ez-number-input__input--background-color: var(--background--medium, #e0e0e0);
-  /*@doc Define a cor da borda do input.*/
-  --ez-number-input__input--border-color: var(--ez-number-input__input--background-color);
 }
-
-.text-input {
-  --ez-number-input__input--background-color: inherit;
-  --ez-number-input__input--border-color: inherit;
-}

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -1,22 +1,12 @@
 import { NumberUtils } from "@sankhyalabs/core";
-import { Component, h, Event, Prop, Watch, State, Host } from "@stencil/core";
+import { Component, h, Event, Prop, Watch, Element } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzNumberInput {
   constructor() {
     /**
      * Deixa o campo disponível ou não para uso.
      */
     this.enabled = true;
-    /**
-     * Configura o alinhamento do texto.
-     */
-    this.textleft = false;
-    /**
-     * Opção de configurar a transformação de string to number entre formatação pt-BR e en-US
-     * (formatação de ENTRADA e SAÍDA do componente: pt-BR="###.###,##" en-US="###,###.##"; Default: "pt-BR")
-     * Qualquer outro valor que não seja "en-US", adotará a formatação "pt-BR"
-     * Não é case sensitive
-     */
-    this.formatNumber = "PT-BR";
   }
   setLabel() {
     this._textInput.label = this.label;
@@ -29,22 +19,11 @@ export class EzNumberInput {
       this._textInput.value = this.getTextValue(this.value);
     }
   }
-  onPrecisionChanged(newPrecision) {
-    if (isNaN(newPrecision)) {
-      this.precision = 0;
-    }
-  }
-  onPrettyPrecisionChanged(newPrettyPrecision) {
-    if (isNaN(newPrettyPrecision)) {
-      this.prettyPrecision = 0;
-    }
-  }
   changeValue(newValue) {
     this.errorMessage = "";
     if (newValue && newValue !== this.value) {
       this.value = newValue;
-      this._textInput.value = this.getTextValue(newValue);
-      this.ezChange.emit();
+      this.ezChange.emit(this.value);
     }
   }
   parseNumber() {
@@ -63,45 +42,16 @@ export class EzNumberInput {
     }
   }
   getTextValue(value) {
-    const parsedNumber = value ? NumberUtils.stringToNumber(value) : null;
-    if (parsedNumber != null && isNaN(parsedNumber)) {
-      this.errorMessage = "O valor digitado não é um número válido";
-    }
-    else {
-      return this.formatNumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value.toString(), this.precision, this.prettyPrecision) : NumberUtils.changeFormat(NumberUtils.format(value.toString(), this.precision, this.prettyPrecision));
+    if (value) {
+      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
     }
-    return "";
+    return null;
   }
   componentDidLoad() {
-    if (!this.textleft) {
-      this._textInput.shadowRoot.querySelector('input').classList.add('text--right');
-    }
-    let rightItem;
-    let letfItem;
-    for (const key in this._hostElement.children) {
-      if (Object.prototype.hasOwnProperty.call(this._hostElement.children, key)) {
-        const element = this._hostElement.children[key];
-        if (element.getAttribute('slot') === 'rightIcon') {
-          rightItem = element;
-        }
-        else if (element.getAttribute('slot') === 'leftIcon') {
-          letfItem = element;
-        }
-      }
-    }
-    this._leftSlotItem = letfItem;
-    this._rightSlotItem = rightItem;
-    this.slotElement;
-  }
-  componentWillLoad() {
-    this.onPrecisionChanged(this.precision);
-    this.onPrettyPrecisionChanged(this.prettyPrecision);
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (h(Host, { ref: elem => this._hostElement = elem },
-      h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789-,.", enabled: this.enabled, errorMessage: this.errorMessage },
-        this._rightSlotItem ? h("slot", { name: "rightIcon", slot: "rightIcon" }) : undefined,
-        this._leftSlotItem ? h("slot", { name: "leftIcon", slot: "leftIcon" }) : undefined)));
+    return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -127,14 +77,14 @@ export class EzNumberInput {
         "text": "T\u00EDtulo do campo"
       },
       "attribute": "label",
-      "reflect": true
+      "reflect": false
     },
     "value": {
-      "type": "any",
+      "type": "number",
       "mutable": true,
       "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
@@ -161,7 +111,7 @@ export class EzNumberInput {
         "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para uso."
       },
       "attribute": "enabled",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "true"
     },
     "errorMessage": {
@@ -183,7 +133,7 @@ export class EzNumberInput {
     },
     "precision": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -196,11 +146,11 @@ export class EzNumberInput {
         "text": "Precis\u00E3o decimal, ou seja, quantas casas decimais podem ser exibidas. Caso a\nquantidade de casas decimais do valor seja maior que precision, haver\u00E1 arredondamento"
       },
       "attribute": "precision",
-      "reflect": true
+      "reflect": false
     },
     "prettyPrecision": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -213,49 +163,9 @@ export class EzNumberInput {
         "text": "Esse atributo determina qual \u00E9 o n\u00FAmero m\u00EDnimo de casas depois da v\u00EDrgula.\nExemplo: Digamos que a precision seja igual a 4, assim qualquer n\u00FAmero ser\u00E1 \nrepresentado com 4 casas decimais mesmo que iguais a zero: 1,0100.\nSe prettiprecision igual a 2, como n\u00E3o h\u00E1 necessidade de mais de duas casas decimais\no valor exibido ser\u00E1 1,01. Por outro lado, at\u00E9 a quarta casa n\u00E3o haver\u00E1 arredondamento\n(1,1234 = 1,1234) mas a partir da quinta casa sim (1,12345 = 1,1235)."
       },
       "attribute": "pretty-precision",
-      "reflect": true
-    },
-    "textleft": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Configura o alinhamento do texto."
-      },
-      "attribute": "textleft",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "formatNumber": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Op\u00E7\u00E3o de configurar a transforma\u00E7\u00E3o de string to number entre formata\u00E7\u00E3o pt-BR e en-US\n(formata\u00E7\u00E3o de ENTRADA e SA\u00CDDA do componente: pt-BR=\"###.###,##\" en-US=\"###,###.##\"; Default: \"pt-BR\")\nQualquer outro valor que n\u00E3o seja \"en-US\", adotar\u00E1 a formata\u00E7\u00E3o \"pt-BR\"\nN\u00E3o \u00E9 case sensitive"
-      },
-      "attribute": "format-number",
-      "reflect": true,
-      "defaultValue": "\"PT-BR\""
+      "reflect": false
     }
   }; }
-  static get states() { return {
-    "_leftSlotItem": {},
-    "_rightSlotItem": {}
-  }; }
   static get events() { return [{
       "method": "ezChange",
       "name": "ezChange",
@@ -267,11 +177,12 @@ export class EzNumberInput {
         "text": "Evento disparado quando o estado do componente \u00E9 alterado (onEzChange)."
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       }
     }]; }
+  static get elementRef() { return "_elem"; }
   static get watchers() { return [{
       "propName": "label",
       "methodName": "setLabel"
@@ -281,11 +192,5 @@ export class EzNumberInput {
     }, {
       "propName": "value",
       "methodName": "applyValueToInput"
-    }, {
-      "propName": "precision",
-      "methodName": "onPrecisionChanged"
-    }, {
-      "propName": "prettyPrecision",
-      "methodName": "onPrettyPrecisionChanged"
     }]; }
 }

package/dist/collection/components/ez-search/ez-search.js

@@ -1,4 +1,5 @@
-import { Component, Event, h, Prop, Watch } from "@stencil/core";
+import { Component, Event, h, Prop, Watch, Element } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzSearch {
   constructor() {
     /**
@@ -24,6 +25,9 @@ export class EzSearch {
     this.value = evt.detail;
     this.ezChange.emit(evt.detail);
   }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
+  }
   render() {
     return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue }));
   }
@@ -203,6 +207,7 @@ export class EzSearch {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "_elem"; }
   static get watchers() { return [{
       "propName": "value",
       "methodName": "updateValue"

package/dist/collection/components/test-du/test-du.js

@@ -1,39 +1,81 @@
 import { Component, h } from '@stencil/core';
-import { DataUnit, DataType } from '@sankhyalabs/core';
+import { DataUnit, DataType, UserInterface } from '@sankhyalabs/core';
 export class TestDu {
-  constructor() {
-    this._dataUnit = new DataUnit("duteste");
-  }
-  componentDidLoad() {
-    this._dataUnit.dataLoader = (_dataUnit, _sort, _filters) => {
-      return Promise.resolve([
-        { __record__id__: "registro1", CODPARC: 10, NOMEPARC: "Parceiro 10" },
-        { __record__id__: "registro2", CODPARC: 20, NOMEPARC: "Parceiro 20" }
-      ]);
-    };
-    this._dataUnit.metadata = {
-      name: "Parceiro",
+  componentWillLoad() {
+    this.dataUnit = new DataUnit("testes_com_formulario");
+    this.dataUnit.metadata = {
+      name: "dd://br.com.sankhya.fin.cad.movimentacaoFinanceira/Financeiro",
       label: "Parceiro",
       fields: [
         {
           name: "CODPARC",
-          label: "Cód. Parceiro",
-          dataType: DataType.NUMBER
+          label: "Parceiro",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.SEARCH,
+          required: true,
+          properties: {}
         },
         {
-          name: "NOMEPARC",
-          label: "Nome Parceiro",
-          dataType: DataType.TEXT
+          name: "RECDESP",
+          label: "Receita/Despesa",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          required: true,
+          properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
+        },
+        {
+          name: "P",
+          label: "pera",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          properties: { options: `{"M": "Madura", "V": "Verde", "P": "Passada"}` }
+        },
+        {
+          name: "ME",
+          label: "ME",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.DECIMALNUMBER,
+          properties: { precision: 4, prettyPrecision: 1 }
         }
       ]
     };
+    this.formConfig = [
+      { name: "CODPARC", label: "Parceiro" },
+      { name: "NOMEPARC", label: "Mamão" },
+      { name: "P", label: "Pêra", group: "Grupo 1" },
+      { name: "ME", label: "Melancia", tab: "aba 1", group: "Grupo 2" },
+      { name: "L", label: "Laranja", tab: "aba 1", group: "Grupo 1" },
+      { name: "LI", label: "Limão", tab: "aba 1", group: "Grupo 2" }
+    ];
+    this.dataUnit.records = [
+      {
+        __record__id__: "1321321321321321",
+        CODPARC: 10,
+        NOMEPARC: "Parceiro 10",
+        P: "M",
+        L: "Bagaço",
+        LI: "Azedo"
+      }
+    ];
   }
   render() {
-    return (h("section", { class: "padding--large" },
-      h("div", { class: "row margin-bottom--large" },
-        h("h1", { class: "title title--primary" }, "Formul\u00E1rios")),
-      h("div", { class: "col col--sd-12", style: { height: "600px" } },
-        h("ez-grid", { dataUnit: this._dataUnit, "server-url": "https://www.ag-grid.com/example-assets/row-data.json", "multiple-selection": true, "page-size": "100" }))));
+    //return this.conteudoEstatico();
+    //return this.somenteDataUnit();
+    return this.configurado();
+  }
+  conteudoEstatico() {
+    return (h("div", null,
+      h("button", { onClick: () => this.form.validate() }, "Validate"),
+      h("ez-form", { ref: ref => this.form = ref },
+        h("div", null,
+          h("ez-text-input", { label: "Nome (Label est\u00E1tico)", "data-field-name": "NOMEPARC", "data-required": "true" }),
+          h("ez-text-input", { label: "C\u00F3d parc (Label est\u00E1tico)", "data-field-name": "CODPARC", "data-required": "true" })))));
+  }
+  somenteDataUnit() {
+    return (h("ez-form", { dataUnit: this.dataUnit }));
+  }
+  configurado() {
+    return (h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig, ref: ref => this.form = ref }));
   }
   static get is() { return "test-du"; }
   static get originalStyleUrls() { return {

package/dist/collection/utils/CSSVarsUtils.js

@@ -1,14 +1,14 @@
 export default class CSSVarsUtils {
-  static applyVarsTextInput(host, textInput) {
-    if (textInput) {
-      CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--background-color');
-      CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--border-color');
+  static applyVarsTextInput(host, child) {
+    if (child) {
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--background-color');
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--border-color');
     }
   }
-  static applyIfExists(host, textInput, varName) {
+  static applyIfExists(host, element, varName) {
     const prop = getComputedStyle(host).getPropertyValue(varName);
     if (prop) {
-      textInput.style.setProperty(varName, prop);
+      element.style.setProperty(varName, prop);
     }
   }
 }

package/dist/custom-elements/index.d.ts

@@ -158,24 +158,12 @@ export const EzUpload: {
   new (): EzUpload;
 };
 
-interface FormMetadata extends Components.FormMetadata, HTMLElement {}
-export const FormMetadata: {
-  prototype: FormMetadata;
-  new (): FormMetadata;
-};
-
 interface GridConfig extends Components.GridConfig, HTMLElement {}
 export const GridConfig: {
   prototype: GridConfig;
   new (): GridConfig;
 };
 
-interface PlaceHolder extends Components.PlaceHolder, HTMLElement {}
-export const PlaceHolder: {
-  prototype: PlaceHolder;
-  new (): PlaceHolder;
-};
-
 interface SelectBox extends Components.SelectBox, HTMLElement {}
 export const SelectBox: {
   prototype: SelectBox;