legalesign-document-viewer 0.7.1 → 0.7.2

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

@@ -0,0 +1,145 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldFooter {
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
+    dataItem;
+    mutate;
+    update;
+    selectFields;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    getItems() {
+        if (this.isSingle(this.dataItem)) {
+            return [this.dataItem];
+        }
+        return this.dataItem;
+    }
+    deleteField = () => {
+        this.mutate.emit(this.getItems().map(di => { return { action: 'delete', data: di }; }));
+    };
+    duplicateField = () => {
+        this.getItems().forEach(current => {
+            const newItem = { ...current, id: btoa('ele' + crypto.randomUUID()) };
+            const newTop = current.top + current.height;
+            if (newTop + current.height < current.pageDimensions.height) {
+                newItem.top = newTop;
+            }
+            this.mutate.emit([{ action: 'create', data: newItem, select: 'clear' }]);
+        });
+    };
+    render() {
+        return (h(Host, { key: 'a0e90a78a6991933353d27c8f41bf9da30db2372' }, h("div", { key: '4d8c18396786143c5e58cd73a493e46df7c8c0a6', class: 'button-footer' }, h("button", { key: '3b75c5dade3dd585cc1950e1314036a90eba920b', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: '05e75a02cce2e27233741c5a28a674fbae0d7494', name: "field-duplicate", size: "1.25rem" }), "Duplicate"), h("button", { key: 'f97d16699eb76834007989235ac18a23f4a5f34c', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: 'f3854ca272a90b2ea442b1c51db21661bf64f52e', name: "trash", size: "1.25rem", color: 'var(--red-60)' }), "Delete")), h("slot", { key: '84baa90b9488b4e3b12f4aae8e754bb33bb3fa81' })));
+    }
+    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",
+                "mutable": true,
+                "complexType": {
+                    "original": "LSApiElement | LSApiElement[]",
+                    "resolved": "LSApiElement[] | { 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\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\" | \"image\" | \"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

@@ -0,0 +1 @@
+{"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,CAAgC;IAMxC,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAOtC,YAAY,CAA+B;IAE3C,QAAQ,CAAC,EAAiC;QACxC,OAAQ,EAAqB,CAAC,MAAM,KAAK,SAAS,CAAC;IACrD,CAAC;IAED,UAAU,CAAC,EAAiC;QAC1C,OAAO,OAAQ,EAAqB,CAAC,MAAM,KAAK,QAAQ,CAAC;IAC3D,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,CAAA,CAAC,CAAC,CAAC,CAAC,CAAC;IACzF,CAAC,CAAA;IAED,cAAc,GAAG,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAChC,MAAM,OAAO,GAAG,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;YACtE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC;YAC5C,IAAI,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;gBAC5D,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC;YACvB,CAAC;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;IACL,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,SAAS,GAAG;gCAE1C;gBACT,+DAAQ,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAC7D,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,GAAG;6BAEtD,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 | 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  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  getItems(): LSApiElement[] {\n    if (this.isSingle(this.dataItem)) {\n      return [this.dataItem];\n    }\n    return this.dataItem;\n  }\n\n  deleteField = () => {\n    this.mutate.emit(this.getItems().map(di => { return { action: 'delete', data: di } }));\n  }\n\n  duplicateField = () => {\n    this.getItems().forEach(current => {\n      const newItem = { ...current, id: btoa('ele' + crypto.randomUUID()) };\n      const newTop = current.top + current.height;\n      if (newTop + current.height < current.pageDimensions.height) {\n        newItem.top = newTop;\n      }\n      this.mutate.emit([{ action: 'create', data: newItem, select: 'clear' }]);\n    });\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=\"1.25rem\" />\n            Duplicate\n          </button>\n          <button class={'destructive'} onClick={() => this.deleteField()}>\n            <ls-icon name=\"trash\" size=\"1.25rem\" color='var(--red-60)' />\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

@@ -0,0 +1,297 @@
+: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: 2.25rem;
+}
+
+.input-wrapper {
+  position: relative;
+  width: fit-content;
+}
+
+#selectorIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+#selectLeadingIcon {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active,
+select:active,
+textarea:active {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+}
+
+input[type='number'] {
+  width: max-content;
+  max-width: 3rem;
+
+}
+
+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

@@ -0,0 +1,145 @@
+import { Host, h } from "@stencil/core";
+import { attachAllTooltips } from "../../utils/tooltip";
+export class LsFieldFormat {
+    dataItem;
+    mutate;
+    component;
+    handleKeyDown = (event) => {
+        event.stopPropagation();
+    };
+    handleKeyUp = (event) => {
+        event.stopPropagation();
+    };
+    // 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.allElementsSame()?.fontName;
+            var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size');
+            if (selFontSize)
+                selFontSize.value = this.allElementsSame()?.fontSize.toString();
+        }
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    // 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);
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    allElementsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return;
+        const firstFontName = this.dataItem[0].fontName;
+        const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);
+        const firstFontSize = this.dataItem[0].fontSize;
+        const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);
+        return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };
+    };
+    render() {
+        return (h(Host, { key: '76d6f65cba421c0e9ae3886f5b8c00d00dea313a', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: 'ce1e85055e6036c818ffd74386841e2105d0e307', class: 'ls-field-format-bar' }, h("div", { key: '263533896b0d1552dedc2be743665ab432c811a8', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: '53b29313a2363f17a69e68a22cf6647b1335994c', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: 'cc3707b3f3e7d25ad7f5fe18c9b7e845be5654dc', id: "ls-toolbar-font-select", onChange: input => {
+                this.alter({ fontName: input.target.value });
+            }, class: 'has-leading-icon' }, h("option", { key: '7c9f5332ae3e5688c3d20292c8c67abbec50a3c1', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), h("option", { key: 'e0c5648f78cd95dffc056a22853173416e851f1a', value: "arial" }, "Arial"), h("option", { key: '84cb8ba4c94cd226bb8641b13af7e99262d7fc93', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '2b43a7e50838bb2de4d51d10ea40992eff0b0c73', value: "courier" }, "Courier"), h("option", { key: '54163a61162c4c5fc05d77f8432ec2810d3aae59', value: "helvetica" }, "Helvetica"), h("option", { key: 'c056efd5e5dd6bc09737a4f5b0c552311044dff0', value: "verdana" }, "Verdana")), h("ls-icon", { key: '03c671b1ec055c40aff8d9066a99e2c6edf9aeb9', id: "selectorIcon", name: "selector" })), h("div", { key: 'af77456935679b30e0e99c3cd319257575b636b8', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: '1d7412d9610a51ea42d89c6a84239a5e9f7134c9', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'b32dd35583ddba5066b7a9479e73cbec3b51f49b', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
+                if (input.target.value === '')
+                    return;
+                this.alter({ fontSize: input.target.value });
+            }, class: 'has-leading-icon' })), h("div", { key: 'fe0e8427c51778982f855d1a75f137bdede9acbe', class: 'button-group' }, h("button", { key: 'ee7e2411d8ae22e7aba9289e8921436d2853ab22', onClick: () => {
+                this.alter({ align: 'left' });
+            }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: '8bde9435f8c4ba33554cfa40c357b66de6b43ddc', name: "menu-alt-2" })), h("button", { key: '6638d5d9ca6d7660aa239498257f5e5651e1ea8b', onClick: () => {
+                this.alter({ align: 'center' });
+            }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: '0b8079276c0ded5f7d7bb4e3ceeaaa1e7cccba84', name: "menu-alt-5" })), h("button", { key: '245c6b7ba9feffb0744912fa5ba4a8281e846a82', onClick: () => {
+                this.alter({ align: 'right' });
+            }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: 'ee4f87dc400df7ee6e96bbcfab1e79550581b2ef', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '1cada21e16b4218c50eed7f7f47620e00a3e4f93', class: 'ls-field-format-bar' }, h("div", { key: 'c0bf19a3733551a2b28b67efe53b9588a7d2e528', class: "input-wrapper", "data-tooltip": "Font Family" }, h("ls-icon", { key: '1968f660740e8b292b9fd7c6b0b351b3d1007a04', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '32185b7ba976ab050853ae88d4813f08774159ce', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '3d2de2bbbf52eebf7110472d1be231e79cb6beb3', id: "ls-toolbar-font-select", onChange: input => {
+                this.alter({ fontName: input.target.value });
+            }, class: 'has-leading-icon' }, h("option", { key: 'e9598b7011df4574e756064931e92f20c85101b9', value: "arial" }, "Arial"), h("option", { key: '8330da4991f31f4d613731b3d933ce1f4de37188', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'ca969de9430f760714d246504f24a5a6e15079b4', value: "courier" }, "Courier"), h("option", { key: '922d78fb1ddcb3dbeedeed087576c1c10121c5c9', value: "helvetica" }, "Helvetica"), h("option", { key: '726313fc22d9bfbd85836974089976b408eca14f', value: "verdana" }, "Verdana"))), h("div", { key: '4a5dd1dc8ce193f037febfeed7da6458a399702d', class: "input-wrapper", "data-tooltip": "Font Size" }, h("ls-icon", { key: '2c52b48225642f171571e3e8800c5c043b431d2c', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'adfd522269f13843b2a0f86e3dd50389453407c0', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+                if (input.target.value === '')
+                    return;
+                this.alter({ fontSize: input.target.value });
+            }, class: 'has-leading-icon' })), h("div", { key: '5a7e595287b645865c958d37942c968d79643866', class: 'button-group' }, h("button", { key: '186fa6758cb7ea11d020d5caca9edfc10414060e', onClick: () => {
+                this.alter({ align: 'left' });
+            }, "data-tooltip": "Align Text Left" }, h("ls-icon", { key: 'ec1365fbaa3a9906c7074f967b103f2cf38642ba', name: "menu-alt-2" })), h("button", { key: '6badeae61b901e2a59a569a3a9d592d695e17c93', onClick: () => {
+                this.alter({ align: 'center' });
+            }, "data-tooltip": "Align Text Center" }, h("ls-icon", { key: 'f999b7abf51a0d686f4cfe20922117564ae521af', name: "menu-alt-5" })), h("button", { key: 'abc821a566f6b136dffbafa4e6fd5c625e792695', onClick: () => {
+                this.alter({ align: 'right' });
+            }, "data-tooltip": "Align Text Right" }, h("ls-icon", { key: '049d6e7432caa737d0858731f0e84a053fc819a0', name: "menu-alt-3" }))))), h("ls-tooltip", { key: '03b64c9d83b9e8f26f01c420b4d11181ce9a09e2', id: "ls-tooltip-master" })));
+    }
+    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",
+                "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"
+                        }
+                    }
+                }
+            }];
+    }
+    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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAOxD,MAAM,OAAO,aAAa;IAIxB,QAAQ,CAAiB;IAOzB,MAAM,CAAgC;IAE3B,SAAS,CAAc;IAE1B,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEM,WAAW,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,uDAAuD;IAEvD,mBAAmB;QACjB,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,wBAAwB,CAAsB,CAAC;YACtG,IAAI,OAAO;gBAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,CAAC;YAC9D,IAAI,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,sBAAsB,CAAqB,CAAC;YACvG,IAAI,WAAW;gBAAE,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACnF,CAAC;QACD,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAElB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAC;QACvE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,gBAAgB;QACd,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED,eAAe,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACzD,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAChD,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC;QAClF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAChD,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC;QACtF,OAAO,EAAE,MAAM,EAAE,YAAY,IAAI,gBAAgB,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;IAC9J,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;YAC3D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5C,4DAAK,KAAK,EAAE,qBAAqB;gBAC/B,4DAAK,KAAK,EAAC,eAAe,kBAAc,aAAa;oBACnD,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAW;oBAC1D,+DACE,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACtE,CAAC,EACD,KAAK,EAAE,kBAAkB;wBAEzB,+DAAQ,QAAQ,QAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,KAAK,OAAO,EAAE,KAAK,EAAE,OAAO,YAE9E;wBACT,+DAAQ,KAAK,EAAC,OAAO,YAAe;wBACpC,+DAAQ,KAAK,EAAC,iBAAiB,sBAAyB;wBACxD,+DAAQ,KAAK,EAAC,SAAS,cAAiB;wBACxC,+DAAQ,KAAK,EAAC,WAAW,gBAAmB;wBAC5C,+DAAQ,KAAK,EAAC,SAAS,cAAiB,CACjC;oBACT,gEAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,GAAW,CACjD;gBACN,4DAAK,KAAK,EAAC,eAAe,kBAAc,WAAW;oBACjD,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAW;oBAC1D,8DACE,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,EACvC,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAK,KAAK,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;gCAAE,OAAO;4BAC5D,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACrE,CAAC,EACD,KAAK,EAAE,kBAAkB,GACzB,CACE;gBACN,4DAAK,KAAK,EAAE,cAAc;oBACxB,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;wBAChC,CAAC,kBACY,iBAAiB;wBAE9B,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;wBAClC,CAAC,kBACY,mBAAmB;wBAEhC,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;wBACjC,CAAC,kBACY,kBAAkB;wBAE/B,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B,CACL,CACF,CACP;YACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAC9C,4DAAK,KAAK,EAAE,qBAAqB;gBAC/B,4DAAK,KAAK,EAAC,eAAe,kBAAc,aAAa;oBACnD,gEAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,GAAW;oBACrD,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAW;oBAC1D,+DACE,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACtE,CAAC,EACD,KAAK,EAAE,kBAAkB;wBAEzB,+DAAQ,KAAK,EAAC,OAAO,YAAe;wBACpC,+DAAQ,KAAK,EAAC,iBAAiB,sBAAyB;wBACxD,+DAAQ,KAAK,EAAC,SAAS,cAAiB;wBACxC,+DAAQ,KAAK,EAAC,WAAW,gBAAmB;wBAC5C,+DAAQ,KAAK,EAAC,SAAS,cAAiB,CACjC,CACL;gBACN,4DAAK,KAAK,EAAC,eAAe,kBAAc,WAAW;oBACjD,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAW;oBAC1D,8DACE,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,EAChC,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAK,KAAK,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;gCAAE,OAAO;4BAC5D,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACrE,CAAC,EACD,KAAK,EAAE,kBAAkB,GACzB,CACE;gBACN,4DAAK,KAAK,EAAE,cAAc;oBACxB,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;wBAChC,CAAC,kBACY,iBAAiB;wBAE9B,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;wBAClC,CAAC,kBACY,mBAAmB;wBAEhC,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B;oBACT,+DACE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;wBACjC,CAAC,kBACY,kBAAkB;wBAE/B,gEAAS,IAAI,EAAC,YAAY,GAAW,CAC9B,CACL,CAWF,CACP;YACD,mEAAY,EAAE,EAAC,mBAAmB,GAAG,CAChC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\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  @Element() component: HTMLElement;\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\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.allElementsSame()?.fontName;\n      var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n      if (selFontSize) selFontSize.value = this.allElementsSame()?.fontSize.toString();\n    }\n    attachAllTooltips(this.component.shadowRoot);\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  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  allElementsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return;\n    const firstFontName = this.dataItem[0].fontName;\n    const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);\n    const firstFontSize = this.dataItem[0].fontSize;\n    const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);\n    return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };\n  };\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\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 disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n                  Mixed\n                </option>\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\" data-tooltip=\"Font Size\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type='number'\n                min=\"4\"\n                value={this.allElementsSame()?.fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\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                data-tooltip=\"Align Text Left\"\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip=\"Align Text Center\"\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip=\"Align Text Right\"\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\" data-tooltip=\"Font Family\">\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                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\" data-tooltip=\"Font Size\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type=\"number\"\n                min=\"4\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\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                data-tooltip=\"Align Text Left\"\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip=\"Align Text Center\"\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip=\"Align Text Right\"\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        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}