legalesign-document-viewer 0.4.9 → 0.5.0

package/dist/components/ls-editor-field.js

@@ -1,4 +1,4 @@
-import { L as LsEditorField$1, d as defineCustomElement$1 } from './p-CB6w78IO.js';
+import { L as LsEditorField$1, d as defineCustomElement$1 } from './p-DsR1ud4V.js';
 
 const LsEditorField = LsEditorField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-editor-table.js

@@ -1,4 +1,4 @@
-import { L as LsEditorTable$1, d as defineCustomElement$1 } from './p-CB2IouRT.js';
+import { L as LsEditorTable$1, d as defineCustomElement$1 } from './p-Dz_jxFKX.js';
 
 const LsEditorTable = LsEditorTable$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-feature-column.js

@@ -1,4 +1,4 @@
-import { L as LsFeatureColoumn, d as defineCustomElement$1 } from './p-C0vy7fEN.js';
+import { L as LsFeatureColoumn, d as defineCustomElement$1 } from './p-D0cZaxkO.js';
 
 const LsFeatureColumn = LsFeatureColoumn;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-alignment.js

@@ -1,4 +1,4 @@
-import { L as LsFieldAlignment$1, d as defineCustomElement$1 } from './p-SymuFFwR.js';
+import { L as LsFieldAlignment$1, d as defineCustomElement$1 } from './p-YcP4tU0u.js';
 
 const LsFieldAlignment = LsFieldAlignment$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-content.js

@@ -1,4 +1,4 @@
-import { L as LsFieldContent$1, d as defineCustomElement$1 } from './p-hgs41zT_.js';
+import { L as LsFieldContent$1, d as defineCustomElement$1 } from './p-aA8RuwY_.js';
 
 const LsFieldContent = LsFieldContent$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-dimensions.js

@@ -1,4 +1,4 @@
-import { L as LsFieldDimensions$1, d as defineCustomElement$1 } from './p-BHTy08Q0.js';
+import { L as LsFieldDimensions$1, d as defineCustomElement$1 } from './p-DYQekJvr.js';
 
 const LsFieldDimensions = LsFieldDimensions$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-distribute.js

@@ -1,4 +1,4 @@
-import { L as LsFieldDistribute$1, d as defineCustomElement$1 } from './p-CqvHgqQi.js';
+import { L as LsFieldDistribute$1, d as defineCustomElement$1 } from './p-BxPfWmRj.js';
 
 const LsFieldDistribute = LsFieldDistribute$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-footer.js

@@ -1,4 +1,4 @@
-import { L as LsFieldFooter$1, d as defineCustomElement$1 } from './p-CYeSt5Fo.js';
+import { L as LsFieldFooter$1, d as defineCustomElement$1 } from './p-CGQK3l8F.js';
 
 const LsFieldFooter = LsFieldFooter$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-format.js

@@ -1,4 +1,4 @@
-import { L as LsFieldFormat$1, d as defineCustomElement$1 } from './p-Ce_FwQKY.js';
+import { L as LsFieldFormat$1, d as defineCustomElement$1 } from './p-Co-Giqfy.js';
 
 const LsFieldFormat = LsFieldFormat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-placement.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPlacement$1, d as defineCustomElement$1 } from './p-D5Lt75HV.js';
+import { L as LsFieldPlacement$1, d as defineCustomElement$1 } from './p-KMRQyALr.js';
 
 const LsFieldPlacement = LsFieldPlacement$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-advanced.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesAdvanced$1, d as defineCustomElement$1 } from './p-4zazHXkZ.js';
+import { L as LsFieldPropertiesAdvanced$1, d as defineCustomElement$1 } from './p-C9CUft6J.js';
 
 const LsFieldPropertiesAdvanced = LsFieldPropertiesAdvanced$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-autosign.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesAutosign$1, d as defineCustomElement$1 } from './p-mtgdqmoW.js';
