@siemens/ix 1.1.0-beta.1 → 1.1.0-beta.2

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

@@ -1,178 +0,0 @@
-/*
- * 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,
-        'right-position': 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

@@ -1,82 +0,0 @@
-/*
- * 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-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-visible {
-  outline: none;
-  border-color: #199fff;
-}

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

@@ -1,74 +0,0 @@
-/*
- * 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

@@ -1,16 +0,0 @@
-/*
- * 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

@@ -1,143 +0,0 @@
-/*
- * 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

@@ -1,125 +0,0 @@
-/*
- * 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

@@ -1,12 +0,0 @@
-/*
- * 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

@@ -1,23 +0,0 @@
-/*
- * 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"]
-  }; }
-}