@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.3

package/demo/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "demo",
+  "version": "0.0.1",
+  "author": "Ionic Framework",
+  "homepage": "https://ionicframework.com/",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "lint": "ng lint"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@capacitor/app": "7.1.0",
+    "@capacitor/core": "7.4.3",
+    "@capacitor/haptics": "7.0.2",
+    "@capacitor/keyboard": "7.0.3",
+    "@capacitor/status-bar": "7.0.3",
+    "@ionic/angular": "^8.0.0",
+    "ionicons": "^7.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/language-service": "^20.0.0",
+    "@capacitor/cli": "7.4.3",
+    "@ionic/angular-toolkit": "^12.0.0",
+    "@rdlabo/eslint-plugin-rules": "^20.3.0",
+    "@types/jasmine": "~5.1.0",
+    "angular-eslint": "20.3.0",
+    "eslint": "^9.35.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsdoc": "^48.2.1",
+    "eslint-plugin-prefer-arrow": "1.2.2",
+    "jasmine-core": "~5.1.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.8.0",
+    "typescript-eslint": "8.40.0"
+  },
+  "description": "An Ionic project"
+}

package/demo/src/app/album/album-page.component.html

@@ -0,0 +1,24 @@
+<ion-header [translucent]="true" class="ion-palette-dark">
+  <ion-toolbar>
+    <ion-title size="large" style="margin-top: 8px">Library</ion-title>
+    <ion-buttons slot="end">
+      <ion-button fill="default" href="https://github.com/rdlabo-team/ionic-theme-ios26"
+        ><ion-icon name="logo-github" slot="icon-only"></ion-icon
+      ></ion-button>
+      <ion-button fill="default">Select</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+  <section class="images">
+    @for (item of sourceIonIcons; track item) {
+      <img [src]="'https://picsum.photos/600/600?id=' + item" alt="" />
+    }
+  </section>
+
+  <ion-fab class="inner-tab-bar" vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="search"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</ion-content>

package/demo/src/app/album/album-page.component.scss

@@ -0,0 +1,31 @@
+:host {
+  --ios26-color-background-rgb: var(--ion-color-dark-rgb);
+}
+
+ion-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  ion-title,
+  ion-button::part(native) {
+    color: var(--ion-text-color, #fff);
+  }
+  &.header-translucent::after {
+    // Overwrite default settings
+    box-shadow:
+      inset 0 0 0 0 rgba(0, 0, 0, 0),
+      inset 0 calc(66px + var(--ion-safe-area-top)) 20px -20px rgba(0, 0, 0, 0.4);
+  }
+}
+
+ion-content {
+  position: relative;
+  section.images {
+    display: grid;
+    grid-template-columns: 33.33% 33.33% 33.33%;
+    img {
+      border: 0.1px solid #fff;
+      border-top: none;
+    }
+  }
+}

package/demo/src/app/album/album-page.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AlbumPage } from './album-page.component';
+import { testConfig } from '../../../../util/test.config';
+
+describe('ScrollHeaderPage', () => {
+  let component: AlbumPage;
+  let fixture: ComponentFixture<AlbumPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(AlbumPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/album/album-page.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-album-page',
+  templateUrl: './album-page.component.html',
+  styleUrls: ['./album-page.component.scss'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonIcon, IonButton, IonButtons, IonFab, IonFabButton],
+})
+export class AlbumPage {
+  readonly sourceIonIcons = [...Array(60)].map((_, i) => i);
+}

package/demo/src/app/app.component.html

@@ -0,0 +1,3 @@
+<ion-app>
+  <ion-router-outlet></ion-router-outlet>
+</ion-app>

package/demo/src/app/app.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import * as allIcons from 'ionicons/icons';
+
+@Component({
+  selector: 'app-root',
+  imports: [IonRouterOutlet, IonApp],
+  templateUrl: './app.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent {
+  constructor() {
+    addIcons(allIcons);
+  }
+}

package/demo/src/app/app.config.ts

@@ -0,0 +1,17 @@
+import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import * as allIcons from 'ionicons/icons';
+
+import { routes } from './app.routes';
+import { provideIonicAngular } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+
+addIcons(allIcons);
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideRouter(routes),
+    provideIonicAngular({ useSetInputAPI: true, mode: 'ios', backButtonText: '' }),
+  ],
+};

package/demo/src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+];

package/demo/src/app/health/health-page.component.html

@@ -0,0 +1,17 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Health</ion-title>
+    <ion-buttons slot="end">
+      <ion-button fill="default" color="dark" href="https://github.com/rdlabo-team/ionic-theme-ios26"
+        ><ion-icon name="logo-github" slot="icon-only"></ion-icon
+      ></ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Health(WIP)</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

