@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.3

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

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

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

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

package/demo/src/app/index/pages/alert/alert.util.ts

@@ -0,0 +1,21 @@
+export const alertUtil = () => ({
+  header: 'A Short Title Is Best',
+  subHeader: 'A Sub Header Is Optional',
+  message: 'A message should be a short, complete sentence.',
+  buttons: [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      handler: () => {
+        console.log('Alert canceled');
+      },
+    },
+    {
+      text: 'OK',
+      role: 'confirm',
+      handler: () => {
+        console.log('Alert confirmed');
+      },
+    },
+  ],
+});

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

@@ -0,0 +1,90 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>button</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>button</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-list-header><ion-label>Default styles</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label><code>buttons > button</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button>Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button</code></ion-label>
+        <ion-button slot="end">Link</ion-button>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>Should not effect this library.</ion-note>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Inner ion-buttons</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label><code>buttons > button.ios26-liquid-glass</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button class="ios26-liquid-glass">Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>buttons > button.ios26-liquid-glass[fill=outline]</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button class="ios26-liquid-glass" fill="outline">Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Standalone</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label><code>button.ios26-liquid-glass[fill=default]</code></ion-label>
+        <ion-button slot="end" class="ios26-liquid-glass" fill="default">Link</ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button.ios26-liquid-glass[fill=solid]</code></ion-label>
+        <ion-button slot="end" class="ios26-liquid-glass" fill="solid">Link</ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button.ios26-liquid-glass[fill=outline]</code></ion-label>
+        <ion-button slot="end" class="ios26-liquid-glass" fill="outline">Link</ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button.ios26-liquid-glass[fill=clear]</code></ion-label>
+        <ion-button slot="end" class="ios26-liquid-glass" fill="clear">Link</ion-button>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <section class="section-example">
+    <ion-button class="ios26-liquid-glass" size="small">small</ion-button>
+    <ion-button class="ios26-liquid-glass" size="default">default</ion-button>
+    <ion-button class="ios26-liquid-glass" size="large">large</ion-button><br />
+
+    <ion-button class="ios26-liquid-glass" size="small" fill="default">small</ion-button>
+    <ion-button class="ios26-liquid-glass" size="default" fill="default">default</ion-button>
+    <ion-button class="ios26-liquid-glass" size="large" fill="default">large</ion-button>
+  </section>
+</ion-content>

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

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

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

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

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

@@ -0,0 +1,66 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>checkbox</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>checkbox</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>
+        <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+      </ion-item>
+
+      <ion-item>
+        <ion-checkbox justify="start">Packed at the Start of Line</ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox justify="end">Packed at the End of Line</ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <section class="section-example">
+    <ion-checkbox labelPlacement="start">Label at the Start</ion-checkbox>
+
+    <br />
+
+    <ion-checkbox labelPlacement="end">Label at the End</ion-checkbox>
+
+    <br />
+
+    <ion-checkbox labelPlacement="fixed">Fixed Width Label</ion-checkbox>
+
+    <br />
+
+    <ion-checkbox labelPlacement="stacked">Stacked Label</ion-checkbox>
+
+    <br />
+
+    <ion-checkbox helperText="Agree to the terms before continuing" errorText="You must agree to the terms to continue">
+      I agree to the terms and conditions
+    </ion-checkbox>
+  </section>
+</ion-content>

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

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

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

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

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

@@ -0,0 +1,120 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Settings</ion-title>
+    <ion-buttons slot="end">
+      <ion-button 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" 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-label>Airplane Mode</ion-label>
+        <ion-toggle slot="end" color="success"></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('VirtualScrollHeaderPage', () => {
+  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 slot="bottom">
+    <ion-tab-button tab="index" href="/main/index">
+      <ion-icon aria-hidden="true" name="documents-outline"></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-outline"></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-outline"></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;
+  }
+}