legalesign-document-viewer 0.7.2 → 0.7.3

package/dist/esm/ls-number-input_5.entry.js

@@ -1,1123 +0,0 @@
-import { r as registerInstance, h, c as createEvent, H as Host } from './index-BwdJ-HOC.js';
-
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-const lsNumberInputCss = () => `* {
-  box-sizing: border-box;
-  font-family:
-    'IBM Plex Sans',
-    sans-serif;
-  margin: 0;
-}
-
-.host {
-  display: flex;
-  width: 100%;
-  padding: 0.25rem;
-  align-items: flex-start;
-  gap: 0.25rem;
-  border-radius: 0.625rem;
-  border: 1px solid var(--Grey-20, #edeff2);
-  background: var(--Grey-10, #f7f8fa);
-}
-
-.input-container {
-  position: relative;
-  display: flex;
-  width: 100%;
-}
-
-#fieldIcon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 0.75rem;
-  color: var(--gray-80);
-}
-
-#fieldIconDisabled {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  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-basic {
-  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-ls {
-  display: flex;
-  width: 100%;
-  height: 1.75rem;
-  padding: 0 0.5rem;
-  align-items: center;
-  gap: 0.5rem;
-  align-self: stretch;
-  border-radius: 0.375rem;
-  /* 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-ls::-webkit-outer-spin-button,
-.input-ls::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.input-ls {
-  -moz-appearance: textfield;
-}
-
-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: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: 50%;
-  transform: translateY(-50%);
-  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-disabled {
-  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-40, #D8D9DC);
-  background: var(--gray-=10, #F7F8FA);
-  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
-  cursor: not-allowed;
-
-  #buttonIcon {
-    color: var(--gray-70);
-  }
-}
-
-.button:hover {
-  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 {
-  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 LsNumberInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    type = 'ls';
-    name;
-    value = 0;
-    placeholder;
-    aria;
-    inputRef;
-    disabled;
-    required;
-    valid;
-    dirty;
-    countMax;
-    buttonClick;
-    buttonIcon;
-    fieldIcon;
-    handleChange = (event) => {
-        this.value = event.target.value;
-    };
-    handlePlus = () => {
-        this.value = this.value + 1;
-    };
-    handleMinus = () => {
-        this.value = this.value - 1;
-    };
-    render() {
-        const { type, name, value, placeholder, aria, disabled, required, valid, dirty, buttonClick, buttonIcon, fieldIcon, handleChange, handleMinus, handlePlus, } = this;
-        const inputClass = clsx(type === 'ls' ? 'input-ls' : 'input-basic', disabled
-            ? 'disabled'
-            : dirty && valid
-                ? 'valid'
-                : dirty && !valid
-                    ? 'invalid'
-                    : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (h("host", { key: '854a934295c4f06d0a0218bb26df4c2b8347ad8c', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: 'b9b060518ad7934720558bace95664f0d270afd7', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '0c0262976564f452599eca98b4174e5885e86d51', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: '118d6e36fe7aa2bd1c63b1ede4d88f90c3e14eae', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: 'a2c613b5ce3fc312c27cf80e9f8c7c709a6ce9eb', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '03c2a74000eeaca0d8abe0f2f95519a863bd1939', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '7e213c19c8d7ae104325445d4f029c39fb922315', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '66ed47a6912f656722e70f7b0dc6a74c6de01db7', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '584e1ba750a17469773ff1534c01272a7c488730', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '49d03d49316bb601acb06e0517b63d3834300375', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: 'ceb2b9fb8f2741c91ec5906ac1bc8f058863d8d6', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: 'c40ea5faac37c75f9400868c667cc382a0173218', id: 'buttonIcon', name: 'plus-sm' })))));
-    }
-};
-LsNumberInput.style = lsNumberInputCss();
-
-const lsRadioInputCss = () => `.radioLabel{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.5rem 0.75rem}.radioLabel.checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.radioLabel:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.radioLabel.checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.radioLabel:not(.checked):not(.disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.radioLabel:focus:not(.disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.radioLabel.disabled{cursor:not-allowed}.radioLabel.disabled.checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.radioLabel.disabled:not(.checked){background-color:var(--gray-10);color:var(--gray-60)}.inputClass{margin-top:0px}.inputClass:focus{outline:none}.inputClass:disabled{cursor:not-allowed}.spanContainer{display:flex;gap:0.25rem;align-items:center}`;
-
-const LsRadioInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    radioId;
-    label;
-    icon;
-    name = 'name';
-    checked = false;
-    disabled = false;
-    customStyle;
-    render() {
-        const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
-        const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (h("label", { key: '31f548698a16eff81e0a2f270e89295b80446677', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: 'd69ea6c81a54cd9f933c8d3385ffb4e474aa91e4', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: 'fb893fd4d1df25350afda196ea3cbd6c9f02d435', class: 'spanContainer' }, h("span", { key: '9eaa69b5f8272d09a3c1b68af65e48bff5792493' }, icon && h("ls-icon", { key: '1253b0402ff1b21ce2ccdafbb5ae9a5f28c78c89', name: icon, size: "16" })), h("span", { key: '38e5be64234f87b69cc079440d596a7cbafbccbf' }, label))));
-    }
-};
-LsRadioInput.style = lsRadioInputCss();
-
-const lsSelectInputCss = () => `* {
-  box-sizing: border-box;
-  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)
-}
-
-.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: 0rem 0.75rem;
-  align-items: center;
-  vertical-align: text-top;
-  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;
-}
-
-select::-ms-expand {
-  display: none;
-}
-
-select {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-#select-arrow {
-  color: var(--gray-70);
-  margin-right: 0.25rem;
-  margin-left: -0.125rem;
-}
-
-#select-arrow-disabled {
-  color: var(--gray-40);
-  margin-right: 0.25rem;
-  margin-left: -0.125rem;
-}
-
-.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;
-}
-
-.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 LsSelectInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    name;
-    value;
-    aria;
-    inputRef;
-    disabled;
-    displayOnly;
-    required;
-    valid;
-    dirty;
-    buttonClick;
-    buttonIcon;
-    fieldIcon;
-    // handleChange(event) {
-    //   this.value = event.target.value;
-    // }
-    render() {
-        const { name, aria, disabled, displayOnly, required, valid, dirty, buttonClick, buttonIcon, fieldIcon, } = this;
-        const inputClass = clsx('input-base', disabled
-            ? 'disabled'
-            : dirty && valid
-                ? 'valid'
-                : dirty && !valid
-                    ? 'invalid'
-                    : displayOnly
-                        ? 'displayOnly'
-                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: 'eb7e4a36fee35582c74440cec4097f59ec4ad625', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'c8a8d1c1755cb5cb3bccc1c2a41e04762d1a2bb7', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: 'a75719b9aaf600d2dc3ce0bf2e14bece1a0fc804', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '623e514b4fef20cc8b7f137e55fbc2b796bb992e' })), h("div", { key: '24ca82a5e1a29f199103f34eab545fbf64c3aac0', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'bdf61ed3d35b0389e78f568ba1c8fa15e0ca7703', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
-    }
-};
-LsSelectInput.style = lsSelectInputCss();
-
-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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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: '73aeceeb5ad23dbde6fc235dd1a7d01ca6104365', class: 'host' }, fieldIcon && (h("ls-icon", { key: '4ebdfae891e04adcb0fc60bb2a9061eb067d1824', 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: '54b6c799db1d92dd4167eca819f777587b964b58', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'cd07e6e62e09d1b236154ccda999223027dd25ed', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: 'bf3ad9022b470678279bb17658d643f83fa41182', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '4ca8ff613fd4068b3b12b50d1348d46683e7b101', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '213c952e9ad92aec814a28d16ef15cc348171a37', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
-    }
-};
-LsTextInput.style = lsTextInputCss();
-
-const lsTextareaInputCss = () => `* {
-  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);
-}
-
-.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;
-  resize: vertical;
-  width: 100%;
-  min-height: 4rem;
-  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;
-  /* 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;
-}
-
-.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 LsTextareaInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    name;
-    value;
-    placeholder;
-    aria;
-    inputRef;
-    disabled;
-    displayOnly;
-    required;
-    valid;
-    dirty;
-    countMax;
-    buttonClick;
-    buttonIcon;
-    fieldIcon;
-    render() {
-        const { name, value, placeholder, aria, disabled, displayOnly, required, valid, dirty, countMax, buttonClick, buttonIcon, fieldIcon, } = this;
-        const inputClass = clsx('input-base', disabled
-            ? 'disabled'
-            : dirty && valid
-                ? 'valid'
-                : dirty && !valid
-                    ? 'invalid'
-                    : displayOnly
-                        ? 'displayOnly'
-                        : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: 'eaaa6168607629b07b75063035d67c7cd2c58402', class: 'host' }, fieldIcon && (h("ls-icon", { key: '80b6aadb69eed18136649722ac4d39c30ea5dca0', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: '7fa3acb5519dfd7f070e409a5eeb619c475c7c19', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: '955bde0dbe46c4f9c713622e9dd9d3f64d4b8347', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'f944e321b4318a1123e3f0b5ecb09c0fae5d9a46', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '90124248ce441075d6c8b417631ad9797fad2973', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '4904a282de55a2ec3a8bf3ea25891a2d9e7dedf3', id: 'buttonIcon', name: buttonIcon }))))));
-    }
-};
-LsTextareaInput.style = lsTextareaInputCss();
-
-export { LsNumberInput as ls_number_input, LsRadioInput as ls_radio_input, LsSelectInput as ls_select_input, LsTextInput as ls_text_input, LsTextareaInput as ls_textarea_input };
-//# sourceMappingURL=ls-number-input.ls-radio-input.ls-select-input.ls-text-input.ls-textarea-input.entry.js.map