legalesign-document-viewer 0.4.9 → 0.5.0

package/dist/components/p-Czz58vGf.js.map

@@ -0,0 +1 @@
+{"file":"p-Czz58vGf.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC,mtJAAmtJ,CAAC;;MCShvJ,sBAAsB,iBAAAA,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;;;;;;;;AACzB,IAAA,QAAQ;IAEd,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":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-email/ls-field-properties-email.css?tag=ls-field-properties-email&encapsulation=shadow","src/components/ls-field-properties-email/ls-field-properties-email.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n\n@Component({\n  tag: 'ls-field-properties-email',\n  styleUrl: 'ls-field-properties-email.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesEmail {\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/{p-C0vy7fEN.js → p-D0cZaxkO.js}

@@ -1,14 +1,16 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
-import { d as defineCustomElement$2 } from './p-95nSEls8.js';
-import { d as defineCustomElement$1 } from './p-CwVY532N.js';
+import { d as defineCustomElement$2 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$1 } from './p-DoQc-O0l.js';
 
-const lsFeatureColumnCss = ":host{display:flex;flex-direction:column;gap:0.5rem}.activeIcon,.defaultIcon{padding:0.75rem;border-radius:0.75rem;color:var(--gray-80, #787A80)}.defaultIcon:hover{background-color:var(--primary-10, #EFF4FF);color:var(--primary-100, #0C1457);cursor:pointer}.activeIcon{background-color:var(--primary-60, #4456F6);color:var(--white, #fff)}.hidden{display:none}";
+const lsFeatureColumnCss = () => `:host{display:flex;flex-direction:column;gap:0.5rem}.activeIcon,.defaultIcon{padding:0.75rem;border-radius:0.75rem;color:var(--gray-80, #787A80)}.defaultIcon:hover{background-color:var(--primary-10, #EFF4FF);color:var(--primary-100, #0C1457);cursor:pointer}.activeIcon{background-color:var(--primary-60, #4456F6);color:var(--white, #fff)}.hidden{display:none}`;
 
 const LsFeatureColoumn = /*@__PURE__*/ proxyCustomElement(class LsFeatureColoumn extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.manage = createEvent(this, "manage", 7);
     }
@@ -46,8 +48,8 @@ const LsFeatureColoumn = /*@__PURE__*/ proxyCustomElement(class LsFeatureColoumn
                 this.manager = 'validation';
             }, "data-tooltip-title": "Validation", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'ccc4c347af1232c5c7539fb4f1e414e1492a50dc', name: "adjustments", size: "1.5rem" })), h("slot", { key: '8d6803ab3eb7aaddb47d6728013ad39d90fc4bfa' }), h("ls-tooltip", { key: 'b47081c7ec71610af9d617b88f7fd9282d0c17aa', id: "ls-tooltip-master" })));
     }
-    static get style() { return lsFeatureColumnCss; }
-}, [257, "ls-feature-column", {
+    static get style() { return lsFeatureColumnCss(); }
+}, [769, "ls-feature-column", {
         "manager": [1025],
         "mode": [1]
     }]);
@@ -58,17 +60,17 @@ function defineCustomElement() {
     const components = ["ls-feature-column", "ls-icon", "ls-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-feature-column":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsFeatureColoumn);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFeatureColoumn);
             }
             break;
         case "ls-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;
         case "ls-tooltip":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -77,6 +79,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFeatureColoumn as L, defineCustomElement as d };
-//# sourceMappingURL=p-C0vy7fEN.js.map
+//# sourceMappingURL=p-D0cZaxkO.js.map
 
-//# sourceMappingURL=p-C0vy7fEN.js.map
+//# sourceMappingURL=p-D0cZaxkO.js.map

package/dist/components/p-D0cZaxkO.js.map

