legalesign-document-viewer 0.7.2 → 0.7.3

package/dist/collection/components/ls-feature-column/ls-feature-column.js

@@ -1,114 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { attachAllTooltips } from "../../utils/tooltip";
-export class LsFeatureColoumn {
-    component;
-    /**
-     * Determines / sets which of the far left 'managers' is active.
-     * {'document' | 'toolbox' | 'participant' }
-     */
-    manager = 'toolbox';
-    /**
-     * The mode that document viewer is being used in.
-     * {'preview' | 'editor' | 'custom'}
-     */
-    mode = 'editor';
-    // Send an manager change up the DOM
-    manage;
-    componentDidLoad() {
-        attachAllTooltips(this.component.shadowRoot);
-    }
-    render() {
-        return (h(Host, { key: '2338c45dc8f06d97b8843e4922288c028cbd9031' }, h("div", { key: 'f66daf214f07736ffec12d1f40ad65c4d8e18ee3', class: this.mode !== "editor" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
-                this.manage.emit('document');
-                this.manager = 'document';
-            }, "data-tooltip-title": "Template Details", "data-tooltip": "View and edit Template properties", "data-tooltip-placement": "right" }, h("ls-icon", { key: '3ae5fa371604562092e266d93d4c49f6bb8ba79a', name: "document", size: "1.5rem" })), h("div", { key: '4cd2f26f0b1ce17c9aadb3d904d3b4c7d55feeeb', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
-                this.manage.emit('toolbox');
-                this.manager = 'toolbox';
-            }, "data-tooltip-title": "Field Types", "data-tooltip": "Select and place Form Field Elements", "data-tooltip-placement": "right" }, h("ls-icon", { key: '9473d0301b5b8689fce51eae35451049862adf55', name: "typing-input", size: "1.5rem" })), h("div", { key: 'e692becdc1fb353d6d03d4bec3f4dbb1630e2fee', class: this.mode !== "editor" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
-                this.manage.emit('participant');
-                this.manager = 'participant';
-            }, "data-tooltip-title": "Participants", "data-tooltip": "Manage Signers, Witnesses and Approvers", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'a63ce2e77357a6a95030f0c1a261b35d858e7afd', name: "user-group", size: "1.5rem" })), h("div", { key: 'c766368c4c53c3e2386f49513d05513ef1d2fa77', class: this.mode !== "compose" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon', onClick: () => {
-                this.manage.emit('recipient');
-                this.manager = 'recipient';
-            }, "data-tooltip-title": "Recipients", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: '0589a54e4e84072ff9223278c72048a5e1ba6c6b', name: "user-group", size: "1.5rem" })), h("div", { key: '67a8c3549010f01cd4eac8f54bd44906a77216a6', class: this.mode !== "preview" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon', onClick: () => {
-                this.manage.emit('validation');
-                this.manager = 'validation';
-            }, "data-tooltip-title": "Validation", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: '9fb4b401a35969a6453a380c3795a8f2dab28f71', name: "adjustments", size: "1.5rem" })), h("slot", { key: '4cd8fc2d73e4e5bd0efcdddfed14ba2568d705da' }), h("ls-tooltip", { key: 'f5c006ae7c4dd0944aae1c558951d67210e86a2b', id: "ls-tooltip-master" })));
-    }
-    static get is() { return "ls-feature-column"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-feature-column.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-feature-column.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "manager": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "'document' | 'toolbox' | 'participant'| 'recipient' | 'validation'",
-                    "resolved": "\"document\" | \"participant\" | \"recipient\" | \"toolbox\" | \"validation\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines / sets which of the far left 'managers' is active.\n{'document' | 'toolbox' | 'participant' }"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "manager",
-                "defaultValue": "'toolbox'"
-            },
-            "mode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'preview' | 'editor' | 'compose'",
-                    "resolved": "\"compose\" | \"editor\" | \"preview\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The mode that document viewer is being used in.\n{'preview' | 'editor' | 'custom'}"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "mode",
-                "defaultValue": "'editor'"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "manage",
-                "name": "manage",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'",
-                    "resolved": "\"document\" | \"participant\" | \"recipient\" | \"toolbox\" | \"validation\"",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "component"; }
-}
-//# sourceMappingURL=ls-feature-column.js.map

