@rdlabo/ionic-theme-ios26 0.0.3 → 0.1.0

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

@@ -0,0 +1,51 @@
+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,
+  IonSegment,
+  IonSegmentButton,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-segment',
+  templateUrl: './segment.page.html',
+  styleUrls: ['./segment.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonSegment,
+    IonSegmentButton,
+    IonButtons,
+    IonButton,
+  ],
+})
+export class SegmentPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,74 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>select</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>select</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-select label="Default label" placeholder="Favorite Fruit">
+          <ion-select-option [value]="'apple'">Apple</ion-select-option>
+          <ion-select-option [value]="'banana'">Banana</ion-select-option>
+          <ion-select-option [value]="'orange'">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+          <ion-select-option [value]="'apple'">Apple</ion-select-option>
+          <ion-select-option [value]="'banana'">Banana</ion-select-option>
+          <ion-select-option [value]="'orange'">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-select label="Stacked label" label-placement="stacked">
+          <ion-select-option [value]="'apple'">Apple</ion-select-option>
+          <ion-select-option [value]="'banana'">Banana</ion-select-option>
+          <ion-select-option [value]="'orange'">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-select label="Floating label" label-placement="floating">
+          <ion-select-option [value]="'apple'">Apple</ion-select-option>
+          <ion-select-option [value]="'banana'">Banana</ion-select-option>
+          <ion-select-option [value]="'orange'">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Interfaces</ion-label></ion-list-header>
+    <ion-item-group>
+      @for (item of interfaces; track item) {
+        <ion-item>
+          <ion-select [label]="item" placeholder="Favorite Fruit" [interface]="item">
+            <ion-select-option [value]="'apple'">Apple</ion-select-option>
+            <ion-select-option [value]="'banana'">Banana</ion-select-option>
+            <ion-select-option [value]="'orange'">Orange</ion-select-option>
+          </ion-select>
+        </ion-item>
+      }
+    </ion-item-group>
+  </ion-list>
+</ion-content>

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

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

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

@@ -0,0 +1,50 @@
+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,
+  IonSelect,
+  IonSelectOption,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-select',
+  templateUrl: './select.page.html',
+  styleUrls: ['./select.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonSelect,
+    IonSelectOption,
+    IonListHeader,
+  ],
+})
+export class SelectPage implements OnInit {
+  readonly interfaces = ['alert', 'action-sheet', 'popover', 'modal'] as ('action-sheet' | 'popover' | 'alert' | 'modal')[];
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,78 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>tabs</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>tabs</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-tab-bar class="ion-margin-bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+  </ion-tab-bar>
+  <ion-tab-bar class="ion-margin-bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+  <ion-tab-bar class="ion-margin-bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Last
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-content>

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

@@ -0,0 +1,6 @@
+:host {
+  ion-tab-bar {
+    margin-left: calc(16px + var(--ion-safe-area-left, 0px));
+    margin-right: calc(16px + var(--ion-safe-area-right, 0px));
+  }
+}

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

@@ -0,0 +1,21 @@
+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({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(TabsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,47 @@
+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,
+  IonTabBar,
+  IonTabButton,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: './tabs.page.html',
+  styleUrls: ['./tabs.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonTabBar,
+    IonTabButton,
+  ],
+})
+export class TabsPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,32 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>toast</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>toast</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('top')" [button]="true">present:top</ion-item>
+      <ion-item (click)="present('middle')" [button]="true">present:middle</ion-item>
+      <ion-item (click)="present('bottom')" [button]="true">present:bottom</ion-item>
+      <ion-item (click)="present('anchor')" [button]="true">present:anchor</ion-item>
+    </ion-item-group>
+  </ion-list>
+</ion-content>

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

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

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

@@ -0,0 +1,66 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonText,
+  IonTitle,
+  IonToolbar,
+  ToastController,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-toast',
+  templateUrl: './toast.page.html',
+  styleUrls: ['./toast.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+  ],
+})
+export class ToastPage implements OnInit {
+  readonly overlayCtrl = inject(ToastController);
+
+  ngOnInit() {}
+
+  async present(type: 'top' | 'middle' | 'bottom' | 'anchor') {
+    const toastDefault = {
+      message: 'Hello World!',
+      buttons: ['Close'],
+    };
+    const applyConfig = ((type) => {
+      if (type === 'anchor') {
+        return {
+          ...toastDefault,
+          positionAnchor: 'tab-bar-bottom',
+          position: 'bottom' as 'top' | 'middle' | 'bottom',
+        };
+      }
+      return {
+        ...toastDefault,
+        position: type as 'top' | 'middle' | 'bottom',
+      };
+    })(type);
+    const actionSheet = await this.overlayCtrl.create(applyConfig);
+    await actionSheet.present();
+  }
+}

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

@@ -0,0 +1,45 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>toggle</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>toggle</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-toggle color="success" justify="space-between">Airplane Mode</ion-toggle>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>This component is overwrite.</ion-note>
+  </ion-list>
+
+  <section class="section-example">
+    <ion-toggle>Default Toggle</ion-toggle><br /><br />
+    <ion-toggle [checked]="true">Checked Toggle</ion-toggle><br /><br />
+    <ion-toggle [disabled]="true">Disabled Toggle</ion-toggle><br /><br />
+    <ion-toggle [checked]="true" [disabled]="true">Disabled Checked Toggle</ion-toggle>
+    <ion-toggle enable-on-off-labels="true">Enable Notifications</ion-toggle>
+    <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
+    <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
+    <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+    <ion-toggle label-placement="stacked">Stacked Label</ion-toggle>
+  </section>
+</ion-content>

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

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

@@ -0,0 +1,49 @@
+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() {}
+}