+import { L as LsFieldPropertiesAutosign$1, d as defineCustomElement$1 } from './p-iIvOyhST.js';
 
 const LsFieldPropertiesAutosign = LsFieldPropertiesAutosign$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-container.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesContainer$1, d as defineCustomElement$1 } from './p-BSoZFh0I.js';
+import { L as LsFieldPropertiesContainer$1, d as defineCustomElement$1 } from './p-BQZBAjo_.js';
 
 const LsFieldPropertiesContainer = LsFieldPropertiesContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-date.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesDate$1, d as defineCustomElement$1 } from './p-Ca9OGLvH.js';
+import { L as LsFieldPropertiesDate$1, d as defineCustomElement$1 } from './p-C6TaBByt.js';
 
 const LsFieldPropertiesDate = LsFieldPropertiesDate$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-dropdown.js

@@ -1,33 +1,35 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BnGihP6t.js';
-import { d as defineCustomElement$e } from './p-CB6w78IO.js';
-import { d as defineCustomElement$d } from './p-hgs41zT_.js';
-import { d as defineCustomElement$c } from './p-BHTy08Q0.js';
-import { d as defineCustomElement$b } from './p-CYeSt5Fo.js';
-import { d as defineCustomElement$a } from './p-D5Lt75HV.js';
-import { d as defineCustomElement$9 } from './p-4zazHXkZ.js';
-import { d as defineCustomElement$8 } from './p-BSoZFh0I.js';
-import { d as defineCustomElement$7 } from './p-DpEeDtkU.js';
-import { d as defineCustomElement$6 } from './p-95nSEls8.js';
-import { d as defineCustomElement$5 } from './p-Myru1I0U.js';
-import { d as defineCustomElement$4 } from './p-C3Qs4SL0.js';
-import { d as defineCustomElement$3 } from './p-CMrBTV-g.js';
-import { d as defineCustomElement$2 } from './p-CwVY532N.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$e } from './p-DsR1ud4V.js';
+import { d as defineCustomElement$d } from './p-aA8RuwY_.js';
+import { d as defineCustomElement$c } from './p-DYQekJvr.js';
+import { d as defineCustomElement$b } from './p-CGQK3l8F.js';
+import { d as defineCustomElement$a } from './p-KMRQyALr.js';
+import { d as defineCustomElement$9 } from './p-C9CUft6J.js';
+import { d as defineCustomElement$8 } from './p-BQZBAjo_.js';
+import { d as defineCustomElement$7 } from './p-Bi1Fu2dm.js';
+import { d as defineCustomElement$6 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$5 } from './p-Du60SSaA.js';
+import { d as defineCustomElement$4 } from './p-CJSY3-Q3.js';
+import { d as defineCustomElement$3 } from './p-DKaEsQyk.js';
+import { d as defineCustomElement$2 } from './p-DoQc-O0l.js';
 
-const lsFieldPropertiesDropdownCss = ":host{display:block}";
+const lsFieldPropertiesDropdownCss = () => `:host{display:block}`;
 
 const LsFieldPropertiesDropdown$1 = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesDropdown extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     dataItem;
     render() {
         return (h(Host, { key: '6ab36b10433f2a9c0cd5e39f3b78f3471f795c15' }, h("ls-field-properties-container", { key: '4cfe8d66c414f0684282d5379b7950cef1ea5773', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '673962971e8e8e219c02d13e9e61d2cdcad83887', class: 'field-set', slot: "content" }, h("ls-field-content", { key: 'ae5e0250d816457bfacf2a6d9d2b711feeb05dd8', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '07f776cee20cc1f8929db189cd84f68b5b349501', dataItem: this.dataItem })), h("div", { key: 'a8e1665f9d3f88fa1caa881ebb71d97bc17ba4fc', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: 'a8f7df3d69a5f6d8fd4ebe7293b948bf2855b73e', dataItem: this.dataItem })), h("div", { key: 'e8a36fe97a69841dc48c6e99d6517fad087ef05d', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '0872ceab1ea0af0b8e8c6e7b7a01e453c264b4da', dataItem: this.dataItem }))), h("ls-field-footer", { key: 'e4609c33b929269673d302b5d7e53c0a1820d60e', dataItem: this.dataItem })));
     }
