@rdlabo/ionic-theme-ios26 0.1.1 → 0.1.3

package/demo/package.json

@@ -1,60 +0,0 @@
-{
-  "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

@@ -1,24 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title size="large" style="margin-top: 8px">Library</ion-title>
-    <ion-buttons class="ios26-disabled" slot="end" style="margin-top: 6px">
-      <ion-button fill="default" href="https://github.com/rdlabo-team/ionic-theme-ios26" style="margin-right: 8px"
-        ><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

@@ -1,17 +0,0 @@
-ion-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>Health</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-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content [fullscreen]="true" color="light">
-  <ion-header collapse="condense">
-    <ion-toolbar color="light">
-      <ion-title size="large">Health(WIP)</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

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

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HealthPage } from './health-page.component';
-import { testConfig } from '../../../util/test.config';
-
-describe('HealthPage', () => {
-  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

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

@@ -1,51 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>Index</ion-title>
-    <ion-buttons slot="end">
-      <ion-button href="https://github.com/rdlabo-team/ionic-theme-ios26"
-        ><ion-icon name="logo-github" slot="icon-only"></ion-icon
-      ></ion-button>
-      <ion-button href="https://ionicframework.com/"><ion-icon name="logo-ionic" 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>Settings</ion-label></ion-list-header>
-    <ion-item-group>
-      <ion-item><ion-toggle (ionChange)="changeColorMode($event)">Dark Mode</ion-toggle></ion-item>
-    </ion-item-group>
-  </ion-list>
-
-  <ion-list [inset]="true">
-    <ion-list-header><ion-label>Ready</ion-label></ion-list-header>
-    <ion-item-group>
-      @for (item of enableComponents(); track item.name) {
-        <ion-item [button]="true" (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>Spec Limitation</ion-label></ion-list-header>
-    <ion-item-group>
-      @for (item of disableComponents(); track item.name) {
-        <ion-item [button]="true" (click)="navigateComponent(item)">
-          <ion-label>{{ item.name }}</ion-label>
-        </ion-item>
-      }
-    </ion-item-group>
-    <ion-note
-      >Some HTML elements or APIs are missing, which limits what can be implemented. This is currently being discussed with the Ionic
-      team.</ion-note
-    >
-  </ion-list>
-</ion-content>

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

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

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

@@ -1,94 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, DOCUMENT, 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,
-  IonTitle,
-  IonToggle,
-  IonToolbar,
-  ToggleCustomEvent,
-} 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,
-    IonNote,
-    IonToggle,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class IndexPageComponent {
-  readonly components = signal<IComponent[]>([
-    { name: 'accordion', enable: true },
-    { name: 'action-sheet', enable: true },
-    { name: 'alert', enable: true },
-    { name: 'breadcrumbs', enable: true },
-    { name: 'button', enable: true },
-    { name: 'card', enable: true },
-    { name: 'checkbox', enable: true },
-    { name: 'chip', enable: true },
-    { name: 'date-and-time-pickers', enable: true },
-    { name: 'floating-action-button', enable: true },
-    { name: 'inputs', enable: true },
-    { name: 'item-list', enable: true },
-    { name: 'modal', enable: true },
-    { name: 'popover', enable: true },
-    { name: 'progress-indicators', enable: true },
-    { name: 'radio', enable: true },
-    { name: 'range', enable: true },
-    { name: 'reorder', enable: true },
-    { name: 'searchbar', enable: true },
-    { name: 'segment', enable: false },
-    { name: 'select', enable: true },
-    { name: 'tabs', enable: true },
-    { name: 'toast', enable: true },
-    { name: 'toggle', enable: true },
-    { name: 'toolbar', enable: true },
-  ]);
-  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);
-  readonly #document = inject(DOCUMENT);
-
-  async navigateComponent(item: IComponent) {
-    await this.#router.navigate([item.name], { relativeTo: this.#route });
-  }
-
-  changeColorMode(event: ToggleCustomEvent) {
-    this.#document.documentElement.classList.toggle('ion-palette-dark', event.detail.checked);
-  }
-}

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

@@ -1,109 +0,0 @@
-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),
-  },
-  {
-    path: 'range',
-    loadComponent: () => import('./pages/range/range.page').then((m) => m.RangePage),
-  },
-  {
-    path: 'toast',
-    loadComponent: () => import('./pages/toast/toast.page').then((m) => m.ToastPage),
-  },
-  {
-    path: 'toggle',
-    loadComponent: () => import('./pages/toggle/toggle.page').then((m) => m.TogglePage),
-  },
-  {
-    path: 'segment',
-    loadComponent: () => import('./pages/segment/segment.page').then((m) => m.SegmentPage),
-  },
-  {
-    path: 'modal',
-    loadComponent: () => import('./pages/modal/modal.page').then((m) => m.ModalPage),
-  },
-  {
-    path: 'card',
-    loadComponent: () => import('./pages/card/card.page').then((m) => m.CardPage),
-  },
-  {
-    path: 'chip',
-    loadComponent: () => import('./pages/chip/chip.page').then((m) => m.ChipPage),
-  },
-  {
-    path: 'breadcrumbs',
-    loadComponent: () => import('./pages/breadcrumbs/breadcrumbs.page').then((m) => m.BreadcrumbsPage),
-  },
-  {
-    path: 'searchbar',
-    loadComponent: () => import('./pages/searchbar/searchbar.page').then((m) => m.SearchbarPage),
-  },
-  {
-    path: 'popover',
-    loadComponent: () => import('./pages/popover/popover.page').then((m) => m.PopoverPage),
-  },
-  {
-    path: 'progress-indicators',
-    loadComponent: () => import('./pages/progress-indicators/progress-indicators.page').then((m) => m.ProgressIndicatorsPage),
-  },
-  {
-    path: 'floating-action-button',
-    loadComponent: () => import('./pages/floating-action-button/floating-action-button.page').then((m) => m.FloatingActionButtonPage),
-  },
-  {
-    path: 'select',
-    loadComponent: () => import('./pages/select/select.page').then((m) => m.SelectPage),
-  },
-  {
-    path: 'radio',
-    loadComponent: () => import('./pages/radio/radio.page').then((m) => m.RadioPage),
-  },
-  {
-    path: 'date-and-time-pickers',
-    loadComponent: () => import('./pages/date-and-time-pickers/date-and-time-pickers.page').then((m) => m.DateAndTimePickersPage),
-  },
-  {
-    path: 'accordion',
-    loadComponent: () => import('./pages/accordion/accordion.page').then((m) => m.AccordionPage),
-  },
-  {
-    path: 'inputs',
-    loadComponent: () => import('./pages/inputs/inputs.page').then((m) => m.InputsPage),
-  },
-  {
-    path: 'item-list',
-    loadComponent: () => import('./pages/item-list/item-list.page').then((m) => m.ItemListPage),
-  },
-  {
-    path: 'reorder',
-    loadComponent: () => import('./pages/reorder/reorder.page').then((m) => m.ReorderPage),
-  },
-  {
-    path: 'tabs',
-    loadComponent: () => import('./pages/tabs/tabs.page').then((m) => m.TabsPage),
-  },
-  {
-    path: 'toolbar',
-    loadComponent: () => import('./pages/toolbar/toolbar.page').then((m) => m.ToolbarPage),
-  },
-];

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

@@ -1,45 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
-    <ion-title>accordion</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>accordion</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-accordion-group>
-      <ion-accordion value="first">
-        <ion-item slot="header">
-          <ion-label>First Accordion</ion-label>
-        </ion-item>
-        <div class="ion-padding" slot="content">First Content</div>
-      </ion-accordion>
-      <ion-accordion value="second">
-        <ion-item slot="header">
-          <ion-label>Second Accordion</ion-label>
-        </ion-item>
-        <div class="ion-padding" slot="content">Second Content</div>
-      </ion-accordion>
-      <ion-accordion value="third">
-        <ion-item slot="header">
-          <ion-label>Third Accordion</ion-label>
-        </ion-item>
-        <div class="ion-padding" slot="content">Third Content</div>
-      </ion-accordion>
-    </ion-accordion-group>
-  </ion-list>
-</ion-content>

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

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

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

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