@siemens/ix 1.0.0-beta.2

package/dist/collection/components/expanding-search/expanding-search.js

@@ -0,0 +1,177 @@
+/*
+ * 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, Event, h, Host, Prop, State } from '@stencil/core';
+export class ExpandingSearch {
+  constructor() {
+    /**
+     * Search icon
+     */
+    this.icon = 'search';
+    /**
+     * Placeholder text
+     */
+    this.placeholder = 'Enter text here';
+    /**
+     * Default value
+     */
+    this.value = '';
+    this.isFieldChanged = false;
+    this.expanded = false;
+    this.hasFocus = false;
+    this.focusTextInput = this.focusTextInput.bind(this);
+  }
+  expandInput() {
+    setTimeout(this.focusTextInput, 300);
+    this.expanded = true;
+  }
+  collapseInput() {
+    if (!this.isFieldChanged && this.expanded) {
+      this.expanded = false;
+    }
+  }
+  clearInput() {
+    this.value = '';
+    this.isFieldChanged = false;
+  }
+  onChange(e) {
+    this.value = e.target.value;
+    if (this.isFieldChanged && this.value === '') {
+      this.isFieldChanged = false;
+    }
+    else {
+      this.isFieldChanged = true;
+    }
+    this.valueChange.emit(this.value);
+  }
+  focusTextInput() {
+    var _a;
+    (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  clearClicked() {
+    var _a;
+    this.clearInput();
+    (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+    this.valueChange.emit(this.value);
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.expanded,
+      } },
+      h("button", { class: {
+          btn: true,
+          'btn-invisible-primary': true,
+          'btn-icon': true,
+          'btn-search': true,
+          'disable-pointer': this.expanded,
+        }, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0 },
+        h("ix-icon", { class: "btn-search-icon", name: this.icon, size: this.expanded ? '16' : '24', color: this.hasFocus ? 'input-search-icon--color--focus' : undefined })),
+      h("div", { class: {
+          expanded: this.expanded,
+          collapsed: !this.expanded,
+          'disable-pointer': !this.expanded,
+          'input-container': true,
+        }, "data-testid": "input-wrapper" },
+        h("input", { class: {
+            'form-control': true,
+            input: this.expanded,
+            'disable-pointer': !this.expanded,
+            'opacity-before': !this.expanded,
+            'opacity-after': this.expanded,
+          }, ref: (el) => (this.textInput = el), "data-testid": "input", placeholder: this.placeholder, type: "text", value: this.value, onBlur: () => {
+            this.collapseInput();
+            this.hasFocus = false;
+          }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }),
+        this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "24", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
+  }
+  static get is() { return "ix-expanding-search"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["expanding-search.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["expanding-search.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Search icon"
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "'search'"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Placeholder text"
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "'Enter text here'"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default value"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "isFieldChanged": {},
+    "expanded": {},
+    "hasFocus": {}
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Value changed"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/filter-chip/filter-chip.css

@@ -0,0 +1,82 @@
+/*
+ * 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 */
+/*
+ * 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.
+ */
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 1.5rem;
+  padding-left: 0.5rem;
+  border: var(--theme-focus--border-thickness) solid transparent;
+  border-radius: 2rem;
+  background-color: var(--theme-chip--background);
+  color: var(--theme-chip--color);
+}
+:host:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-chip--background--hover);
+}
+:host:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-chip--background--active);
+}
+:host:not(.disabled):not(:disabled):focus, :host:not(.disabled):not(:disabled):focus-visible {
+  border-color: #199fff;
+}
+:host .slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host .slot-container :host-context(.disabled) {
+  color: var(--theme-chip--color-diabled);
+}
+:host .btn-oval {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  margin-left: 0.25rem;
+  padding: 0;
+  vertical-align: top;
+}
+:host .btn-oval:not(.disabled):not(:disabled):focus, :host .btn-oval:not(.disabled):not(:disabled):focus-visible {
+  outline: none;
+  border-color: #199fff;
+}

package/dist/collection/components/filter-chip/filter-chip.js