package/demo/src/app/health/health-page.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HealthPage } from './health-page.component';
+import { testConfig } from '../../../../util/test.config';
+
+describe('VirtualScrollHeaderPage', () => {
+  let component: HealthPage;
+  let fixture: ComponentFixture<HealthPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(HealthPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/health/health-page.component.ts

@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, Platform } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-health-page',
+  templateUrl: './health-page.component.html',
+  styleUrls: ['./health-page.component.scss'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonIcon, IonButton, IonButtons],
+})
+export class HealthPage {
+  readonly platform = inject(Platform);
+}

package/demo/src/app/index/index-page.component.html

@@ -0,0 +1,41 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Index</ion-title>
+    <ion-buttons slot="end">
+      <ion-button color="dark" fill="default" href="https://github.com/rdlabo-team/ionic-theme-ios26"
+        ><ion-icon name="logo-github" slot="icon-only"></ion-icon
+      ></ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content color="light" [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar color="light">
+      <ion-title size="large">Index</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Enable Demo</ion-label></ion-list-header>
+    <ion-item-group>
+      @for (item of enableComponents(); track item.name) {
+        <ion-item [disabled]="!item.enable" [button]="item.enable" (click)="navigateComponent(item)">
+          <ion-label>{{ item.name }}</ion-label>
+        </ion-item>
+      }
+    </ion-item-group>
+    <ion-note>These components have largely finalized their APIs. However, please note that they are not yet stable.</ion-note>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Disable Demo</ion-label></ion-list-header>
+    <ion-item-group>
+      @for (item of disableComponents(); track item.name) {
+        <ion-item [disabled]="!item.enable" [button]="item.enable">
+          <ion-label>{{ item.name }}</ion-label>
+          <ion-text>WIP</ion-text>
+        </ion-item>
+      }
+    </ion-item-group>
+    <ion-note>These components are under development. However, that doesn't mean they can't be used.</ion-note>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/index-page.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DemoPhotoEditorPage } from './index-page.component';
+import { testConfig } from '../../../../util/test.config';
+
+describe('PhotoEditorPage', () => {
+  let component: DemoPhotoEditorPage;
+  let fixture: ComponentFixture<DemoPhotoEditorPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(DemoPhotoEditorPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/index-page.component.ts

@@ -0,0 +1,102 @@
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonNote,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+import { ActivatedRoute, Router } from '@angular/router';
+
+interface IComponent {
+  name: string;
+  enable: boolean;
+}
+
+@Component({
+  selector: 'index-page',
+  templateUrl: './index-page.component.html',
+  styleUrls: ['./index-page.component.scss'],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonButton,
+    IonButtons,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonItemGroup,
+    IonText,
+    IonNote,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IndexPageComponent {
+  readonly components = signal<IComponent[]>([
+    { name: 'accordion', enable: false },
+    { name: 'action-sheet', enable: true },
+    { name: 'alert', enable: true },
+    { name: 'badge', enable: false },
+    { name: 'breadcrumbs', enable: false },
+    { name: 'button', enable: true },
+    { name: 'card', enable: false },
+    { name: 'checkbox', enable: true },
+    { name: 'chip', enable: false },
+    { name: 'content', enable: false },
+    { name: 'date-and-time-pickers', enable: false },
+    { name: 'floating-action-button', enable: false },
+    { name: 'grid', enable: false },
+    { name: 'icons', enable: false },
+    { name: 'infinite-scroll', enable: false },
+    { name: 'inputs', enable: false },
+    { name: 'item-list', enable: false },
+    { name: 'media', enable: false },
+    { name: 'menu', enable: false },
+    { name: 'modal', enable: false },
+    { name: 'navigate', enable: false },
+    { name: 'popover', enable: false },
+    { name: 'progress-indicators', enable: false },
+    { name: 'radio', enable: false },
+    { name: 'range', enable: false },
+    { name: 'refresher', enable: false },
+    { name: 'reorder', enable: false },
+    { name: 'routing', enable: false },
+    { name: 'searchbar', enable: false },
+    { name: 'segment', enable: false },
+    { name: 'select', enable: false },
+    { name: 'tabs', enable: false },
+    { name: 'toast', enable: false },
+    { name: 'toggle', enable: false },
+    { name: 'toolbar', enable: false },
+    { name: 'typography', enable: false },
+  ]);
+  readonly enableComponents = computed(() => this.components().filter((c) => c.enable));
+  readonly disableComponents = computed(() => this.components().filter((c) => !c.enable));
+
+  readonly #router = inject(Router);
+  readonly #route = inject(ActivatedRoute);
+
+  async navigateComponent(item: IComponent) {
+    if (!item.enable) {
+      return;
+    }
+    await this.#router.navigate([item.name], { relativeTo: this.#route });
+  }
+}

package/demo/src/app/index/index.routes.ts

@@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+import { IndexPageComponent } from './index-page.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: IndexPageComponent,
+  },
+  {
+    path: 'action-sheet',
+    loadComponent: () => import('./pages/action-sheet/action-sheet.page').then((m) => m.ActionSheetPage),
+  },
+  {
+    path: 'alert',
+    loadComponent: () => import('./pages/alert/alert.page').then((m) => m.AlertPage),
+  },
+  {
+    path: 'button',
+    loadComponent: () => import('./pages/button/button.page').then((m) => m.ButtonPage),
+  },
+  {
+    path: 'checkbox',
+    loadComponent: () => import('./pages/checkbox/checkbox.page').then((m) => m.CheckboxPage),
+  },
+];

package/demo/src/app/index/pages/action-sheet/action-sheet.page.html

@@ -0,0 +1,33 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>action-sheet</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>action-sheet</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item (click)="present('all')" [button]="true">present:all</ion-item>
+      <ion-item (click)="present('button-only')" [button]="true">present:button-only</ion-item>
+      <ion-item (click)="present('no-cancel')" [button]="true">present:no-cancel</ion-item>
+      <ion-item (click)="present('force-dark-mode')" [button]="true">present:force-dark-mode</ion-item>
+    </ion-item-group>
+    <ion-note>If the Ionic Theme remains in light mode, ion-dark-text-color-rgb isn’t set, so some text stays black.</ion-note>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/pages/action-sheet/action-sheet.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActionSheetPage } from './action-sheet.page';
+
+describe('ActionSheetPage', () => {
+  let component: ActionSheetPage;
+  let fixture: ComponentFixture<ActionSheetPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionSheetPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/action-sheet/action-sheet.page.ts

@@ -0,0 +1,75 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+import { ActionSheetController } from '@ionic/angular';
+import { actionSheetUtil } from './action-sheet.util';
+
+@Component({
+  selector: 'app-action-sheet',
+  templateUrl: './action-sheet.page.html',
+  styleUrls: ['./action-sheet.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonButtons,
+    IonBackButton,
+    IonList,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonIcon,
+    IonText,
+    IonNote,
+  ],
+})
+export class ActionSheetPage implements OnInit {
+  readonly overlayCtrl = inject(ActionSheetController);
+
+  ngOnInit() {}
+
+  async present(type: 'all' | 'button-only' | 'no-cancel' | 'force-dark-mode') {
+    const applyConfig = ((type) => {
+      if (type === 'button-only') {
+        return {
+          ...actionSheetUtil(),
+          header: undefined,
+          subHeader: undefined,
+        };
+      } else if (type === 'no-cancel') {
+        return {
+          ...actionSheetUtil(),
+          buttons: actionSheetUtil().buttons.filter((button) => button.role !== 'cancel'),
+        };
+      } else if (type === 'force-dark-mode') {
+        return {
+          ...actionSheetUtil(),
+          cssClass: 'ion-palette-dark',
+        };
+      }
+      return actionSheetUtil();
+    })(type);
+
+    const actionSheet = await this.overlayCtrl.create(applyConfig);
+    await actionSheet.present();
+  }
+}

package/demo/src/app/index/pages/action-sheet/action-sheet.util.ts

@@ -0,0 +1,28 @@
+export const actionSheetUtil = () => ({
+  header: 'Actions',
+  subHeader: 'Action Sheet',
+  buttons: [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      icon: 'trash-outline',
+      data: {
+        action: 'delete',
+      },
+    },
+    {
+      text: 'Share',
+      icon: 'share-outline',
+      data: {
+        action: 'share',
+      },
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel',
+      },
+    },
+  ],
+});

package/demo/src/app/index/pages/alert/alert.page.html

@@ -0,0 +1,33 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>alert</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>alert</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item (click)="present('all')" [button]="true">present:all</ion-item>
+      <ion-item (click)="present('button-only')" [button]="true">present:button-only</ion-item>
+      <ion-item (click)="present('no-cancel')" [button]="true">present:no-cancel</ion-item>
+      <ion-item (click)="present('force-dark-mode')" [button]="true">present:force-dark-mode</ion-item>
+    </ion-item-group>
+    <ion-note>If the Ionic Theme remains in light mode, ion-dark-text-color-rgb isn’t set, so some text stays black.</ion-note>
+  </ion-list>
+</ion-content>