legalesign-document-viewer 0.0.7

package/dist/ls-document-viewer/ls-number-input.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-number-input.entry.esm.js","sources":["src/components/ls-formfield/inputs/ls-number-input/ls-number-input.css?tag=ls-number-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-number-input/ls-number-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  font-family:\n    'IBM Plex Sans',\n    sans-serif;\n  margin: 0;\n}\n\n.host {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem;\n  align-items: flex-start;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--Grey-20, #edeff2);\n  background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\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-basic {\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-ls {\n  display: flex;\n  width: 100%;\n  height: 1.75rem;\n  padding: 0 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.375rem;\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}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input-ls {\n  -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\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.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.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\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: 28px;\n  width: 28px;\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-disabled {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-=10, #F7F8FA);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  cursor: not-allowed;\n\n  #buttonIcon {\n    color: var(--gray-70);\n  }\n}\n\n.button:hover {\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  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\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:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n","import { Component, Prop,  h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-number-input',\n  styleUrl: 'ls-number-input.css',\n  shadow: true,\n})\nexport class LsNumberInput {\n  @Prop() type: 'basic' | 'ls' = 'ls';\n  @Prop() name: string;\n  @Prop({mutable: true}) value: number = 0 ;\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\n  handleChange = (event) => {\n    this.value = event.target.value;\n  }\n\n  private handlePlus = () => {\n    this.value = this.value + 1;\n  }\n\n  private handleMinus = () => {\n    this.value = this.value - 1;\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      buttonClick,\n      buttonIcon,\n      fieldIcon,\n      handleChange,\n      handleMinus,\n      handlePlus,\n    } = this;\n\n    const inputClass = clsx(\n      type === 'ls' ? 'input-ls' : 'input-basic',\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    const plusMinusClass = clsx(\n      disabled ? 'button-disabled' : 'button'\n    )\n\n    return (\n      <host class={type === 'ls' && 'host'}>\n        {type === 'ls' && (\n          <button class={plusMinusClass} onClick={() => handleMinus()} disabled={disabled}>\n            <ls-icon id='buttonIcon' name='minus-sm'></ls-icon>\n          </button>\n        )}\n        <div class='input-container'>\n          {fieldIcon && (\n            <ls-icon\n              id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n              name={fieldIcon}\n            ></ls-icon>\n          )}\n          <input\n            type='number'\n            class={inputClass}\n            id={name}\n            name={name}\n            value={value}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={required}\n            disabled={disabled}\n            onInput={(event) => handleChange(event)}\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 && type !== 'ls' && (\n              <button class='button' onClick={buttonClick}>\n                <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n              </button>\n            )}\n          </div>\n        </div>\n        {type === 'ls' && (\n          <button class={plusMinusClass} onClick={handlePlus} disabled={disabled}>\n            <ls-icon id='buttonIcon' name='plus-sm'></ls-icon>\n          </button>\n        )}\n      </host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/ls-document-viewer/ls-number-input.entry.js

@@ -0,0 +1,51 @@
+import { r as registerInstance, h } from './index-Cjn1MNt-.js';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+
+const lsNumberInputCss = "* {\n  box-sizing: border-box;\n  font-family:\n    'IBM Plex Sans',\n    sans-serif;\n  margin: 0;\n}\n\n.host {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem;\n  align-items: flex-start;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--Grey-20, #edeff2);\n  background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\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-basic {\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-ls {\n  display: flex;\n  width: 100%;\n  height: 1.75rem;\n  padding: 0 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.375rem;\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}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input-ls {\n  -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\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.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.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\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: 28px;\n  width: 28px;\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-disabled {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-=10, #F7F8FA);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  cursor: not-allowed;\n\n  #buttonIcon {\n    color: var(--gray-70);\n  }\n}\n\n.button:hover {\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  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\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:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n";
+
+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: '18b17b148d00e0949400ced79f9bff323e35d685', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: '6fe14552c5f670e653c328f4fe207af892f5c3a0', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '0b0164d9dc72481ec64351912d1814a1be425bbd', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: 'c778338bfb06b1658ac301ff7d05fa8136e28a1b', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '2a7dfcc3960654364637bf7d277a7b79a346905b', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: 'c7704dc6793a1f1228fb75fe4858a8e8712fa563', 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: 'a52ee1a654028e334947340ca7c98b86234c3ba9', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '62ff08645a5ef0297b650a77e394298683a4e1eb', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '7f2ec8fe418466a3f95f75fe7ed4a81b6e0a1fbd', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '6518f7d70297fad3555772cc2a604471b8ae6360', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: 'e56be068ead82409003a5d37587d10dd8c0b20f9', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: 'dc56e2bc098b493f587f4a86b91a5a76abd35316', id: 'buttonIcon', name: 'plus-sm' })))));
+    }
+};
+LsNumberInput.style = lsNumberInputCss;
+
+export { LsNumberInput as ls_number_input };
+//# sourceMappingURL=ls-number-input.entry.esm.js.map
+
+//# sourceMappingURL=ls-number-input.entry.js.map