-    static get style() { return lsFieldPropertiesDropdownCss; }
-}, [257, "ls-field-properties-dropdown", {
-        "dataItem": [16, "data-item"]
+    static get style() { return lsFieldPropertiesDropdownCss(); }
+}, [769, "ls-field-properties-dropdown", {
+        "dataItem": [16]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -36,72 +38,72 @@ function defineCustomElement$1() {
     const components = ["ls-field-properties-dropdown", "ls-editor-field", "ls-field-content", "ls-field-dimensions", "ls-field-footer", "ls-field-placement", "ls-field-properties-advanced", "ls-field-properties-container", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-props-section", "ls-toggle", "ls-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-field-properties-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsFieldPropertiesDropdown$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldPropertiesDropdown$1);
             }
             break;
         case "ls-editor-field":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$e();
             }
             break;
         case "ls-field-content":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$d();
             }
             break;
         case "ls-field-dimensions":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$c();
             }
             break;
         case "ls-field-footer":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$b();
             }
             break;
         case "ls-field-placement":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$a();
             }
             break;
         case "ls-field-properties-advanced":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$9();
             }
             break;
         case "ls-field-properties-container":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$8();
             }
             break;
         case "ls-field-type-display":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$7();
             }
             break;
         case "ls-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$6();
             }
             break;
         case "ls-input-wrapper":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }
             break;
         case "ls-props-section":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "ls-toggle":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "ls-tooltip":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/components/ls-field-properties-dropdown.js.map

@@ -1 +1 @@
-{"file":"ls-field-properties-dropdown.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,4BAA4B,GAAG,sBAAsB;;MCQ9CA,2BAAyB,iBAAAC,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;;;;;;AAC5B,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LsFieldPropertiesDropdown","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-dropdown/ls-field-properties-dropdown.css?tag=ls-field-properties-dropdown&encapsulation=shadow","src/components/ls-field-properties-dropdown/ls-field-properties-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-dropdown',\n  styleUrl: 'ls-field-properties-dropdown.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesDropdown {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ls-field-properties-dropdown.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,4BAA4B,GAAG,MAAM,CAAC,oBAAoB,CAAC;;MCQpDA,2BAAyB,iBAAAC,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC5B,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LsFieldPropertiesDropdown","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-dropdown/ls-field-properties-dropdown.css?tag=ls-field-properties-dropdown&encapsulation=shadow","src/components/ls-field-properties-dropdown/ls-field-properties-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-dropdown',\n  styleUrl: 'ls-field-properties-dropdown.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesDropdown {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ls-field-properties-email.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesEmail$1, d as defineCustomElement$1 } from './p-DjunXuAM.js';
+import { L as LsFieldPropertiesEmail$1, d as defineCustomElement$1 } from './p-Czz58vGf.js';
 
 const LsFieldPropertiesEmail = LsFieldPropertiesEmail$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-file.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesFile$1, d as defineCustomElement$1 } from './p-B8NAATla.js';
+import { L as LsFieldPropertiesFile$1, d as defineCustomElement$1 } from './p-DMZN9Rei.js';
 
 const LsFieldPropertiesFile = LsFieldPropertiesFile$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-general.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesGeneral$1, d as defineCustomElement$1 } from './p-BdTy5xDV.js';
+import { L as LsFieldPropertiesGeneral$1, d as defineCustomElement$1 } from './p-HpepQ3-E.js';
 
 const LsFieldPropertiesGeneral = LsFieldPropertiesGeneral$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-image.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesImage$1, d as defineCustomElement$1 } from './p-DhQKM6mo.js';
