@rdlabo/ionic-theme-ios26 0.1.1 → 0.1.3

package/demo/src/app/index/pages/toggle/toggle.page.spec.ts

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

package/demo/src/app/index/pages/toggle/toggle.page.ts

@@ -1,49 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import {
-  IonBackButton,
-  IonContent,
-  IonHeader,
-  IonIcon,
-  IonItem,
-  IonItemGroup,
-  IonLabel,
-  IonList,
-  IonListHeader,
-  IonNote,
-  IonText,
-  IonTitle,
-  IonToggle,
-  IonToolbar,
-} from '@ionic/angular/standalone';
-
-@Component({
-  selector: 'app-toggle',
-  templateUrl: './toggle.page.html',
-  styleUrls: ['./toggle.page.scss'],
-  standalone: true,
-  imports: [
-    IonContent,
-    IonHeader,
-    IonTitle,
-    IonToolbar,
-    CommonModule,
-    FormsModule,
-    IonBackButton,
-    IonIcon,
-    IonItem,
-    IonItemGroup,
-    IonLabel,
-    IonList,
-    IonListHeader,
-    IonNote,
-    IonText,
-    IonToggle,
-  ],
-})
-export class TogglePage implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

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

@@ -1,121 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
-    <ion-title>toolbar</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>toolbar</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-toolbar>
-    <ion-buttons slot="start">
-      <ion-button> Start </ion-button>
-    </ion-buttons>
-    <ion-title>Start / End Buttons</ion-title>
-    <ion-buttons slot="end">
-      <ion-button [disabled]="true"> Disable End </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="secondary">
-      <ion-button> Secondary </ion-button>
-    </ion-buttons>
-    <ion-buttons slot="primary">
-      <ion-button> Primary </ion-button>
-    </ion-buttons>
-    <ion-title>Primary / Secondary Buttons</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="secondary">
-      <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-      </ion-button>
-      <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-buttons slot="primary">
-      <ion-button>
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Icon Buttons</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="secondary">
-      <ion-button fill="solid">
-        <ion-icon slot="start" name="person-circle"></ion-icon>
-        Contact
-      </ion-button>
-    </ion-buttons>
-    <ion-buttons slot="primary">
-      <ion-button fill="solid">
-        Help
-        <ion-icon slot="end" name="help-circle"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Solid Buttons</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="secondary">
-      <ion-button fill="outline">
-        <ion-icon slot="start" name="star"></ion-icon>
-        Star
-      </ion-button>
-    </ion-buttons>
-    <ion-buttons slot="primary">
-      <ion-button fill="outline">
-        Edit
-        <ion-icon slot="end" name="create"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>Outline Buttons</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button default-href="#"></ion-back-button>
-    </ion-buttons>
-    <ion-title>Back Button</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-menu-button auto-hide="false"></ion-menu-button>
-    </ion-buttons>
-    <ion-title>Menu Button</ion-title>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-searchbar></ion-searchbar>
-  </ion-toolbar>
-
-  <ion-toolbar>
-    <ion-segment [value]="'all'">
-      <ion-segment-button [value]="'all'">
-        <ion-label>All</ion-label>
-      </ion-segment-button>
-      <ion-segment-button [value]="'favorites'">
-        <ion-label>Favorites</ion-label>
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-</ion-content>

package/demo/src/app/index/pages/toolbar/toolbar.page.spec.ts

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

package/demo/src/app/index/pages/toolbar/toolbar.page.ts

@@ -1,55 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import {
-  IonBackButton,
-  IonButton,
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonIcon,
-  IonItem,
-  IonItemGroup,
-  IonLabel,
-  IonList,
-  IonMenuButton,
-  IonSearchbar,
-  IonSegment,
-  IonSegmentButton,
-  IonText,
-  IonTitle,
-  IonToolbar,
-} from '@ionic/angular/standalone';
-
-@Component({
-  selector: 'app-toolbar',
-  templateUrl: './toolbar.page.html',
-  styleUrls: ['./toolbar.page.scss'],
-  standalone: true,
-  imports: [
-    IonContent,
-    IonHeader,
-    IonTitle,
-    IonToolbar,
-    CommonModule,
-    FormsModule,
-    IonBackButton,
-    IonIcon,
-    IonItem,
-    IonItemGroup,
-    IonLabel,
-    IonList,
-    IonText,
-    IonButtons,
-    IonButton,
-    IonMenuButton,
-    IonSearchbar,
-    IonSegment,
-    IonSegmentButton,
-  ],
-})
-export class ToolbarPage implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

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

@@ -1,117 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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.spec.ts

@@ -1,26 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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-hidden');
-      } else if (tabBar) {
-        tabBar.classList.remove('tab-bar-hidden');
-      }
-    });
-  }
-}

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

@@ -1,40 +0,0 @@
-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',
-  },
-];