package/dist/ls-document-viewer/ls-number-input.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-number-input.entry.esm.js","mappings":"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","names":[],"sources":["src/components/ls-formfield/inputs/ls-number-input/ls-number-input.css?tag=ls-number-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-number-input/ls-number-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  font-family:\n    'IBM Plex Sans',\n    sans-serif;\n  margin: 0;\n}\n\n.host {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem;\n  align-items: flex-start;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--Grey-20, #edeff2);\n  background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\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-basic {\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-ls {\n  display: flex;\n  width: 100%;\n  height: 1.75rem;\n  padding: 0 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.375rem;\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}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input-ls {\n  -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\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.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.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\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: 28px;\n  width: 28px;\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-disabled {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-=10, #F7F8FA);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  cursor: not-allowed;\n\n  #buttonIcon {\n    color: var(--gray-70);\n  }\n}\n\n.button:hover {\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  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\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:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n","import { Component, Prop,  h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-number-input',\n  styleUrl: 'ls-number-input.css',\n  shadow: true,\n})\nexport class LsNumberInput {\n  @Prop() type: 'basic' | 'ls' = 'ls';\n  @Prop() name: string;\n  @Prop({mutable: true}) value: number = 0 ;\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\n  handleChange = (event) => {\n    this.value = event.target.value;\n  }\n\n  private handlePlus = () => {\n    this.value = this.value + 1;\n  }\n\n  private handleMinus = () => {\n    this.value = this.value - 1;\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      buttonClick,\n      buttonIcon,\n      fieldIcon,\n      handleChange,\n      handleMinus,\n      handlePlus,\n    } = this;\n\n    const inputClass = clsx(\n      type === 'ls' ? 'input-ls' : 'input-basic',\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    const plusMinusClass = clsx(\n      disabled ? 'button-disabled' : 'button'\n    )\n\n    return (\n      <host class={type === 'ls' && 'host'}>\n        {type === 'ls' && (\n          <button class={plusMinusClass} onClick={() => handleMinus()} disabled={disabled}>\n            <ls-icon id='buttonIcon' name='minus-sm'></ls-icon>\n          </button>\n        )}\n        <div class='input-container'>\n          {fieldIcon && (\n            <ls-icon\n              id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n              name={fieldIcon}\n            ></ls-icon>\n          )}\n          <input\n            type='number'\n            class={inputClass}\n            id={name}\n            name={name}\n            value={value}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={required}\n            disabled={disabled}\n            onInput={(event) => handleChange(event)}\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 && type !== 'ls' && (\n              <button class='button' onClick={buttonClick}>\n                <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n              </button>\n            )}\n          </div>\n        </div>\n        {type === 'ls' && (\n          <button class={plusMinusClass} onClick={handlePlus} disabled={disabled}>\n            <ls-icon id='buttonIcon' name='plus-sm'></ls-icon>\n          </button>\n        )}\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-participant-manager.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-participant-manager.entry.esm.js","sources":["src/components/ls-participant-manager/ls-participant-manager.css?tag=ls-participant-manager&encapsulation=shadow","src/components/ls-participant-manager/ls-participant-manager.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid black\n}\n\n.label-span {\n  position: absolute;\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  line-height: 1rem;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nh1 {\n  font-size: 19px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.card {\n  display: flex;\n  padding-right: 4px;\n  padding-left: 4px;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  margin: 4px;\n  border-radius: 0.55rem;\n  gap: 4px;\n  border: 0;\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  background-color: transparent;\n  border: none;\n\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\n\n}\n\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-participant-manager',\n  styleUrl: 'ls-participant-manager.css',\n  shadow: true,\n})\n\nexport class LsParticipantManager {\n\n  /**\n * The base template information (as JSON).\n * {LSDocumentViewer}\n */\n  @Prop() editor: LsDocumentViewer;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) update: EventEmitter<LSMutateEvent[]>;\n\n  selectedHandler(_role) {\n    //console.log(role, 'participant manager')\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }])\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }])\n  }\n  createHandler() {\n    this.update.emit([{\n      action: 'create', data: {\n        id: btoa('rol' + crypto.randomUUID()),\n        name: 'Signer ' + this.template.roles.length,\n        roleType: 'SIGNER',\n        signerIndex: 1,\n        ordinal: this.template.roles.length,\n        signerParent: null,\n        experience: ''\n      }\n    }])\n  }\n\n  render() {\n    return (\n      <Host>\n        <h1>Participants</h1>\n        {this.template?.roles.map((r, index) => {\n          return <div class=\"card\" style={{\n            backgroundColor: this.editor.roleColors[index].faded,\n            border: \"1px solid \" + this.editor.roleColors[index].primary\n          }}>\n            <button class=\"titleButton\" onClick={() => { this.selectedHandler(r) }}>{r?.name || 'Signer ' + index}</button>\n            <button class=\"innerButton\" onClick={() => { this.deleteHandler(r) }}><ls-icon name=\"trash\" size=\"18\" /></button>\n            {index !== 0 ? <button class=\"innerButton\" onClick={() => { this.swapHandler(r, this.template.roles[index - 1]) }}><ls-icon name=\"arrow-up\" size=\"18\" /></button> : <></>}\n            {index < this.template.roles.length - 1 ? <button class=\"innerButton\" onClick={() => { this.swapHandler(r, this.template.roles[index + 1]) }}><ls-icon name=\"arrow-down\" size=\"18\" /></button> : <></>}\n          </div>\n        })}\n        <button onClick={() => this.createHandler()}>Add Participant</button>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/ls-document-viewer/ls-participant-manager.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, a as createEvent, h, e as Host } from './index-Cjn1MNt-.js';
+
+const lsParticipantManagerCss = ":host{display:flex;flex-direction:column;border:1px solid black}.label-span{position:absolute;font-family:inherit;display:inline-flex;align-items:center;line-height:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}h1{font-size:19px}*{box-sizing:border-box}.card{display:flex;padding-right:4px;padding-left:4px;padding-top:4px;padding-bottom:4px;margin:4px;border-radius:0.55rem;gap:4px;border:0}.innerButton{margin:0px;padding:0px;background-color:transparent;border:none}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}";
+
+const LsParticipantManager = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    /**
+   * The base template information (as JSON).
+   * {LSDocumentViewer}
+   */
+    editor;
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    mutate;
+    update;
+    selectedHandler(_role) {
+        //console.log(role, 'participant manager')
+    }
+    deleteHandler(role) {
+        this.update.emit([{ action: 'delete', data: role }]);
+    }
+    swapHandler(role1, role2) {
+        this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
+    }
+    createHandler() {
+        this.update.emit([{
+                action: 'create', data: {
+                    id: btoa('rol' + crypto.randomUUID()),
+                    name: 'Signer ' + this.template.roles.length,
+                    roleType: 'SIGNER',
+                    signerIndex: 1,
+                    ordinal: this.template.roles.length,
+                    signerParent: null,
+                    experience: ''
+                }
+            }]);
+    }
+    render() {
+        return (h(Host, { key: 'ed728f73ef8a9197e547149d4c5cd35b2112f920' }, h("h1", { key: 'c23f0fa76c2b945c8cd3c1caab2494f80c6a446b' }, "Participants"), this.template?.roles.map((r, index) => {
+            return h("div", { class: "card", style: {
+                    backgroundColor: this.editor.roleColors[index].faded,
+                    border: "1px solid " + this.editor.roleColors[index].primary
+                } }, h("button", { class: "titleButton", onClick: () => { this.selectedHandler(r); } }, r?.name || 'Signer ' + index), h("button", { class: "innerButton", onClick: () => { this.deleteHandler(r); } }, h("ls-icon", { name: "trash", size: "18" })), index !== 0 ? h("button", { class: "innerButton", onClick: () => { this.swapHandler(r, this.template.roles[index - 1]); } }, h("ls-icon", { name: "arrow-up", size: "18" })) : h(h.Fragment, null), index < this.template.roles.length - 1 ? h("button", { class: "innerButton", onClick: () => { this.swapHandler(r, this.template.roles[index + 1]); } }, h("ls-icon", { name: "arrow-down", size: "18" })) : h(h.Fragment, null));
+        }), h("button", { key: '828789c30c2fb340a7bf02c4f275e1ae5f09ca07', onClick: () => this.createHandler() }, "Add Participant"), h("slot", { key: '5624d9c4cf3dd1d38cda2d9239cbde5a611e4258' })));
+    }
+};
+LsParticipantManager.style = lsParticipantManagerCss;
+
+export { LsParticipantManager as ls_participant_manager };
+//# sourceMappingURL=ls-participant-manager.entry.esm.js.map
+
+//# sourceMappingURL=ls-participant-manager.entry.js.map

