legalesign-document-viewer 0.3.3 → 0.3.5

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

@@ -1,135 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class LsFieldFooter {
-    /**
-     * The selected items information (as JSON).
-     * {LSApiElement[]}
-     */
-    dataItem;
-    mutate;
-    update;
-    selectFields;
-    deleteField = () => {
-        this.update.emit([{ action: 'delete', data: this.dataItem }]);
-        this.mutate.emit([{ action: 'delete', data: this.dataItem }]);
-    };
-    duplicateField = () => {
-        const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };
-        const newTop = this.dataItem.top + this.dataItem.height;
-        if (newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {
-            newItem.top = newTop;
-        }
-        this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);
-        this.mutate.emit([{ action: 'create', data: newItem }]);
-        // this.selectFields.emit([newItem]);
-    };
-    render() {
-        return (h(Host, { key: '8cb31207e999dc865fb83cb472d77519cd957fdb' }, h("div", { key: 'cdb9ade290c3c1cbe613d5c2f04698d16cf2131e', class: 'button-footer' }, h("button", { key: '6f8db1780d9f860a7d3fa407355fde33cd48c11c', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: '7b01415cc8b7be376445c97e4d2b24788afb3e3a', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '0447898646ae162dd58ca46befcd468b39af2a1a', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: '65074ed995a57053602d665f036fd7280708860d', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'c786084652dfac87fad5ada66808496a3b1aa1dd' })));
-    }
-    static get is() { return "ls-field-footer"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-field-footer.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-field-footer.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "dataItem": {
-                "type": "unknown",
-                "attribute": "data-item",
-                "mutable": true,
-                "complexType": {
-                    "original": "LSApiElement",
-                    "resolved": "{ id: string; align: string; ax?: number; ay?: number; bx?: number; by?: number; left?: number; top?: number; height?: number; width?: number; elementType: string; fieldOrder?: number; fontName: string; fontSize: number; hideBorder?: boolean; label?: string; labelExtra?: string; helpText?: string; optional?: boolean; options?: string; page?: number; role?: LSApiRole; substantive?: boolean; validation?: number; value?: string; logicGroup?: string; logicAction?: number; mapTo?: string; signer: number; link?: string; formElementType?: \"number\" | \"image\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\" | \"dropdown\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; templateId?: string; }",
-                    "references": {
-                        "LSApiElement": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSApiElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The selected items information (as JSON).\n{LSApiElement[]}"
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "mutate",
-                "name": "mutate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSMutateEvent[]",
-                    "resolved": "LSMutateEvent[]",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSMutateEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "update",
-                "name": "update",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSMutateEvent[]",
-                    "resolved": "LSMutateEvent[]",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSMutateEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "selectFields",
-                "name": "selectFields",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSApiElement[]",
-                    "resolved": "LSApiElement[]",
-                    "references": {
-                        "LSApiElement": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSApiElement"
-                        }
-                    }
-                }
-            }];
-    }
-}
-//# sourceMappingURL=ls-field-footer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ls-field-footer.js","sourceRoot":"","sources":["../../../src/components/ls-field-footer/ls-field-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,aAAa;IACxB;;;OAGG;IAIH,QAAQ,CAAe;IAMvB,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAOtC,YAAY,CAA+B;IAE3C,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAChE,CAAC,CAAA;IAED,cAAc,GAAG,GAAG,EAAE;QACpB,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;QAC5E,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QACxD,IAAG,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;YACvE,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACxD,qCAAqC;IACvC,CAAC,CAAA;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,eAAe;gBACzB,+DAAQ,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;oBAC9D,gEAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,IAAI,GAAG;gCAErC;gBACT,+DAAQ,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAC7D,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG;6BAE3B,CACL;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-footer',\n  styleUrl: 'ls-field-footer.css',\n  shadow: true,\n})\nexport class LsFieldFooter {\n  /**\n   * The selected items information (as JSON).\n   * {LSApiElement[]}\n   */\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement;\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n   @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  selectFields: EventEmitter<LSApiElement[]>;\n\n  deleteField = () => {\n    this.update.emit([{ action: 'delete', data: this.dataItem }]);\n    this.mutate.emit([{ action: 'delete', data: this.dataItem }]);\n  }\n\n  duplicateField = () => {\n    const newItem = { ...this.dataItem, id: btoa('ele' + crypto.randomUUID()) };\n    const newTop = this.dataItem.top + this.dataItem.height;\n    if(newTop + this.dataItem.height < this.dataItem.pageDimensions.height) {\n      newItem.top = newTop;\n    }\n    this.update.emit([{ action: 'create', data: newItem, select: 'clear' }]);\n    this.mutate.emit([{ action: 'create', data: newItem }]);\n    // this.selectFields.emit([newItem]);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'button-footer'}>\n          <button class={'secondary'} onClick={() => this.duplicateField()}>\n            <ls-icon name=\"field-duplicate\" size=\"20\" />\n            Duplicate\n          </button>\n          <button class={'destructive'} onClick={() => this.deleteField()}>\n            <ls-icon name=\"trash\" size=\"20\" />\n            Delete\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,291 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: row;
-}
-
-.ls-field-format-bar {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-}
-
-/* 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-field-format/ls-field-format.js

@@ -1,143 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class LsFieldFormat {
-    dataItem;
-    mutate;
-    update;
-    component;
-    // Send selection changes to bars and panels if in use.
-    selectFieldsHandler() {
-        if (this.dataItem.length > 0) {
-            var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select');
-            if (selFont)
-                selFont.value = this.dataItem[0].fontName;
-            var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size');
-            if (selFontSize)
-                selFontSize.value = this.dataItem[0].fontSize.toString();
-        }
-    }
-    // Send one or more mutations up the chain
-    // The source of the chain fires the mutation
-    alter(diff) {
-        console.log(diff);
-        const diffs = this.dataItem.map(c => {
-            return { action: 'update', data: { ...c, ...diff } };
-        });
-        this.dataItem = diffs.map(d => d.data);
-        this.mutate.emit(diffs);
-        this.update.emit(diffs);
-    }
-    render() {
-        return (h(Host, { key: 'db560de41ff6135ddfc7cd24bee0428393612506' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '4ea46f8e884a76f7683707f02fd175bbb841a7c4', class: 'ls-field-format-bar' }, h("div", { key: '8004f0b99e69619878b40a4f6a25ccffb76f64cc', class: " input-wrapper" }, h("ls-icon", { key: '8c2a1ecc4b2895217b1a5fbc06b765ee640f57f6', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: 'e9d63ce0c9bf0f807f8843a546615663f6fe0810', id: 'ls-toolbar-font-select', onChange: input => {
-                this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: '57414b268d83f98ba372970a44b01e6564e3f204', value: "arial" }, "Arial"), h("option", { key: '0ea33343c8b48361730103a0f57b451ce9e2b082', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '41594d03ec8bfb0d30374ab12f524ef083982ab0', value: "courier" }, "Courier"), h("option", { key: '266d0e85da5f80b73fedbadb2c1d049bff226036', value: "helvetica" }, "Helvetica"), h("option", { key: '75078832a92fb69d4e6dbe175f9fefb6ba7b36b8', value: "verdana" }, "Verdana")), h("ls-icon", { key: '82e48e668a00ab951a5ab0a8cc8f4704a19d7a08', id: "selectorIcon", name: "selector" })), h("div", { key: 'c017c1fb108b13f531efcf75264a4d7a4871d6e1', class: "input-wrapper" }, h("ls-icon", { key: '84bd33a74b0332b795d921b481f805a57ef2cfef', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'f5e5ac7505bef63d6dc46ab6b6839bac1f8cd74b', id: 'ls-toolbar-font-size', width: "30", size: 4, class: 'has-leading-icon' })), h("div", { key: '9e662def8efd6e8bace2f279ea4b5b15a2fe94ca', class: 'button-group' }, h("button", { key: '3d4ad30a8ec41eb4a1d525eeb53bc8f8757f0c69', onClick: () => {
-                this.alter({ align: 'left' });
-            } }, h("ls-icon", { key: '338e02bcf2b1ee58167fb54a1cf0c168a45ab80d', name: "menu-alt-2" })), h("button", { key: '594f8af91b7a82b3c67c5e86e0d41307beeb2e71', onClick: () => {
-                this.alter({ align: 'center' });
-            } }, h("ls-icon", { key: '00eb405987271237bf93ec03df7b37cc0d1bdd53', name: "menu-alt-5" })), h("button", { key: 'a27269a2a51b8fe5bccc15f83628d68251006f70', onClick: () => {
-                this.alter({ align: 'right' });
-            } }, h("ls-icon", { key: 'b4403cf793697fa578ba4948339959bced93a936', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: 'c71a0a7dbf4965db5083c2e31892c7d5376ee512', class: 'ls-field-format-bar' }, h("div", { key: 'c182854d46457e7fce5806042bb81ad2a9e2a0cd', class: "input-wrapper" }, h("ls-icon", { key: 'c37ea1cf1fea476864a869aac0ac69147d33e5b6', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '499ef3629da6bb05dc85bfad4e22f778a1df00a6', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: 'fc9fbf6d744d2e255c252494a8666e461704cb63', id: 'ls-toolbar-font-select', onChange: input => {
-                this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: '40bb53d54f3b5f62ec744ae52bea51d7d5e3ffd1', value: "arial" }, "Arial"), h("option", { key: '0883cd66f56fd0ed76f48c36203cf4e50f5af980', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '72187239ec4a7c296b5ab277d0f19253fc1ac0b6', value: "courier" }, "Courier"), h("option", { key: 'cd43e5e9858a58ed2a4f1b99924c5746c75c438d', value: "helvetica" }, "Helvetica"), h("option", { key: '3a20de6b6937525ae0ec6208888d3956d39bf598', value: "verdana" }, "Verdana"))), h("div", { key: '85d7ee0da79d69fcb24495bff20d6683670f0240', class: "input-wrapper" }, h("ls-icon", { key: '4c9ca20bf707f7a0a7dbebda0cdb7db36db0b289', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '2489d93094f314de173a1a466f0a4d13a0d34373', id: 'ls-toolbar-font-size', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
-                this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), h("div", { key: 'f8e5d4822460f11eca96b422a5e9d72191421afc', class: 'button-group' }, h("button", { key: '547af4eb1d1c0872dd1dbc3ca68eb92621476ae1', onClick: () => {
-                this.alter({ align: 'left' });
-            } }, h("ls-icon", { key: '8ba5aecb7fc976ef40aea370d00da31e333566c3', name: "menu-alt-2" })), h("button", { key: 'c1bd4b5bf403e2b88a0a2169b4123aa9d143aa22', onClick: () => {
-                this.alter({ align: 'center' });
-            } }, h("ls-icon", { key: '598a82c0edc4997d22d9decae45286877c43f136', name: "menu-alt-5" })), h("button", { key: '9f39d1337f27b0d74ef557836d4bcd86eb508696', onClick: () => {
-                this.alter({ align: 'right' });
-            } }, h("ls-icon", { key: 'c3518f2e0f2fa51592660a94a1fd49037422a8eb', name: "menu-alt-3" })))))));
-    }
-    static get is() { return "ls-field-format"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-field-format.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-field-format.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "dataItem": {
-                "type": "unknown",
-                "attribute": "data-item",
-                "mutable": true,
-                "complexType": {
-                    "original": "LSApiElement[]",
-                    "resolved": "LSApiElement[]",
-                    "references": {
-                        "LSApiElement": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSApiElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "mutate",
-                "name": "mutate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSMutateEvent[]",
-                    "resolved": "LSMutateEvent[]",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSMutateEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "update",
-                "name": "update",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "LSMutateEvent[]",
-                    "resolved": "LSMutateEvent[]",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSMutateEvent"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "component"; }
-    static get watchers() {
-        return [{
-                "propName": "dataItem",
-                "methodName": "selectFieldsHandler"
-            }];
-    }
-}
-//# sourceMappingURL=ls-field-format.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-format',\n  styleUrl: 'ls-field-format.css',\n  shadow: true,\n})\nexport class LsFieldFormat {\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n  @Element() component: HTMLElement;\n\n  // Send selection changes to bars and panels if in use.\n  @Watch('dataItem')\n  selectFieldsHandler() {\n    if (this.dataItem.length > 0) {\n      var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select') as HTMLSelectElement;\n      if (selFont) selFont.value = this.dataItem[0].fontName;\n      var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n      if (selFontSize) selFontSize.value = this.dataItem[0].fontSize.toString();\n    }\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n  render() {\n    return (\n      <Host>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\" input-wrapper\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n              <select\n                id='ls-toolbar-font-select'\n                onChange={input => {\n                  this.alter({ fontName: (input.target as HTMLSelectElement).value });\n                }}\n                class={'has-leading-icon'}\n              >\n                <option value=\"arial\">Arial</option>\n                <option value=\"liberation sans\">Liberation Sans</option>\n                <option value=\"courier\">Courier</option>\n                <option value=\"helvetica\">Helvetica</option>\n                <option value=\"verdana\">Verdana</option>\n              </select>\n              <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n            </div>\n            <div class=\"input-wrapper\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input id='ls-toolbar-font-size' width=\"30\" size={4} class={'has-leading-icon'} />\n            </div>\n            <div class={'button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-3\"></ls-icon>\n              </button>\n            </div>\n          </div>\n        )}\n        {this.dataItem && this.dataItem.length === 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\"input-wrapper\">\n              <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n              <select\n                id='ls-toolbar-font-select'\n\n                onChange={input => {\n                  this.alter({ fontName: (input.target as HTMLSelectElement).value });\n                }}\n                class={'has-leading-icon'}\n              >\n                <option value=\"arial\">Arial</option>\n                <option value=\"liberation sans\">Liberation Sans</option>\n                <option value=\"courier\">Courier</option>\n                <option value=\"helvetica\">Helvetica</option>\n                <option value=\"verdana\">Verdana</option>\n              </select>\n            </div>\n            <div class=\"input-wrapper\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id='ls-toolbar-font-size'\n                width=\"30\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\n                  this.alter({ fontSize: (input.target as HTMLInputElement).value });\n                }}\n                class={'has-leading-icon'}\n              />\n            </div>\n            <div class={'button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-3\"></ls-icon>\n              </button>\n            </div>\n\n            {/* <select\n              onChange={input => {\n                this.alter({ align: (input.target as HTMLSelectElement).value });\n              }}\n            >\n              <option value=\"left\">Left</option>\n              <option value=\"center\">Center</option>\n              <option value=\"right\">Right</option>\n            </select> */}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}