@@ -0,0 +1 @@
+{"file":"p-D0cZaxkO.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,uWAAuW,CAAC;;MCQ7X,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AAE3B;;;AAGG;IACsB,OAAO,GAAuE,SAAS;AAGhH;;;AAGG;IACK,IAAI,GAAqC,QAAQ;;AAGhD,IAAA,MAAM;IAEf,gBAAgB,GAAA;AACd,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;IAG9C,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa,EACrG,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU;AAC3B,aAAC,EACkB,oBAAA,EAAA,kBAAkB,EACxB,cAAA,EAAA,mCAAmC,4BACzB,OAAO,EAAA,EAE9B,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,QAAQ,GAAG,CACrC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,aAAa,EAChE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3B,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;AAC1B,aAAC,EACkB,oBAAA,EAAA,aAAa,EACnB,cAAA,EAAA,sCAAsC,4BAC5B,OAAO,EAAA,EAE9B,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,GAAG,CACzC,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,YAAY,GAAG,aAAa,EACxG,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,aAAa;AAC9B,aAAC,EACkB,oBAAA,EAAA,cAAc,EACpB,cAAA,EAAA,yCAAyC,4BAC/B,OAAO,EAAA,EAE9B,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,GAAG,CACvC,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,WAAW,GAAG,YAAY,GAAG,aAAa,EACvG,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;AAC7B,gBAAA,IAAI,CAAC,OAAO,GAAG,WAAW;AAC5B,aAAC,EACkB,oBAAA,EAAA,YAAY,EAClB,cAAA,EAAA,+CAA+C,4BACrC,OAAO,EAAA,EAE9B,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,GAAG,CACvC,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,YAAY,GAAG,YAAY,GAAG,aAAa,EACxG,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;AAC9B,gBAAA,IAAI,CAAC,OAAO,GAAG,YAAY;AAC7B,aAAC,EACkB,oBAAA,EAAA,YAAY,EAClB,cAAA,EAAA,+CAA+C,4BACrC,OAAO,EAAA,EAE9B,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,GAAG,CACxC,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAG,CAAA,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-feature-column/ls-feature-column.css?tag=ls-feature-column&encapsulation=shadow","src/components/ls-feature-column/ls-feature-column.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n}\n\n.activeIcon, .defaultIcon {\n  padding: 0.75rem;\n  border-radius: 0.75rem;\n  color: var(--gray-80, #787A80);\n}\n\n.defaultIcon:hover {\n  background-color: var(--primary-10, #EFF4FF);\n  color: var(--primary-100, #0C1457);\n  cursor: pointer;\n}\n\n.activeIcon {\n  background-color: var(--primary-60, #4456F6);\n  color: var(--white, #fff);\n}\n\n.hidden {\n  display: none;\n}","import { Component, Host, Prop, h, EventEmitter, Event, Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n  @Element() component: HTMLElement;\n  /**\n   * Determines / sets which of the far left 'managers' is active.\n   * {'document' | 'toolbox' | 'participant' }\n   */\n  @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant'| 'recipient' | 'validation' = 'toolbox';\n\n\n  /**\n   * The mode that document viewer is being used in.\n   * {'preview' | 'editor' | 'custom'}\n   */\n  @Prop() mode: 'preview' | 'editor' | 'compose' = 'editor';\n\n  // Send an manager change up the DOM\n  @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'>;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('document');\n            this.manager = 'document';\n          }}\n          data-tooltip-title=\"Template Details\"\n          data-tooltip=\"View and edit Template properties\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"document\" size=\"1.5rem\" />\n        </div>\n        <div\n          class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('toolbox');\n            this.manager = 'toolbox';\n          }}\n          data-tooltip-title=\"Field Types\"\n          data-tooltip=\"Select and place Form Field Elements\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"typing-input\" size=\"1.5rem\" />\n        </div>\n        \n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('participant');\n            this.manager = 'participant';\n          }}\n          data-tooltip-title=\"Participants\"\n          data-tooltip=\"Manage Signers, Witnesses and Approvers\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"1.5rem\" />\n        </div>\n\n        <div\n          class={this.mode !== \"compose\" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('recipient');\n            this.manager = 'recipient';\n          }}\n          data-tooltip-title=\"Recipients\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"1.5rem\" />\n        </div>\n\n        <div\n          class={this.mode !== \"preview\" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('validation');\n            this.manager = 'validation';\n          }}\n          data-tooltip-title=\"Validation\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"adjustments\" size=\"1.5rem\" />\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-D836X_cy.js

@@ -0,0 +1,317 @@
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { d as defineCustomElement$1 } from './p-D95fiMAP.js';
+
+const lsTextInputCss = () => `* {
+  box-sizing: border-box;
+  font-family: "IBM Plex", sans-serif;
+  margin: 0;
+}
+
+.host {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#fieldIcon {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--gray-80)
+}
+
+#fieldIconDisabled {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--gray-60)
+}
+
+#password-icon {
+  padding-right: 0.25rem;
+}
+
+.icon-input {
+  padding-left: 2.5rem !important;
+}
+
+.button-input {
+  padding-right: 2.5rem !important;
+}
+
+.right-items-input {
+  padding-right: 4rem !important;
+}
+
+.input-base {
+  display: flex;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.input-base:active:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
+  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
+}
+
+.input-base:focus:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);
+  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;
+}
+
+
+.default {
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--White, #FFF);
+  color: var(--gray-100);
+}
+
+.default:hover {
+  border: 1px solid var(--gray-50, #D8D9DC);
+  background: var(--White, #FFF);
+  color: var(--gray-110);
+}
+
+
+.disabled {
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-10, #F7F8FA);
+  color: var(--gray-60);
+  cursor: not-allowed;
+}
+
+.display-only {
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-10, #F7F8FA);
+  color: var(--gray-100);
+  cursor: not-allowed;
+}
+
+.invalid {
+  border: 1px solid var(--red-40, #FFA19E);
+  background: var(--White, #FFF);
+  color: var(--Red-100, #7A1714);
+}
+
+.invalid:hover {
+  border: 1px solid var(--red-50, #FFA19E);
+  background: var(--White, #FFF);
+  color: var(--Red-100, #7A1714);
+}
+
+.valid {
+  border: 1px solid var(--green-40, #72F0C2);
+  background: var(--White, #FFF);
+  color: var(--Green-100, #125241);
+}
+
+.valid:hover {
+  border: 1px solid var(--green-50, #72F0C2);
+  background: var(--White, #FFF);
+  color: var(--Green-100, #125241);
+}
+
+
+.right-items {
+  position: absolute;
+  padding: 0.25rem;
+  height: 2.25rem;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+} 
+
+#invalidIcon {
+  margin: 0 0.5rem;
+  color: var(--red-70);
+}
+
+#validIcon {
+  margin: 0 0.5rem;
+  color: var(--green-60);
+}
+
+.button {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #C8C9CC);
+  background: var(--White, #FFF);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-90);
+  }
+}
+
+.button:hover {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #C8C9CC);
+  background: var(--gray-20, #EDEFF2);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:active {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456F6);
+  background: var(--White, #FFF);
+  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:focus {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456F6);
+  background: var(--White, #FFF);
+  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+
+
+
+
+`;
+
+const LsTextInput = /*@__PURE__*/ proxyCustomElement(class LsTextInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange", 7);
+    }
+    type = 'default';
+    name;
+    value;
+    placeholder;
+    aria;
+    inputRef;
+    disabled;
+    required;
+    valid;
+    dirty;
+    countMax;
+    buttonClick;
+    buttonIcon;
+    fieldIcon;
+    valueChange;
+    showPassword = false;
+    handlePassword = () => {
+        this.showPassword = !this.showPassword;
+    };
+    changeHandler(event) {
+        console.log(event);
+        this.valueChange.emit(event.target.value);
+    }
+    render() {
+        const { type, name, value, placeholder, aria, disabled, required, valid, dirty, countMax, buttonClick, buttonIcon, fieldIcon, showPassword, handlePassword, } = this;
+        const inputClass = clsx('input-base', type === 'displayonly'
+            ? 'display-only'
+            : disabled
+                ? 'disabled'
+                : dirty && valid
+                    ? 'valid'
+                    : dirty && !valid
+                        ? 'invalid'
+                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
+        return (h(Host, { key: '065f2582758ce9cfeea52508bd051c49ac8f7a22', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'b5e77210c848cff4c8c572fc2ad2b137e67670c1', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
+                this.changeHandler(e);
+            } })) : type === 'displayonly' ? (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true, onChange: (e) => {
+                this.changeHandler(e);
+            } })) : (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
+                this.changeHandler(e);
+            } })), h("div", { key: 'aa71635dc5ce7a3727559271dd57cead5d5f2c7b', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '07561e3d44c33a945083f69cf1c1449257153ed5', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '7fa27ddfe3e004c6c2232210bf0ab39664f7cc75', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '2a07f650fdd786d01a7d88548ba07074da25fbc9', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '1b3fd40bf47799698ea65239eedc0123e01e6cda', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+    }
+    static get style() { return lsTextInputCss(); }
+}, [769, "ls-text-input", {
+        "type": [1],
+        "name": [1],
+        "value": [1025],
+        "placeholder": [1],
+        "aria": [1],
+        "inputRef": [1, "input-ref"],
+        "disabled": [4],
+        "required": [4],
+        "valid": [4],
+        "dirty": [4],
+        "countMax": [2, "count-max"],
+        "buttonClick": [8, "button-click"],
+        "buttonIcon": [1, "button-icon"],
+        "fieldIcon": [1, "field-icon"],
+        "showPassword": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-text-input", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-text-input":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsTextInput);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsTextInput as L, defineCustomElement as d };
+//# sourceMappingURL=p-D836X_cy.js.map
+
+//# sourceMappingURL=p-D836X_cy.js.map