package/dist/ls-document-viewer/ls-participant-manager.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-participant-manager.entry.esm.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,ykBAAykB;;MCY5lB,oBAAoB,GAAA,MAAA;;;;;;AAE/B;;;AAGC;AACO,IAAA,MAAM;AAEd;;;AAGG;AACK,IAAA,QAAQ;AAMb,IAAA,MAAM;AAMN,IAAA,MAAM;AAET,IAAA,eAAe,CAAC,KAAK,EAAA;;;AAIrB,IAAA,aAAa,CAAC,IAAe,EAAA;AAC3B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;;IAGtD,WAAW,CAAC,KAAK,EAAE,KAAK,EAAA;QACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;;IAEnE,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAChB,gBAAA,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACtB,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;oBACrC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM;AAC5C,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,WAAW,EAAE,CAAC;AACd,oBAAA,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM;AACnC,oBAAA,YAAY,EAAE,IAAI;AAClB,oBAAA,UAAU,EAAE;AACb;AACF,aAAA,CAAC,CAAC;;IAGL,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAqB,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,cAAA,CAAA,EACpB,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAI;YACrC,OAAO,WAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE;oBAC9B,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK;AACpD,oBAAA,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;iBACtD,EAAA,EACC,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAK,EAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA,EAAE,EAAG,EAAA,CAAC,EAAE,IAAI,IAAI,SAAS,GAAG,KAAK,CAAU,EAC/G,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAQ,EAAA,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA,EAAE,EAAA,EAAE,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CAAS,EAChH,KAAK,KAAK,CAAC,GAAG,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAK,EAAG,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA,EAAE,EAAA,EAAE,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAA,CAAG,CAAS,GAAG,CAAK,CAAA,CAAA,CAAA,QAAA,EAAA,IAAA,CAAA,EACxK,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAQ,EAAA,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA,EAAE,EAAA,EAAE,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAG,CAAA,CAAS,GAAG,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,IAAA,CAAK,CAClM;AACR,SAAC,CAAC,EACF,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EAA0B,EAAA,iBAAA,CAAA,EACrE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":[],"sources":["src/components/ls-participant-manager/ls-participant-manager.css?tag=ls-participant-manager&encapsulation=shadow","src/components/ls-participant-manager/ls-participant-manager.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid black\n}\n\n.label-span {\n  position: absolute;\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  line-height: 1rem;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nh1 {\n  font-size: 19px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.card {\n  display: flex;\n  padding-right: 4px;\n  padding-left: 4px;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  margin: 4px;\n  border-radius: 0.55rem;\n  gap: 4px;\n  border: 0;\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  background-color: transparent;\n  border: none;\n\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\n\n}\n\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-participant-manager',\n  styleUrl: 'ls-participant-manager.css',\n  shadow: true,\n})\n\nexport class LsParticipantManager {\n\n  /**\n * The base template information (as JSON).\n * {LSDocumentViewer}\n */\n  @Prop() editor: LsDocumentViewer;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) update: EventEmitter<LSMutateEvent[]>;\n\n  selectedHandler(_role) {\n    //console.log(role, 'participant manager')\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }])\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }])\n  }\n  createHandler() {\n    this.update.emit([{\n      action: 'create', data: {\n        id: btoa('rol' + crypto.randomUUID()),\n        name: 'Signer ' + this.template.roles.length,\n        roleType: 'SIGNER',\n        signerIndex: 1,\n        ordinal: this.template.roles.length,\n        signerParent: null,\n        experience: ''\n      }\n    }])\n  }\n\n  render() {\n    return (\n      <Host>\n        <h1>Participants</h1>\n        {this.template?.roles.map((r, index) => {\n          return <div class=\"card\" style={{\n            backgroundColor: this.editor.roleColors[index].faded,\n            border: \"1px solid \" + this.editor.roleColors[index].primary\n          }}>\n            <button class=\"titleButton\" onClick={() => { this.selectedHandler(r) }}>{r?.name || 'Signer ' + index}</button>\n            <button class=\"innerButton\" onClick={() => { this.deleteHandler(r) }}><ls-icon name=\"trash\" size=\"18\" /></button>\n            {index !== 0 ? <button class=\"innerButton\" onClick={() => { this.swapHandler(r, this.template.roles[index - 1]) }}><ls-icon name=\"arrow-up\" size=\"18\" /></button> : <></>}\n            {index < this.template.roles.length - 1 ? <button class=\"innerButton\" onClick={() => { this.swapHandler(r, this.template.roles[index + 1]) }}><ls-icon name=\"arrow-down\" size=\"18\" /></button> : <></>}\n          </div>\n        })}\n        <button onClick={() => this.createHandler()}>Add Participant</button>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-participant-select.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-participant-select.entry.esm.js","sources":["src/components/ls-participant-select/ls-participant-select.css?tag=ls-participant-select&encapsulation=shadow","src/components/ls-participant-select/ls-participant-select.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-participant-select',\n  styleUrl: 'ls-participant-select.css',\n  shadow: true,\n})\nexport class LsParticipantSelect {\n  render() {\n    return (\n      <Host>\n        <select>\n          <option value=\"0\">Sender</option>\n          <option value=\"1\">Signer 1</option>\n        </select>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,sBAAsB,GAAG,6BAA6B;;MCO/C,mBAAmB,GAAA,MAAA;;;;IAC9B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,GAAG,EAAgB,EAAA,QAAA,CAAA,EACjC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,GAAG,EAAA,EAAA,UAAA,CAAkB,CAC5B,EACT,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/ls-document-viewer/ls-participant-select.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, e as Host } from './index-Cjn1MNt-.js';
+
+const lsParticipantSelectCss = ":host{display:inline-block}";
+
+const LsParticipantSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '796b001b3ec0d4d5f421a53e6c3243afda1be102' }, h("select", { key: '0eaa4fa7739944099215669fa6b07539e7a436f2' }, h("option", { key: '700196dfeaafd44e89ea698d31b6e9cfc8e164e7', value: "0" }, "Sender"), h("option", { key: '472aa6a843fd8531287e5b52bb26ff841ef81fed', value: "1" }, "Signer 1")), h("slot", { key: 'd9abfba2bb54dfb8876acea407818a678916b922' })));
+    }
+};
+LsParticipantSelect.style = lsParticipantSelectCss;
+
+export { LsParticipantSelect as ls_participant_select };
+//# sourceMappingURL=ls-participant-select.entry.esm.js.map
+
+//# sourceMappingURL=ls-participant-select.entry.js.map

