@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.4

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

@@ -0,0 +1,117 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/"></ion-back-button>
+    <ion-title>Settings</ion-title>
+    <ion-buttons class="ios26-disabled" 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-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true" color="light">
+  <ion-header collapse="condense">
+    <ion-toolbar color="light">
+      <ion-title size="large">Settings</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-list [inset]="true" class="user-info">
+    <ion-item-group>
+      <ion-item [detail]="true">
+        <ion-avatar slot="start"><ion-img src="https://picsum.photos/150/150"></ion-img></ion-avatar>
+        <div>
+          <ion-label>Masahiko Sakakibara</ion-label>
+          <ion-note>Apple Account, iCloud+, and more</ion-note>
+        </div>
+      </ion-item>
+      <ion-item></ion-item>
+    </ion-item-group>
+  </ion-list>
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item>
+        <ion-icon name="airplane" slot="start" style="background: linear-gradient(#f8b250, #f79407)"></ion-icon>
+        <ion-toggle color="success" justify="space-between">Airplane Mode</ion-toggle>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="wifi" slot="start" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+        <ion-label>WiFi</ion-label>
+        <ion-note>ionic-framework-a</ion-note>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="bluetooth" slot="start" style="background: linear-gradient(#459cfa, #2d7afc)"></ion-icon>
+        <ion-label>Bluetooth</ion-label>
+        <ion-note>On</ion-note>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="stats-chart" slot="start" style="background: linear-gradient(#6fdc83, #3ec75d)"></ion-icon>
+        <ion-label>Cellular</ion-label>
+        <ion-note>Off</ion-note>
+      </ion-item>
+      <ion-item [detail]="true" [disabled]="true">
+        <ion-icon name="unlink" slot="start" style="background: linear-gradient(#6fdc83, #3ec75d)"></ion-icon>
+        <ion-label>Personal Hotspot</ion-label>
+        <ion-note>Off</ion-note>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="battery-full" slot="start" style="background: linear-gradient(#6fdc83, #3ec75d)"></ion-icon>
+        <ion-label>Battery</ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item [detail]="true">
+        <ion-icon name="cog-outline" slot="start" style="background: linear-gradient(#afafb4, #8e8e93)"></ion-icon>
+        <ion-label>General</ion-label>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="accessibility" slot="start" style="background: linear-gradient(#43a6ff, #0288ff)"></ion-icon>
+        <ion-label>Accessibility</ion-label>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="log-in-outline" slot="start" style="background: linear-gradient(#43a6ff, #0288ff)"></ion-icon>
+        <ion-label>Action Button</ion-label>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="logo-angular" slot="start" style="background: linear-gradient(#f9a432, #e193fb)"></ion-icon>
+        <ion-label>Apple Intelligence & Siri</ion-label>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="camera" slot="start" style="background: linear-gradient(#afafb4, #8e8e93)"></ion-icon>
+        <ion-label>Camera</ion-label>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="calculator" slot="start" style="background: linear-gradient(#43a6ff, #0288ff)"></ion-icon>
+        <ion-label>Home Screen & App Library</ion-label>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="search-outline" slot="start" style="background: linear-gradient(#afafb4, #8e8e93)"></ion-icon>
+        <ion-label>Search</ion-label>
+      </ion-item>
+      <ion-item [detail]="true">
+        <ion-icon name="snow" slot="start" style="background: var(--ion-text-color, #000)"></ion-icon>
+        <ion-label>StandBy</ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item [detail]="true">
+        <ion-icon name="hourglass" slot="start" style="background: linear-gradient(#887dff, #6055f5)"></ion-icon>
+        <ion-label>Screen Time</ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item [detail]="true">
+        <ion-icon name="hand-left" slot="start" style="background: linear-gradient(#43a6ff, #0288ff)"></ion-icon>
+        <ion-label>Privacy & Security</ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+</ion-content>
+<ion-footer [translucent]="true">
+  <ion-toolbar><ion-searchbar></ion-searchbar></ion-toolbar>
+</ion-footer>

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

