feat(core/flip-tile): migrate to shadow dom

packages/angular/src/components.ts

@@ -820,14 +820,14 @@ export declare interface IxFilterChip extends Components.IxFilterChip {
 
 
 @ProxyCmp({
-  inputs: ['footer', 'height', 'state', 'width']
+  inputs: ['height', 'state', 'width']
 })
 @Component({
   selector: 'ix-flip-tile',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['footer', 'height', 'state', 'width'],
+  inputs: ['height', 'state', 'width'],
 })
 export class IxFlipTile {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -4058,7 +4058,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-icon-button"
@@ -4073,28 +4073,6 @@
         ]
       },
       "props": [
-        {
-          "name": "footer",
-          "type": "string",
-          "mutable": false,
-          "attr": "footer",
-          "reflectToAttr": false,
-          "docs": "Tmp property name",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0. Setting this property has no effect"
-            }
-          ],
-          "deprecation": "Will be removed in 2.0.0. Setting this property has no effect",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "height",
           "type": "\"auto\" | number",

packages/core/src/components.d.ts

@@ -784,11 +784,6 @@ export namespace Components {
         "disabled": boolean;
     }
     interface IxFlipTile {
-        /**
-          * Tmp property name
-          * @deprecated Will be removed in 2.0.0. Setting this property has no effect
-         */
-        "footer": string;
         /**
           * Height interpreted as REM
           * @since 1.5.0
@@ -805,6 +800,10 @@ export namespace Components {
         "width": number | 'auto';
     }
     interface IxFlipTileContent {
+        /**
+          * Controls the visibility of the content
+         */
+        "contentVisible": boolean;
     }
     interface IxGroup {
         /**
@@ -3679,11 +3678,6 @@ declare namespace LocalJSX {
         "onCloseClick"?: (event: IxFilterChipCustomEvent<void>) => void;
     }
     interface IxFlipTile {
-        /**
-          * Tmp property name
-          * @deprecated Will be removed in 2.0.0. Setting this property has no effect
-         */
-        "footer"?: string;
         /**
           * Height interpreted as REM
           * @since 1.5.0
@@ -3700,6 +3694,10 @@ declare namespace LocalJSX {
         "width"?: number | 'auto';
     }
     interface IxFlipTileContent {
+        /**
+          * Controls the visibility of the content
+         */
+        "contentVisible"?: boolean;
     }
     interface IxGroup {
         /**

packages/core/src/components/flip-tile-content/flip-tile-content.tsx

@@ -6,20 +6,22 @@
  * 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';
+import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ix-flip-tile-content',
   styleUrl: 'flip-tile-content.css',
   shadow: true,
 })
 export class FlipTileContent {
+  /**
+   * Controls the visibility of the content
+   *
+   * @internal
+   */
+  @Prop() contentVisible = false;
+
   render() {
-    return (
-      <Host>
-        <slot></slot>
-      </Host>
-    );
+    return <Host>{this.contentVisible ? <slot></slot> : null}</Host>;
   }
 }

packages/core/src/components/flip-tile/flip-tile.scss

@@ -10,6 +10,8 @@
 @import 'common-variables';
 @import 'mixins/animations';
 @import 'mixins/text-truncation';
+@import 'mixins/shadow-dom/component';
+@import 'fonts';
 
 @include keyframes(flip-animation) {
   0% {
@@ -27,6 +29,7 @@
 }
 
 :host {
+  @include ix-component;
   display: flex;
   flex-direction: column;
   perspective: 1000px;

packages/core/src/components/flip-tile/flip-tile.tsx

@@ -8,35 +8,22 @@
  */
 
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { createMutationObserver } from '../utils/mutation-observer';
 import { FlipTileState } from './flip-tile-state';
 
 @Component({
   tag: 'ix-flip-tile',
   styleUrl: 'flip-tile.scss',
-  scoped: true,
+  shadow: true,
 })
 export class FlipTile {
-  private readonly ANIMATION_DURATION = 150;
-  private contentContainerElement: HTMLDivElement;
-  private contentItems: NodeList;
-
-  @Element() hostElement: HTMLIxFlipTileElement;
-
-  @State() index = 0;
-
-  @State() isFlipAnimationActive: boolean;
+  @Element() hostElement!: HTMLIxFlipTileElement;
 
   /**
    * Variation of the Flip
    */
   @Prop() state: FlipTileState;
 
-  /**
-   * Tmp property name
-   * @deprecated Will be removed in 2.0.0. Setting this property has no effect
-   */
-  @Prop() footer: string;
-
   /**
    * Height interpreted as REM
    * @since 1.5.0
@@ -49,39 +36,61 @@ export class FlipTile {
    */
   @Prop() width: number | 'auto' = 16;
 
+  @State() index = 0;
+  @State() isFlipAnimationActive: boolean;
+
+  private readonly ANIMATION_DURATION = 150;
+  private contentItems: Array<HTMLIxFlipTileContentElement>;
+
+  private observer: MutationObserver;
+
   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,
     });
   }
 
-  private toggleIndex() {
-    this.doFlipAnimation();
+  componentWillLoad() {
+    this.updateContentItems();
+    this.updateContentVisibility(this.index);
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
 
-  private toggleContentItem(index: number) {
-    const item = this.contentItems[index] as HTMLElement;
-    item.classList.toggle('d-none');
+  private updateContentItems() {
+    this.contentItems = Array.from(
+      this.hostElement.querySelectorAll('ix-flip-tile-content')
+    );
+  }
+
+  private updateContentVisibility(indexVisible: number) {
+    this.contentItems.forEach(
+      (content, index) => (content.contentVisible = index === indexVisible)
+    );
+  }
+
+  private toggleIndex() {
+    this.doFlipAnimation();
   }
 
   private 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(() => {
@@ -123,10 +132,7 @@ export class FlipTile {
             ></ix-icon-button>
           </div>
 
-          <div
-            class="content-container"
-            ref={(el) => (this.contentContainerElement = el)}
-          >
+          <div class="content-container">
             <slot></slot>
           </div>
           <div

packages/core/src/components/flip-tile/test/flip-tile.ct.ts

@@ -0,0 +1,61 @@
+/*
+ * 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();
+});

packages/vue/src/components.ts

@@ -289,13 +289,14 @@ export const IxFilterChip = /*@__PURE__*/ defineContainer<JSX.IxFilterChip>('ix-
 
 export const IxFlipTile = /*@__PURE__*/ defineContainer<JSX.IxFlipTile>('ix-flip-tile', undefined, [
   'state',
-  'footer',
   'height',
   'width'
 ]);
 
 
-export const IxFlipTileContent = /*@__PURE__*/ defineContainer<JSX.IxFlipTileContent>('ix-flip-tile-content', undefined);
+export const IxFlipTileContent = /*@__PURE__*/ defineContainer<JSX.IxFlipTileContent>('ix-flip-tile-content', undefined, [
+  'contentVisible'
+]);
 
 
 export const IxGroup = /*@__PURE__*/ defineContainer<JSX.IxGroup>('ix-group', undefined, [