+import { L as LsFieldPropertiesImage$1, d as defineCustomElement$1 } from './p-C_uR3x8J.js';
 
 const LsFieldPropertiesImage = LsFieldPropertiesImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-multiple.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesMultiple$1, d as defineCustomElement$1 } from './p-D0oqtZ7v.js';
+import { L as LsFieldPropertiesMultiple$1, d as defineCustomElement$1 } from './p-DskHTNiF.js';
 
 const LsFieldPropertiesMultiple = LsFieldPropertiesMultiple$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-number.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesNumber$1, d as defineCustomElement$1 } from './p-BArB45ep.js';
+import { L as LsFieldPropertiesNumber$1, d as defineCustomElement$1 } from './p-CDgBo5Zz.js';
 
 const LsFieldPropertiesNumber = LsFieldPropertiesNumber$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-signature.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesSignature$1, d as defineCustomElement$1 } from './p-CnLhdSVD.js';
+import { L as LsFieldPropertiesSignature$1, d as defineCustomElement$1 } from './p-w39shV-b.js';
 
 const LsFieldPropertiesSignature = LsFieldPropertiesSignature$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-text.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesText$1, d as defineCustomElement$1 } from './p-DXAEPHmo.js';
+import { L as LsFieldPropertiesText$1, d as defineCustomElement$1 } from './p-CDGosSW8.js';
 
 const LsFieldPropertiesText = LsFieldPropertiesText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties.js

@@ -1,4 +1,4 @@
-import { L as LsFieldProperties$1, d as defineCustomElement$1 } from './p-BXjDp97T.js';
+import { L as LsFieldProperties$1, d as defineCustomElement$1 } from './p-DGiUKXDO.js';
 
 const LsFieldProperties = LsFieldProperties$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-size.js

@@ -1,4 +1,4 @@
-import { L as LsFieldSize$1, d as defineCustomElement$1 } from './p-COuOscFT.js';
+import { L as LsFieldSize$1, d as defineCustomElement$1 } from './p-DoAxt8ZN.js';
 
 const LsFieldSize = LsFieldSize$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-type-display.js

@@ -1,4 +1,4 @@
-import { L as LsFieldTypeDisplay$1, d as defineCustomElement$1 } from './p-DpEeDtkU.js';
+import { L as LsFieldTypeDisplay$1, d as defineCustomElement$1 } from './p-Bi1Fu2dm.js';
 
 const LsFieldTypeDisplay = LsFieldTypeDisplay$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-formfield.js

@@ -1,17 +1,117 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-BnGihP6t.js';
-import { d as defineCustomElement$7 } from './p-95nSEls8.js';
-import { d as defineCustomElement$6 } from './p-lCZRXn_O.js';
-import { d as defineCustomElement$5 } from './p-DYw5-WDF.js';
-import { d as defineCustomElement$4 } from './p-CcmgTlbG.js';
-import { d as defineCustomElement$3 } from './p-DVcM3j89.js';
-import { d as defineCustomElement$2 } from './p-zhtYmA1Q.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$7 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$6 } from './p-BbRzNkJ-.js';
+import { d as defineCustomElement$5 } from './p-BjENvp2j.js';
+import { d as defineCustomElement$4 } from './p-mRzg677Y.js';
+import { d as defineCustomElement$3 } from './p-D836X_cy.js';
+import { d as defineCustomElement$2 } from './p-aDB_kHQ9.js';
 
