@siemens/ix 1.1.0-beta.5 → 1.1.0

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

@@ -6,36 +6,16 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, h, Host, Prop } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class TabItem {
   constructor() {
-    /**
-     * Set selected tab
-     */
     this.selected = false;
-    /**
-     * Set disabled tab
-     */
     this.disabled = false;
-    /**
-     * Set small size tab
-     */
     this.small = false;
-    /**
-     * Set icon only tab
-     */
     this.icon = false;
-    /**
-     * Set rounded tab
-     */
     this.rounded = false;
-    /**
-     * Set layout width style
-     */
+    this.counter = undefined;
     this.layout = 'auto';
-    /**
-     * Set selected placement
-     */
     this.placement = 'bottom';
   }
   tabItemClasses(props) {
@@ -59,161 +39,164 @@ export class TabItem {
         layout: this.layout,
         placement: this.placement,
         circle: this.rounded,
-      }), tabIndex: 0 },
-      h("div", { class: { circle: this.rounded, text: !this.rounded, selected: this.selected, disabled: this.disabled } },
-        h("slot", null)),
-      h("div", { class: { counter: true, selected: this.selected, hidden: !(this.rounded && this.counter !== undefined), disabled: this.disabled } }, this.counter)));
+      }), tabIndex: 0 }, h("div", { class: { circle: this.rounded, text: !this.rounded, selected: this.selected, disabled: this.disabled } }, h("slot", null)), h("div", { class: { counter: true, selected: this.selected, hidden: !(this.rounded && this.counter !== undefined), disabled: this.disabled } }, this.counter)));
   }
   static get is() { return "ix-tab-item"; }
-  static get originalStyleUrls() { return {
-    "$": ["tab-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tab-item.css"]
-  }; }
-  static get properties() { return {
-    "selected": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set selected tab"
-      },
-      "attribute": "selected",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set disabled tab"
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "small": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set small size tab"
-      },
-      "attribute": "small",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "icon": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set icon only tab"
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "rounded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set rounded tab"
-      },
-      "attribute": "rounded",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "counter": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set counter value"
-      },
-      "attribute": "counter",
-      "reflect": false
-    },
-    "layout": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'auto' | 'stretched'",
-        "resolved": "\"auto\" | \"stretched\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set layout width style"
-      },
-      "attribute": "layout",
-      "reflect": false,
-      "defaultValue": "'auto'"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'bottom' | 'top'",
-        "resolved": "\"bottom\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set selected placement"
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom'"
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tab-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tab-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set selected tab"
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set disabled tab"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set small size tab"
+        },
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set icon only tab"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rounded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set rounded tab"
+        },
+        "attribute": "rounded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "counter": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set counter value"
+        },
+        "attribute": "counter",
+        "reflect": false
+      },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'auto' | 'stretched'",
+          "resolved": "\"auto\" | \"stretched\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set layout width style"
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'bottom' | 'top'",
+          "resolved": "\"bottom\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set selected placement"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      }
+    };
+  }
 }

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

@@ -6,38 +6,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, Element, h, Host, Listen, Prop, State, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 let windowStartSize = window.innerWidth;
 export class Tabs {
   constructor() {
-    /**
-     * Set tab items to small size
-     */
+    this.clickAction = {
+      timeout: null,
+      isClick: true,
+    };
     this.small = false;
-    /**
-     * Set rounded tabs
-     */
     this.rounded = false;
-    /**
-     * Set default selected tab by index
-     */
     this.selected = 0;
-    /**
-     * Set layout width style
-     */
     this.layout = 'auto';
-    /**
-     * Set placement style
-     */
     this.placement = 'bottom';
     this.totalItems = 0;
     this.currentScrollAmount = 0;
     this.scrollAmount = 100;
     this.scrollActionAmount = 0;
-    this.clickAction = {
-      timeout: null,
-      isClick: true,
-    };
   }
   onWindowResize() {
     this.totalItems = 0;
@@ -178,128 +163,129 @@ export class Tabs {
     });
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "overflow-shadow", style: this.getArrowStyle(this.showPreviousArrow()) }),
-      h("div", { class: "arrow", style: this.getArrowStyle(this.showPreviousArrow()), onClick: () => this.move(this.scrollAmount, true) },
-        h("span", { class: "glyph glyph-chevron-left-small" })),
-      h("div", { class: "tab-items" },
-        h("div", { class: "items-content" },
-          h("slot", null))),
-      h("div", { class: "overflow-shadow right", style: this.getArrowStyle(this.showNextArrow()) }),
-      h("div", { class: "arrow right", style: this.getArrowStyle(this.showNextArrow()), onClick: () => this.move(-this.scrollAmount, true) },
-        h("span", { class: "glyph glyph-chevron-right-small" }))));
+    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.getArrowStyle(this.showPreviousArrow()) }), h("div", { class: "arrow", style: this.getArrowStyle(this.showPreviousArrow()), onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.getArrowStyle(this.showNextArrow()) }), h("div", { class: "arrow right", style: this.getArrowStyle(this.showNextArrow()), onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
   }
   static get is() { return "ix-tabs"; }
-  static get originalStyleUrls() { return {
-    "$": ["tabs.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tabs.css"]
-  }; }
-  static get properties() { return {
-    "small": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set tab items to small size"
-      },
-      "attribute": "small",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "rounded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set rounded tabs"
-      },
-      "attribute": "rounded",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "selected": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set default selected tab by index"
-      },
-      "attribute": "selected",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "layout": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'auto' | 'stretched'",
-        "resolved": "\"auto\" | \"stretched\"",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set tab items to small size"
+        },
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set layout width style"
+      "rounded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set rounded tabs"
+        },
+        "attribute": "rounded",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "layout",
-      "reflect": false,
-      "defaultValue": "'auto'"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'bottom' | 'top'",
-        "resolved": "\"bottom\" | \"top\"",
-        "references": {}
+      "selected": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set default selected tab by index"
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set placement style"
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'auto' | 'stretched'",
+          "resolved": "\"auto\" | \"stretched\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set layout width style"
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "'auto'"
       },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom'"
-    }
-  }; }
-  static get states() { return {
-    "totalItems": {},
-    "currentScrollAmount": {},
-    "scrollAmount": {},
-    "scrollActionAmount": {}
-  }; }
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'bottom' | 'top'",
+          "resolved": "\"bottom\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set placement style"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "totalItems": {},
+      "currentScrollAmount": {},
+      "scrollAmount": {},
+      "scrollActionAmount": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "onWindowResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "onWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }