@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.0

package/dist/collection/components/tab/tab.js

@@ -1,85 +1,88 @@
-import { h, Host } from '@stencil/core';
-import classNames from 'classnames';
+import { h, Host } from "@stencil/core";
+import classNames from "classnames";
 export class Tab {
-  constructor() {
-    this.handleClick = () => {
-      this.tabClick.emit(this.label);
-    };
-    this.label = undefined;
-    this.active = false;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: classNames('content', {
-        active: this.active,
-      }) }, h("slot", null))));
-  }
-  static get is() { return "vertex-tab"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tab.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tab.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label to include in tab list."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "active",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabClick",
-        "name": "tabClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
+    constructor() {
+        this.active = false;
+        this.handleClick = () => {
+            this.tabClick.emit(this.label);
+        };
+    }
+    render() {
+        return (h(Host, { key: 'a4ff9afd6d600dde690af676bebbff70d01b4ed5' }, h("div", { key: '5603e1e7ff0cbf7a5a8c56b673efd22cfeb61448', class: classNames('content', {
+                active: this.active,
+            }) }, h("slot", { key: '880febf1cc2e9b9d9eca560425675d351d216901' }))));
+    }
+    static get is() { return "vertex-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to include in tab list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabClick",
+                "name": "tabClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/tab/util.js

@@ -1,3 +1,3 @@
 export function isTabElement(element) {
-  return element.tagName === 'VERTEX-TAB';
+    return element.tagName === 'VERTEX-TAB';
 }

package/dist/collection/components/tabs/tabs.js

@@ -1,159 +1,158 @@
-import { h, Host, } from '@stencil/core';
-import classNames from 'classnames';
-import { getBoundingClientRect, readDOM } from '../../util/components/dom';
-import { isTabElement } from '../tab/util';
+import { h, Host, } from "@stencil/core";
+import classNames from "classnames";
+import { getBoundingClientRect, readDOM } from "../../util/components/dom";
+import { isTabElement } from "../tab/util";
 export class Tabs {
-  constructor() {
-    this.indicatorInitialized = false;
-    this.handleLabelClick = (label) => {
-      if (this.active != null) {
-        this.updateActiveOnTab(this.active, false);
-      }
-      this.active = label;
-      this.updateActiveOnTab(this.active, true);
-      this.selectedTabChanged.emit(label);
-    };
-    this.updateActiveOnTab = (label, active) => {
-      const activeTab = this.findTabByLabel(label);
-      if (activeTab != null) {
-        activeTab.active = active;
-      }
-    };
-    this.findTabByLabel = (label) => {
-      var _a;
-      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
-      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
-      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
-        ? Array.from(slotAssignedElements[0].children)
-        : undefined;
-      return slotChildren != null
-        ? slotChildren.filter(isTabElement).find((el) => el.label === label)
-        : undefined;
-    };
-    this.updateTabLabels = () => {
-      var _a;
-      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
-      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
-      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
-        ? Array.from(slotAssignedElements[0].children)
-        : undefined;
-      this.labels =
-        slotChildren != null
-          ? slotChildren.filter(isTabElement).map((t) => t.label)
-          : [];
-    };
-    this.active = undefined;
-    this.labels = [];
-    this.activeBounds = undefined;
-    this.activeButtonEl = undefined;
-  }
-  componentWillLoad() {
-    this.updateTabLabels();
-  }
-  componentDidLoad() {
-    if (this.active != null) {
-      this.updateActiveOnTab(this.active, true);
+    constructor() {
+        this.labels = [];
+        this.indicatorInitialized = false;
+        this.handleLabelClick = (label) => {
+            if (this.active != null) {
+                this.updateActiveOnTab(this.active, false);
+            }
+            this.active = label;
+            this.updateActiveOnTab(this.active, true);
+            this.selectedTabChanged.emit(label);
+        };
+        this.updateActiveOnTab = (label, active) => {
+            const activeTab = this.findTabByLabel(label);
+            if (activeTab != null) {
+                activeTab.active = active;
+            }
+        };
+        this.findTabByLabel = (label) => {
+            var _a;
+            const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+            const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+            const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+                ? Array.from(slotAssignedElements[0].children)
+                : undefined;
+            return slotChildren != null
+                ? slotChildren.filter(isTabElement).find((el) => el.label === label)
+                : undefined;
+        };
+        this.updateTabLabels = () => {
+            var _a;
+            const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+            const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+            const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+                ? Array.from(slotAssignedElements[0].children)
+                : undefined;
+            this.labels =
+                slotChildren != null
+                    ? slotChildren.filter(isTabElement).map((t) => t.label)
+                    : [];
+        };
     }
-    this.indicatorInitialized = false;
-    this.handleActiveButtonChange();
-  }
-  componentDidUpdate() {
-    // Place the indicator if it hasn't been initialized yet
-    if (!this.indicatorInitialized) {
-      this.handleActiveButtonChange();
+    componentWillLoad() {
+        this.updateTabLabels();
     }
-  }
-  handleActiveButtonChange() {
-    const button = this.activeButtonEl;
-    if (button != null) {
-      readDOM(() => {
-        const hostElBounds = getBoundingClientRect(this.hostEl);
-        const activeBounds = getBoundingClientRect(button);
-        this.activeBounds = {
-          x: activeBounds.x - hostElBounds.x,
-          width: activeBounds.width,
-        };
-        if (this.activeBounds.width !== 0) {
-          this.indicatorInitialized = true;
+    componentDidLoad() {
+        if (this.active != null) {
+            this.updateActiveOnTab(this.active, true);
         }
-      });
+        this.indicatorInitialized = false;
+        this.handleActiveButtonChange();
     }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "wrapper" }, h("div", { class: "labels" }, this.labels.map((label) => (h("button", { class: classNames('label', {
-        active: this.active === label,
-      }), "data-label": label, ref: (el) => {
-        if (this.active === label) {
-          this.activeButtonEl = el;
+    componentDidUpdate() {
+        // Place the indicator if it hasn't been initialized yet
+        if (!this.indicatorInitialized) {
+            this.handleActiveButtonChange();
         }
-      }, onClick: () => this.handleLabelClick(label) }, label, h("div", { class: "hidden-label-text" }, label)))), h("slot", { name: "label-header" }), this.activeBounds && (h("div", { class: "indicator", style: {
-        left: `${this.activeBounds.x}px`,
-        width: `${this.activeBounds.width}px`,
-      } }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: this.updateTabLabels })))));
-  }
-  static get is() { return "vertex-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tabs.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tabs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "active",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "labels": {},
-      "activeBounds": {},
-      "activeButtonEl": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selectedTabChanged",
-        "name": "selectedTabChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "An event that is emitted whenever the selected tab changes\nand contains the label of the newly selected tab."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+    }
+    handleActiveButtonChange() {
+        const button = this.activeButtonEl;
+        if (button != null) {
+            readDOM(() => {
+                const hostElBounds = getBoundingClientRect(this.hostEl);
+                const activeBounds = getBoundingClientRect(button);
+                this.activeBounds = {
+                    x: activeBounds.x - hostElBounds.x,
+                    width: activeBounds.width,
+                };
+                if (this.activeBounds.width !== 0) {
+                    this.indicatorInitialized = true;
+                }
+            });
         }
-      }];
-  }
-  static get elementRef() { return "hostEl"; }
-  static get watchers() {
-    return [{
-        "propName": "activeButtonEl",
-        "methodName": "handleActiveButtonChange"
-      }];
-  }
+    }
+    render() {
+        return (h(Host, { key: '7e3444ca371e0971c2f56639cf700269f7bf2f1e' }, h("div", { key: 'fdc9e654e6e59f3a21aedbf1229fc43fd07c08a0', class: "wrapper" }, h("div", { key: '8142c5c29e90d980186216e9a1cb360fabd4ca78', class: "labels" }, this.labels.map((label) => (h("button", { class: classNames('label', {
+                active: this.active === label,
+            }), "data-label": label, ref: (el) => {
+                if (this.active === label) {
+                    this.activeButtonEl = el;
+                }
+            }, onClick: () => this.handleLabelClick(label) }, label, h("div", { class: "hidden-label-text" }, label)))), h("slot", { key: '3fd4ea1b4463dc75e497512298806d2362310cd0', name: "label-header" }), this.activeBounds && (h("div", { key: '919270b3ed671b8c1a41f7e697c19604f85fc136', class: "indicator", style: {
+                left: `${this.activeBounds.x}px`,
+                width: `${this.activeBounds.width}px`,
+            } }))), h("div", { key: '4c11d9bd68cbb1162ca45dd3855e3f4c060399ff', class: "tab-content" }, h("slot", { key: '1209610abecfbfc5d3ff92cc40de971fbec8673d', onSlotchange: this.updateTabLabels })))));
+    }
+    static get is() { return "vertex-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "labels": {},
+            "activeBounds": {},
+            "activeButtonEl": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectedTabChanged",
+                "name": "selectedTabChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event that is emitted whenever the selected tab changes\nand contains the label of the newly selected tab."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "activeButtonEl",
+                "methodName": "handleActiveButtonChange"
+            }];
+    }
 }