legalesign-document-viewer 0.3.5 → 0.3.7

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

@@ -0,0 +1,318 @@
+.ls-toolbox-field {
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.875rem;
+  border-radius: 1rem;
+  border: 1px solid var(--gray-20, #edeff2);
+  background: white;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.ls-toolbox-field:hover {
+  background: var(--gray-10, #f7f8fa);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--gray-30, #e0e2e5);
+}
+
+
+
+.toolbox-field-icon {
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+  border-radius: 0.5rem;
+  border: 1px solid var(--signer-color);
+  background: var(--signer-color-light);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  color: var(--signer-color);
+}
+
+.toolbox-field-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  width: 100%;
+  margin: 0;
+}
+
+/* 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: 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;
+}
+
+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);
+}
+
+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;
+}
+
+.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);
+}

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

@@ -0,0 +1,326 @@
+import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+import { attachAllTooltips } from "../../utils/tooltip";
+export class LsToolboxField {
+    component;
+    /**
+     * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.
+     */
+    formElementType;
+    elementType;
+    validation = 0;
+    /**
+     * The text to display for this field type.
+     */
+    label;
+    /**
+     * The icon to display for this field type.
+     */
+    icon;
+    /**
+     * The tooltip hint to describe to the field type
+     */
+    tooltip;
+    /**
+     * The starting height of this control type in pixels.
+     */
+    defaultHeight;
+    /**
+     * The starting width of this control type in pixels.
+     */
+    defaultWidth;
+    /**
+     * The signer color of the element
+     */
+    signer = 0;
+    isSelected = false;
+    fieldTypeSelected;
+    handleDragStart(event) {
+        // Add the target element's id to the data transfer object
+        event.dataTransfer.setData('application/json', JSON.stringify({
+            formElementType: this.formElementType,
+            elementType: this.elementType,
+            validation: this.validation,
+            defaultHeight: this.defaultHeight,
+            defaultWidth: this.defaultWidth,
+        }));
+        event.dataTransfer.dropEffect = 'copy';
+    }
+    handleKeyDown(event) {
+        if (event.key === 'ArrowDown') {
+            console.log('down arrow pressed');
+        }
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: '6de8f37030daba94c2e48cfa50d853ce05760302', draggable: "true" }, h("div", { key: '1705c6b5dd533e474d734a07ffbcc7f54ad5f5b8', class: 'ls-toolbox-field', style: this.isSelected && {
+                background: defaultRolePalette[this.signer % 100].s10,
+                border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
+                color: defaultRolePalette[this.signer % 100].s80,
+                boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,
+            }, onClick: () => {
+                this.fieldTypeSelected.emit({
+                    label: this.label,
+                    formElementType: this.formElementType,
+                    elementType: this.elementType,
+                    validation: this.validation,
+                    defaultHeight: this.defaultHeight,
+                    defaultWidth: this.defaultWidth,
+                });
+            } }, h("div", { key: '69208e5e342623faf98170e18e8e371376ace090', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: 'e600ab045538f95fde540163fc858dce22ec7fd1', name: this.icon, size: "20" })), h("p", { key: 'e52b69e75a83ec6a7e890def976519949427fbfe', class: "toolbox-field-label", style: this.isSelected && {
+                color: defaultRolePalette[this.signer % 100].s80,
+            } }, this.label), h("ls-icon", { key: '24abe83ee86705a50eb47b8f6c2ce95b70ef88db', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '6cb285f57f1ca9f65ecb5da5de04917820661565', id: "ls-tooltip-master", tooltipText: 'Something' })));
+    }
+    static get is() { return "ls-toolbox-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-toolbox-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-toolbox-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "formElementType": {
+                "type": "string",
+                "attribute": "form-element-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "elementType": {
+                "type": "string",
+                "attribute": "element-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "validation": {
+                "type": "number",
+                "attribute": "validation",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display for this field type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "Icon",
+                    "resolved": "\"expand\" | \"filter\" | \"map\" | \"document\" | \"code\" | \"link\" | \"menu\" | \"table\" | \"stop\" | \"text\" | \"download\" | \"target\" | \"key\" | \"required\" | \"terminal\" | \"scale\" | \"x\" | \"y\" | \"collection\" | \"translate\" | \"signature\" | \"initials\" | \"dropdown\" | \"search\" | \"template\" | \"mail\" | \"auto-sign\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"camera\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"play\" | \"pause\" | \"star\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"typesize\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"logo\"",
+                    "references": {
+                        "Icon": {
+                            "location": "import",
+                            "path": "../../types/Icon",
+                            "id": "src/types/Icon.ts::Icon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to display for this field type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "attribute": "tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The tooltip hint to describe to the field type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "defaultHeight": {
+                "type": "number",
+                "attribute": "default-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The starting height of this control type in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "defaultWidth": {
+                "type": "number",
+                "attribute": "default-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The starting width of this control type in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "signer": {
+                "type": "number",
+                "attribute": "signer",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The signer color of the element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "isSelected": {
+                "type": "boolean",
+                "attribute": "is-selected",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "fieldTypeSelected",
+                "name": "fieldTypeSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    label: string\n    elementType: string\n    defaultHeight: number\n    defaultWidth: number\n    formElementType: string\n    validation: number\n  }",
+                    "resolved": "{ label: string; elementType: string; defaultHeight: number; defaultWidth: number; formElementType: string; validation: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+    static get listeners() {
+        return [{
+                "name": "dragstart",
+                "method": "handleDragStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=ls-toolbox-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-toolbox-field.js","sourceRoot":"","sources":["../../../src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Host, Listen, Prop, Element, h, EventEmitter } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n\n@Component({\n  tag: 'ls-toolbox-field',\n  styleUrl: 'ls-toolbox-field.css',\n  shadow: true,\n})\nexport class LsToolboxField {\n  @Element() component: HTMLElement;\n  /**\n   * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.\n   */\n  @Prop() formElementType: string;\n  @Prop() elementType: string;\n  @Prop() validation: number = 0;\n\n  /**\n   * The text to display for this field type.\n   */\n  @Prop() label: string;\n\n  /**\n   * The icon to display for this field type.\n   */\n  @Prop() icon: Icon;\n  /**\n   * The tooltip hint to describe to the field type\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * The starting height of this control type in pixels.\n   */\n  @Prop() defaultHeight: number;\n  /**\n   * The starting width of this control type in pixels.\n   */\n  @Prop() defaultWidth: number;\n\n  /**\n   * The signer color of the element\n   */\n  @Prop() signer: number = 0;\n\n  @Prop({ mutable: true }) isSelected: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  fieldTypeSelected: EventEmitter<{\n    label: string\n    elementType: string\n    defaultHeight: number\n    defaultWidth: number\n    formElementType: string\n    validation: number\n  }>;\n\n  @Listen('dragstart')\n  handleDragStart(event) {\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\n      'application/json',\n      JSON.stringify({\n        formElementType: this.formElementType,\n        elementType: this.elementType,\n        validation: this.validation,\n        defaultHeight: this.defaultHeight,\n        defaultWidth: this.defaultWidth,\n      }),\n    );\n    event.dataTransfer.dropEffect = 'copy';\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowDown') {\n      console.log('down arrow pressed');\n    }\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host draggable=\"true\">\n        <div\n          class={'ls-toolbox-field'}\n          style={\n            this.isSelected && {\n              background: defaultRolePalette[this.signer % 100].s10,\n              border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,\n              color: defaultRolePalette[this.signer % 100].s80,\n              boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,\n            }\n          }\n          onClick={() => {\n            this.fieldTypeSelected.emit({\n              label: this.label,\n              formElementType: this.formElementType,\n              elementType: this.elementType,\n              validation: this.validation,\n              defaultHeight: this.defaultHeight,\n              defaultWidth: this.defaultWidth,\n            });\n          }}\n        >\n          <div\n            class=\"toolbox-field-icon\"\n            style={{ '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }}\n            data-tooltip={this.tooltip}\n            data-tooltip-placement=\"right\"\n          >\n            <ls-icon name={this.icon} size=\"20\" />\n          </div>\n          <p\n            class=\"toolbox-field-label\"\n            style={\n              this.isSelected && {\n                color: defaultRolePalette[this.signer % 100].s80,\n              }\n            }\n          >\n            {this.label}\n          </p>\n          <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n        </div>\n        <ls-tooltip id=\"ls-tooltip-master\" tooltipText='Something' />\n      </Host>\n    );\n  }\n}\n"]}