package/dist/ls-document-viewer/ls-participant-select.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-participant-select.entry.esm.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6BAA6B;;MCO/C,mBAAmB,GAAA,MAAA;;;;IAC9B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,GAAG,EAAgB,EAAA,QAAA,CAAA,EACjC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,GAAG,EAAA,EAAA,UAAA,CAAkB,CAC5B,EACT,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":[],"sources":["src/components/ls-participant-select/ls-participant-select.css?tag=ls-participant-select&encapsulation=shadow","src/components/ls-participant-select/ls-participant-select.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-participant-select',\n  styleUrl: 'ls-participant-select.css',\n  shadow: true,\n})\nexport class LsParticipantSelect {\n  render() {\n    return (\n      <Host>\n        <select>\n          <option value=\"0\">Sender</option>\n          <option value=\"1\">Signer 1</option>\n        </select>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-radio-input.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-radio-input.entry.esm.js","sources":["src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.css?tag=ls-radio-input","src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.tsx"],"sourcesContent":[".radioLabel{\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border-radius: 0.5rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.radioLabel.checked {\n  background-color: var(--primary-10);\n  border-color: var(--primary-20);\n  color: var(--primary-90)\n}\n\n.radioLabel:not(checked) {\n  color: var(--gray-90);\n  background-color: var(--gray-10);\n  border: 1px solid var(--gray-20);\n}\n\n.radioLabel.checked:hover {\n  border-color: var(--primary-30);\n  color: var(--primary-100);\n  \n}\n\n.radioLabel:not(.checked):not(.disabled):hover {\n  border-color: var(--gray-50);\n  color: var(--gray-100);\n}\n\n.radioLabel:focus:not(.disabled) {\n  box-shadow: var(--focus-box-shadow);\n  outline-offset: var(--focus-outline-offset);\n  outline: none;\n}\n\n.radioLabel.disabled {\n  cursor: not-allowed;\n}\n\n.radioLabel.disabled.checked {\n  background-color: var(--primary-10);\n  color: var(--primary-40);\n  border-color: var(--primary-40);\n}\n\n.radioLabel.disabled:not(.checked) {\n  background-color: var(--gray-10);\n  color: var(--gray-60);\n}\n\n.inputClass {\n  margin-top: 0px;\n}\n\n.inputClass:focus {\n  outline: none;\n}\n\n.inputClass:disabled {\n  cursor: not-allowed;\n}\n\n.spanContainer {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n}","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-radio-input',\n  styleUrl: 'ls-radio-input.css',\n  shadow: false,\n})\nexport class LsRadioInput {\n  @Prop() radioId: string;\n  @Prop() label: string;\n  @Prop() icon?: Icon;\n  @Prop() name?: string = 'name';\n  @Prop() checked: boolean = false;\n  @Prop() disabled?: boolean = false;\n  @Prop() customStyle?: { [key: string]: string };\n\n  render() {\n    const {\n      label,\n      radioId,\n      icon,\n      name,\n      disabled,\n      checked,\n      customStyle,\n    } = this;\n    const radioLabelClass = clsx(\n      'radioLabel',\n      disabled && 'disabled',\n      checked && 'checked',\n    );\n\n    return (\n      <label\n        htmlFor={radioId}\n        tabIndex={0}\n        class={radioLabelClass}\n        style={customStyle}\n      >\n        <input\n          type='radio'\n          class='inputClass'\n          id={radioId}\n          name={name}\n          value={label}\n          disabled={disabled}\n          tabIndex={0}\n          checked={checked}\n        />\n        <div class='spanContainer'>\n          <span>{icon && <ls-icon name={icon} size={\"16\"}></ls-icon>}</span>\n          <span>{label}</span>\n        </div>\n      </label>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,eAAe,GAAG,qgCAAqgC;;MCShhC,YAAY,GAAA,MAAA;;;;AACf,IAAA,OAAO;AACP,IAAA,KAAK;AACL,IAAA,IAAI;IACJ,IAAI,GAAY,MAAM;IACtB,OAAO,GAAY,KAAK;IACxB,QAAQ,GAAa,KAAK;AAC1B,IAAA,WAAW;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,GAAG,IAAI;AACR,QAAA,MAAM,eAAe,GAAG,IAAI,CAC1B,YAAY,EACZ,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,SAAS,CACrB;AAED,QAAA,QACE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,WAAW,EAAA,EAElB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAY,CAAQ,EAClE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,KAAK,CAAQ,CAChB,CACA;;;;;;;"}

package/dist/ls-document-viewer/ls-radio-input.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h } from './index-Cjn1MNt-.js';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+
+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: '868f3eaea04d42145146300976af808424127571', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: 'd493afae95f872a28bab84afed3b8553163311e0', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: '4c3aea6b3845f8168927be3d3377d26a14e24ffa', class: 'spanContainer' }, h("span", { key: '1b34ab675781305a2818eb5076f227f5f506a87a' }, icon && h("ls-icon", { key: '9db3bced5765ec9a5efaed3398966506e9f72171', name: icon, size: "16" })), h("span", { key: 'f9cf5a3b4f43b304c4f23b9be67f20408ebbb2c2' }, label))));
+    }
+};
+LsRadioInput.style = lsRadioInputCss;
+
+export { LsRadioInput as ls_radio_input };
+//# sourceMappingURL=ls-radio-input.entry.esm.js.map
+
+//# sourceMappingURL=ls-radio-input.entry.js.map

