chore(): create reusable test header

core/api.txt

@@ -1677,4 +1677,7 @@ ion-toolbar,css-prop,--opacity
 ion-toolbar,css-prop,--padding-bottom
 ion-toolbar,css-prop,--padding-end
 ion-toolbar,css-prop,--padding-start
-ion-toolbar,css-prop,--padding-top
+ion-toolbar,css-prop,--padding-top
+
+test-header,scoped
+test-header,prop,testTitle,string | undefined,undefined,false,false

core/src/components.d.ts

@@ -3760,6 +3760,9 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface TestHeader {
+        "testTitle"?: string;
+    }
 }
 export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -5137,6 +5140,12 @@ declare global {
         prototype: HTMLIonToolbarElement;
         new (): HTMLIonToolbarElement;
     };
+    interface HTMLTestHeaderElement extends Components.TestHeader, HTMLStencilElement {
+    }
+    var HTMLTestHeaderElement: {
+        prototype: HTMLTestHeaderElement;
+        new (): HTMLTestHeaderElement;
+    };
     interface HTMLElementTagNameMap {
         "ion-accordion": HTMLIonAccordionElement;
         "ion-accordion-group": HTMLIonAccordionGroupElement;
@@ -5231,6 +5240,7 @@ declare global {
         "ion-toast": HTMLIonToastElement;
         "ion-toggle": HTMLIonToggleElement;
         "ion-toolbar": HTMLIonToolbarElement;
+        "test-header": HTMLTestHeaderElement;
     }
 }
 declare namespace LocalJSX {
@@ -9074,6 +9084,9 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface TestHeader {
+        "testTitle"?: string;
+    }
     interface IntrinsicElements {
         "ion-accordion": IonAccordion;
         "ion-accordion-group": IonAccordionGroup;
@@ -9168,6 +9181,7 @@ declare namespace LocalJSX {
         "ion-toast": IonToast;
         "ion-toggle": IonToggle;
         "ion-toolbar": IonToolbar;
+        "test-header": TestHeader;
     }
 }
 export { LocalJSX as JSX };
@@ -9267,6 +9281,7 @@ declare module "@stencil/core" {
             "ion-toast": LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
             "ion-toggle": LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
             "ion-toolbar": LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
+            "test-header": LocalJSX.TestHeader & JSXBase.HTMLAttributes<HTMLTestHeaderElement>;
         }
     }
 }

core/src/components/datetime/test/basic/index.html

@@ -31,10 +31,6 @@
         }
       }
 