-const lsFormfieldCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n";
+const lsFormfieldCss = () => `* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.formfield-host {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.formfield-top-elements {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.125rem;
+}
+
+.formfield-left-side {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+
+  ls-icon {
+    color: var(--gray-80, #787A80);
+  }
+
+  .formfield-label {
+    color: var(--gray-100, #45484D);
+    /* text-base/leading-6/font-medium */
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.5rem; /* 150% */
+  }
+}
+
+.formfield-bottom-elements {
+  position: relative;
+  min-height: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: fit-content;
+  padding: 0 0.125rem;
+}
+
+.formfield-description-text {
+  color: var(--Grey-80, #6C6E73);
+  width: 100%;
+  /* text-xs/leading-4/font-light */
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+}
+
+.formfield-error-text {
+  color: var(--red-70, #DC2721);
+  width: 100%;
+  /* text-xs/leading-4/font-light */
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+}
+
+.formfield-count-container {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  gap: 0.125rem;
+  align-items: center;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+  text-align: right;
+}
+
+.formfield-count {
+  display: flex;
+  align-items: center;
+  color: var(--Grey-70, #6C6E73);
+  gap: 0.125rem;
+}
+
+.formfield-count-error {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  color: var(--red-70, #DC2721);
+}
+
+
+`;
 
 const LsFormfield$1 = /*@__PURE__*/ proxyCustomElement(class LsFormfield extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.valueChange = createEvent(this, "valueChange", 7);
     }
     name;