package/dist/ls-document-viewer/ls-radio-input.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-radio-input.entry.esm.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,qgCAAqgC;;MCShhC,YAAY,GAAA,MAAA;;;;AACf,IAAA,OAAO;AACP,IAAA,KAAK;AACL,IAAA,IAAI;IACJ,IAAI,GAAY,MAAM;IACtB,OAAO,GAAY,KAAK;IACxB,QAAQ,GAAa,KAAK;AAC1B,IAAA,WAAW;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,GAAG,IAAI;AACR,QAAA,MAAM,eAAe,GAAG,IAAI,CAC1B,YAAY,EACZ,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,SAAS,CACrB;AAED,QAAA,QACE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,WAAW,EAAA,EAElB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAY,CAAQ,EAClE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,KAAK,CAAQ,CAChB,CACA;;;;;;;","names":[],"sources":["src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.css?tag=ls-radio-input","src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.tsx"],"sourcesContent":[".radioLabel{\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border-radius: 0.5rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.radioLabel.checked {\n  background-color: var(--primary-10);\n  border-color: var(--primary-20);\n  color: var(--primary-90)\n}\n\n.radioLabel:not(checked) {\n  color: var(--gray-90);\n  background-color: var(--gray-10);\n  border: 1px solid var(--gray-20);\n}\n\n.radioLabel.checked:hover {\n  border-color: var(--primary-30);\n  color: var(--primary-100);\n  \n}\n\n.radioLabel:not(.checked):not(.disabled):hover {\n  border-color: var(--gray-50);\n  color: var(--gray-100);\n}\n\n.radioLabel:focus:not(.disabled) {\n  box-shadow: var(--focus-box-shadow);\n  outline-offset: var(--focus-outline-offset);\n  outline: none;\n}\n\n.radioLabel.disabled {\n  cursor: not-allowed;\n}\n\n.radioLabel.disabled.checked {\n  background-color: var(--primary-10);\n  color: var(--primary-40);\n  border-color: var(--primary-40);\n}\n\n.radioLabel.disabled:not(.checked) {\n  background-color: var(--gray-10);\n  color: var(--gray-60);\n}\n\n.inputClass {\n  margin-top: 0px;\n}\n\n.inputClass:focus {\n  outline: none;\n}\n\n.inputClass:disabled {\n  cursor: not-allowed;\n}\n\n.spanContainer {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n}","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-radio-input',\n  styleUrl: 'ls-radio-input.css',\n  shadow: false,\n})\nexport class LsRadioInput {\n  @Prop() radioId: string;\n  @Prop() label: string;\n  @Prop() icon?: Icon;\n  @Prop() name?: string = 'name';\n  @Prop() checked: boolean = false;\n  @Prop() disabled?: boolean = false;\n  @Prop() customStyle?: { [key: string]: string };\n\n  render() {\n    const {\n      label,\n      radioId,\n      icon,\n      name,\n      disabled,\n      checked,\n      customStyle,\n    } = this;\n    const radioLabelClass = clsx(\n      'radioLabel',\n      disabled && 'disabled',\n      checked && 'checked',\n    );\n\n    return (\n      <label\n        htmlFor={radioId}\n        tabIndex={0}\n        class={radioLabelClass}\n        style={customStyle}\n      >\n        <input\n          type='radio'\n          class='inputClass'\n          id={radioId}\n          name={name}\n          value={label}\n          disabled={disabled}\n          tabIndex={0}\n          checked={checked}\n        />\n        <div class='spanContainer'>\n          <span>{icon && <ls-icon name={icon} size={\"16\"}></ls-icon>}</span>\n          <span>{label}</span>\n        </div>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-select-input.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-select-input.entry.esm.js","sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\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.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: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\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\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\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.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: 36px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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 } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-select-input',\n  styleUrl: 'ls-select-input.css',\n  shadow: false,\n})\nexport class LsSelectInput {\n  @Prop() name: string;\n  @Prop() value: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() displayOnly: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  // handleChange(event) {\n  //   this.value = event.target.value;\n  // }\n\n  render() {\n    const {\n      name,\n      aria,\n      disabled,\n      displayOnly,\n      required,\n      valid,\n      dirty,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n    } = this;\n\n    const inputClass = clsx(\n      'input-base',\n      disabled\n        ? 'disabled'\n        : dirty && valid\n          ? 'valid'\n          : dirty && !valid\n            ? 'invalid'\n            : displayOnly\n              ? 'displayOnly'\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        <select\n          class={inputClass}\n          id={name}\n          name={name}\n          aria-label={aria}\n          required={required}\n          disabled={disabled}\n        >\n          <slot />\n        </select>\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          ) : (<ls-icon\n            id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n            name={'chevron-down'}\n          ></ls-icon>) }\n        </div>\n      </host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,GAAA,MAAA;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;"}

package/dist/ls-document-viewer/ls-select-input.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h } from './index-Cjn1MNt-.js';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+
+const lsSelectInputCss = "* {\n  box-sizing: border-box;\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.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: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\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\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\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.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: 36px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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";
+
+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: 'a76decdabc8574d7cc1ad7cf6dc68a95b6bb2093', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'f796a7968ee39c3bdf38aee1844c600ac0bf8443', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: 'a7768bd2eac51d1ec84ebcb0933218b4880a7ebb', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '6f8da440955311e00f0de63d791f7250abd18704' })), h("div", { key: 'b3a7a36d4e21917da3a119bfac842842435cb898', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '0149df824b9deae3e22aa6ffe79c68594c6a3fd9', 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;
+
+export { LsSelectInput as ls_select_input };
+//# sourceMappingURL=ls-select-input.entry.esm.js.map
+
+//# sourceMappingURL=ls-select-input.entry.js.map

package/dist/ls-document-viewer/ls-select-input.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-select-input.entry.esm.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,GAAA,MAAA;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;","names":[],"sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\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.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: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\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\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\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.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: 36px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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 } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-select-input',\n  styleUrl: 'ls-select-input.css',\n  shadow: false,\n})\nexport class LsSelectInput {\n  @Prop() name: string;\n  @Prop() value: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() displayOnly: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  // handleChange(event) {\n  //   this.value = event.target.value;\n  // }\n\n  render() {\n    const {\n      name,\n      aria,\n      disabled,\n      displayOnly,\n      required,\n      valid,\n      dirty,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n    } = this;\n\n    const inputClass = clsx(\n      'input-base',\n      disabled\n        ? 'disabled'\n        : dirty && valid\n          ? 'valid'\n          : dirty && !valid\n            ? 'invalid'\n            : displayOnly\n              ? 'displayOnly'\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        <select\n          class={inputClass}\n          id={name}\n          name={name}\n          aria-label={aria}\n          required={required}\n          disabled={disabled}\n        >\n          <slot />\n        </select>\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          ) : (<ls-icon\n            id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n            name={'chevron-down'}\n          ></ls-icon>) }\n        </div>\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-statusbar.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-statusbar.entry.esm.js","sources":["src/components/ls-statusbar/ls-statusbar.css?tag=ls-statusbar&encapsulation=shadow","src/components/ls-statusbar/ls-statusbar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: row;\n  bottom: 0px;\n  height: 47px;\n  min-height: 47px;\n  width: 100%;\n  background-color: rgb(205, 205, 205);\n  border-top: 2px outset rgb(208, 208, 208);\n}\n\nbutton {\n  border: 0;\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n* The zoom or scale level 100 === 100%.\n* {number}\n*/\n  @Prop({ mutable: true }) zoom: number\n\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value)\n    this.zoom = value\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById(\"zoomRange\") as HTMLInputElement\n    console.log(Math.floor(parseInt(zoomInput.value) / 100))\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700)\n\n  }\n\n  fitWidth() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame')\n    this.setZoom(frame.clientWidth / this.editor.pageDimensions[0].width)\n  }\n\n\n  fitHeight() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame')\n    this.setZoom(frame.clientHeight / this.editor.pageDimensions[0].height)\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom\n  }\n\n  render() {\n    return (\n      <Host>\n\n        <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button>\n\n\n        <button onClick={() => this.fitWidth()}><ls-icon name=\"fit-width\" /></button>\n        <button onClick={() => this.fitHeight()}><ls-icon name=\"fit-height\" /></button>\n        <button onClick={() => { this.editor.pagePrev() }}><ls-icon name=\"arrow-left\" /></button>\n        <button onClick={() => { this.editor.pageNext() }}><ls-icon name=\"arrow-right\" /></button>\n\n\n        <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}><ls-icon name=\"zoom-out\" /></button>\n        <div><input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} /></div>\n        <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}><ls-icon name=\"zoom-in\" /></button>\n\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/ls-document-viewer/ls-statusbar.entry.js