@@ -0,0 +1,33 @@
+ion-content:not(.background-transparent)::after {
+  box-shadow: none !important;
+}
+
+ion-list.list-inset {
+  margin-bottom: 36px;
+}
+
+ion-item > ion-icon[slot='start'] {
+  border-radius: 8px;
+  padding: 4px;
+  margin-right: 14px;
+  color: var(--ion-background-color, #fff);
+  font-size: 1.3rem;
+}
+
+ion-list.user-info {
+  margin-top: 0;
+  ion-avatar {
+    width: 64px;
+    height: 64px;
+    margin: 16px 16px 16px 0;
+  }
+  div {
+    ion-label {
+      font-weight: bold;
+      font-size: 1.2rem;
+    }
+    ion-note {
+      font-size: 0.9rem;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,55 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonAvatar,
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFooter,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonSearchbar,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+  Platform,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-settings-page',
+  templateUrl: './settings-page.component.html',
+  styleUrls: ['./settings-page.component.scss'],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonButton,
+    IonButtons,
+    IonFooter,
+    IonSearchbar,
+    IonBackButton,
+    IonAvatar,
+    IonImg,
+    IonNote,
+    IonItemGroup,
+    IonToggle,
+  ],
+})
+export class SettingsPage {
+  readonly platform = inject(Platform);
+}

package/demo/src/app/tabs/tabs.page.html

@@ -0,0 +1,23 @@
+<ion-tabs>
+  <ion-tab-bar id="tab-bar-bottom" slot="bottom">
+    <ion-tab-button tab="index" href="/main/index">
+      <ion-icon aria-hidden="true" name="documents"></ion-icon>
+      <ion-label>Index</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="album" href="/main/album">
+      <ion-icon aria-hidden="true" name="images"></ion-icon>
+      <ion-label>Library</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="settings" href="/main/settings">
+      <ion-icon aria-hidden="true" name="cog"></ion-icon>
+      <ion-label>Settings</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="health" href="/main/health">
+      <ion-icon aria-hidden="true" name="list"></ion-icon>
+      <ion-label>Health</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>

package/demo/src/app/tabs/tabs.page.scss

@@ -0,0 +1,9 @@
+ion-label {
+  margin-bottom: 4px;
+}
+
+ion-tab-bar {
+  &.tab-bar-hide {
+    display: none;
+  }
+}

package/demo/src/app/tabs/tabs.page.spec.ts

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

package/demo/src/app/tabs/tabs.page.ts

@@ -0,0 +1,28 @@
+import { Component, ElementRef, inject, OnInit } from '@angular/core';
+import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: 'tabs.page.html',
+  styleUrls: ['tabs.page.scss'],
+  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
+})
+export class TabsPage implements OnInit {
+  readonly #router = inject(Router);
+  readonly #el = inject(ElementRef);
+  ngOnInit() {
+    this.#router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
+      const tabBar = this.#el.nativeElement.querySelector('ion-tab-bar');
+      if (!tabBar) {
+        return;
+      }
+      if (['/main/settings'].includes(params.urlAfterRedirects)) {
+        tabBar.classList.add('tab-bar-hide');
+      } else if (tabBar) {
+        tabBar.classList.remove('tab-bar-hide');
+      }
+    });
+  }
+}

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

