legalesign-document-viewer 0.1.1 → 0.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"ls-editor-field.js","sourceRoot":"","sources":["../../../src/components/ls-editor-field/ls-editor-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop, Watch, Listen } from '@stencil/core';\nimport { LSApiElement, RoleColor } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-editor-field',\n  styleUrl: 'ls-editor-field.css',\n  shadow: true,\n})\nexport class LsEditorField {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() selected: boolean;\n  @Prop() readonly: boolean;\n  @Prop() palette: RoleColor[];\n\n  @Prop() type: 'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate';\n  @Prop() page: { height: number, width: number };\n  @State() isEditing: boolean = false;\n  @State() heldEdge: string = null;\n  @State() isEdgeDragging: boolean = false;\n  @State() innerValue: string;\n  private sizeObserver: ResizeObserver;\n\n  @Listen('keydown')\n  handleInput(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n      this.isEditing = false;\n      this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'))\n    }\n  }\n\n  @Listen(\"mousemove\", { capture: true })\n  handleMouseMove(e) {\n    if (this.readonly) return;\n    if (!e.clientX) return;\n\n    // Determine which edge is being moved over and what cursor to show.\n    if (Math.abs(e.offsetX) < 5) {\n      this.component.style.cursor = \"ew-resize\";\n    } else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {\n      this.component.style.cursor = \"ew-resize\";\n    } else if (Math.abs(e.offsetY) < 5) {\n      this.component.style.cursor = \"ns-resize\";\n    } else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {\n      this.component.style.cursor = \"ns-resize\";\n    } else {\n      this.component.style.cursor = \"move\";\n    }\n  };\n\n  @Listen('dblclick', { capture: true })\n  handleDoubleClick() {\n    if (this.readonly) return;\n    this.isEditing = true;\n    this.heldEdge = null;\n    this.isEdgeDragging = false;\n    this.sizeObserver.disconnect()\n    this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;\n    \n    const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLInputElement;\n    console.log(editbox)\n\n    if(editbox) {\n      editbox.className = 'ls-editor-field-editable'\n      editbox.focus();\n    }\n  }\n\n  @Listen('dragstart', { capture: false, passive: false })\n  handleDragStart(event) {\n    console.log(\"dragstart ls-editor-field\", event, this.type)\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\"application/json\", JSON.stringify({\n      type: this.type\n    }));\n    event.dataTransfer.dropEffect = \"move\";\n  }\n\n  @Watch('selected')\n  watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n    if (_newValue) this.component.style.border = \"1px dotted red\";\n    else this.component.style.border = \"1px solid black\";\n  }\n\n  onInputChange(e) {\n    // console.log(\"INPUT CHANGE\", e);\n    this.innerValue = e.target.value;\n  }\n\n  componentDidLoad() {\n\n    this.sizeObserver = new ResizeObserver((entries) => {\n\n      for (const entry of entries) {\n        if (entry.contentRect) {\n\n//          const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;\n          const movebox = this.component.shadowRoot.getElementById('field-info') as HTMLElement;\n          // console.log(editbox)\n          // editbox.style.height = entry.contentRect.height + \"px\"\n          // editbox.style.width = entry.contentRect.width + \"px\"\n\n          movebox.style.height = entry.contentRect.height + \"px\"\n          movebox.style.width = entry.contentRect.width + \"px\"\n\n        }\n      }\n    })\n\n    this.sizeObserver.observe(this.component)\n\n    // New dropped components automatically need selecting.\n    if (this.selected) this.component.style.border = \"1px dotted red\";\n    else this.component.style.border = \"1px solid black\";\n  }\n\n\n\n  render() {\n    return (\n      <Host class={{\n        'ls-editor-field': true,\n        'is-selected': this.selected\n      }}>\n          <input id=\"editing-input\"\n            class={this.isEditing ? \"ls-editor-field-editable\" : \"hidden-field\"}\n            type={getInputType(this.dataItem.validation).inputType}\n            value={this.dataItem?.value || this.innerValue}\n            onChange={(e) => this.onInputChange(e)}\n          />\n          <div id=\"field-info\" class={this.isEditing ? \"hidden-field\" : \"ls-editor-field-draggable\"}>\n            {this.innerValue || this.dataItem?.label || this.dataItem?.formElementType}\n          </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-editor-field.js","sourceRoot":"","sources":["../../../src/components/ls-editor-field/ls-editor-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop, Watch, Listen } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-editor-field',\n  styleUrl: 'ls-editor-field.css',\n  shadow: true,\n})\nexport class LsEditorField {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() selected: boolean;\n  @Prop() readonly: boolean;\n  @Prop() palette: string[];\n  @Prop() type: 'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate';\n  @Prop() page: { height: number; width: number };\n  @State() isEditing: boolean = false;\n  @State() heldEdge: string = null;\n  @State() isEdgeDragging: boolean = false;\n  @State() innerValue: string;\n  private sizeObserver: ResizeObserver;\n\n  @Listen('keydown')\n  handleInput(e: KeyboardEvent) {\n    if (e.code === 'Enter') {\n      this.isEditing = false;\n      this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'));\n    }\n  }\n\n  @Listen('mousemove', { capture: true })\n  handleMouseMove(e) {\n    if (this.readonly) return;\n    if (!e.clientX) return;\n\n    // Determine which edge is being moved over and what cursor to show.\n    if (Math.abs(e.offsetX) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetY) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else {\n      this.component.style.cursor = 'move';\n    }\n  }\n\n  @Listen('dblclick', { capture: true })\n  handleDoubleClick() {\n    if (this.readonly) return;\n    this.isEditing = true;\n    this.heldEdge = null;\n    this.isEdgeDragging = false;\n    this.sizeObserver.disconnect();\n    this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;\n\n    const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLInputElement;\n    console.log(editbox);\n\n    if (editbox) {\n      editbox.className = 'ls-editor-field-editable';\n      editbox.focus();\n    }\n  }\n\n  @Listen('dragstart', { capture: false, passive: false })\n  handleDragStart(event) {\n    console.log('dragstart ls-editor-field', event, this.type);\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\n      'application/json',\n      JSON.stringify({\n        type: this.type,\n      }),\n    );\n    event.dataTransfer.dropEffect = 'move';\n  }\n\n  @Watch('selected')\n  watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n    if (_newValue) {\n      this.component.style.background = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {this.component.style.background = 'transparent';}\n  }\n\n  onInputChange(e) {\n    // console.log(\"INPUT CHANGE\", e);\n    this.innerValue = e.target.value;\n  }\n\n  componentDidLoad() {\n    this.sizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.contentRect) {\n          //          const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;\n          const movebox = this.component.shadowRoot.getElementById('field-info') as HTMLElement;\n          // console.log(editbox)\n          // editbox.style.height = entry.contentRect.height + \"px\"\n          // editbox.style.width = entry.contentRect.width + \"px\"\n\n          movebox.style.height = entry.contentRect.height + 'px';\n          movebox.style.width = entry.contentRect.width + 'px';\n        }\n      }\n    });\n\n    this.sizeObserver.observe(this.component);\n\n    // New dropped components automatically need selecting.\n    if (this.selected) {\n      this.component.style.background = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else this.component.style.background = `transparent`;\n  }\n\n  participantColor = (index: number) => {\n    return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n  };\n\n  render() {\n    console.log('Rendering ls-editor-field', this.dataItem);\n    return (\n      <Host style={{ border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` }}>\n        <div\n          class={{\n            'ls-editor-field': true,\n            'is-selected': this.selected,\n          }}\n        >\n          <input\n            id=\"editing-input\"\n            class={this.isEditing ? 'ls-editor-field-editable' : 'hidden-field'}\n            type={getInputType(this.dataItem.validation).inputType}\n            value={this.dataItem?.value || this.innerValue}\n            onChange={e => this.onInputChange(e)}\n          />\n          <div id=\"field-info\" class={this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable'}>\n            {this.innerValue || this.dataItem?.label || this.dataItem?.formElementType}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-editor-table/ls-editor-table.js

@@ -23,7 +23,7 @@ export class LsEditorTable {
         });
     }
     render() {
-        return (h(Host, { key: '9b513f19b787f2f134bf36fd9043d8963d094779' }, h("table", { key: '0374a11a586b7ef08e4ad68b8c7b52b0798b7d53', id: "ls-editor-table" }), h("slot", { key: 'd1ba471bddc1f4e80727723aedd7fd4a5a93abd3' })));
+        return (h(Host, { key: 'ffe897428c34a78dc5ba8da43fe72414f67393cb' }, h("table", { key: 'ae2af258372dec94b87db132bcecff4223cd1ead', id: "ls-editor-table" }), h("slot", { key: 'ef198fa73001fec2d580e6b0c5d2979fd984b70a' })));
     }
     static get is() { return "ls-editor-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,23 @@
 :host {
-  display: block;
-  padding: 4px
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+}
+
+.activeIcon, .defaultIcon {
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--gray-80, #787A80);
+}
+
+.defaultIcon:hover {
+  background-color: var(--primary-10, #EFF4FF);
+  color: var(--primary-100, #0C1457);
+  cursor: pointer;
 }
 
 .activeIcon {
-  background-color: aliceblue;
+  background-color: var(--primary-60, #4456F6);
+  color: var(--white, #fff);
 }

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

@@ -1,14 +1,24 @@
 import { Host, h } from "@stencil/core";
 export class LsFeatureColoumn {
     /**
-    * Determines / sets which of the far left 'managers' is active.
-    * {'document' | 'toolbox' | 'participant' }
-    */
+     * Determines / sets which of the far left 'managers' is active.
+     * {'document' | 'toolbox' | 'participant' }
+     */
     manager = 'toolbox';
     // Send an manager change up the DOM
     manage;
     render() {
-        return (h(Host, { key: '05825cfb85f3094e8947b46c523bcab9a6117141' }, h("ls-icon", { key: '471a4c44cd90f2458447f323afc0d63459758d58', name: 'document', size: "36", class: this.manager === 'document' ? 'activeIcon' : '', onClick: () => { console.log('document'); this.manage.emit('document'); this.manager = 'document'; } }), h("ls-icon", { key: '8f8feec94f1de5a359fc207ff94e58677555b589', name: 'typing-input', size: "36", class: this.manager === 'toolbox' ? 'activeIcon' : '', onClick: () => { this.manage.emit('toolbox'); this.manager = 'toolbox'; } }), h("ls-icon", { key: '327c15a1180f4525fb15a81f83c4dd56e3028fad', name: 'user-group', size: "36", class: this.manager === 'participant' ? 'activeIcon' : '', onClick: () => { this.manage.emit('participant'); this.manager = 'participant'; } }), h("slot", { key: '4cb33cf3b7be727f6d62e3f1abbde6249bb5065d' })));
+        return (h(Host, { key: 'aebd8c74fa175f911dacb77740c787c564049e7b' }, h("div", { key: 'cfd4c5438341e029807e26dd7a6e513c16cead1e', class: this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                console.log('document');
+                this.manage.emit('document');
+                this.manager = 'document';
+            } }, h("ls-icon", { key: 'cd7dad83c7b45fbbd73a734e6d45b8f74bcad5db', name: "document", size: "24" })), h("div", { key: '86f2370a984220a01aafd8d0b0bcad6bb083586c', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('toolbox');
+                this.manager = 'toolbox';
+            } }, h("ls-icon", { key: 'a4ce3440b682ee0890ef5a4111a6f478007aa963', name: "typing-input", size: "24" })), h("div", { key: '30deca23fcadc0e3f8c8b9c2d912842a4e3b5b06', class: this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('participant');
+                this.manager = 'participant';
+            } }, h("ls-icon", { key: 'f192ca05928ef54523b9bf36d4627667e6490da2', name: "user-group", size: "24" })), h("slot", { key: '69bf66c9594d5cff7cb117aa309f8b58bbef77c2' })));
     }
     static get is() { return "ls-feature-column"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ls-feature-column.js","sourceRoot":"","sources":["../../../src/components/ls-feature-column/ls-feature-column.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,gBAAgB;IAEzB;;;MAGE;IACsB,OAAO,GAA2C,SAAS,CAAC;IAEpF,oCAAoC;IAC3B,MAAM,CAAuD;IAGxE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAE,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAA,CAAA,CAAC,GAAG;YAC9L,gEAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAG,OAAO,EAAE,GAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA,CAAA,CAAC,GAAG;YACzK,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAG,OAAO,EAAE,GAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAA,CAAA,CAAC,GAAG;YAEnL,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n\n    /**\n    * Determines / sets which of the far left 'managers' is active.\n    * {'document' | 'toolbox' | 'participant' }\n    */\n    @Prop({ mutable: true}) manager: 'document' | 'toolbox' | 'participant' = 'toolbox';\n  \n    // Send an manager change up the DOM\n    @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant'>;\n  \n  \n  render() {\n    return (\n      <Host>\n        <ls-icon name='document' size=\"36\" class={this.manager === 'document' ? 'activeIcon' : ''} onClick={()=> { console.log('document');this.manage.emit('document'); this.manager = 'document'}}/>\n        <ls-icon name='typing-input' size=\"36\"  class={this.manager === 'toolbox' ? 'activeIcon' : ''}  onClick={()=> { this.manage.emit('toolbox'); this.manager = 'toolbox'}}/>\n        <ls-icon name='user-group' size=\"36\"  class={this.manager === 'participant' ? 'activeIcon' : ''}  onClick={()=> { this.manage.emit('participant'); this.manager = 'participant'}}/>        \n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-feature-column.js","sourceRoot":"","sources":["../../../src/components/ls-feature-column/ls-feature-column.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,gBAAgB;IAC3B;;;OAGG;IACsB,OAAO,GAA2C,SAAS,CAAC;IAErF,oCAAoC;IAC3B,MAAM,CAAuD;IAEtE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACjE,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;oBACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;oBAC7B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;gBAC5B,CAAC;gBAED,gEAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC;YACN,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAChE,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;oBAC5B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;gBAC3B,CAAC;gBAED,gEAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC;YACN,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACpE,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;oBAChC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;gBAC/B,CAAC;gBAED,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC;YAEN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n  /**\n   * Determines / sets which of the far left 'managers' is active.\n   * {'document' | 'toolbox' | 'participant' }\n   */\n  @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant' = 'toolbox';\n\n  // Send an manager change up the DOM\n  @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant'>;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            console.log('document');\n            this.manage.emit('document');\n            this.manager = 'document';\n          }}\n        >\n          <ls-icon name=\"document\" size=\"24\" />\n        </div>\n        <div\n          class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('toolbox');\n            this.manager = 'toolbox';\n          }}\n        >\n          <ls-icon name=\"typing-input\" size=\"24\" />\n        </div>\n        <div\n          class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('participant');\n            this.manager = 'participant';\n          }}\n        >\n          <ls-icon name=\"user-group\" size=\"24\" />\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -17,4 +17,284 @@ button {
 }
 button:hover {
   background-color: rgb(219, 219, 219);
-}
+}
+
+/* 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-alignment/ls-field-alignment.js

@@ -111,7 +111,7 @@ export class LsFieldAlignment {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: 'd9f095d435599bcbafc6070268ab85f1c4af5a55' }, h("div", { key: 'c6c0471b27e937853824e8b6163569b95b4a577f' }, h("button", { key: 'bcc25bee3d4fb220c212403e67a399935764fb2e', onClick: () => this.left(), class: 'ls-round-button', "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'c3c1c3ba59ef4380487fcac5a2e93b42c9c105f7', name: "field-alignment-left" })), h("button", { key: '5c201eb4e529ae9f85843b20dc753e51ac6c04a3', onClick: () => this.center(), class: 'ls-round-button', "aria-label": "Align selected fields vertically about their centre.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '236c1680b8bbbffc46ee9c031196905e07185d31', name: "field-alignment-centre" })), h("button", { key: '97cd0fc4c427cf3eb4e6f601827f801e2216810b', onClick: () => { this.right(); }, "aria-label": "Align selected fields vertically about their right edge.", class: 'ls-round-button', "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'c61025d008db4a826546e97248a65b59f44f123b', name: "field-alignment-right" })), h("button", { key: 'a05c454d154c4c2d5f4d64c82992d4d9f300e5fb', onClick: () => this.top(), class: 'ls-round-button', "aria-label": "Align selected fields by their top.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'f434c087cf488bb639f5e88cd67b719ebe85054d', name: "field-alignment-top" })), h("button", { key: '556d8200b9b694aeeae5e3859d01192dac5ada8d', onClick: () => this.middle(), class: 'ls-round-button', "aria-label": "Align selected fields by their middles.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '0c646788b66dfdb2d2a9e681ef588a1bb50f0f51', name: "field-alignment-middle" })), h("button", { key: '6f5bf9c74da330ac6bc96e3ea1e3779446c2bd1e', onClick: () => this.bottom(), class: 'ls-round-button', "aria-label": "Align selected fields by their bottoms.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '9b1bc73866d46b36204e8820dd744234f4afa2d5', name: "field-alignment-bottom" }))), h("slot", { key: '24717554ed716c527e37d145636124b04afca7d8' })));
+        return (h(Host, { key: '1de454622dacec573aa846f4abd4a66366b0341b' }, h("div", { key: '76141f1ec6aa2f4f3bd38854864168dd3595eaca' }, h("button", { key: '9c6ca0b268fa144f3e443c06266650685c74eca5', onClick: () => this.left(), class: 'ls-round-button', "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '2b6e3e44822723880243799cd86a4d63fecfc861', name: "field-alignment-left" })), h("button", { key: 'e94a3ff0d3bfb5a604578753fa15d5a27fa6d135', onClick: () => this.center(), class: 'ls-round-button', "aria-label": "Align selected fields vertically about their centre.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'fe6055521f6e75ba05ee952cc3eb2cc09d27581f', name: "field-alignment-centre" })), h("button", { key: 'e4fe414fbad13459147d4fa031b1b1aeba977326', onClick: () => { this.right(); }, "aria-label": "Align selected fields vertically about their right edge.", class: 'ls-round-button', "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'ff29fe2d2ed86c236601791ff257146781929fe8', name: "field-alignment-right" })), h("button", { key: '790ab98cba5609f1013dedbac7b491787d4358bc', onClick: () => this.top(), class: 'ls-round-button', "aria-label": "Align selected fields by their top.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '0836f4f20b4f9fac89460b26d0f925b9dd555a93', name: "field-alignment-top" })), h("button", { key: '6c09a301cf4f7dd260bf3ddb5736fb1500433332', onClick: () => this.middle(), class: 'ls-round-button', "aria-label": "Align selected fields by their middles.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '3d40860e65401b3cdc60a95bcec528b218f1b14b', name: "field-alignment-middle" })), h("button", { key: '2b73ac8e8da856fc5953700f10f5004ac9d31db4', onClick: () => this.bottom(), class: 'ls-round-button', "aria-label": "Align selected fields by their bottoms.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '89b5cfc9f8183122f0e7b50398ec86abfab375e9', name: "field-alignment-bottom" }))), h("slot", { key: 'b62dc4ce2f4e2105e87e19e21b660149907a5f0c' })));
     }
     static get is() { return "ls-field-alignment"; }
     static get encapsulation() { return "shadow"; }