@@ -0,0 +1,50 @@
+import { r as registerInstance, d as getElement, h, e as Host } from './index-Cjn1MNt-.js';
+import { d as debounce } from './editorUtils-CFWWEWrJ.js';
+
+const lsStatusbarCss = ":host{display:flex;flex-direction:row;bottom:0px;height:47px;min-height:47px;width:100%;background-color:rgb(205, 205, 205);border-top:2px outset rgb(208, 208, 208)}button{border:0}";
+
+const LsStatusbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get component() { return getElement(this); }
+    /**
+  * The zoom or scale level 100 === 100%.
+  * {number}
+  */
+    zoom;
+    /**
+  * The parent editor control.
+  * {LsDocumentViewer}
+  */
+    editor;
+    setZoom(value) {
+        this.editor.setZoom(value);
+        this.zoom = value;
+    }
+    handleZoomInput() {
+        const zoomInput = this.component.shadowRoot.getElementById("zoomRange");
+        console.log(Math.floor(parseInt(zoomInput.value) / 100));
+        debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);
+    }
+    fitWidth() {
+        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
+        this.setZoom(frame.clientWidth / this.editor.pageDimensions[0].width);
+    }
+    fitHeight() {
+        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
+        this.setZoom(frame.clientHeight / this.editor.pageDimensions[0].height);
+    }
+    componentDidLoad() {
+        this.zoom = this.editor.zoom;
+    }
+    render() {
+        return (h(Host, { key: 'b95446e09483c187ae18323659cb15fbaa556628' }, h("button", { key: '6619aae12a619b9839ca8d0869024bba1d30437a', onClick: () => this.editor.displayTable = true }, h("ls-icon", { key: '43d64cc63e88fac42eaf8a0a17ea4c15ca7e15cb', name: "table" })), h("button", { key: '76913cf3cab4a47c3e72df2bc927c9e2112247cd', onClick: () => this.editor.displayTable = false }, h("ls-icon", { key: '0ba35b608484dc842bbc76c83af8d1b017f61adc', name: "template" })), h("button", { key: '85cf6a4497bef5bc9757836788931e2c52da3462', onClick: () => this.fitWidth() }, h("ls-icon", { key: '410104a377ae387b5cd70a08b92073c2eb3cbe46', name: "fit-width" })), h("button", { key: '9095791508b75cd8604e2f2a154ac74d3a5fac63', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'edae7ec77d581ed7c7091718aab021c81c826da5', name: "fit-height" })), h("button", { key: '9f61c8f22845ba438ca24e34c5750ad5911c9e6d', onClick: () => { this.editor.pagePrev(); } }, h("ls-icon", { key: '51742295b1b81900cad284e31a2cd7211da1cb48', name: "arrow-left" })), h("button", { key: '92b8b0f942b0922beb018f30b4591df96a0886ec', onClick: () => { this.editor.pageNext(); } }, h("ls-icon", { key: '19314267df935920db7f9281d3e5b9a36fd7f439', name: "arrow-right" })), h("button", { key: '3c375b0d1d1dcaed55ded87c606e6e3abfba8834', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '88c4ee79ba4b8f082d273b72f7be14d0f3526845', name: "zoom-out" })), h("div", { key: '7e264fd6daa06f546c7bb19b3f34caa570705899' }, h("input", { key: '95392f84583a468376f28b80e39fabef7f527008', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '791824a0052eb32f3152ba1202add301abbd1312', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '889fb5b382d8c328ba9f583b913477df3d172104', name: "zoom-in" })), h("slot", { key: '3e45fac107893f17c0f3e6e18757173577c5afe5' })));
+    }
+};
+LsStatusbar.style = lsStatusbarCss;
+
+export { LsStatusbar as ls_statusbar };
+//# sourceMappingURL=ls-statusbar.entry.esm.js.map
+
+//# sourceMappingURL=ls-statusbar.entry.js.map

