legalesign-document-viewer 0.7.3 → 0.7.4

package/dist/collection/components/ls-participant-select/ls-participant-select.js

@@ -0,0 +1,198 @@
+import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+export class LsParticipantSelect {
+    /**
+   * The id of the currently selected role.
+   * {string}
+   */
+    selected;
+    /**
+     * The currently selected role.
+     * {number}
+     */
+    selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };
+    handleRoleLoad() {
+        if (this.selectedRole.default) {
+            if (this.roles.length > 0) {
+                const initialRole = this.roles.find(r => r.signerIndex === 1);
+                if (initialRole) {
+                    this.selectedRole = { ...initialRole, default: false };
+                }
+            }
+        }
+        else {
+            const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);
+            if (updatedRole) {
+                this.selectedRole = { ...updatedRole, default: false };
+            }
+        }
+    }
+    /**
+     * The current template roles.
+     * {LSApiRole}
+     */
+    roles = [];
+    isOpen = false;
+    toggleDropdown = () => {
+        this.isOpen = !this.isOpen;
+    };
+    roleChange;
+    addParticipant;
+    selectRole(role) {
+        this.selectedRole = { ...role, default: false };
+        this.isOpen = false;
+        this.roleChange.emit(role.signerIndex);
+    }
+    createHandler() {
+        this.addParticipant.emit({ type: 'SIGNER' });
+    }
+    render() {
+        return (h(Host, { key: '0cd926fb4e9509c347b467e0fff5ae2f777de3b9' }, h("div", { key: '7a667d2b2d22467c78415c3f8ed496f000dbd925', class: "dropdown" }, h("div", { key: '789bebb7cacdc63bfd5fccfacb3f7b48550a84bf', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'dbc696773772fe801bf5927c4f92921b78678e44', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bb731bd31e93074368e4a8d4e49653cc770367f6', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: 'a1f6f765d57f294eb51153938cafed6e4a06b35f', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: 'd7c14450a16a959e4ff353855bd9e4a8aa3999d6', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: 'ef6d771faa37ddf064cadca727ddae432e070839', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: 'fdf214173415c7b787203cacff11d1abeaa4b323', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '1f3fb61d9c8aecd28f8d1d8207cc549972c81eab', class: 'selected-role-label', style: {
+                background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
+                color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
+            } }, h("ls-icon", { key: '8a620751c7d232b71fcb22764fc674fe2da672ea', size: "1.125rem", name: this.selectedRole?.roleType === 'SENDER'
+                ? 'user'
+                : this.selectedRole?.roleType === 'APPROVER'
+                    ? 'check-circle'
+                    : this.selectedRole?.roleType === 'WITNESS'
+                        ? 'eye'
+                        : 'signature' }), this.selectedRole.name ||
+            (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: '6bfdea258faa9f8ad6298ac91b6d798ce89d77d7', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '1739b3ce78792312466403769d56f835e4bc3711', name: "chevron-down" }))), this.isOpen && (h("div", { key: '2e6fa1b50c016aa1dd3d104a2deda9925e9dd3aa', class: "dropdown-list" }, h("div", { key: '02681555d1a19d748d4523a65c256fbd0f347d52', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+                '--background-selected': defaultRolePalette[0].s10,
+                '--check-icon-selected': defaultRolePalette[0].s50,
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '151b5a0015c541ab5bf602f52371c1191997b938', class: 'role-icon', style: {
+                background: defaultRolePalette[0].s50,
+                color: defaultRolePalette[0].s80,
+            } }, h("ls-icon", { key: '022b7bc7c304ed3c1d25daed2cd16ef0d7e7ae04', name: "user" })), h("div", { key: '442fdffd6e92f169c3fcdeb63c7a9e15442cad14', class: 'role-text' }, h("p", { key: '4870c25c222e42d6caa23eccb6fd75f89a6072d5', class: 'role-name', style: {
+                '--role-name-selected': defaultRolePalette[0].s80,
+            } }, 'Sender'), h("p", { key: '09712e0b9e81a4e79bd9186a654411a3061d1db7', class: 'role-type', style: {
+                '--role-type-selected': defaultRolePalette[0].s80,
+            } }, "You")), h("ls-icon", { key: 'e6799e3e836ddfb740a3ff34711937dc2ae3a696', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+                '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,
+                '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,
+            }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
+                .querySelector('.check-icon')
+                ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'role-icon', style: {
+                background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,
+                color: defaultRolePalette[r?.signerIndex % 100].s90,
+            } }, h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name', style: {
+                '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
+            } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), h("p", { class: 'role-type', style: {
+                '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: '340d09adb4c134cde38d8be786220a3b391141d5', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
+                '--background-selected': defaultRolePalette[1].s10,
+                '--check-icon-selected': defaultRolePalette[1].s50,
+            } }, h("div", { key: 'e4ef14dd5572442f3aeeb49a00bfc330d03a3f9c', class: 'add-participant-icon' }, h("ls-icon", { key: 'a54bac0491fb2ce3eba35fb6c8d05d4875703533', name: "user-add" })), h("div", { key: '3d037f76c0ca29de2ff46a41cda9d4d0291aa3a6', class: 'role-text' }, h("p", { key: '5693e97fdbd99e1c747fd39b0610b6714429f4b6', class: 'role-name' }, "Add Participant"), h("p", { key: '7393518de5c0fc6b3fb4315ede70a3f2b22afe05', class: 'role-type' }, "Add a new Signer")), h("ls-icon", { key: 'a411f8b872fd3adef397099c0d8647e8f6ecd52f', class: 'plus-icon', name: "plus" }))))), h("slot", { key: 'ec4373b381f85c82698cdf724ef7764856b87fc9' })));
+    }
+    static get is() { return "ls-participant-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-participant-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-participant-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the currently selected role.\n{string}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected"
+            },
+            "roles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiRole[]",
+                    "resolved": "LSApiRole[]",
+                    "references": {
+                        "LSApiRole": {
+                            "location": "import",
+                            "path": "../../types/LSApiRole",
+                            "id": "src/types/LSApiRole.ts::LSApiRole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current template roles.\n{LSApiRole}"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedRole": {},
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "roleChange",
+                "name": "roleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "addParticipant",
+                "name": "addParticipant",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{type: LSApiRoleType, parent?: string | null}",
+                    "resolved": "{ type: LSApiRoleType; parent?: string; }",
+                    "references": {
+                        "LSApiRoleType": {
+                            "location": "import",
+                            "path": "../../types/LSApiRole",
+                            "id": "src/types/LSApiRole.ts::LSApiRoleType"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "roles",
+                "methodName": "handleRoleLoad"
+            }];
+    }
+}
+//# sourceMappingURL=ls-participant-select.js.map