package/dist/collection/components/ls-feature-column/ls-feature-column.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ls-feature-column.js","sourceRoot":"","sources":["../../../src/components/ls-feature-column/ls-feature-column.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event, Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n  @Element() component: HTMLElement;\n  /**\n   * Determines / sets which of the far left 'managers' is active.\n   * {'document' | 'toolbox' | 'participant' }\n   */\n  @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant'| 'recipient' | 'validation' = 'toolbox';\n\n\n  /**\n   * The mode that document viewer is being used in.\n   * {'preview' | 'editor' | 'custom'}\n   */\n  @Prop() mode: 'preview' | 'editor' | 'compose' = 'editor';\n\n  // Send an manager change up the DOM\n  @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'>;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('document');\n            this.manager = 'document';\n          }}\n          data-tooltip-title=\"Template Details\"\n          data-tooltip=\"View and edit Template properties\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"document\" size=\"1.5rem\" />\n        </div>\n        <div\n          class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('toolbox');\n            this.manager = 'toolbox';\n          }}\n          data-tooltip-title=\"Field Types\"\n          data-tooltip=\"Select and place Form Field Elements\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"typing-input\" size=\"1.5rem\" />\n        </div>\n        \n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('participant');\n            this.manager = 'participant';\n          }}\n          data-tooltip-title=\"Participants\"\n          data-tooltip=\"Manage Signers, Witnesses and Approvers\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"1.5rem\" />\n        </div>\n\n        <div\n          class={this.mode !== \"compose\" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('recipient');\n            this.manager = 'recipient';\n          }}\n          data-tooltip-title=\"Recipients\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"1.5rem\" />\n        </div>\n\n        <div\n          class={this.mode !== \"preview\" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('validation');\n            this.manager = 'validation';\n          }}\n          data-tooltip-title=\"Validation\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"adjustments\" size=\"1.5rem\" />\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-alignment/ls-field-alignment.css

@@ -1,370 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-  position: relative;
-}
-
-* {
-  margin: 0;
-  box-sizing: border-box;
-}
-
-.field-set {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-}
-
-.ls-field-properties-section {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.row {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.multi-button-group-row {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.ls-field-properties-section-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.25rem;
-}
-
-.ls-field-properties-section-title {
-  color: var(--gray-90, #5e6066);
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.25rem; /* 142.857% */
-}
-
-.ls-field-properties-section-description {
-  overflow: hidden;
-  color: var(--gray-80, #6c6e73);
-  text-overflow: ellipsis;
-  font-size: 0.75rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 0.75rem; /* 120% */
-}
-
-.input-row {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.input-row .input-wrapper input {
-  width: 9.313rem;
-  max-width: 9.313rem;
-}
-
-/* Global Styles */
-
-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: 100%;
-}
-
-#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);
-}
-
-#selectLeadingIconDisabled {
-  position: absolute;
-  top: 50%;
-  left: 0.675rem;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--gray-50, #d8d9dc);
-}
-
-
-.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:not(:disabled),
-select:hover:not(:disabled),
-textarea:hover:not(:disabled) {
-  border-color: var(--gray-50, #c8c9cc);
-  background-color: var(--white, #fff);
-}
-
-input:focus:not(:disabled),
-select:focus:not(:disabled),
-textarea:focus:not(:disabled) {
-  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:not(:disabled),
-select:active:not(:disabled),
-textarea:active:not(:disabled) {
-  border-color: var(--primary-50, #5185ff);
-}
-
-input:disabled,
-select:disabled,
-textarea:disabled {
-  cursor: not-allowed;
-  background-color: var(--gray-10, #f7f8fa);
-  color: var(--gray-50, #d8d9dc);
-  box-shadow: none;
-}
-
-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);
-}
-
-button {
-  border: 0;
-  appearance: button;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-lg);
-  background-color: var(--primary-60, #4456f6);
-  color: white;
-  text-transform: capitalize;
-  min-height: 2.25rem;
-  min-width: 2.25rem;
-}
-
-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;
-  width: 100%;
-}
-
-.button-group button {
-  display: flex;
-  width: 100%;
-  background: transparent;
-  border-radius: unset;
-  padding: 0.25rem 0.75rem;
-  min-width: 2.156rem;
-  color: var(--gray-80, #6c6e73);
-}
-
-.button-group button:disabled {
-  background: var(--gray-10, #f7f8fa);
-  cursor: not-allowed;
-  color: var(--gray-50, #d8d9dc);
-}
-
-.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);
-}