legalesign-document-viewer 0.4.9 → 0.5.0

package/dist/components/p-BbRzNkJ-.js

@@ -0,0 +1,363 @@
+import { t as transformTag, p as proxyCustomElement, H, h } from './p-BhZ5Udbm.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { d as defineCustomElement$1 } from './p-D95fiMAP.js';
+
+const lsNumberInputCss = () => `* {
+  box-sizing: border-box;
+  font-family:
+    'IBM Plex Sans',
+    sans-serif;
+  margin: 0;
+}
+
+.host {
+  display: flex;
+  width: 100%;
+  padding: 0.25rem;
+  align-items: flex-start;
+  gap: 0.25rem;
+  border-radius: 0.625rem;
+  border: 1px solid var(--Grey-20, #edeff2);
+  background: var(--Grey-10, #f7f8fa);
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#fieldIcon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.75rem;
+  color: var(--gray-80);
+}
+
+#fieldIconDisabled {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.75rem;
+  color: var(--gray-60);
+}
+
+#password-icon {
+  padding-right: 0.25rem;
+}
+
+.icon-input {
+  padding-left: 2.5rem !important;
+}
+
+.button-input {
+  padding-right: 2.5rem !important;
+}
+
+.right-items-input {
+  padding-right: 4rem !important;
+}
+
+.input-basic {
+  display: flex;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.input-ls {
+  display: flex;
+  width: 100%;
+  height: 1.75rem;
+  padding: 0 0.5rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.375rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+
+
+}
+
+.input-ls::-webkit-outer-spin-button,
+.input-ls::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input-ls {
+  -moz-appearance: textfield;
+}
+
+input-base:active:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+input:focus:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+.default {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-100);
+}
+
+.default:hover {
+  border: 1px solid var(--gray-50, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-110);
+}
+
+.disabled {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-60);
+  cursor: not-allowed;
+}
+
+.display-only {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-100);
+  cursor: not-allowed;
+}
+
+.invalid {
+  border: 1px solid var(--red-40, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.invalid:hover {
+  border: 1px solid var(--red-50, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.valid {
+  border: 1px solid var(--green-40, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.valid:hover {
+  border: 1px solid var(--green-50, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.right-items {
+  position: absolute;
+  padding: 0.25rem;
+  height: 2.25rem;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+#invalidIcon {
+  margin: 0 0.5rem;
+  color: var(--red-70);
+}
+
+#validIcon {
+  margin: 0 0.5rem;
+  color: var(--green-60);
+}
+
+.button {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-90);
+  }
+}
+
+.button-disabled {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-=10, #F7F8FA);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  cursor: not-allowed;
+
+  #buttonIcon {
+    color: var(--gray-70);
+  }
+}
+
+.button:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-20, #edeff2);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:active {
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:focus {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+`;
+
+const LsNumberInput = /*@__PURE__*/ proxyCustomElement(class LsNumberInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    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: '16b2658c62a3ea3de4f55ef91fd669677506e1fe', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: 'c1ac4489e1eae6a84a56bff53d22dc7a33d7d4a4', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '8db14a1fd8fad4907c73dd2a41a1e584ddd02914', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: 'f612a83f625cb10b7e11249b281be587c92e783c', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: 'e737ac19586a0a5bca2f1caaf18b1f68b25c9c03', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '2f8681769df8a8affc62f0744e198896eb893ffb', 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: '3f175e8ed586f731c62d81b286cc3fa198ae8e4b', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '451f88055782062684466fe084477eb675eaec62', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '0699154beaa0964a71b0e378c76853f8bd1832fc', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'edad9c88e963bba30a8f6e3ccd7dc5c9646828bb', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: '2b263884f201f422652393f95e486e51a6e369fb', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: '57dcfe868a3865e0b9b5a9930596a8c758513723', id: 'buttonIcon', name: 'plus-sm' })))));
+    }
+    static get style() { return lsNumberInputCss(); }
+}, [769, "ls-number-input", {
+        "type": [1],
+        "name": [1],
+        "value": [1026],
+        "placeholder": [1],
+        "aria": [1],
+        "inputRef": [1, "input-ref"],
+        "disabled": [4],
+        "required": [4],
+        "valid": [4],
+        "dirty": [4],
+        "countMax": [2, "count-max"],
+        "buttonClick": [8, "button-click"],
+        "buttonIcon": [1, "button-icon"],
+        "fieldIcon": [1, "field-icon"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-number-input", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-number-input":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsNumberInput);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsNumberInput as L, defineCustomElement as d };
+//# sourceMappingURL=p-BbRzNkJ-.js.map
+
+//# sourceMappingURL=p-BbRzNkJ-.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BbRzNkJ-.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC;AAChC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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","names":["__stencil_proxyCustomElement","HTMLElement"],"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: 2.25rem;\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: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button-disabled {\n  display: flex;\n  height: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-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: 1.75rem;\n  width: 1.75rem;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\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/components/{p-8ubyIwnl.js → p-BcSJFRsU.js}

@@ -1,13 +1,15 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
-import { d as defaultRolePalette } from './p-CwCWCxsI.js';
-import { d as defineCustomElement$1 } from './p-95nSEls8.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defaultRolePalette } from './p-BKrsDBDB.js';
+import { d as defineCustomElement$1 } from './p-D95fiMAP.js';
 
-const lsParticipantSelectCss = ":host{display:inline-block}*{margin:0}.dropdown{display:flex;align-items:center;position:relative}.dropdown-header{border-radius:0.625rem;border:1px solid var(--gray-20, #edeff2);background:var(--gray-10, #f7f8fa);display:flex;padding:0.125rem 0.125rem 0.125rem 0.5rem;align-items:center;gap:0.5rem}.placing-fields-text{color:var(--gray-90, #5e6066);text-align:center;font-size:0.875rem;font-style:normal;font-weight:500;margin:0}.selected-role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.dropdown-list{position:absolute;top:3rem;left:50%;transform:translateX(-50%);display:flex;width:18.5625rem;padding:0.25rem;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid var(--gray-30, #e0e2e5);background:white;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:40vh;overflow-y:auto}.dropdown-item{display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.5rem}.dropdown-item.selected,.dropdown-item.selected:hover{background:var(--background-selected, #e0e2e5)}.dropdown-item:hover{background:var(--gray-10, #f7f8fa)}.add-participant-row{all:unset;display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.5rem;border:1px dashed var(--gray-30, #e0e2e5);cursor:pointer}.add-participant-row:hover{background:var(--gray-10, #f7f8fa)}.plus-icon{color:var(--gray-40, #d8d9dc)}.role-icon{display:flex;padding:0.5rem;border-radius:0.625rem}.add-participant-icon{display:flex;padding:0.5rem;border-radius:0.625rem;color:white;background:var(--primary-60, #4456f6)}.role-text{display:flex;flex-direction:column;width:100%}.dropdown-item .check-icon{color:var(--gray-40, #d8d9dc)}.dropdown-item.selected .check-icon{color:var(--check-icon-selected)}.role-name{color:var(--gray-100, #45484d);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem;}.role-type{color:var(--gray-80, #787a80);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.dropdown-item.selected .role-name{color:var(--role-name-selected)}.dropdown-item.selected .role-type{color:var(--role-type-selected)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}.expand-button{border:0;cursor:pointer;display:inline-flex;align-items:center;border-radius:0.5rem;justify-content:center;text-transform:capitalize;min-height:2rem;min-width:2rem;max-height:2rem;max-width:2rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const lsParticipantSelectCss = () => `:host{display:inline-block}*{margin:0}.dropdown{display:flex;align-items:center;position:relative}.dropdown-header{border-radius:0.625rem;border:1px solid var(--gray-20, #edeff2);background:var(--gray-10, #f7f8fa);display:flex;padding:0.125rem 0.125rem 0.125rem 0.5rem;align-items:center;gap:0.5rem}.placing-fields-text{color:var(--gray-90, #5e6066);text-align:center;font-size:0.875rem;font-style:normal;font-weight:500;margin:0}.selected-role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.dropdown-list{position:absolute;top:3rem;left:50%;transform:translateX(-50%);display:flex;width:18.5625rem;padding:0.25rem;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid var(--gray-30, #e0e2e5);background:white;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:40vh;overflow-y:auto}.dropdown-item{display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.5rem}.dropdown-item.selected,.dropdown-item.selected:hover{background:var(--background-selected, #e0e2e5)}.dropdown-item:hover{background:var(--gray-10, #f7f8fa)}.add-participant-row{all:unset;display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.5rem;border:1px dashed var(--gray-30, #e0e2e5);cursor:pointer}.add-participant-row:hover{background:var(--gray-10, #f7f8fa)}.plus-icon{color:var(--gray-40, #d8d9dc)}.role-icon{display:flex;padding:0.5rem;border-radius:0.625rem}.add-participant-icon{display:flex;padding:0.5rem;border-radius:0.625rem;color:white;background:var(--primary-60, #4456f6)}.role-text{display:flex;flex-direction:column;width:100%}.dropdown-item .check-icon{color:var(--gray-40, #d8d9dc)}.dropdown-item.selected .check-icon{color:var(--check-icon-selected)}.role-name{color:var(--gray-100, #45484d);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem;}.role-type{color:var(--gray-80, #787a80);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.dropdown-item.selected .role-name{color:var(--role-name-selected)}.dropdown-item.selected .role-type{color:var(--role-type-selected)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}.expand-button{border:0;cursor:pointer;display:inline-flex;align-items:center;border-radius:0.5rem;justify-content:center;text-transform:capitalize;min-height:2rem;min-width:2rem;max-height:2rem;max-width:2rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
 
 const LsParticipantSelect = /*@__PURE__*/ proxyCustomElement(class LsParticipantSelect extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.roleChange = createEvent(this, "roleChange", 7);
         this.addParticipant = createEvent(this, "addParticipant", 7);
@@ -98,8 +100,8 @@ const LsParticipantSelect = /*@__PURE__*/ proxyCustomElement(class LsParticipant
     static get watchers() { return {
         "roles": ["handleRoleLoad"]
     }; }
-    static get style() { return lsParticipantSelectCss; }
-}, [257, "ls-participant-select", {
+    static get style() { return lsParticipantSelectCss(); }
+}, [769, "ls-participant-select", {
         "selected": [1025],
         "roles": [16],
         "selectedRole": [32],
@@ -114,12 +116,12 @@ function defineCustomElement() {
     const components = ["ls-participant-select", "ls-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-participant-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsParticipantSelect);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsParticipantSelect);
             }
             break;
         case "ls-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -128,6 +130,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsParticipantSelect as L, defineCustomElement as d };
-//# sourceMappingURL=p-8ubyIwnl.js.map
+//# sourceMappingURL=p-BcSJFRsU.js.map
 
-//# sourceMappingURL=p-8ubyIwnl.js.map
+//# sourceMappingURL=p-BcSJFRsU.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BcSJFRsU.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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\n* {\n  margin: 0;\n}\n\n.dropdown {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.dropdown-header {\n  border-radius: 0.625rem;\n  border: 1px solid var(--gray-20, #edeff2);\n  background: var(--gray-10, #f7f8fa);\n  display: flex;\n  padding: 0.125rem 0.125rem 0.125rem 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.placing-fields-text {\n  color: var(--gray-90, #5e6066);\n  text-align: center;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  margin: 0;\n}\n\n.selected-role-label {\n  display: flex;\n  padding: 0.125rem 0.375rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.25rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.dropdown-list {\n  position: absolute;\n  top: 3rem;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  width: 18.5625rem;\n  padding: 0.25rem;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.75rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: white;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  max-height: 40vh;\n  overflow-y: auto;\n}\n\n.dropdown-item {\n  display: flex;\n  padding: 0.5rem 0.875rem 0.5rem 0.5rem;\n  align-items: center;\n  gap: 0.75rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n}\n\n.dropdown-item.selected,\n.dropdown-item.selected:hover {\n  background: var(--background-selected, #e0e2e5);\n}\n\n.dropdown-item:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.add-participant-row {\n  all: unset;\n  display: flex;\n  padding: 0.5rem 0.875rem 0.5rem 0.5rem;\n  align-items: center;\n  gap: 0.75rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  border: 1px dashed var(--gray-30, #e0e2e5);\n  cursor: pointer;\n}\n\n.add-participant-row:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.plus-icon {\n  color: var(--gray-40, #d8d9dc);\n}\n\n.role-icon {\n  display: flex;\n  padding: 0.5rem;\n  border-radius: 0.625rem;\n}\n\n.add-participant-icon {\n  display: flex;\n  padding: 0.5rem;\n  border-radius: 0.625rem;\n  color: white;\n  background: var(--primary-60, #4456f6);\n}\n\n.role-text {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.dropdown-item .check-icon {\n  color: var(--gray-40, #d8d9dc);\n}\n\n.dropdown-item.selected .check-icon {\n  color: var(--check-icon-selected);\n}\n\n.role-name {\n  color: var(--gray-100, #45484d);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1rem; /* 133.333% */\n}\n\n.role-type {\n  color: var(--gray-80, #787a80);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.dropdown-item.selected .role-name {\n  color: var(--role-name-selected);\n}\n\n.dropdown-item.selected .role-type {\n  color: var(--role-type-selected);\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\n.expand-button {\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.5rem;\n  justify-content: center;\n  text-transform: capitalize;\n  min-height: 2rem;\n  min-width: 2rem;\n  max-height: 2rem;\n  max-width: 2rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-participant-select',\n  styleUrl: 'ls-participant-select.css',\n  shadow: true,\n})\nexport class LsParticipantSelect {\n  /**\n * The id of the currently selected role.\n * {string}\n */\n  @Prop({ mutable: true}) selected: string;\n  \n  /**\n   * The currently selected role.\n   * {number}\n   */\n  @State() selectedRole: { signerIndex: number; name: string; roleType?: string; default: boolean } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };\n\n  @Watch('roles')\n  handleRoleLoad() {\n    if(this.selectedRole.default) {\n      if(this.roles.length > 0) {\n        const initialRole = this.roles.find(r => r.signerIndex === 1);\n        if(initialRole) {\n          this.selectedRole = { ...initialRole, default: false };\n        }\n      }\n    } else {\n      const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);\n      if(updatedRole) {\n        this.selectedRole = { ...updatedRole, default: false };\n      }\n    }\n  }\n  /**\n   * The current template roles.\n   * {LSApiRole}\n   */\n  @Prop() roles?: LSApiRole[] = [];\n\n  @State() isOpen: boolean = false;\n\n\n  toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Event() roleChange: EventEmitter<number>;\n\n  @Event({\n    bubbles: true,\n    composed: true,\n  }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string | null}>;\n\n\n  selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n    this.selectedRole = { ...role, default: false };\n    this.isOpen = false;\n    this.roleChange.emit(role.signerIndex);\n  }\n\n  createHandler() {\n    this.addParticipant.emit({type: 'SIGNER'});\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"dropdown\">\n          <div class=\"dropdown-header\" onClick={this.toggleDropdown}>\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z\" fill=\"#78A3FA\" stroke=\"#F7F8FA\" />\n              <path\n                d=\"M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z\"\n                fill=\"#46DBAA\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z\"\n                fill=\"#FAD232\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n                stroke=\"#939599\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n            <p class={'placing-fields-text'}>Placing Fields for</p>\n            <div\n              class={'selected-role-label'}\n              style={{\n                background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n                color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n              }}\n            >\n              <ls-icon\n                size=\"1.125rem\"\n                name={\n                  this.selectedRole?.roleType === 'SENDER'\n                    ? 'user'\n                    : this.selectedRole?.roleType === 'APPROVER'\n                      ? 'check-circle'\n                      : this.selectedRole?.roleType === 'WITNESS'\n                        ? 'eye'\n                        : 'signature'\n                }\n              />\n              {this.selectedRole.name ||\n                (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n            </div>\n            <button class={'tertiaryGrey expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n              <ls-icon name=\"chevron-down\"></ls-icon>\n            </button>\n          </div>\n          {this.isOpen && (\n            <div class=\"dropdown-list\">\n              \n              <div\n                class={this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item'}\n                style={{\n                  '--background-selected': defaultRolePalette[0].s10,\n                  '--check-icon-selected': defaultRolePalette[0].s50,\n                }}\n                onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n                onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n                onMouseLeave={e =>\n                  (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n                }\n              >\n                <div\n                  class={'role-icon'}\n                  style={{\n                    background: defaultRolePalette[0].s50,\n                    color: defaultRolePalette[0].s80,\n                  }}\n                >\n                  <ls-icon name=\"user\" />\n                </div>\n                <div class={'role-text'}>\n                  <p\n                    class={'role-name'}\n                    style={{\n                      '--role-name-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    {'Sender'}\n                  </p>\n                  <p\n                    class={'role-type'}\n                    style={{\n                      '--role-type-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    You\n                  </p>\n                </div>\n\n                <ls-icon class={'check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n              </div>\n              {this.roles.map(r => (\n                <div\n                  class={r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item'}\n                  style={{\n                    '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n                    '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n                  }}\n                  onClick={() => this.selectRole(r)}\n                  onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n                  onMouseLeave={e =>\n                    (e.currentTarget as HTMLElement)\n                      .querySelector('.check-icon')\n                      ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n                  }\n                >\n                  <div\n                    class={'role-icon'}\n                    style={{\n                      background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n                      color: defaultRolePalette[r?.signerIndex % 100].s90,\n                    }}\n                  >\n                    <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n                  </div>\n                  <div class={'role-text'}>\n                    <p\n                      class={'role-name'}\n                      style={{\n                        '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n                      }}\n                    >\n                      {r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)}\n                    </p>\n                    <p\n                      class={'role-type'}\n                      style={{\n                        '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n                      }}\n                    >\n                      {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n                    </p>\n                  </div>\n                  <ls-icon\n                    class={'check-icon'}\n                    name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n                    solid={r.signerIndex === this.selectedRole?.signerIndex}\n                  />\n                </div>\n              ))}\n              <button\n                onClick={() => this.createHandler()}\n                class={'add-participant-row'}\n                style={{\n                  '--background-selected': defaultRolePalette[1].s10,\n                  '--check-icon-selected': defaultRolePalette[1].s50,\n                }}\n              >\n                <div\n                  class={'add-participant-icon'}\n                >\n                  <ls-icon name=\"user-add\" />\n                </div>\n                <div class={'role-text'}>\n                  <p class={'role-name'}>Add Participant</p>\n                  <p class={'role-type'}>Add a new Signer</p>\n                </div>\n                <ls-icon class={'plus-icon'} name=\"plus\" />\n              </button>\n            </div>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}