@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -34,6 +34,181 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 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: 2023 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: 2023 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: 2023 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.
+ */
+.text-xs {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.4em;
+  color: var(--theme-color-std-text);
+}
+
+.text-s {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-caption {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-caption-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+
+.text-h2 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.455em;
+  color: var(--theme-color-std-text);
+}
+
+.text-xl {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 400;
+  line-height: 1.091em;
+  color: var(--theme-color-std-text);
+}
+
+a {
+  color: var(--theme-color-primary);
+}
 @keyframes flip-animation {
   0% {
     transform: rotateY(0);
@@ -49,10 +224,43 @@
   }
 }
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   flex-direction: column;
   perspective: 1000px;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .flip-tile-header {
   display: flex;
   align-items: center;

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

@@ -7,43 +7,52 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
+import { createMutationObserver } from '../utils/mutation-observer';
 import { FlipTileState } from './flip-tile-state';
 export class FlipTile {
   constructor() {
     this.ANIMATION_DURATION = 150;
-    this.index = 0;
-    this.isFlipAnimationActive = undefined;
     this.state = undefined;
-    this.footer = undefined;
     this.height = 15.125;
     this.width = 16;
+    this.index = 0;
+    this.isFlipAnimationActive = undefined;
   }
   componentDidLoad() {
-    this.contentItems = this.contentContainerElement.querySelectorAll('ix-flip-tile-content');
-    this.contentItems.forEach((_, index) => {
-      if (index !== this.index) {
-        this.toggleContentItem(index);
-      }
+    this.observer = createMutationObserver(() => this.updateContentItems());
+    this.observer.observe(this.hostElement, {
+      childList: true,
     });
   }
+  componentWillLoad() {
+    this.updateContentItems();
+    this.updateContentVisibility(this.index);
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  updateContentItems() {
+    this.contentItems = Array.from(this.hostElement.querySelectorAll('ix-flip-tile-content'));
+  }
+  updateContentVisibility(indexVisible) {
+    this.contentItems.forEach((content, index) => (content.contentVisible = index === indexVisible));
+  }
   toggleIndex() {
     this.doFlipAnimation();
   }
-  toggleContentItem(index) {
-    const item = this.contentItems[index];
-    item.classList.toggle('d-none');
-  }
   doFlipAnimation() {
     this.isFlipAnimationActive = true;
     setTimeout(() => {
-      this.toggleContentItem(this.index);
+      this.updateContentVisibility(this.index);
       if (this.index >= this.contentItems.length - 1) {
         this.index = 0;
       }
       else {
         this.index++;
       }
-      this.toggleContentItem(this.index);
+      this.updateContentVisibility(this.index);
     }, this.ANIMATION_DURATION);
     setTimeout(() => {
       this.isFlipAnimationActive = false;
@@ -64,7 +73,7 @@ export class FlipTile {
         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: {
+      } }, 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" }, h("slot", null)), h("div", { class: {
         footer: true,
         'contrast-light': this.state === FlipTileState.Warning,
         'contrast-dark': this.state === FlipTileState.Info ||
@@ -72,7 +81,7 @@ export class FlipTile {
       } }, h("slot", { name: "footer" })))));
   }
   static get is() { return "ix-flip-tile"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["flip-tile.scss"]
@@ -107,26 +116,6 @@ export class FlipTile {
         "attribute": "state",
         "reflect": false
       },
-      "footer": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0. Setting this property has no effect"
-            }],
-          "text": "Tmp property name"
-        },
-        "attribute": "footer",
-        "reflect": false
-      },
       "height": {
         "type": "any",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"flip-tile.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  scoped: true,\n})\nexport class FlipTile {\n  private readonly ANIMATION_DURATION = 150;\n  private contentContainerElement: HTMLDivElement;\n  private contentItems: NodeList;\n\n  @Element() hostElement: HTMLIxFlipTileElement;\n\n  @State() index = 0;\n\n  @State() isFlipAnimationActive: boolean;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Tmp property name\n   * @deprecated Will be removed in 2.0.0. Setting this property has no effect\n   */\n  @Prop() footer: string;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  componentDidLoad() {\n    this.contentItems = this.contentContainerElement.querySelectorAll(\n      'ix-flip-tile-content'\n    );\n    this.contentItems.forEach((_, index) => {\n      if (index !== this.index) {\n        this.toggleContentItem(index);\n      }\n    });\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private toggleContentItem(index: number) {\n    const item = this.contentItems[index] as HTMLElement;\n    item.classList.toggle('d-none');\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.toggleContentItem(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.toggleContentItem(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon=\"eye\"\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div\n            class=\"content-container\"\n            ref={(el) => (this.contentContainerElement = el)}\n          >\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-tile.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  @State() index = 0;\n  @State() isFlipAnimationActive: boolean;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement>;\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.updateContentVisibility(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={'eye'}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,57 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-flip-tile state="none">
+      <div slot="header">Flip header</div>
+      <div slot="footer">
+        Some footer content
+      </div>
+      <ix-flip-tile-content>Example 1</ix-flip-tile-content>
+      <ix-flip-tile-content>Example 2</ix-flip-tile-content>
+    </ix-flip-tile>
+  `);
+  const flipElement = page.locator('ix-flip-tile');
+  const flipContentOneElement = flipElement
+    .locator('ix-flip-tile-content')
+    .nth(0);
+  const flipContentTwoElement = flipElement
+    .locator('ix-flip-tile-content')
+    .nth(1);
+  await expect(flipElement).toHaveClass(/hydrated/);
+  await expect(flipContentOneElement).toBeVisible();
+  await expect(flipContentTwoElement).not.toBeVisible();
+});
+test('should change content', async ({ mount, page }) => {
+  await mount(`
+    <ix-flip-tile state="none">
+      <div slot="header">Flip header</div>
+      <div slot="footer">
+        Some footer content
+      </div>
+      <ix-flip-tile-content>Example 1</ix-flip-tile-content>
+      <ix-flip-tile-content>Example 2</ix-flip-tile-content>
+    </ix-flip-tile>
+  `);
+  const flipElement = page.locator('ix-flip-tile');
+  const flipButton = flipElement.locator('.flip-tile-header ix-icon-button');
+  await flipButton.click();
+  const flipContentOneElement = flipElement
+    .locator('ix-flip-tile-content')
+    .nth(0);
+  const flipContentTwoElement = flipElement
+    .locator('ix-flip-tile-content')
+    .nth(1);
+  await expect(flipElement).toHaveClass(/hydrated/);
+  await expect(flipContentOneElement).not.toBeVisible();
+  await expect(flipContentTwoElement).toBeVisible();
+});
+//# sourceMappingURL=flip-tile.ct.js.map

package/dist/collection/components/flip-tile/test/flip-tile.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-tile.ct.js","sourceRoot":"","sources":["../../../../src/components/flip-tile/test/flip-tile.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC;;;;;;;;;GASX,CAAC,CAAC;EACH,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;EAEjD,MAAM,qBAAqB,GAAG,WAAW;KACtC,OAAO,CAAC,sBAAsB,CAAC;KAC/B,GAAG,CAAC,CAAC,CAAC,CAAC;EACV,MAAM,qBAAqB,GAAG,WAAW;KACtC,OAAO,CAAC,sBAAsB,CAAC;KAC/B,GAAG,CAAC,CAAC,CAAC,CAAC;EACV,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAClD,MAAM,MAAM,CAAC,qBAAqB,CAAC,CAAC,WAAW,EAAE,CAAC;EAClD,MAAM,MAAM,CAAC,qBAAqB,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AACxD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,uBAAuB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACtD,MAAM,KAAK,CAAC;;;;;;;;;GASX,CAAC,CAAC;EACH,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;EAEjD,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC,kCAAkC,CAAC,CAAC;EAC3E,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;EAEzB,MAAM,qBAAqB,GAAG,WAAW;KACtC,OAAO,CAAC,sBAAsB,CAAC;KAC/B,GAAG,CAAC,CAAC,CAAC,CAAC;EACV,MAAM,qBAAqB,GAAG,WAAW;KACtC,OAAO,CAAC,sBAAsB,CAAC;KAC/B,GAAG,CAAC,CAAC,CAAC,CAAC;EACV,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAClD,MAAM,MAAM,CAAC,qBAAqB,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EACtD,MAAM,MAAM,CAAC,qBAAqB,CAAC,CAAC,WAAW,EAAE,CAAC;AACpD,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-flip-tile state=\"none\">\n      <div slot=\"header\">Flip header</div>\n      <div slot=\"footer\">\n        Some footer content\n      </div>\n      <ix-flip-tile-content>Example 1</ix-flip-tile-content>\n      <ix-flip-tile-content>Example 2</ix-flip-tile-content>\n    </ix-flip-tile>\n  `);\n  const flipElement = page.locator('ix-flip-tile');\n\n  const flipContentOneElement = flipElement\n    .locator('ix-flip-tile-content')\n    .nth(0);\n  const flipContentTwoElement = flipElement\n    .locator('ix-flip-tile-content')\n    .nth(1);\n  await expect(flipElement).toHaveClass(/hydrated/);\n  await expect(flipContentOneElement).toBeVisible();\n  await expect(flipContentTwoElement).not.toBeVisible();\n});\n\ntest('should change content', async ({ mount, page }) => {\n  await mount(`\n    <ix-flip-tile state=\"none\">\n      <div slot=\"header\">Flip header</div>\n      <div slot=\"footer\">\n        Some footer content\n      </div>\n      <ix-flip-tile-content>Example 1</ix-flip-tile-content>\n      <ix-flip-tile-content>Example 2</ix-flip-tile-content>\n    </ix-flip-tile>\n  `);\n  const flipElement = page.locator('ix-flip-tile');\n\n  const flipButton = flipElement.locator('.flip-tile-header ix-icon-button');\n  await flipButton.click();\n\n  const flipContentOneElement = flipElement\n    .locator('ix-flip-tile-content')\n    .nth(0);\n  const flipContentTwoElement = flipElement\n    .locator('ix-flip-tile-content')\n    .nth(1);\n  await expect(flipElement).toHaveClass(/hydrated/);\n  await expect(flipContentOneElement).not.toBeVisible();\n  await expect(flipContentTwoElement).toBeVisible();\n});\n"]}

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