-      .options-popover {
-        --width: 300px;
-      }
-
       ion-modal.ios,
       ion-popover.datetime-popover.ios {
         --width: 350px;
@@ -49,206 +45,36 @@
       ion-datetime {
         width: 350px;
       }
-
-      body.dark {
-        --ion-color-primary: #428cff;
-        --ion-color-primary-rgb: 66, 140, 255;
-        --ion-color-primary-contrast: #ffffff;
-        --ion-color-primary-contrast-rgb: 255, 255, 255;
-        --ion-color-primary-shade: #3a7be0;
-        --ion-color-primary-tint: #5598ff;
-
-        --ion-color-secondary: #50c8ff;
-        --ion-color-secondary-rgb: 80, 200, 255;
-        --ion-color-secondary-contrast: #ffffff;
-        --ion-color-secondary-contrast-rgb: 255, 255, 255;
-        --ion-color-secondary-shade: #46b0e0;
-        --ion-color-secondary-tint: #62ceff;
-
-        --ion-color-tertiary: #6a64ff;
-        --ion-color-tertiary-rgb: 106, 100, 255;
-        --ion-color-tertiary-contrast: #ffffff;
-        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-        --ion-color-tertiary-shade: #5d58e0;
-        --ion-color-tertiary-tint: #7974ff;
-
-        --ion-color-success: #2fdf75;
-        --ion-color-success-rgb: 47, 223, 117;
-        --ion-color-success-contrast: #000000;
-        --ion-color-success-contrast-rgb: 0, 0, 0;
-        --ion-color-success-shade: #29c467;
-        --ion-color-success-tint: #44e283;
-
-        --ion-color-warning: #ffd534;
-        --ion-color-warning-rgb: 255, 213, 52;
-        --ion-color-warning-contrast: #000000;
-        --ion-color-warning-contrast-rgb: 0, 0, 0;
-        --ion-color-warning-shade: #e0bb2e;
-        --ion-color-warning-tint: #ffd948;
-
-        --ion-color-danger: #ff4961;
-        --ion-color-danger-rgb: 255, 73, 97;
-        --ion-color-danger-contrast: #ffffff;
-        --ion-color-danger-contrast-rgb: 255, 255, 255;
-        --ion-color-danger-shade: #e04055;
-        --ion-color-danger-tint: #ff5b71;
-
-        --ion-color-dark: #f4f5f8;
-        --ion-color-dark-rgb: 244, 245, 248;
-        --ion-color-dark-contrast: #000000;
-        --ion-color-dark-contrast-rgb: 0, 0, 0;
-        --ion-color-dark-shade: #d7d8da;
-        --ion-color-dark-tint: #f5f6f9;
-
-        --ion-color-medium: #989aa2;
-        --ion-color-medium-rgb: 152, 154, 162;
-        --ion-color-medium-contrast: #000000;
-        --ion-color-medium-contrast-rgb: 0, 0, 0;
-        --ion-color-medium-shade: #86888f;
-        --ion-color-medium-tint: #a2a4ab;
-
-        --ion-color-light: #222428;
-        --ion-color-light-rgb: 34, 36, 40;
-        --ion-color-light-contrast: #ffffff;
-        --ion-color-light-contrast-rgb: 255, 255, 255;
-        --ion-color-light-shade: #1e2023;
-        --ion-color-light-tint: #383a3e;
-      }
-
-      /*
-       * iOS Dark Theme
-       * -------------------------------------------
-       */
-
-      .ios body.dark {
-        --ion-background-color: #000000;
-        --ion-background-color-rgb: 0, 0, 0;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-50: #0d0d0d;
-        --ion-color-step-100: #1a1a1a;
-        --ion-color-step-150: #262626;
-        --ion-color-step-200: #333333;
-        --ion-color-step-250: #404040;
-        --ion-color-step-300: #4d4d4d;
-        --ion-color-step-350: #595959;
-        --ion-color-step-400: #666666;
-        --ion-color-step-450: #737373;
-        --ion-color-step-500: #808080;
-        --ion-color-step-550: #8c8c8c;
-        --ion-color-step-600: #999999;
-        --ion-color-step-650: #a6a6a6;
-        --ion-color-step-700: #b3b3b3;
-        --ion-color-step-750: #bfbfbf;
-        --ion-color-step-800: #cccccc;
-        --ion-color-step-850: #d9d9d9;
-        --ion-color-step-900: #e6e6e6;
-        --ion-color-step-950: #f2f2f2;
-
-        --ion-item-background: #000000;
-
-        --ion-card-background: #1c1c1d;
-      }
-
-      .ios body.dark ion-modal {
-        --ion-background-color: var(--ion-color-step-100);
-        --ion-toolbar-background: var(--ion-color-step-150);
-        --ion-toolbar-border-color: var(--ion-color-step-250);
-        --ion-item-background: var(--ion-color-step-150);
-      }
-
-      /*
-       * Material Design Dark Theme
-       * -------------------------------------------
-       */
-
-      .md body.dark {
-        --ion-background-color: #121212;
-        --ion-background-color-rgb: 18, 18, 18;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-border-color: #222222;
-
-        --ion-color-step-50: #1e1e1e;
-        --ion-color-step-100: #2a2a2a;
-        --ion-color-step-150: #363636;
-        --ion-color-step-200: #414141;
-        --ion-color-step-250: #4d4d4d;
-        --ion-color-step-300: #595959;
-        --ion-color-step-350: #656565;
-        --ion-color-step-400: #717171;
-        --ion-color-step-450: #7d7d7d;
-        --ion-color-step-500: #898989;
-        --ion-color-step-550: #949494;
-        --ion-color-step-600: #a0a0a0;
-        --ion-color-step-650: #acacac;
-        --ion-color-step-700: #b8b8b8;
-        --ion-color-step-750: #c4c4c4;
-        --ion-color-step-800: #d0d0d0;
-        --ion-color-step-850: #dbdbdb;
-        --ion-color-step-900: #e7e7e7;
-        --ion-color-step-950: #f3f3f3;
-
-        --ion-item-background: #1e1e1e;
-
-        --ion-toolbar-background: #1f1f1f;
-
-        --ion-tab-bar-background: #1f1f1f;
-
-        --ion-card-background: #1e1e1e;
-      }
     </style>
   </head>
   <body>
     <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Datetime - Basic</ion-title>
-          <ion-buttons slot="end">
-            <ion-button id="popover-trigger">Options</ion-button>
-          </ion-buttons>
-          <ion-popover class="options-popover" trigger="popover-trigger">
-            <ion-list lines="none">
-              <ion-item>
-                <ion-checkbox>Dark Mode</ion-checkbox>
-              </ion-item>
-              <ion-item detail="true" href="?ionic:mode=ios">
-                <ion-label>iOS Mode</ion-label>
-              </ion-item>
-              <ion-item detail="true" href="?ionic:mode=md">
-                <ion-label>MD Mode</ion-label>
-              </ion-item>
+      <test-header test-title="Datetime - Basic">
+        <div slot="items">
+          <ion-item>
+            <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
+          </ion-item>
 
-              <ion-item>
-                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
-              </ion-item>
+          <ion-item>
+            <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
+          </ion-item>
 
-              <ion-item>
-                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
-              </ion-item>
+          <ion-item>
+            <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
+          </ion-item>
 
-              <ion-item>
-                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
-              </ion-item>
-
-              <ion-item>
-                <ion-select label="Color" id="color" value="primary">
-                  <ion-select-option value="primary">Primary</ion-select-option>
-                  <ion-select-option value="secondary">Secondary</ion-select-option>
-                  <ion-select-option value="tertiary">Tertiary</ion-select-option>
-                  <ion-select-option value="success">Success</ion-select-option>
-                  <ion-select-option value="warning">Warning</ion-select-option>
-                  <ion-select-option value="danger">Danger</ion-select-option>
-                </ion-select>
-              </ion-item>
-            </ion-list>
-          </ion-popover>
-        </ion-toolbar>
-      </ion-header>
+          <ion-item>
+            <ion-select label="Color" id="color" value="primary">
+              <ion-select-option value="primary">Primary</ion-select-option>
+              <ion-select-option value="secondary">Secondary</ion-select-option>
+              <ion-select-option value="tertiary">Tertiary</ion-select-option>
+              <ion-select-option value="success">Success</ion-select-option>
+              <ion-select-option value="warning">Warning</ion-select-option>
+              <ion-select-option value="danger">Danger</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </div>
+      </test-header>
       <ion-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">
@@ -333,14 +159,6 @@
           });
         });
 
