@rdlabo/ionic-theme-ios26 0.0.3 → 0.1.0

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

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

package/demo/src/app/index/pages/floating-action-button/floating-action-button.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,
+  IonFab,
+  IonFabButton,
+  IonFabList,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-floating-action-button',
+  templateUrl: './floating-action-button.page.html',
+  styleUrls: ['./floating-action-button.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonFab,
+    IonFabButton,
+    IonFabList,
+  ],
+})
+export class FloatingActionButtonPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,65 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>inputs</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>inputs</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-input label="Default label" placeholder="Enter text"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-input label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-input label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-input label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
+          <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+        </ion-input>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item>
+        <ion-textarea label="Default label" placeholder="Enter textarea"></ion-textarea>
+      </ion-item>
+      <ion-item>
+        <ion-textarea label="Fixed label" labelPlacement="fixed" placeholder="Enter textarea"></ion-textarea>
+      </ion-item>
+      <ion-item>
+        <ion-textarea label="Stacked label" labelPlacement="stacked" placeholder="Enter textarea"></ion-textarea>
+      </ion-item>
+      <ion-item>
+        <ion-textarea label="Floating label" labelPlacement="floating" placeholder="Enter textarea"></ion-textarea>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+</ion-content>

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

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

package/demo/src/app/index/pages/inputs/inputs.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,
+  IonInput,
+  IonInputPasswordToggle,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonText,
+  IonTextarea,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-inputs',
+  templateUrl: './inputs.page.html',
+  styleUrls: ['./inputs.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonInput,
+    IonInputPasswordToggle,
+    IonTextarea,
+  ],
+})
+export class InputsPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/item-list/item-list.page.html

@@ -0,0 +1,52 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>item-list</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>item-list</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>Inset List</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label>Basic Item</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>Note additional information.</ion-note>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header><ion-label>Default List</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label>Basic Item</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>Note additional information.</ion-note>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/pages/item-list/item-list.page.spec.ts

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

package/demo/src/app/index/pages/item-list/item-list.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,
+  IonListHeader,
+  IonNote,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-item-list',
+  templateUrl: './item-list.page.html',
+  styleUrls: ['./item-list.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonListHeader,
+    IonNote,
+  ],
+})
+export class ItemListPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>menu</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

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

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

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

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.page.html',
+  styleUrls: ['./menu.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule],
+})
+export class MenuPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,37 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    @if (this.isModal()) {
+      <ion-buttons slot="end">
+        <ion-button (click)="overlayCtrl.dismiss()"><ion-icon name="close-outline" slot="icon-only"></ion-icon></ion-button>
+      </ion-buttons>
+    } @else {
+      <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    }
+    <ion-title>modal</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>modal</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('normal')" [button]="true">present:normal</ion-item>
+      <ion-item (click)="present('card')" [button]="true">present:card</ion-item>
+      <ion-item (click)="present('sheet')" [button]="true">present:sheet</ion-item>
+    </ion-item-group>
+  </ion-list>
+</ion-content>

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

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

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

@@ -0,0 +1,77 @@
+import { Component, ElementRef, inject, input, 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,
+  IonText,
+  IonTitle,
+  IonToolbar,
+  ModalController,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.page.html',
+  styleUrls: ['./modal.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonButtons,
+    IonButton,
+  ],
+})
+export class ModalPage implements OnInit {
+  readonly overlayCtrl = inject(ModalController);
+  readonly #el = inject(ElementRef);
+
+  readonly isModal = input<boolean>();
+
+  ngOnInit() {}
+
+  async present(type: 'normal' | 'card' | 'sheet') {
+    const modalDefault = {
+      component: ModalPage,
+      componentProps: {
+        isModal: true,
+      },
+    };
+    const applyConfig = ((type) => {
+      if (type === 'card') {
+        return {
+          ...modalDefault,
+          presentingElement: this.#el.nativeElement,
+        };
+      } else if (type === 'sheet') {
+        return {
+          ...modalDefault,
+          breakpoints: [0, 0.5, 0.8],
+          initialBreakpoint: 0.8,
+        };
+      }
+      return modalDefault;
+    })(type);
+    const actionSheet = await this.overlayCtrl.create(applyConfig);
+    await actionSheet.present();
+  }
+}

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

@@ -0,0 +1,34 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>popover</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>popover</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-button id="click-trigger">Click Me</ion-button>
+    <ion-popover trigger="click-trigger" triggerAction="click">
+      <ng-template>
+        <div class="ion-padding">
+          <ion-text>Hello World!</ion-text>
+        </div>
+      </ng-template>
+    </ion-popover>
+  </section>
+</ion-content>

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

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

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

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

package/demo/src/app/index/pages/progress-indicators/progress-indicators.page.html

@@ -0,0 +1,28 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>progress-indicators</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>progress-indicators</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-button id="open-loading">Show Loading</ion-button>
+    <ion-loading trigger="open-loading" [message]="'Dismissing after 3 seconds...'" [duration]="3000"></ion-loading>
+  </section>
+</ion-content>