package/dist/ls-document-viewer/ls-statusbar.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-statusbar.entry.esm.js","mappings":"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","names":[],"sources":["src/components/ls-statusbar/ls-statusbar.css?tag=ls-statusbar&encapsulation=shadow","src/components/ls-statusbar/ls-statusbar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: row;\n  bottom: 0px;\n  height: 47px;\n  min-height: 47px;\n  width: 100%;\n  background-color: rgb(205, 205, 205);\n  border-top: 2px outset rgb(208, 208, 208);\n}\n\nbutton {\n  border: 0;\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n* The zoom or scale level 100 === 100%.\n* {number}\n*/\n  @Prop({ mutable: true }) zoom: number\n\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value)\n    this.zoom = value\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById(\"zoomRange\") as HTMLInputElement\n    console.log(Math.floor(parseInt(zoomInput.value) / 100))\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700)\n\n  }\n\n  fitWidth() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame')\n    this.setZoom(frame.clientWidth / this.editor.pageDimensions[0].width)\n  }\n\n\n  fitHeight() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame')\n    this.setZoom(frame.clientHeight / this.editor.pageDimensions[0].height)\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom\n  }\n\n  render() {\n    return (\n      <Host>\n\n        <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button>\n\n\n        <button onClick={() => this.fitWidth()}><ls-icon name=\"fit-width\" /></button>\n        <button onClick={() => this.fitHeight()}><ls-icon name=\"fit-height\" /></button>\n        <button onClick={() => { this.editor.pagePrev() }}><ls-icon name=\"arrow-left\" /></button>\n        <button onClick={() => { this.editor.pageNext() }}><ls-icon name=\"arrow-right\" /></button>\n\n\n        <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}><ls-icon name=\"zoom-out\" /></button>\n        <div><input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} /></div>\n        <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}><ls-icon name=\"zoom-in\" /></button>\n\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-text-input.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-text-input.entry.esm.js","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: 36px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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, Host, Prop, State, h } 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\n  @State() showPassword: boolean = false;\n\n  handlePassword = () => {\n    this.showPassword = !this.showPassword;\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          ></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          />\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          ></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"],"names":[],"mappings":"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"}

