xv-webcomponents 0.1.29 → 0.1.31

package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js

@@ -1,57 +1,42 @@
 import { Host, h } from "@stencil/core";
-import { TABLE_TAG } from "../defs";
+import { XV_EXPANDABLE_KEY, XV_TABLE_TAG } from "../_vars";
+import { setAttr, uidGenerator } from "../../../utils/utils";
 export class XvTableRow {
     constructor() {
-        /**
-         * Is row will be expandable
-         * If it's true then the next row will be collapsed
-         */
-        this.expandable = false;
-        /**
-         * Default state of expandable
-         */
-        this.expanded = false;
-        /**
-         * Disabled status
-         */
-        this.disabled = false;
-        this.cols = 1;
-        this.hovered = false;
-        this.checkboxChange = (e) => {
-            this.checked = e.detail;
-        };
-        this.onExpandHandle = async () => {
-            this.expanded = !this.expanded;
-            const parent = this.el.parentElement;
-            if (parent.tagName === TABLE_TAG.EXPAND) {
-                await (parent === null || parent === void 0 ? void 0 : parent.toggleExpand(this.expanded));
-            }
+        this.checkHandle = ({ detail: checked }) => {
+            this.checked = checked;
+            if (!checked && this.partial)
+                this.partial = checked;
         };
     }
     checkedChangeHandle() {
-        const changeData = {
-            name: this.selectionName,
+        if (!this.name)
+            this.name = uidGenerator();
+        this.selectRow.emit({
+            name: this.name,
             value: this.value,
             checked: this.checked,
-        };
-        if (this.expandable || this.groupId) {
-            changeData.group = { id: this.groupId, isMainRow: !!this.expandable };
-        }
-        if (changeData.group) {
-            this.checkedGroupChange.emit(changeData);
-        }
-        else {
-            this.checkedChange.emit(changeData);
-        }
+            partial: this.partial,
+            header: this.header,
+            expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
+        });
     }
-    async componentWillLoad() {
-        this.id = this.el.id;
-        this.cols = this.el.childElementCount;
-        // TODO: with initial checked values
-        this.checked && this.checkedChangeHandle();
+    setInitialAttrs() {
+        if (this.variant || !this.hover) {
+            const tableEl = this.el.closest(XV_TABLE_TAG);
+            if (!this.hover) {
+                this.hover = tableEl.hasAttribute('hover');
+            }
+            if (this.variant) {
+                setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
+            }
+        }
     }
     render() {
-        return (h(Host, { key: '0ecaf319abeb4d74f304ce9c87c150d0aafb61f8', role: "row", cols: this.cols }, h("div", { key: '4e5737a8bbb29863419a2eb91cb197fbe5e55d82', class: "left-container" }, this.expandable && (h("button", { key: '66298e7b69b89720a08160d0c922d04edef792c1', onClick: this.onExpandHandle, class: `expand-btn ${this.expanded ? 'expanded' : ''}` })), this.selectionName && (h("xv-checkbox-v2", { key: '4c01f35c763a00cb5f60330307a0be2ab6321db6', disabled: this.disabled, name: this.selectionName, value: this.value, checked: !!(this.checked || this.partial), partial: this.partial, onEventChange: this.checkboxChange }))), h("slot", { key: 'd559c89935cc9de78b712e238a1a08c537b67a5d' })));
+        return (h(Host, { key: '5a5fd70ee1706f3c250c58139a2dc81dfd5a4a6a' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '4a9ac57fcb6baccaf97d866519b747ef1d921199', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '452ea4f34c537f02f16ef0c26ad17abff15f943d', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: 'b92316fbec5ed18d0097017cc260097e87443b79', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '5a80306e5b35a072d9f8cabcb9fa3a9bce8ec72c' })));
+    }
+    componentWillLoad() {
+        this.setInitialAttrs();
     }
     static get is() { return "xv-table-v2-row"; }
     static get encapsulation() { return "shadow"; }
@@ -67,107 +52,166 @@ export class XvTableRow {
     }
     static get properties() {
         return {
-            "expandable": {
+            "checked": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
+                    "original": "SelectRowDto['checked']",
                     "resolved": "boolean",
-                    "references": {}
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Is row will be expandable\nIf it's true then the next row will be collapsed"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expandable",
-                "reflect": true,
-                "defaultValue": "false"
+                "attribute": "checked",
+                "reflect": true
             },
-            "expanded": {
+            "partial": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
+                    "original": "SelectRowDto['partial']",
                     "resolved": "boolean",
-                    "references": {}
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "partial",
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectRowDto['name']",
+                    "resolved": "string",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Default state of expandable"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
-                "reflect": true,
-                "defaultValue": "false"
+                "attribute": "name",
+                "reflect": true
             },
-            "disabled": {
-                "type": "boolean",
+            "value": {
+                "type": "any",
                 "mutable": false,
+                "complexType": {
+                    "original": "SelectRowDto['value']",
+                    "resolved": "number | object | string",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "hover": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled status"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
+                "attribute": "hover",
+                "reflect": true
             },
-            "selectionName": {
-                "type": "string",
+            "readonly": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Checkbox row name"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selection-name",
+                "attribute": "readonly",
                 "reflect": true
             },
-            "value": {
-                "type": "string",
+            "required": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Checkbox row value"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
+                "attribute": "required",
                 "reflect": true
             },
-            "checked": {
+            "disabled": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -177,14 +221,14 @@ export class XvTableRow {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Checkbox row status"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
+                "attribute": "disabled",
                 "reflect": true
             },
-            "partial": {
+            "header": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -196,19 +240,19 @@ export class XvTableRow {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Checkbox row with minus icon"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "partial",
+                "attribute": "header",
                 "reflect": true
             },
-            "groupId": {
+            "variant": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'checkbox' | 'radio' | ''",
+                    "resolved": "\"\" | \"checkbox\" | \"radio\"",
                     "references": {}
                 },
                 "required": false,
@@ -219,22 +263,15 @@ export class XvTableRow {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-id",
+                "attribute": "variant",
                 "reflect": true
             }
         };
     }
-    static get states() {
-        return {
-            "id": {},
-            "cols": {},
-            "hovered": {}
-        };
-    }
     static get events() {
         return [{
-                "method": "checkedChange",
-                "name": "checkedChange",
+                "method": "selectRow",
+                "name": "selectRow",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -243,24 +280,15 @@ export class XvTableRow {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ name: string, value?: string; checked: boolean }",
-                    "resolved": "{ name: string; value?: string; checked: boolean; }",
-                    "references": {}
-                }
-            }, {
-                "method": "checkedGroupChange",
-                "name": "checkedGroupChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ name: string, value?: string; checked: boolean }",
-                    "resolved": "{ name: string; value?: string; checked: boolean; }",
-                    "references": {}
+                    "original": "SelectRowDto",
+                    "resolved": "SelectRowDto",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
                 }
             }];
     }

package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-table-row.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-row/xv-table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAErG,OAAO,EAAE,SAAS,EAA2B,MAAM,SAAS,CAAC;AAO7D,MAAM,OAAO,UAAU;IALvB;QAOE;;;WAGG;QACsB,eAAU,GAAY,KAAK,CAAC;QACrD;;WAEG;QACqC,aAAQ,GAAY,KAAK,CAAC;QAClE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAoB1C,SAAI,GAAW,CAAC,CAAC;QACjB,YAAO,GAAY,KAAK,CAAC;QAwB1B,mBAAc,GAAG,CAAC,CAAuB,EAAE,EAAE;YACnD,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;QAC1B,CAAC,CAAA;QAEO,mBAAc,GAAG,KAAK,IAAI,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YAErC,IAAI,MAAM,CAAC,OAAO,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;gBACxC,MAAM,CAAC,MAAmC,aAAnC,MAAM,uBAAN,MAAM,CAA+B,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,CAAC;YAC1E,CAAC;QACH,CAAC,CAAC;KAqCH;IAlEC,mBAAmB;QACjB,MAAM,UAAU,GAA4B;YAC1C,IAAI,EAAE,IAAI,CAAC,aAAa;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;QAEF,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACpC,UAAU,CAAC,KAAK,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;QACxE,CAAC;QAED,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC;YACrB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAeD,KAAK,CAAC,iBAAiB;QACrB,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QACtC,oCAAoC;QACpC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,4DAAK,KAAK,EAAC,gBAAgB;gBACxB,IAAI,CAAC,UAAU,IAAI,CAClB,+DACE,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,cAAc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,GACtD,CACH;gBACA,IAAI,CAAC,aAAa,IAAI,CACrB,uEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,cAAc,GAClC,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { XvTableExpand } from '../xv-table-expand/xv-table-expand';\nimport { TABLE_TAG, TableSelectionEventData } from '../defs';\n\n@Component({\n  tag: 'xv-table-v2-row',\n  styleUrl: 'xv-table-row.scss',\n  shadow: true,\n})\nexport class XvTableRow {\n  @Element() el: HTMLElement;\n  /**\n   * Is row will be expandable\n   * If it's true then the next row will be collapsed\n   */\n  @Prop({ reflect: true }) expandable: boolean = false;\n  /**\n   * Default state of expandable\n   */\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n  /**\n   * Disabled status\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Checkbox row name\n   */\n  @Prop({ reflect: true, attribute: 'selection-name' }) selectionName?: string;\n  /**\n   * Checkbox row value\n   */\n  @Prop({ reflect: true }) value?: string;\n  /**\n   * Checkbox row status\n   */\n  @Prop({ reflect: true, mutable: true  }) checked?: boolean;\n  /**\n   * Checkbox row with minus icon\n   */\n  @Prop({ reflect: true  }) partial?: boolean;\n  @Prop({ reflect: true, attribute: 'group-id'  }) groupId?: string;\n\n  @State() id?: string;\n  @State() cols: number = 1;\n  @State() hovered: boolean = false;\n\n  @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\n  @Event() checkedGroupChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\n\n  @Watch('checked')\n  checkedChangeHandle() {\n    const changeData: TableSelectionEventData = {\n      name: this.selectionName,\n      value: this.value,\n      checked: this.checked,\n    };\n\n    if (this.expandable || this.groupId) {\n      changeData.group = { id: this.groupId, isMainRow: !!this.expandable };\n    }\n\n    if (changeData.group) {\n      this.checkedGroupChange.emit(changeData);\n    } else {\n      this.checkedChange.emit(changeData);\n    }\n  }\n\n  private checkboxChange = (e: CustomEvent<boolean>) => {\n    this.checked = e.detail;\n  }\n\n  private onExpandHandle = async () => {\n    this.expanded = !this.expanded;\n    const parent = this.el.parentElement;\n\n    if (parent.tagName === TABLE_TAG.EXPAND) {\n      await (parent as unknown as XvTableExpand)?.toggleExpand(this.expanded);\n    }\n  };\n\n  async componentWillLoad(){\n    this.id = this.el.id;\n    this.cols = this.el.childElementCount;\n    // TODO: with initial checked values\n    this.checked && this.checkedChangeHandle();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"row\"\n        cols={this.cols}\n      >\n        <div class=\"left-container\">\n          {this.expandable && (\n            <button\n              onClick={this.onExpandHandle}\n              class={`expand-btn ${this.expanded ? 'expanded' : ''}`}\n            />\n          )}\n          {this.selectionName && (\n            <xv-checkbox-v2\n              disabled={this.disabled}\n              name={this.selectionName}\n              value={this.value}\n              checked={!!(this.checked || this.partial)}\n              partial={this.partial}\n              onEventChange={this.checkboxChange}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xv-table-row.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-row/xv-table-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { SelectRowDto, XV_EXPANDABLE_KEY, XV_TABLE_TAG } from '../_vars';\nimport { setAttr, uidGenerator } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-row',\n  styleUrl: 'xv-table-row.scss',\n  shadow: true,\n})\nexport class XvTableRow {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) checked?: SelectRowDto['checked'];\n  @Prop({ reflect: true, mutable: true }) partial?: SelectRowDto['partial'];\n  @Prop({ reflect: true, mutable: true }) name?: SelectRowDto['name'];\n  @Prop({ reflect: true }) value?: SelectRowDto['value'];\n  @Prop({ reflect: true, mutable: true }) hover?: boolean;\n  @Prop({ reflect: true }) readonly?: boolean;\n  @Prop({ reflect: true }) required?: boolean;\n  @Prop({ reflect: true }) disabled?: boolean;\n  @Prop({ reflect: true }) header?: boolean;\n  @Prop({ reflect: true, mutable: true }) variant?: 'checkbox' | 'radio' | '';\n\n  @Event({ eventName: 'selectRow' }) selectRow: EventEmitter<SelectRowDto>;\n\n  @Watch('checked')\n  checkedChangeHandle() {\n    if (!this.name) this.name = uidGenerator();\n    this.selectRow.emit({\n      name: this.name,\n      value: this.value,\n      checked: this.checked,\n      partial: this.partial,\n      header: this.header,\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\n    });\n  }\n\n  private checkHandle = ({ detail: checked }: CustomEvent<boolean>) => {\n    this.checked = checked;\n    if (!checked && this.partial) this.partial = checked;\n  };\n\n  private setInitialAttrs() {\n    if (this.variant || !this.hover) {\n      const tableEl = this.el.closest(XV_TABLE_TAG);\n      if (!this.hover) {\n        this.hover = tableEl.hasAttribute('hover');\n      }\n      if (this.variant) {\n        setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.variant !== undefined && (\n          <xv-table-v2-cell class=\"cell-control\">\n            {this.variant === 'checkbox' && (\n              <xv-checkbox-v2\n                name={this.name}\n                partial={this.partial}\n                checked={this.checked || this.partial}\n                disabled={this.disabled}\n                required={this.required}\n                readonly={this.readonly}\n                onEventChange={this.checkHandle}\n              />\n            )}\n            {this.variant === 'radio' && (\n              <input\n                type=\"radio\"\n                name={this.name}\n                checked={this.checked || this.partial}\n                disabled={this.disabled}\n                required={this.required}\n                readonly={this.readonly}\n              />\n            )}\n          </xv-table-v2-cell>\n        )}\n\n        <slot />\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setInitialAttrs();\n  }\n}\n"]}