package/dist/components/p-D836X_cy.js.map

@@ -0,0 +1 @@
+{"file":"p-D836X_cy.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC;AAC9B;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;AAMA,CAAC;;MCjNY,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACd,IAAI,GAA2C,SAAS;AACxD,IAAA,IAAI;AACa,IAAA,KAAK;AACtB,IAAA,WAAW;AACX,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-text-input/ls-text-input.css?tag=ls-text-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-text-input/ls-text-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  font-family: \"IBM Plex\", sans-serif;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n#password-icon {\n  padding-right: 0.25rem;\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.display-only {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-100);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 2.25rem;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n","import { Component, Prop, h, Host, Event as StencilEvent, EventEmitter, State } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-text-input',\n  styleUrl: 'ls-text-input.css',\n  shadow: true,\n})\nexport class LsTextInput {\n  @Prop() type: 'default' | 'password' | 'displayonly' = 'default';\n  @Prop() name: string;\n  @Prop({ mutable: true }) value: string;\n  @Prop() placeholder?: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() countMax: number;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n  @StencilEvent() valueChange: EventEmitter<string>;\n\n  @State() showPassword: boolean = false;\n\n  handlePassword = () => {\n    this.showPassword = !this.showPassword;\n  };\n\n  changeHandler(event: Event) {\n    console.log(event)\n    this.valueChange.emit((event.target as any).value as string);\n  }\n\n  render() {\n    const {\n      type,\n      name,\n      value,\n      placeholder,\n      aria,\n      disabled,\n      required,\n      valid,\n      dirty,\n      countMax,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n      showPassword,\n      handlePassword,\n    } = this;\n\n    const inputClass = clsx(\n      'input-base',\n      type === 'displayonly'\n        ? 'display-only'\n        : disabled\n          ? 'disabled'\n          : dirty && valid\n            ? 'valid'\n            : dirty && !valid\n              ? 'invalid'\n              : 'default',\n      fieldIcon && 'icon-input',\n      dirty && 'button-input',\n      buttonIcon && 'button-input',\n      buttonIcon && dirty && 'right-items-input',\n    );\n\n    return (\n      <Host class='host'>\n        {fieldIcon && (\n          <ls-icon\n            id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n            name={fieldIcon}\n          ></ls-icon>\n        )}\n        {type === 'password' ? (\n          <input\n            type={showPassword && 'password'}\n            class={inputClass}\n            id={name}\n            name={name}\n            value={value}\n            maxlength={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={required}\n            disabled={disabled}\n            onChange={(e) => {\n              this.changeHandler(e)\n            }}\n          ></input>\n        ) : type === 'displayonly' ? (\n          <input\n            class={inputClass}\n            id={name}\n            name={name}\n            value={value}\n            maxlength={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={required}\n            disabled\n            onChange={(e) => {\n              this.changeHandler(e)\n            }}\n          />\n        ) : (\n          <input\n            class={inputClass}\n            id={name}\n            name={name}\n            value={value}\n            maxlength={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={required}\n            disabled={disabled}\n            onChange={(e) => {\n              this.changeHandler(e)\n            }}\n          ></input>\n        )}\n        <div class='right-items'>\n          {dirty && !disabled && (\n            <ls-icon\n              id={valid ? 'validIcon' : 'invalidIcon'}\n              name={valid ? 'check-circle' : 'exclamation-circle'}\n            ></ls-icon>\n          )}\n          {buttonIcon && (\n            <button class='button' onClick={buttonClick}>\n              <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n            </button>\n          )}\n          {type === 'password' && !buttonIcon && (\n            <ls-icon-button\n              id='password-icon'\n              icon={showPassword ? 'eye' : 'eye-off'}\n              onClick={handlePassword}\n            ></ls-icon-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-95nSEls8.js → p-D95fiMAP.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BnGihP6t.js';
+import { t as transformTag, p as proxyCustomElement, H, h } from './p-BhZ5Udbm.js';
 
 const html = String.raw;
 const icons = [
@@ -6999,9 +6999,11 @@ var IconEnum;
 const iconNames = [...icons.map((icon) => icon.name).sort()];
 
 const LsIcon = /*@__PURE__*/ proxyCustomElement(class LsIcon extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     name;
@@ -7035,12 +7037,12 @@ const LsIcon = /*@__PURE__*/ proxyCustomElement(class LsIcon extends H {
                 ...this.customStyle,
             } }, this.solid ? (h("div", { innerHTML: icon.svgSolid, style: { top: '0px' } })) : (h("div", { innerHTML: icon.svgOutline, style: { top: '0px' } })))))));
     }
-}, [257, "ls-icon", {
+}, [769, "ls-icon", {
         "name": [1],
         "solid": [4],
         "color": [1],
         "size": [1],
-        "customStyle": [16, "custom-style"]
+        "customStyle": [16]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -7049,8 +7051,8 @@ function defineCustomElement() {
     const components = ["ls-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsIcon);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsIcon);
             }
             break;
     } });
@@ -7058,6 +7060,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsIcon as L, defineCustomElement as d };
-//# sourceMappingURL=p-95nSEls8.js.map
+//# sourceMappingURL=p-D95fiMAP.js.map
 
-//# sourceMappingURL=p-95nSEls8.js.map
+//# sourceMappingURL=p-D95fiMAP.js.map