package/dist/collection/components/ls-participant-select/ls-participant-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-participant-select.js","sourceRoot":"","sources":["../../../src/components/ls-participant-select/ls-participant-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-participant-select',\n  styleUrl: 'ls-participant-select.css',\n  shadow: true,\n})\nexport class LsParticipantSelect {\n  /**\n * The id of the currently selected role.\n * {string}\n */\n  @Prop({ mutable: true}) selected: string;\n  \n  /**\n   * The currently selected role.\n   * {number}\n   */\n  @State() selectedRole: { signerIndex: number; name: string; roleType?: string; default: boolean } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };\n\n  @Watch('roles')\n  handleRoleLoad() {\n    if(this.selectedRole.default) {\n      if(this.roles.length > 0) {\n        const initialRole = this.roles.find(r => r.signerIndex === 1);\n        if(initialRole) {\n          this.selectedRole = { ...initialRole, default: false };\n        }\n      }\n    } else {\n      const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);\n      if(updatedRole) {\n        this.selectedRole = { ...updatedRole, default: false };\n      }\n    }\n  }\n  /**\n   * The current template roles.\n   * {LSApiRole}\n   */\n  @Prop() roles?: LSApiRole[] = [];\n\n  @State() isOpen: boolean = false;\n\n\n  toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Event() roleChange: EventEmitter<number>;\n\n  @Event({\n    bubbles: true,\n    composed: true,\n  }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string | null}>;\n\n\n  selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n    this.selectedRole = { ...role, default: false };\n    this.isOpen = false;\n    this.roleChange.emit(role.signerIndex);\n  }\n\n  createHandler() {\n    this.addParticipant.emit({type: 'SIGNER'});\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"dropdown\">\n          <div class=\"dropdown-header\" onClick={this.toggleDropdown}>\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z\" fill=\"#78A3FA\" stroke=\"#F7F8FA\" />\n              <path\n                d=\"M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z\"\n                fill=\"#46DBAA\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z\"\n                fill=\"#FAD232\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n                stroke=\"#939599\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n            <p class={'placing-fields-text'}>Placing Fields for</p>\n            <div\n              class={'selected-role-label'}\n              style={{\n                background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n                color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n              }}\n            >\n              <ls-icon\n                size=\"1.125rem\"\n                name={\n                  this.selectedRole?.roleType === 'SENDER'\n                    ? 'user'\n                    : this.selectedRole?.roleType === 'APPROVER'\n                      ? 'check-circle'\n                      : this.selectedRole?.roleType === 'WITNESS'\n                        ? 'eye'\n                        : 'signature'\n                }\n              />\n              {this.selectedRole.name ||\n                (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n            </div>\n            <button class={'tertiaryGrey expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n              <ls-icon name=\"chevron-down\"></ls-icon>\n            </button>\n          </div>\n          {this.isOpen && (\n            <div class=\"dropdown-list\">\n              \n              <div\n                class={this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item'}\n                style={{\n                  '--background-selected': defaultRolePalette[0].s10,\n                  '--check-icon-selected': defaultRolePalette[0].s50,\n                }}\n                onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n                onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n                onMouseLeave={e =>\n                  (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n                }\n              >\n                <div\n                  class={'role-icon'}\n                  style={{\n                    background: defaultRolePalette[0].s50,\n                    color: defaultRolePalette[0].s80,\n                  }}\n                >\n                  <ls-icon name=\"user\" />\n                </div>\n                <div class={'role-text'}>\n                  <p\n                    class={'role-name'}\n                    style={{\n                      '--role-name-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    {'Sender'}\n                  </p>\n                  <p\n                    class={'role-type'}\n                    style={{\n                      '--role-type-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    You\n                  </p>\n                </div>\n\n                <ls-icon class={'check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n              </div>\n              {this.roles.map(r => (\n                <div\n                  class={r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item'}\n                  style={{\n                    '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n                    '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n                  }}\n                  onClick={() => this.selectRole(r)}\n                  onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n                  onMouseLeave={e =>\n                    (e.currentTarget as HTMLElement)\n                      .querySelector('.check-icon')\n                      ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n                  }\n                >\n                  <div\n                    class={'role-icon'}\n                    style={{\n                      background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n                      color: defaultRolePalette[r?.signerIndex % 100].s90,\n                    }}\n                  >\n                    <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n                  </div>\n                  <div class={'role-text'}>\n                    <p\n                      class={'role-name'}\n                      style={{\n                        '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n                      }}\n                    >\n                      {r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)}\n                    </p>\n                    <p\n                      class={'role-type'}\n                      style={{\n                        '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n                      }}\n                    >\n                      {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n                    </p>\n                  </div>\n                  <ls-icon\n                    class={'check-icon'}\n                    name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n                    solid={r.signerIndex === this.selectedRole?.signerIndex}\n                  />\n                </div>\n              ))}\n              <button\n                onClick={() => this.createHandler()}\n                class={'add-participant-row'}\n                style={{\n                  '--background-selected': defaultRolePalette[1].s10,\n                  '--check-icon-selected': defaultRolePalette[1].s50,\n                }}\n              >\n                <div\n                  class={'add-participant-icon'}\n                >\n                  <ls-icon name=\"user-add\" />\n                </div>\n                <div class={'role-text'}>\n                  <p class={'role-name'}>Add Participant</p>\n                  <p class={'role-type'}>Add a new Signer</p>\n                </div>\n                <ls-icon class={'plus-icon'} name=\"plus\" />\n              </button>\n            </div>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-props-section/ls-props-section.css

