@siemens/ix 1.0.0-beta.2

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

@@ -0,0 +1,200 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * 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, Event, h, Host, Listen, Prop } from '@stencil/core';
+export class GroupItem {
+  constructor() {
+    /**
+     * Supress the selection of the group
+     */
+    this.suppressSelection = false;
+    /**
+     * The elements tabindex attribute will get set accordingly.
+     * If true tabindex will be 0, -1 otherwise.
+     */
+    this.focusable = true;
+  }
+  clickListen() {
+    if (this.suppressSelection) {
+      return;
+    }
+    this.selectedChanged.emit(this.hostElement);
+  }
+  render() {
+    return (h(Host, { class: {
+        selected: this.selected && !this.suppressSelection,
+        'suppress-selection': this.suppressSelection,
+      }, tabindex: this.focusable ? 0 : -1 },
+      h("div", { class: "group-entry-selection-indicator" }),
+      this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null,
+      this.text ? (h("span", { class: "group-entry-text" },
+        h("span", { title: this.text }, this.text))) : null,
+      this.secondaryText ? (h("span", { class: "group-entry-text-secondary" },
+        h("span", { title: this.secondaryText }, this.secondaryText))) : null,
+      h("slot", null)));
+  }
+  static get is() { return "ix-group-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["group-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["group-item.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Group item icon"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Group item text"
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "secondaryText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Group item secondary text"
+      },
+      "attribute": "secondary-text",
+      "reflect": false
+    },
+    "suppressSelection": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Supress the selection of the group"
+      },
+      "attribute": "suppress-selection",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show selected state"
+      },
+      "attribute": "selected",
+      "reflect": false
+    },
+    "focusable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The elements tabindex attribute will get set accordingly.\nIf true tabindex will be 0, -1 otherwise."
+      },
+      "attribute": "focusable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "index": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Index"
+      },
+      "attribute": "index",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "selectedChanged",
+      "name": "selectedChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Selection changed"
+      },
+      "complexType": {
+        "original": "HTMLIxGroupItemElement",
+        "resolved": "HTMLIxGroupItemElement",
+        "references": {
+          "HTMLIxGroupItemElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "clickListen",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/dist/collection/components/icon/icon.css

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+:host {
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  color: var(--theme-color-std-text);
+}
+:host i {
+  color: inherit;
+  transition: color 150ms;
+}
+
+:host(.size-12) {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+
+:host(.size-16) {
+  height: 1rem;
+  width: 1rem;
+}
+
+:host(.size-32) {
+  height: 2rem;
+  width: 2rem;
+}

package/dist/collection/components/icon/icon.js

@@ -0,0 +1,91 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * 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';
+export class Icon {
+  render() {
+    return (h(Host, { style: {
+        color: this.color ? `var(--theme-${this.color})` : 'inherit',
+      }, class: {
+        [`size-12`]: this.size === '12',
+        [`size-16`]: this.size === '16',
+        [`size-24`]: this.size === '24',
+        [`size-32`]: this.size === '32',
+      } },
+      h("i", { class: {
+          glyph: true,
+          [`glyph-${this.name}`]: true,
+          'glyph-12': this.size === '12',
+          'glyph-16': this.size === '16',
+          'glyph-24': this.size === '24',
+          'glyph-32': this.size === '32',
+        } },
+        h("slot", null))));
+  }
+  static get is() { return "ix-icon"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["icon.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'12' | '16' | '24' | '32'",
+        "resolved": "\"12\" | \"16\" | \"24\" | \"32\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size of the icon"
+      },
+      "attribute": "size",
+      "reflect": false
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color of the icon"
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Use one of our defined icon names e.g `copy`."
+      },
+      "attribute": "name",
+      "reflect": true
+    }
+  }; }
+}

package/dist/collection/components/icon-button/icon-button.js

@@ -0,0 +1,242 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * 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, Prop } from '@stencil/core';
+import { getButtonClasses } from '../button/base-button';
+export class IconButton {
+  constructor() {
+    /**
+     * Variant of button
+     */
+    this.variant = 'Secondary';
+    /**
+     * Size of icon in button
+     */
+    this.size = '24';
+    /**
+     * Selected state only working with outline or invisible
+     */
+    this.selected = false;
+    /**
+     * Disabled
+     */
+    this.disabled = false;
+    /**
+     * Type of the button
+     */
+    this.type = 'button';
+  }
+  getIconButtonClasses() {
+    return Object.assign({ 'btn-icon-xs': this.size === '12', 'btn-icon-s': this.size === '16' }, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled));
+  }
+  render() {
+    return (h("button", { class: this.getIconButtonClasses(), type: this.type },
+      h("ix-icon", { size: this.size, name: this.icon, color: this.color }),
+      h("div", { style: { display: 'none' } },
+        h("slot", null))));
+  }
+  static get is() { return "ix-icon-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'Primary' | 'Secondary'",
+        "resolved": "\"Primary\" | \"Secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of button"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'Secondary'"
+    },
+    "outline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button outline"
+      },
+      "attribute": "outline",
+      "reflect": false
+    },
+    "invisible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": "use ghost property"
+          }],
+        "text": "Button invisible"
+      },
+      "attribute": "invisible",
+      "reflect": false
+    },
+    "ghost": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button invisible"
+      },
+      "attribute": "ghost",
+      "reflect": false
+    },
+    "oval": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button in oval shape"
+      },
+      "attribute": "oval",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button icon"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'32' | '24' | '16' | '12'",
+        "resolved": "\"12\" | \"16\" | \"24\" | \"32\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size of icon in button"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'24'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color of icon in  button"
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected state only working with outline or invisible"
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disabled"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'button' | 'submit'",
+        "resolved": "\"button\" | \"submit\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Type of the button"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'button'"
+    }
+  }; }
+}

package/dist/collection/components/input-group/input-group.css

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+:host .group {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  height: 100%;
+}
+:host .group-start {
+  left: 0px;
+}
+:host .group-end {
+  right: 0px;
+}

package/dist/collection/components/input-group/input-group.js

@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * 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 } from '@stencil/core';
+export class InputGroup {
+  componentDidRender() {
+    let paddingRight = 15;
+    let paddingLeft = 15;
+    this.host.querySelectorAll('[slot="input-end"]').forEach((item) => {
+      item.classList.add('input-group-label');
+      paddingRight += item.getBoundingClientRect().width;
+    });
+    this.host.querySelectorAll('[slot="input-start"]').forEach((item) => {
+      item.classList.add('input-group-label');
+      paddingLeft += item.getBoundingClientRect().width;
+    });
+    const inputElement = this.host.querySelector('input.form-control');
+    if (inputElement) {
+      inputElement.style.paddingRight = paddingRight + 'px';
+      inputElement.style.paddingLeft = paddingLeft + 'px';
+    }
+    else {
+      console.warn('You used the ix-input-group without an input-tag, e.g <input class="form-control" />');
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "group group-start" },
+        h("slot", { name: "input-start" })),
+      h("slot", null),
+      h("div", { class: "group group-end" },
+        h("slot", { name: "input-end" }))));
+  }
+  static get is() { return "ix-input-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["input-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["input-group.css"]
+  }; }
+  static get elementRef() { return "host"; }
+}