@@ -0,0 +1,74 @@
+/*
+ * 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, Prop } from '@stencil/core';
+export class FilterChip {
+  constructor() {
+    /**
+     * If true the filter chip will be in disabled state
+     */
+    this.disabled = false;
+  }
+  onCloseClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeClick.emit();
+  }
+  render() {
+    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent },
+      h("div", { class: "slot-container" },
+        h("slot", null)),
+      h("button", { disabled: this.disabled, class: "btn btn-invisible-secondary btn-oval", onClick: (e) => this.onCloseClick(e) },
+        h("ix-icon", { name: "close-small", size: "16" }))));
+  }
+  static get is() { return "ix-filter-chip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["filter-chip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["filter-chip.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If true the filter chip will be in disabled state"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "closeClick",
+      "name": "closeClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Close clicked"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/flip-tile/flip-tile-state.js

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+export var FlipTileState;
+(function (FlipTileState) {
+  FlipTileState["None"] = "None";
+  FlipTileState["Info"] = "Info";
+  FlipTileState["Warning"] = "Warning";
+  FlipTileState["Alarm"] = "Alarm";
+  FlipTileState["Primary"] = "Primary";
+})(FlipTileState || (FlipTileState = {}));

package/dist/collection/components/flip-tile/flip-tile.css

@@ -0,0 +1,143 @@
+/*
+ * 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 */
+/*
+ * 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.
+ */
+@keyframes flip-animation {
+  0% {
+    transform: rotateY(0);
+  }
+  50% {
+    transform: rotateY(90deg);
+  }
+  51% {
+    transform: rotateY(270deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 16rem;
+  min-width: 16rem;
+  max-width: 16rem;
+  height: 15.125rem;
+  perspective: 1000px;
+}
+:host .flip-tile-header {
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  padding: 0 0.5rem 0 1rem;
+}
+:host .flip-tile-header .header-slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+  min-width: 0;
+}
+:host .content-container {
+  flex-grow: 1;
+  margin: 1rem;
+}
+:host .flip-tile-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--theme-blind-base--background);
+  border: solid 1px var(--theme-blind-base--border-color);
+  border-radius: var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;
+  transform-style: preserve-3d;
+}
+:host .flip-tile-container.flip-animation-active {
+  animation: flip-animation 300ms, ease-in-out;
+}
+:host .flip-tile-container .footer {
+  display: flex;
+  height: 3rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+  color: var(--theme-flip-footer--color);
+  background-color: var(--theme-blind-base--background);
+}
+:host .flip-tile-container .footer :first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 100%;
+}
+:host .flip-tile-container ::slotted(*) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+}
+:host .flip-tile-container.primary {
+  border-color: var(--theme-color-primary);
+}
+:host .flip-tile-container.primary .footer {
+  background-color: var(--theme-color-primary);
+  color: var(--theme-color-primary--contrast);
+}
+:host .flip-tile-container.info {
+  border-color: var(--theme-color-info);
+}
+:host .flip-tile-container.info .footer {
+  background-color: var(--theme-color-info);
+  color: var(--theme-color-info--contrast);
+}
+:host .flip-tile-container.warning {
+  border-color: var(--theme-color-warning);
+}
+:host .flip-tile-container.warning .footer {
+  background-color: var(--theme-color-warning);
+  color: var(--theme-color-warning--contrast);
+}
+:host .flip-tile-container.alarm {
+  border-color: var(--theme-color-alarm);
+}
+:host .flip-tile-container.alarm .footer {
+  background-color: var(--theme-color-alarm);
+  color: var(--theme-color-alarm--contrast);
+}
+:host:hover .flip-tile-container .footer ix-icon {
+  color: var(--theme-color-std-text);
+}

package/dist/collection/components/flip-tile/flip-tile.js

@@ -0,0 +1,125 @@
+/*
+ * 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, Prop, State } from '@stencil/core';
+import { FlipTileState } from './flip-tile-state';
+export class FlipTile {
+  constructor() {
+    this.ANIMATION_DURATION = 150;
+    this.index = 0;
+  }
+  componentDidLoad() {
+    this.contentItems = this.contentContainerElement.querySelectorAll('ix-flip-tile-content');
+    this.contentItems.forEach((_, index) => {
+      if (index !== this.index) {
+        this.toggleContentItem(index);
+      }
+    });
+  }
+  toggleIndex() {
+    this.doFlipAnimation();
+  }
+  toggleContentItem(index) {
+    const item = this.contentItems[index];
+    item.classList.toggle('d-none');
+  }
+  doFlipAnimation() {
+    this.isFlipAnimationActive = true;
+    setTimeout(() => {
+      this.toggleContentItem(this.index);
+      if (this.index >= this.contentItems.length - 1) {
+        this.index = 0;
+      }
+      else {
+        this.index++;
+      }
+      this.toggleContentItem(this.index);
+    }, this.ANIMATION_DURATION);
+    setTimeout(() => {
+      this.isFlipAnimationActive = false;
+    }, 2 * this.ANIMATION_DURATION);
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: {
+          'flip-tile-container': true,
+          info: this.state === FlipTileState.Info,
+          warning: this.state === FlipTileState.Warning,
+          alarm: this.state === FlipTileState.Alarm,
+          primary: this.state === FlipTileState.Primary,
+          'flip-animation-active': this.isFlipAnimationActive,
+        } },
+        h("div", { class: "flip-tile-header" },
+          h("div", { class: "header-slot-container text-l-title" },
+            h("slot", { name: "header" })),
+          h("ix-icon-button", { icon: "eye", variant: "Primary", ghost: true, onClick: () => this.toggleIndex() })),
+        h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) },
+          h("slot", null)),
+        h("div", { class: {
+            footer: true,
+            'contrast-light': this.state === FlipTileState.Warning,
+            'contrast-dark': this.state === FlipTileState.Info ||
+              this.state === FlipTileState.Alarm,
+          } },
+          h("slot", { name: "footer" })))));
+  }
+  static get is() { return "ix-flip-tile"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-tile.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-tile.css"]
+  }; }
+  static get properties() { return {
+    "state": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTileState",
+        "resolved": "FlipTileState.Alarm | FlipTileState.Info | FlipTileState.None | FlipTileState.Primary | FlipTileState.Warning",
+        "references": {
+          "FlipTileState": {
+            "location": "import",
+            "path": "./flip-tile-state"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variation of the Flip"
+      },
+      "attribute": "state",
+      "reflect": false
+    },
+    "footer": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tmp property name"
+      },
+      "attribute": "footer",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "index": {},
+    "isFlipAnimationActive": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/flip-tile-content/flip-tile-content.css

@@ -0,0 +1,12 @@
+/*
+ * 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 {
+  display: block;
+}

package/dist/collection/components/flip-tile-content/flip-tile-content.js

@@ -0,0 +1,23 @@
+/*
+ * 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 } from '@stencil/core';
+export class FlipTileContent {
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "ix-flip-tile-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-tile-content.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-tile-content.css"]
+  }; }
+}