@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.4

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

@@ -0,0 +1,33 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>searchbar</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>searchbar</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-searchbar></ion-searchbar></ion-toolbar>
+
+  <section class="section-example">
+    <ion-searchbar></ion-searchbar>
+    <ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
+    <ion-searchbar [disabled]="true" placeholder="Disabled"></ion-searchbar>
+    <ion-searchbar [value]="'Value'"></ion-searchbar>
+    <ion-searchbar [animated]="true" placeholder="Animated"></ion-searchbar>
+  </section>
+</ion-content>

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

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

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

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

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

@@ -0,0 +1,102 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>segment</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>segment</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>
+
+  <section class="section-example">
+    <ion-toolbar color="primary">
+      <ion-segment value="default">
+        <ion-segment-button value="default">
+          <ion-label>Default</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="segment">
+          <ion-label>Segment</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button fill="default"><ion-icon name="images" slot="icon-only"></ion-icon></ion-button>
+      </ion-buttons>
+      <ion-segment value="Years">
+        <ion-segment-button value="Years">
+          <ion-label>Years</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="Months">
+          <ion-label>Months</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="All">
+          <ion-label>All</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+      <ion-buttons slot="end">
+        <ion-button fill="default"><ion-icon name="search" slot="icon-only"></ion-icon></ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+
+    <ion-toolbar>
+      <ion-segment [disabled]="true" value="disabled">
+        <ion-segment-button value="disabled">
+          <ion-label>Disabled</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="segment">
+          <ion-label>Segment</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+
+    <ion-toolbar>
+      <ion-segment [scrollable]="true" value="heart">
+        <ion-segment-button value="home">
+          <ion-icon name="home"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="heart">
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="pin">
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="star">
+          <ion-icon name="star"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="call">
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="globe">
+          <ion-icon name="globe"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="basket">
+          <ion-icon name="basket"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="barbell">
+          <ion-icon name="barbell"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="trash">
+          <ion-icon name="trash"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="person">
+          <ion-icon name="person"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+  </section>
+</ion-content>

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

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

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/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() {}
+}