-        const darkModeCheckbox = document.querySelector('ion-checkbox');
-        darkModeCheckbox.addEventListener('ionChange', (ev) => {
-          if (ev.detail.checked) {
-            document.body.classList.add('dark');
-          } else {
-            document.body.classList.remove('dark');
-          }
-        });
         color.addEventListener('ionChange', (ev) => {
           datetime.color = ev.target.value;
           buttons.forEach((button) => {

core/src/components/picker/test/basic/index.html

@@ -44,11 +44,7 @@
 
   <body>
     <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Picker - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
+      <test-header test-title="Picker - Basic"></test-header>
       <ion-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">

core/src/utils/test/test-header.scss

@@ -0,0 +1,3 @@
+.options-popover {
+  --width: 300px;
+}

core/src/utils/test/test-header.tsx

@@ -0,0 +1,81 @@
+import type { ComponentInterface } from '@stencil/core';
+import { Component, Host, Prop, h } from '@stencil/core';
+import { getIonMode } from 'src/global/ionic-global';
+
+@Component({
+  tag: 'test-header',
+  styleUrl: 'test-header.scss',
+  scoped: true,
+})
+export class TestHeader implements ComponentInterface {
+  @Prop() testTitle?: string;
+
+  locale = document.querySelector('#locale');
+
+  setTheme = (ev: CustomEvent) => {
+    window.location.search = `?ionic:theme=${ev.detail.value}`;
+  };
+
+  toggleDir = (ev: CustomEvent) => {
+    if (ev.detail.checked) {
+      document.body.setAttribute('dir', 'rtl');
+    } else {
+      document.body.setAttribute('dir', 'ltr');
+    }
+  };
+
+  togglePalette = (ev: CustomEvent) => {
+    const paletteLinkEl = document.getElementById('palette');
+    if (ev.detail.checked) {
+      paletteLinkEl?.setAttribute('href', 'https://cdn.jsdelivr.net/npm/@ionic/core@next/css/palettes/dark.always.css');
+      paletteLinkEl?.setAttribute('rel', 'stylesheet');
+      paletteLinkEl?.setAttribute('type', 'text/css');
+    } else {
+      paletteLinkEl?.removeAttribute('href');
+      paletteLinkEl?.removeAttribute('rel');
+      paletteLinkEl?.removeAttribute('type');
+    }
+  };
+
+  render() {
+    return (
+      <Host class={getIonMode(this)}>
+        <ion-header translucent={true}>
+          <ion-toolbar>
+            <ion-title>{this.testTitle}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button id="popover-trigger">Options</ion-button>
+            </ion-buttons>
+            {/* @ts-ignore */}
+            <ion-popover class="options-popover" trigger="popover-trigger">
+              <ion-list lines="none">
+                <ion-item>
+                  <ion-toggle onIonChange={this.togglePalette}>Dark Mode</ion-toggle>
+                </ion-item>
+                <ion-item>
+                  <ion-toggle onIonChange={this.toggleDir}>RTL</ion-toggle>
+                </ion-item>
+                {/* <ion-item detail={true} href="?ionic:mode=ios">
+                  <ion-label>iOS Mode</ion-label>
+                </ion-item>
+                <ion-item detail={true} href="?ionic:mode=md">
+                  <ion-label>MD Mode</ion-label>
+                </ion-item> */}
+                <ion-item>
+                  <ion-select onIonChange={this.setTheme} interface="popover" placeholder="Theme">
+                    <ion-select-option value="ios">iOS Theme</ion-select-option>
+                    <ion-select-option value="md">MD Theme</ion-select-option>
+                    <ion-select-option value="ionic">Ionic Theme</ion-select-option>
+                  </ion-select>
+                </ion-item>
+
+                <slot name="items"></slot>
+              </ion-list>
+            </ion-popover>
+          </ion-toolbar>
+        </ion-header>
+        <link id="palette" />
+      </Host>
+    );
+  }
+}

packages/angular/src/directives/proxies-list.ts

@@ -82,5 +82,6 @@ export const DIRECTIVES = [
   d.IonTitle,
   d.IonToast,
   d.IonToggle,
-  d.IonToolbar
+  d.IonToolbar,
+  d.TestHeader
 ];

packages/angular/src/directives/proxies.ts

@@ -2427,3 +2427,25 @@ export class IonToolbar {
 export declare interface IonToolbar extends Components.IonToolbar {}
 
 
+@ProxyCmp({
+  inputs: ['testTitle']
+})
+@Component({
+  selector: 'test-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['testTitle'],
+})
+export class TestHeader {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface TestHeader extends Components.TestHeader {}
+
+

packages/angular/standalone/src/directives/proxies.ts

@@ -76,6 +76,7 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component
 import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
 import { defineCustomElement as defineIonToast } from '@ionic/core/components/ion-toast.js';
 import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
+import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js';
 @ProxyCmp({
   defineCustomElementFn: defineIonAccordion,
   inputs: ['disabled', 'mode', 'readonly', 'theme', 'toggleIcon', 'toggleIconSlot', 'value']
@@ -2152,3 +2153,27 @@ export class IonToolbar {
 export declare interface IonToolbar extends Components.IonToolbar {}
 
 
+@ProxyCmp({
+  defineCustomElementFn: defineTestHeader,
+  inputs: ['testTitle']
+})
+@Component({
+  selector: 'test-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['testTitle'],
+  standalone: true
+})
+export class TestHeader {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface TestHeader extends Components.TestHeader {}
+
+

packages/react/src/components/proxies.ts

@@ -73,6 +73,7 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component
 import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
 import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js';
 import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
+import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js';
 
 export const IonAccordion = /*@__PURE__*/createReactComponent<JSX.IonAccordion, HTMLIonAccordionElement>('ion-accordion', undefined, undefined, defineIonAccordion);
 export const IonAccordionGroup = /*@__PURE__*/createReactComponent<JSX.IonAccordionGroup, HTMLIonAccordionGroupElement>('ion-accordion-group', undefined, undefined, defineIonAccordionGroup);
@@ -142,3 +143,4 @@ export const IonThumbnail = /*@__PURE__*/createReactComponent<JSX.IonThumbnail,
 export const IonTitle = /*@__PURE__*/createReactComponent<JSX.IonTitle, HTMLIonTitleElement>('ion-title', undefined, undefined, defineIonTitle);
 export const IonToggle = /*@__PURE__*/createReactComponent<JSX.IonToggle, HTMLIonToggleElement>('ion-toggle', undefined, undefined, defineIonToggle);
 export const IonToolbar = /*@__PURE__*/createReactComponent<JSX.IonToolbar, HTMLIonToolbarElement>('ion-toolbar', undefined, undefined, defineIonToolbar);
+export const TestHeader = /*@__PURE__*/createReactComponent<JSX.TestHeader, HTMLTestHeaderElement>('test-header', undefined, undefined, defineTestHeader);

packages/vue/src/proxies.ts

@@ -78,6 +78,7 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component
 import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
 import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js';
 import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
+import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js';
 
 
 export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion-accordion', defineIonAccordion, [
@@ -880,3 +881,8 @@ export const IonToolbar = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-too
   'color'
 ]);
 
+
+export const TestHeader = /*@__PURE__*/ defineContainer<JSX.TestHeader>('test-header', defineTestHeader, [
+  'testTitle'
+]);
+