@@ -8,8 +8,11 @@
  */
 import { h, Host } from '@stencil/core';
 export class FlipTileContent {
+  constructor() {
+    this.contentVisible = false;
+  }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return h(Host, null, this.contentVisible ? h("slot", null) : null);
   }
   static get is() { return "ix-flip-tile-content"; }
   static get encapsulation() { return "shadow"; }
@@ -23,5 +26,30 @@ export class FlipTileContent {
       "$": ["flip-tile-content.css"]
     };
   }
+  static get properties() {
+    return {
+      "contentVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Controls the visibility of the content"
+        },
+        "attribute": "content-visible",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
 }
 //# sourceMappingURL=flip-tile-content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"flip-tile-content.js","sourceRoot":"","sources":["../../../src/components/flip-tile-content/flip-tile-content.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,eAAe;EAC1B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ix-flip-tile-content',\n  styleUrl: 'flip-tile-content.css',\n  shadow: true,\n})\nexport class FlipTileContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-tile-content.js","sourceRoot":"","sources":["../../../src/components/flip-tile-content/flip-tile-content.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,eAAe;;0BAMD,KAAK;;EAE9B,MAAM;IACJ,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,eAAa,CAAC,CAAC,CAAC,IAAI,CAAQ,CAAC;EACnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-flip-tile-content',\n  styleUrl: 'flip-tile-content.css',\n  shadow: true,\n})\nexport class FlipTileContent {\n  /**\n   * Controls the visibility of the content\n   *\n   * @internal\n   */\n  @Prop() contentVisible = false;\n\n  render() {\n    return <Host>{this.contentVisible ? <slot></slot> : null}</Host>;\n  }\n}\n"]}