@@ -0,0 +1,42 @@
+* {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.ls-field-properties-section {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ls-field-properties-section-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+}
+
+.ls-field-properties-section-title {
+  color: var(--gray-90, #5e6066);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.ls-field-properties-section-description {
+  overflow: hidden;
+  color: var(--gray-80, #6c6e73);
+  text-overflow: ellipsis;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 0.75rem; /* 120% */
+}

package/dist/collection/components/ls-props-section/ls-props-section.js

@@ -0,0 +1,84 @@
+import { Host, h } from "@stencil/core";
+export class LsPropsSection {
+    sectionTitle;
+    sectionDescription;
+    row = false;
+    render() {
+        return (h(Host, { key: 'da69ef2ce2df004a4e624c483084705ba2eb801c' }, h("div", { key: '8746b0582dda9290a67b4459711dfedb4182f9e9', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, h("div", { key: '0aad3590646429eb28bc8c56433f72647ac21ec0', class: 'ls-field-properties-section-text' }, h("p", { key: '737f72f1de76dbffb1a569d759c8fcc101ab0788', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: '12b9feb2ba22d84dd6c73bed44413e0853474c93', class: 'ls-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: '39e2df7b0ae159d5be5dd59cd71d1deb180031f5' }))));
+    }
+    static get is() { return "ls-props-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-props-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-props-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sectionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "section-title"
+            },
+            "sectionDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "section-description"
+            },
+            "row": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-props-section.js.map

package/dist/collection/components/ls-props-section/ls-props-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-props-section.js","sourceRoot":"","sources":["../../../src/components/ls-props-section/ls-props-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;IACjB,YAAY,CAAS;IACrB,kBAAkB,CAAU;IAC5B,GAAG,GAAa,KAAK,CAAC;IAE9B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,6BAA6B;gBACtF,4DAAK,KAAK,EAAE,kCAAkC;oBAC5C,0DAAG,KAAK,EAAE,mCAAmC,IAAG,IAAI,CAAC,YAAY,CAAK;oBACrE,IAAI,CAAC,kBAAkB,IAAI,0DAAG,KAAK,EAAE,yCAAyC,IAAG,IAAI,CAAC,kBAAkB,CAAK,CAC1G;gBACN,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-props-section',\n  styleUrl: 'ls-props-section.css',\n  shadow: true,\n})\nexport class LsPropsSection {\n  @Prop() sectionTitle: string;\n  @Prop() sectionDescription?: string;\n  @Prop() row?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>{this.sectionTitle}</p>\n            {this.sectionDescription && <p class={'ls-field-properties-section-description'}>{this.sectionDescription}</p>}\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}