@@ -60,8 +160,8 @@ const LsFormfield$1 = /*@__PURE__*/ proxyCustomElement(class LsFormfield extends
     static get watchers() { return {
         "value": ["valueWatcher"]
     }; }
-    static get style() { return lsFormfieldCss; }
-}, [260, "ls-formfield", {
+    static get style() { return lsFormfieldCss(); }
+}, [772, "ls-formfield", {
         "name": [1],
         "fieldId": [1, "field-id"],
         "label": [1],
@@ -81,7 +181,7 @@ const LsFormfield$1 = /*@__PURE__*/ proxyCustomElement(class LsFormfield extends
         "dirty": [4],
         "count": [4],
         "countMax": [2, "count-max"],
-        "buttonClick": [16, "button-click"],
+        "buttonClick": [16],
         "buttonIcon": [1, "button-icon"],
         "labelIcon": [1, "label-icon"],
         "fieldIcon": [1, "field-icon"],
@@ -96,37 +196,37 @@ function defineCustomElement$1() {
     const components = ["ls-formfield", "ls-icon", "ls-number-input", "ls-radio-input", "ls-select-input", "ls-text-input", "ls-textarea-input"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-formfield":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsFormfield$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFormfield$1);
             }
             break;
         case "ls-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$7();
             }
             break;
         case "ls-number-input":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$6();
             }
             break;
         case "ls-radio-input":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }
             break;
         case "ls-select-input":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "ls-text-input":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "ls-textarea-input":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/components/ls-formfield.js.map

@@ -1 +1 @@
-{"file":"ls-formfield.js","mappings":"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","names":["LsFormfield","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/ls-formfield.css?tag=ls-formfield","src/components/ls-formfield/ls-formfield.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n","import { Component, Prop, h, Event as StencilEvent, EventEmitter  } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { State, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'ls-formfield',\n  styleUrl: 'ls-formfield.css',\n  shadow: false,\n})\nexport class LsFormfield {\n  @Prop() name: string;\n  @Prop() fieldId: string;\n  @Prop() label?: string;\n  @Prop() as?: 'text' | 'select' | 'radio' | 'textarea' | 'password' | 'number' | 'displayonly' = 'text';\n  @Prop({ mutable: true }) value?: string | number;\n  @Prop() placeholder?: string;\n  @Prop() descriptionText?: string;\n  @Prop() errorText?: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() infoTooltipText?: string;\n  @Prop() hoverTooltipText?: string;\n  @Prop() disabled: boolean;\n  @Prop() extraLabel: 'optional' | 'required' | 'none' = 'none';\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() count: boolean;\n  @Prop() countMax?: number;\n  @Prop() buttonClick?: () => void;\n  @Prop() buttonIcon?: Icon;\n  @Prop() labelIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n  @StencilEvent() valueChange: EventEmitter<string>;\n\n  changeHandler(value: string) {\n    this.valueChange.emit(value);\n  }\n\n  @State() _value: string;\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    this._value = newValue;\n    console.log(newValue)\n  }\n\n  componentWillLoad() {\n    this.valueWatcher(this?.value?.toString());\n  }\n\n  render() {\n    const {\n      name,\n      fieldId,\n      label,\n      as,\n      value,\n      placeholder,\n      descriptionText,\n      errorText,\n      aria,\n      infoTooltipText,\n      disabled,\n      extraLabel,\n      valid,\n      dirty,\n      count,\n      countMax,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n      labelIcon,\n    } = this;\n\n    const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';\n\n    return (\n      <host class=\"formfield-host\">\n        {label?.length > 1 || extraLabel !== 'none' && (\n          <div class=\"formfield-top-elements\">\n            <div class=\"formfield-left-side\">\n              {labelIcon && <ls-icon name={labelIcon}></ls-icon>}\n              <label htmlFor={name} class=\"formfield-label\">\n                {label}\n              </label>\n              {infoTooltipText && <ls-icon name={'information-circle'}></ls-icon>}\n            </div>\n\n            {extraLabel === 'optional' ? (\n              <ls-label text=\"Optional\" colour=\"gray\" type=\"low\"></ls-label>\n            ) : extraLabel === 'required' ? (\n              <ls-label text=\"Required\" colour=\"gray\" type=\"low\"></ls-label>\n            ) : (\n              ''\n            )}\n          </div>\n        )}\n        {as === 'text' ? (\n          <ls-text-input\n            id={fieldId}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n            onValueChange={(e) => {this.changeHandler(e.detail)}}\n          ></ls-text-input>\n        ) : as === 'select' ? (\n          <ls-select-input\n            id={name}\n            name={name}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          >\n            <slot></slot>\n          </ls-select-input>\n        ) : as === 'radio' ? (\n          <ls-radio-input radioId={label} label={value?.toString()} icon={fieldIcon} name={name} disabled={disabled} />\n        ) : as === 'textarea' ? (\n          <ls-textarea-input\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'password' ? (\n          <ls-text-input\n            type=\"password\"\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'displayonly' ? (\n          <ls-text-input\n            type=\"displayonly\"\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'number' ? (\n          <ls-number-input\n            type=\"ls\"\n            id={name}\n            name={name}\n            value={Number(value)}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : (\n          <p>placeholder</p>\n        )}\n        {errorText ||\n          count ||\n          countMax ||\n          (descriptionText && (\n            <div class=\"formfield-bottom-elements\">\n              {errorText && !valid ? <p class=\"formfield-error-text\">{errorText}</p> : descriptionText ? <p class=\"formfield-description-text\">{descriptionText}</p> : ''}\n              {count && (\n                <div class=\"formfield-count-container\">\n                  <p class={countClass}>{value?.toString()?.length}</p>\n                  {countMax > 0 && (\n                    <div class={countClass}>\n                      <p>/</p>\n                      <p>{countMax}</p>\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          ))}\n      </host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ls-formfield.js","mappings":"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","names":["LsFormfield","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/ls-formfield.css?tag=ls-formfield","src/components/ls-formfield/ls-formfield.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n","import { Component, Prop, h, Event as StencilEvent, EventEmitter  } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { State, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'ls-formfield',\n  styleUrl: 'ls-formfield.css',\n  shadow: false,\n})\nexport class LsFormfield {\n  @Prop() name: string;\n  @Prop() fieldId: string;\n  @Prop() label?: string;\n  @Prop() as?: 'text' | 'select' | 'radio' | 'textarea' | 'password' | 'number' | 'displayonly' = 'text';\n  @Prop({ mutable: true }) value?: string | number;\n  @Prop() placeholder?: string;\n  @Prop() descriptionText?: string;\n  @Prop() errorText?: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() infoTooltipText?: string;\n  @Prop() hoverTooltipText?: string;\n  @Prop() disabled: boolean;\n  @Prop() extraLabel: 'optional' | 'required' | 'none' = 'none';\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() count: boolean;\n  @Prop() countMax?: number;\n  @Prop() buttonClick?: () => void;\n  @Prop() buttonIcon?: Icon;\n  @Prop() labelIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n  @StencilEvent() valueChange: EventEmitter<string>;\n\n  changeHandler(value: string) {\n    this.valueChange.emit(value);\n  }\n\n  @State() _value: string;\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    this._value = newValue;\n    console.log(newValue)\n  }\n\n  componentWillLoad() {\n    this.valueWatcher(this?.value?.toString());\n  }\n\n  render() {\n    const {\n      name,\n      fieldId,\n      label,\n      as,\n      value,\n      placeholder,\n      descriptionText,\n      errorText,\n      aria,\n      infoTooltipText,\n      disabled,\n      extraLabel,\n      valid,\n      dirty,\n      count,\n      countMax,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n      labelIcon,\n    } = this;\n\n    const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';\n\n    return (\n      <host class=\"formfield-host\">\n        {label?.length > 1 || extraLabel !== 'none' && (\n          <div class=\"formfield-top-elements\">\n            <div class=\"formfield-left-side\">\n              {labelIcon && <ls-icon name={labelIcon}></ls-icon>}\n              <label htmlFor={name} class=\"formfield-label\">\n                {label}\n              </label>\n              {infoTooltipText && <ls-icon name={'information-circle'}></ls-icon>}\n            </div>\n\n            {extraLabel === 'optional' ? (\n              <ls-label text=\"Optional\" colour=\"gray\" type=\"low\"></ls-label>\n            ) : extraLabel === 'required' ? (\n              <ls-label text=\"Required\" colour=\"gray\" type=\"low\"></ls-label>\n            ) : (\n              ''\n            )}\n          </div>\n        )}\n        {as === 'text' ? (\n          <ls-text-input\n            id={fieldId}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n            onValueChange={(e) => {this.changeHandler(e.detail)}}\n          ></ls-text-input>\n        ) : as === 'select' ? (\n          <ls-select-input\n            id={name}\n            name={name}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          >\n            <slot></slot>\n          </ls-select-input>\n        ) : as === 'radio' ? (\n          <ls-radio-input radioId={label} label={value?.toString()} icon={fieldIcon} name={name} disabled={disabled} />\n        ) : as === 'textarea' ? (\n          <ls-textarea-input\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'password' ? (\n          <ls-text-input\n            type=\"password\"\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'displayonly' ? (\n          <ls-text-input\n            type=\"displayonly\"\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'number' ? (\n          <ls-number-input\n            type=\"ls\"\n            id={name}\n            name={name}\n            value={Number(value)}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : (\n          <p>placeholder</p>\n        )}\n        {errorText ||\n          count ||\n          countMax ||\n          (descriptionText && (\n            <div class=\"formfield-bottom-elements\">\n              {errorText && !valid ? <p class=\"formfield-error-text\">{errorText}</p> : descriptionText ? <p class=\"formfield-description-text\">{descriptionText}</p> : ''}\n              {count && (\n                <div class=\"formfield-count-container\">\n                  <p class={countClass}>{value?.toString()?.length}</p>\n                  {countMax > 0 && (\n                    <div class={countClass}>\n                      <p>/</p>\n                      <p>{countMax}</p>\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          ))}\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ls-helper-bar.js

@@ -1,4 +1,4 @@
-import { L as LsHelperBar$1, d as defineCustomElement$1 } from './p-6l08SdGl.js';
+import { L as LsHelperBar$1, d as defineCustomElement$1 } from './p-DFVuN2lH.js';
 
 const LsHelperBar = LsHelperBar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-icon.js

@@ -1,4 +1,4 @@
-import { L as LsIcon$1, d as defineCustomElement$1 } from './p-95nSEls8.js';
+import { L as LsIcon$1, d as defineCustomElement$1 } from './p-D95fiMAP.js';
 
 const LsIcon = LsIcon$1;
 const defineCustomElement = defineCustomElement$1;