legalesign-document-viewer 0.3.5 → 0.3.6

package/dist/components/ls-formfield.js

@@ -0,0 +1,143 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BvHSBTD8.js';
+import { d as defineCustomElement$7 } from './p-DdA-gazu.js';
+import { d as defineCustomElement$6 } from './p-D0Dhti1c.js';
+import { d as defineCustomElement$5 } from './p-D81uQuBt.js';
+import { d as defineCustomElement$4 } from './p-CPWE3RPb.js';
+import { d as defineCustomElement$3 } from './p-ehKlmMJ5.js';
+import { d as defineCustomElement$2 } from './p-BhKW6QAV.js';
+
+const lsFormfieldCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n";
+
+const LsFormfield$1 = /*@__PURE__*/ proxyCustomElement(class LsFormfield extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    name;
+    fieldId;
+    label;
+    as = 'text';
+    value;
+    placeholder;
+    descriptionText;
+    errorText;
+    aria;
+    inputRef;
+    infoTooltipText;
+    hoverTooltipText;
+    disabled;
+    extraLabel = 'none';
+    required;
+    valid;
+    dirty;
+    count;
+    countMax;
+    buttonClick;
+    buttonIcon;
+    labelIcon;
+    fieldIcon;
+    valueChange;
+    changeHandler(value) {
+        this.valueChange.emit(value);
+    }
+    _value;
+    valueWatcher(newValue) {
+        this._value = newValue;
+        console.log(newValue);
+    }
+    componentWillLoad() {
+        this.valueWatcher(this?.value?.toString());
+    }
+    render() {
+        const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
+        const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
+        return (h("host", { key: '751c2bce2dd9d05800eba33cbf1c826d307eb40e', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (h("div", { key: '2cd1af867dc2572f30719ac0760bcabb4ae0b793', class: "formfield-top-elements" }, h("div", { key: '635a86377fce964c4cc7e34413bbd4e0323991f7', class: "formfield-left-side" }, labelIcon && h("ls-icon", { key: '3dd76c5d2ac7d6d1fa81c23ba31bcb10a63682f6', name: labelIcon }), h("label", { key: '7637a7970abddb45b1b213ee43873a3caa7c3f9d', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && h("ls-icon", { key: '3356f446ae116fd86f3d16f3b6d69819a1286776', name: 'information-circle' })), extraLabel === 'optional' ? (h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onValueChange: (e) => { this.changeHandler(e.detail); } })) : as === 'select' ? (h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, h("slot", null))) : as === 'radio' ? (h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (h("p", null, "placeholder")), errorText ||
+            count ||
+            countMax ||
+            (descriptionText && (h("div", { key: 'b5adcbdceb4b7cdcd022a10c90626796f26c476b', class: "formfield-bottom-elements" }, errorText && !valid ? h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (h("div", { key: 'a182587f050dab77ac5606f6c3a0a9b49720304b', class: "formfield-count-container" }, h("p", { key: 'd2241d9aee1ce707f8af49da617ee4c65201df5e', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: '48374a5c2edcbf0edf76161d9194adff6f18299c', class: countClass }, h("p", { key: '09c78bb107de6460f3d2b99b2095198444296fd3' }, "/"), h("p", { key: '9a02e549117b208bedcb67df0e4e206361de8433' }, countMax))))))))));
+    }
+    static get watchers() { return {
+        "value": ["valueWatcher"]
+    }; }
+    static get style() { return lsFormfieldCss; }
+}, [260, "ls-formfield", {
+        "name": [1],
+        "fieldId": [1, "field-id"],
+        "label": [1],
+        "as": [1],
+        "value": [1032],
+        "placeholder": [1],
+        "descriptionText": [1, "description-text"],
+        "errorText": [1, "error-text"],
+        "aria": [1],
+        "inputRef": [1, "input-ref"],
+        "infoTooltipText": [1, "info-tooltip-text"],
+        "hoverTooltipText": [1, "hover-tooltip-text"],
+        "disabled": [4],
+        "extraLabel": [1, "extra-label"],
+        "required": [4],
+        "valid": [4],
+        "dirty": [4],
+        "count": [4],
+        "countMax": [2, "count-max"],
+        "buttonClick": [16, "button-click"],
+        "buttonIcon": [1, "button-icon"],
+        "labelIcon": [1, "label-icon"],
+        "fieldIcon": [1, "field-icon"],
+        "_value": [32]
+    }, undefined, {
+        "value": ["valueWatcher"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-formfield", "ls-icon", "ls-number-input", "ls-radio-input", "ls-select-input", "ls-text-input", "ls-textarea-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-formfield":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsFormfield$1);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ls-number-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-radio-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-textarea-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const LsFormfield = LsFormfield$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsFormfield, defineCustomElement };
+//# sourceMappingURL=ls-formfield.js.map
+
+//# sourceMappingURL=ls-formfield.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { L as LsHelperBar$1, d as defineCustomElement$1 } from './p-Cvpba_Hj.js';
+
+const LsHelperBar = LsHelperBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsHelperBar, defineCustomElement };
+//# sourceMappingURL=ls-helper-bar.js.map
+
+//# sourceMappingURL=ls-helper-bar.js.map

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

@@ -0,0 +1 @@
+{"file":"ls-helper-bar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-icon.js

@@ -0,0 +1,9 @@
+import { L as LsIcon$1, d as defineCustomElement$1 } from './p-DdA-gazu.js';
+
+const LsIcon = LsIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsIcon, defineCustomElement };
+//# sourceMappingURL=ls-icon.js.map
+
+//# sourceMappingURL=ls-icon.js.map

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

@@ -0,0 +1 @@
+{"file":"ls-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-input-wrapper.js

@@ -0,0 +1,9 @@
+import { L as LsInputWrapper$1, d as defineCustomElement$1 } from './p-ChsJHskx.js';
+
+const LsInputWrapper = LsInputWrapper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsInputWrapper, defineCustomElement };
+//# sourceMappingURL=ls-input-wrapper.js.map
+
+//# sourceMappingURL=ls-input-wrapper.js.map

package/dist/components/ls-input-wrapper.js.map

@@ -0,0 +1 @@
+{"file":"ls-input-wrapper.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-keyboard-shortcuts.js

@@ -0,0 +1,9 @@
+import { L as LsKeyboardShortcuts$1, d as defineCustomElement$1 } from './p-DXhpjcQC.js';
+
+const LsKeyboardShortcuts = LsKeyboardShortcuts$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsKeyboardShortcuts, defineCustomElement };
+//# sourceMappingURL=ls-keyboard-shortcuts.js.map
+
+//# sourceMappingURL=ls-keyboard-shortcuts.js.map

package/dist/components/ls-keyboard-shortcuts.js.map

@@ -0,0 +1 @@
+{"file":"ls-keyboard-shortcuts.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-number-input.js

@@ -0,0 +1,9 @@
+import { L as LsNumberInput$1, d as defineCustomElement$1 } from './p-D0Dhti1c.js';
+
+const LsNumberInput = LsNumberInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsNumberInput, defineCustomElement };
+//# sourceMappingURL=ls-number-input.js.map
+
+//# sourceMappingURL=ls-number-input.js.map

package/dist/components/ls-number-input.js.map

@@ -0,0 +1 @@
+{"file":"ls-number-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-page-loader.js

@@ -0,0 +1,9 @@
+import { L as LsPageLoader$1, d as defineCustomElement$1 } from './p-DmRC_Wu_.js';
+
+const LsPageLoader = LsPageLoader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsPageLoader, defineCustomElement };
+//# sourceMappingURL=ls-page-loader.js.map
+
+//# sourceMappingURL=ls-page-loader.js.map

package/dist/components/ls-page-loader.js.map

@@ -0,0 +1 @@
+{"file":"ls-page-loader.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-participant-card.js

@@ -0,0 +1,9 @@
+import { L as LsParticipantCard$1, d as defineCustomElement$1 } from './p-C0DxZPf7.js';
+
+const LsParticipantCard = LsParticipantCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsParticipantCard, defineCustomElement };
+//# sourceMappingURL=ls-participant-card.js.map
+
+//# sourceMappingURL=ls-participant-card.js.map

package/dist/components/ls-participant-card.js.map

@@ -0,0 +1 @@
+{"file":"ls-participant-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-participant-manager.js

@@ -0,0 +1,9 @@
+import { L as LsParticipantManager$1, d as defineCustomElement$1 } from './p-BKpv-kC8.js';
+
+const LsParticipantManager = LsParticipantManager$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsParticipantManager, defineCustomElement };
+//# sourceMappingURL=ls-participant-manager.js.map
+
+//# sourceMappingURL=ls-participant-manager.js.map

package/dist/components/ls-participant-manager.js.map

@@ -0,0 +1 @@
+{"file":"ls-participant-manager.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-participant-select.js

@@ -0,0 +1,9 @@
+import { L as LsParticipantSelect$1, d as defineCustomElement$1 } from './p-D1G_SpA3.js';
+
+const LsParticipantSelect = LsParticipantSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsParticipantSelect, defineCustomElement };
+//# sourceMappingURL=ls-participant-select.js.map
+
+//# sourceMappingURL=ls-participant-select.js.map

package/dist/components/ls-participant-select.js.map

@@ -0,0 +1 @@
+{"file":"ls-participant-select.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-props-section.js

@@ -0,0 +1,9 @@
+import { L as LsPropsSection$1, d as defineCustomElement$1 } from './p-DmpTMpIK.js';
+
+const LsPropsSection = LsPropsSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsPropsSection, defineCustomElement };
+//# sourceMappingURL=ls-props-section.js.map
+
+//# sourceMappingURL=ls-props-section.js.map

package/dist/components/ls-props-section.js.map

@@ -0,0 +1 @@
+{"file":"ls-props-section.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-radio-input.js

@@ -0,0 +1,9 @@
+import { L as LsRadioInput$1, d as defineCustomElement$1 } from './p-D81uQuBt.js';
+
+const LsRadioInput = LsRadioInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsRadioInput, defineCustomElement };
+//# sourceMappingURL=ls-radio-input.js.map
+
+//# sourceMappingURL=ls-radio-input.js.map

package/dist/components/ls-radio-input.js.map

@@ -0,0 +1 @@
+{"file":"ls-radio-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-select-input.js

@@ -0,0 +1,9 @@
+import { L as LsSelectInput$1, d as defineCustomElement$1 } from './p-CPWE3RPb.js';
+
+const LsSelectInput = LsSelectInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsSelectInput, defineCustomElement };
+//# sourceMappingURL=ls-select-input.js.map
+
+//# sourceMappingURL=ls-select-input.js.map

package/dist/components/ls-select-input.js.map

@@ -0,0 +1 @@
+{"file":"ls-select-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-statusbar.js

@@ -0,0 +1,9 @@
+import { L as LsStatusbar$1, d as defineCustomElement$1 } from './p-0l2bXbFG.js';
+
+const LsStatusbar = LsStatusbar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsStatusbar, defineCustomElement };
+//# sourceMappingURL=ls-statusbar.js.map
+
+//# sourceMappingURL=ls-statusbar.js.map

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

@@ -0,0 +1 @@
+{"file":"ls-statusbar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-text-input.js

@@ -0,0 +1,9 @@
+import { L as LsTextInput$1, d as defineCustomElement$1 } from './p-ehKlmMJ5.js';
+
+const LsTextInput = LsTextInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsTextInput, defineCustomElement };
+//# sourceMappingURL=ls-text-input.js.map
+
+//# sourceMappingURL=ls-text-input.js.map

package/dist/components/ls-text-input.js.map

@@ -0,0 +1 @@
+{"file":"ls-text-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-textarea-input.js

@@ -0,0 +1,9 @@
+import { L as LsTextareaInput$1, d as defineCustomElement$1 } from './p-BhKW6QAV.js';
+
+const LsTextareaInput = LsTextareaInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsTextareaInput, defineCustomElement };
+//# sourceMappingURL=ls-textarea-input.js.map
+
+//# sourceMappingURL=ls-textarea-input.js.map

package/dist/components/ls-textarea-input.js.map

@@ -0,0 +1 @@
+{"file":"ls-textarea-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-toggle.js

@@ -0,0 +1,9 @@
+import { L as LsToggle$1, d as defineCustomElement$1 } from './p-DYigxUng.js';
+
+const LsToggle = LsToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsToggle, defineCustomElement };
+//# sourceMappingURL=ls-toggle.js.map
+
+//# sourceMappingURL=ls-toggle.js.map

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

@@ -0,0 +1 @@
+{"file":"ls-toggle.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-toolbar.js

@@ -0,0 +1,9 @@
+import { L as LsToolbar$1, d as defineCustomElement$1 } from './p-BMoeVwvV.js';
+
+const LsToolbar = LsToolbar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsToolbar, defineCustomElement };
+//# sourceMappingURL=ls-toolbar.js.map
+
+//# sourceMappingURL=ls-toolbar.js.map

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

@@ -0,0 +1 @@
+{"file":"ls-toolbar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -0,0 +1,9 @@
+import { L as LsToolboxField$1, d as defineCustomElement$1 } from './p-CEfaqMjm.js';
+
+const LsToolboxField = LsToolboxField$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsToolboxField, defineCustomElement };
+//# sourceMappingURL=ls-toolbox-field.js.map
+
+//# sourceMappingURL=ls-toolbox-field.js.map

package/dist/components/ls-toolbox-field.js.map

@@ -0,0 +1 @@
+{"file":"ls-toolbox-field.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-tooltip.js

@@ -0,0 +1,9 @@
+import { L as LsTooltip$1, d as defineCustomElement$1 } from './p-CZoubBus.js';
+
+const LsTooltip = LsTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsTooltip, defineCustomElement };
+//# sourceMappingURL=ls-tooltip.js.map
+
+//# sourceMappingURL=ls-tooltip.js.map

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

@@ -0,0 +1 @@
+{"file":"ls-tooltip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ls-validation-tag.js

@@ -0,0 +1,9 @@
+import { L as LsValidationTag$1, d as defineCustomElement$1 } from './p-Dns9yEdO.js';
+
+const LsValidationTag = LsValidationTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LsValidationTag, defineCustomElement };
+//# sourceMappingURL=ls-validation-tag.js.map
+
+//# sourceMappingURL=ls-validation-tag.js.map

package/dist/components/ls-validation-tag.js.map

@@ -0,0 +1 @@
+{"file":"ls-validation-tag.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/{ls-document-viewer/ls-statusbar.entry.js → components/p-0l2bXbFG.js}

@@ -1,14 +1,20 @@
-import { r as registerInstance, d as getElement, h, e as Host } from './index-Dlkip55O.js';
-import { h as debounce } from './editorUtils-BmgTspy1.js';
-import { a as attachAllTooltips } from './tooltip-Cb8nDMs-.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-BvHSBTD8.js';
+import { d as defineCustomElement$5, j as debounce } from './p-DZm_unSc.js';
+import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
+import { d as defineCustomElement$4 } from './p-Cvpba_Hj.js';
+import { d as defineCustomElement$3 } from './p-DdA-gazu.js';
+import { d as defineCustomElement$2 } from './p-DXhpjcQC.js';
+import { d as defineCustomElement$1 } from './p-CZoubBus.js';
 
 const lsStatusbarCss = ":host{position:fixed;z-index:1000;right:1rem;bottom:1rem;display:flex;flex-direction:row;gap:0.5rem;align-items:end;height:2.25rem;overflow:visible}.controls-bar{display:flex;flex-direction:row;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem}*{margin:0;padding:0;box-sizing:border-box}.status-bar-section{display:flex;flex-direction:row;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem}.controls-bar>:not(:nth-child(1)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}button:disabled{color:var(--gray-40, #c1c4c8);cursor:not-allowed}input[type=\"range\"]{-webkit-appearance:none;width:100%;height:8px;background:var(--gray-20, #EDEFF2);border-radius:5px;outline:none}input[type=\"range\"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:8px;height:8px;background:var(--gray-70, #4a4c51);border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-thumb{width:8px;height:8%;background:var(--gray-70, #4a4c51);border:none;border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}input[type=\"range\"]::-webkit-slider-runnable-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}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:36px}.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}button{all:unset;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-80, #6c6e73);text-transform:capitalize}button.tertiaryGrey:hover{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 LsStatusbar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const LsStatusbar = /*@__PURE__*/ proxyCustomElement(class LsStatusbar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
     }
-    get component() { return getElement(this); }
+    get component() { return this; }
     /**
      * The zoom or scale level 100 === 100%.
      * {number}
@@ -47,16 +53,60 @@ const LsStatusbar = class {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (h(Host, { key: '11e8316b093da7db9f92562fea7661bdc39d2d64' }, h("div", { key: '4c9f6b749dc9b2a883bff26015393595561b9d2b', class: 'controls-bar' }, h("div", { key: '7f5f24c6f990bcd99d7afa454c73e7dfae368d3c', class: 'status-bar-section' }, h("button", { key: '19302a36f44ed4aedec9a1219ac066ee28741b25', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip": "Zoom Out" }, h("ls-icon", { key: '4609dd8d5bdf136fc8a9977419ff0ad9f24d1640', name: "zoom-out" })), h("div", { key: '8750cf10eabcf56b30ed6ef8c45a07ec25c3e759' }, h("input", { key: '819bbc7b87242ef20739e5d239395ffe2ce23221', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: 'ad12178d5170f8a0feb04670fbbec136093caf1b', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip": "Zoom In" }, h("ls-icon", { key: '4da240a9f1ebfba58ed3bd2b2ea785b607b0bb4d', name: "zoom-in" }))), h("div", { key: '1240eeefa7e586de792a03a077d1832b1945bfc9', class: 'status-bar-section' }, h("button", { key: '51acf7d20da8d6f185de04420c9a7a078f28f399', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip": "Fit Width" }, h("ls-icon", { key: 'f0c01f91472a04dcd935305f10a70f0b02b7f9fe', name: "fit-width" })), h("button", { key: '0fbf13e05c7fb5875b40c8f8c1a4cb6b4e924dd3', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip": "Fit Height" }, h("ls-icon", { key: '93c937c3e15a564468bd89a944f12f29ce4a0101', name: "fit-height" }))), h("div", { key: '08e8b344b902a1064f75499c28246804d2695149', class: 'status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: '2dff2d746aaa07d3667e8274a8f6b7de1410da59', onClick: () => {
+        return (h(Host, { key: '64355c92fb096e234db1645876f1bc657b513241' }, h("div", { key: '3e70edc7fe64195f425bfcaab685dce704df0ac2', class: 'controls-bar' }, h("div", { key: '5a19afd7bf5386d75c0e35d47511a5dc7f450dc2', class: 'status-bar-section' }, h("button", { key: '8852a1d1ac81af594f519685f6c88adc2444a708', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip": "Zoom Out" }, h("ls-icon", { key: '10b2410531f8c0dfd812ea7cc2834a2bf6d8840a', name: "zoom-out" })), h("div", { key: '18bc843aa8cf4a4735e931cad3284ef88946cb22' }, h("input", { key: 'ca66f1376362c97f8958c8413ca5e81e716e2969', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: 'a0f3ed88103b50363b47e5780aa2e73a39ed4cc8', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip": "Zoom In" }, h("ls-icon", { key: 'a07eafbae8c6ba35a7fdeeffc28397d7252edaa8', name: "zoom-in" }))), h("div", { key: 'e498dfce441013b2fc963928af2e1049cbe69fcf', class: 'status-bar-section' }, h("button", { key: '8df4dd354d5208a500f0811e90d31caa57877194', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip": "Fit Width" }, h("ls-icon", { key: '2277785b7d941b9ad4a522defd2b1ec317e1464d', name: "fit-width" })), h("button", { key: '959e98f46bd14ce670388c3240fce6197f503bac', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip": "Fit Height" }, h("ls-icon", { key: 'a4ed813952cbd511e03af18b67e0ff4a8fd9aae4', name: "fit-height" }))), h("div", { key: 'c0710f4e5a387d333ed7df84169fa046f231810d', class: 'status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: '827fa1974c3fc37f8f4083abef2ba1ebea1f0e2f', onClick: () => {
                 this.editor.pagePrev();
-            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip": this.page === 1 ? 'No Previous Page' : 'Previous Page' }, h("ls-icon", { key: 'b3d655cb4a3dd891e2f64695828a856beb5d5855', name: "chevron-left" })), h("p", { key: 'bde3e272e9108d7b11263760fc841f2fef76da0e' }, this.page, " / ", this.pageCount), h("button", { key: 'bafc2e0125701dffe722cdf7d42b919546141ffa', onClick: () => {
+            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip": this.page === 1 ? 'No Previous Page' : 'Previous Page' }, h("ls-icon", { key: '21796639ba7b47ac31e6f60e90cf7955940bbe32', name: "chevron-left" })), h("p", { key: 'dee6b2159d14226b9f13ab1412d99ec270dcb985' }, this.page, " / ", this.pageCount), h("button", { key: '15262e65e4cd1aaf96f1b73293fe4d6acdce7aa0', onClick: () => {
                 this.editor.pageNext();
-            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip": this.page === this.pageCount ? 'No Next Page' : 'Next Page' }, h("ls-icon", { key: '53e010b277d51350a04c323c2c504ceec5415c2c', name: "chevron-right" })))), h("ls-helper-bar", { key: 'f25d8007f9e522a3643c759915798584c497a06c' }), h("ls-tooltip", { key: '960669f6990a76e3abb5b94c3f9778036c18942a', id: "ls-tooltip-master" }), h("slot", { key: 'a8be359cf6bc14115864e1fff011b36b62320a12' })));
+            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip": this.page === this.pageCount ? 'No Next Page' : 'Next Page' }, h("ls-icon", { key: '3dbc18d02d99b3a652af194b071d4cf19d07f25a', name: "chevron-right" })))), h("ls-helper-bar", { key: '302758df0e30c25e9fb11510845ef6d0fd00031c' }), h("ls-tooltip", { key: 'bb89330935f48017bee9de72cc6faa6c67f63fb5', id: "ls-tooltip-master" }), h("slot", { key: '64876c90d09ff4d4c7bf820ccbe50b28d28ae5d6' })));
     }
-};
-LsStatusbar.style = lsStatusbarCss;
+    static get style() { return lsStatusbarCss; }
+}, [257, "ls-statusbar", {
+        "zoom": [1026],
+        "page": [1026],
+        "pageCount": [1026, "page-count"],
+        "editor": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-statusbar", "ls-editor-field", "ls-helper-bar", "ls-icon", "ls-keyboard-shortcuts", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-statusbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsStatusbar);
+            }
+            break;
+        case "ls-editor-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-helper-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-keyboard-shortcuts":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { LsStatusbar as ls_statusbar };
-//# sourceMappingURL=ls-statusbar.entry.esm.js.map
+export { LsStatusbar as L, defineCustomElement as d };
+//# sourceMappingURL=p-0l2bXbFG.js.map
 
-//# sourceMappingURL=ls-statusbar.entry.js.map
+//# sourceMappingURL=p-0l2bXbFG.js.map