package/dist/ls-document-viewer/ls-text-input.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h, e as Host } from './index-Cjn1MNt-.js';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+
+const lsTextInputCss = "* {\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: 36px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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: 28px;\n  width: 28px;\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";
+
+const LsTextInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    type = 'default';
+    name;
+    value;
+    placeholder;
+    aria;
+    inputRef;
+    disabled;
+    required;
+    valid;
+    dirty;
+    countMax;
+    buttonClick;
+    buttonIcon;
+    fieldIcon;
+    showPassword = false;
+    handlePassword = () => {
+        this.showPassword = !this.showPassword;
+    };
+    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: '6462187da506b6cd1adb89f00247097c2f3c5416', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'c80abd9b78a54b31a827851d637c845aaebea0dc', 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 })) : type === 'displayonly' ? (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true })) : (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })), h("div", { key: '61739c02c2de93f0dcfd55dce6e72cb6cc973af7', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '9d9966564af4d40bf4c1b67e7c97426b7985a105', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: 'fb91b8562c4d946625a02da2e4f3661c047b1df6', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '5c791544181981b821be4723ee60e525bbe246a6', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '4ddbf5b44cde5fe4d4a8babfeda0c915e21bef5e', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
+    }
+};
+LsTextInput.style = lsTextInputCss;
+
+export { LsTextInput as ls_text_input };
+//# sourceMappingURL=ls-text-input.entry.esm.js.map
+
+//# sourceMappingURL=ls-text-input.entry.js.map