@@ -0,0 +1,40 @@
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs.page';
+import { AlbumPage } from '../album/album-page.component';
+import { SettingsPage } from '../settings/settings-page.component';
+import { HealthPage } from '../health/health-page.component';
+
+export const routes: Routes = [
+  {
+    path: 'main',
+    component: TabsPage,
+    children: [
+      {
+        path: 'index',
+        loadChildren: () => import('../index/index.routes').then((m) => m.routes),
+      },
+      {
+        path: 'album',
+        component: AlbumPage,
+      },
+      {
+        path: 'settings',
+        component: SettingsPage,
+      },
+      {
+        path: 'health',
+        component: HealthPage,
+      },
+      {
+        path: '',
+        redirectTo: '/main/index',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/main/index',
+    pathMatch: 'full',
+  },
+];

package/demo/src/global.scss

@@ -0,0 +1,65 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@use '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@use '@ionic/angular/css/normalize.css';
+@use '@ionic/angular/css/structure.css';
+@use '@ionic/angular/css/typography.css';
+@use '@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@use '@ionic/angular/css/padding.css';
+@use '@ionic/angular/css/float-elements.css';
+@use '@ionic/angular/css/text-alignment.css';
+@use '@ionic/angular/css/text-transformation.css';
+@use '@ionic/angular/css/flex-utils.css';
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+//@use "@ionic/angular/css/palettes/dark.always.css";
+//@use '@ionic/angular/css/palettes/dark.system.css';
+@use '@ionic/angular/css/palettes/dark.class.css';
+
+@use '../../src/default-variables';
+@use '../../src/ionic-theme-ios26';
+@use '../../src/ionic-theme-ios26-dark-class';
+
+:root {
+  --ios26-color-background-rgb: var(--ion-color-light-rgb);
+}
+
+ion-header.ios,
+ion-footer.ios {
+  ion-buttons:not(.ios26-disabled),
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    --color: var(--ion-text-color, #000);
+  }
+}
+
+section.section-example {
+  background: var(--ion-background-color, #fff);
+  border-radius: 24px;
+  padding: 16px;
+  margin: 16px;
+}
+
+ion-searchbar .searchbar-input-container {
+  margin: 0 20px !important;
+}

package/demo/src/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Demo for ionic-theme-ios26</title>
+    <base href="/" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/demo/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

package/demo/src/test.ts

@@ -0,0 +1,7 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

package/demo/src/theme/variables.scss

@@ -0,0 +1,20 @@
+// For information on how to create your own theme, please see:
+// http://ionicframework.com/docs/theming/
+
+:root {
+  --ion-color-light: #f2f2f7;
+  --ion-color-light-rgb: 242, 242, 247;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d5d5d9;
+  --ion-color-light-tint: #f3f3f8;
+}
+
+.ion-palette-dark {
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34, 36, 40;
+  --ion-color-light-contrast: #fff;
+  --ion-color-light-contrast-rgb: 255, 255, 255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+}

package/demo/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/demo/tsconfig.json

@@ -0,0 +1,30 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2022",
+    "module": "es2020",
+    "lib": ["es2018", "dom"],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/demo/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

package/demo/util/mocks/angular/angular-delegate.ts

@@ -0,0 +1,18 @@
+import { ApplicationRef, NgZone, Injector, EnvironmentInjector, ComponentRef } from '@angular/core';
+import { FrameworkDelegate } from '@ionic/core/components';
+
+export class MockAngularDelegate {
+  create(environmentInjector: EnvironmentInjector, injector: Injector, elementReferenceKey?: string): MockAngularFrameworkDelegate {
+    return new MockAngularFrameworkDelegate();
+  }
+}
+
+export class MockAngularFrameworkDelegate implements FrameworkDelegate {
+  async attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
+    // no-op
+  }
+
+  async removeViewFromDom(_container: any, component: any): Promise<void> {
+    // no-op
+  }
+}

package/demo/util/mocks/angular/ion-router-outlet.ts

@@ -0,0 +1,39 @@
+import { BaseMock } from '../util/base.mock';
+
+const METHODS = [
+  'nativeEl',
+  // 'tabsPrefix',
+  // 'stackEvents',
+  // 'activateEvents',
+  // 'deactivateEvents',
+  // 'animated',
+  // 'ngOnDestroy',
+  // 'getContext',
+  // 'ngOnInit',
+  // 'isActivated',
+  // 'component',
+  // 'activatedRoute',
+  // 'activatedRouteData',
+  // 'detach',
+  // 'attach',
+  // 'deactivate',
+  // 'activateWith',
+  // 'canGoBack',
+  // 'pop',
+  // 'getLastUrl',
+  // 'getLastRouteView',
+  // 'getRootView',
+  // 'getActiveStackId',
+];
+
+export class IonRouterOutletMock extends BaseMock {
+  constructor() {
+    super('NavController', METHODS);
+
+    this.spyObj.nativeEl.and.returnValue();
+  }
+
+  public static instance(): any {
+    return new IonRouterOutletMock();
+  }
+}

package/demo/util/mocks/angular/modal-controller.ts

@@ -0,0 +1,7 @@
+import { Overlay } from '../util/overlay';
+
+export class ModalControllerMock extends Overlay {
+  public static instance(): any {
+    return new ModalControllerMock();
+  }
+}

package/demo/util/mocks/angular/nav-controller.ts

@@ -0,0 +1,22 @@
+import { BaseMock } from '../util/base.mock';
+
+const METHODS = ['navigateForward', 'navigateBack', 'navigateRoot', 'back', 'pop', 'setDirection', 'setTopOutlet', 'consumeTransition'];
+
+export class NavControllerMock extends BaseMock {
+  constructor() {
+    super('NavController', METHODS);
+
+    this.spyObj.navigateForward.and.returnValue(Promise.resolve());
+    this.spyObj.navigateBack.and.returnValue(Promise.resolve());
+    this.spyObj.navigateRoot.and.returnValue(Promise.resolve());
+    this.spyObj.back.and.returnValue(Promise.resolve());
+    this.spyObj.pop.and.returnValue(Promise.resolve());
+    this.spyObj.setDirection.and.returnValue();
+    this.spyObj.setTopOutlet.and.returnValue();
+    this.spyObj.consumeTransition.and.returnValue();
+  }
+
+  public static instance(): any {
+    return new NavControllerMock();
+  }
+}

package/demo/util/mocks/angular/popover-controller.ts

@@ -0,0 +1,7 @@
+import { Overlay } from '../util/overlay';
+
+export class PopoverControllerMock extends Overlay {
+  public static instance(): any {
+    return new PopoverControllerMock();
+  }
+}