@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.4

package/demo/src/app/index/pages/action-sheet/action-sheet.util.ts

@@ -0,0 +1,28 @@
+export const actionSheetUtil = () => ({
+  header: 'Actions',
+  subHeader: 'Action Sheet',
+  buttons: [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      icon: 'trash-outline',
+      data: {
+        action: 'delete',
+      },
+    },
+    {
+      text: 'Share',
+      icon: 'share-outline',
+      data: {
+        action: 'share',
+      },
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel',
+      },
+    },
+  ],
+});

package/demo/src/app/index/pages/alert/alert.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>alert</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>alert</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('all')" [button]="true">present:all</ion-item>
+      <ion-item (click)="present('button-only')" [button]="true">present:button-only</ion-item>
+      <ion-item (click)="present('no-cancel')" [button]="true">present:no-cancel</ion-item>
+      <ion-item (click)="present('force-dark-mode')" [button]="true">present:force-dark-mode</ion-item>
+    </ion-item-group>
+    <ion-note>If the Ionic Theme remains in light mode, ion-dark-text-color-rgb isn’t set, so some text stays black.</ion-note>
+  </ion-list>
+</ion-content>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AlertPage } from './alert.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('AlertPage', () => {
+  let component: AlertPage;
+  let fixture: ComponentFixture<AlertPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    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,73 @@
+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 { 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/breadcrumbs/breadcrumbs.page.html

@@ -0,0 +1,41 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>breadcrumbs</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>breadcrumbs</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-breadcrumbs class="ios26-disabled">
+      <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+      <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+      <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+      <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    </ion-breadcrumbs>
+  </section>
+
+  <section class="section-example">
+    <ion-breadcrumbs>
+      <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+      <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+      <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+      <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    </ion-breadcrumbs>
+  </section>
+</ion-content>

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

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

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

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

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

@@ -0,0 +1,112 @@
+<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</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button>Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>buttons > button[fill=default]</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button fill="default">Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>buttons > button[fill=default][size=default]</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button fill="default" size="default">Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>buttons > button[fill=default][size=large]</code></ion-label>
+        <ion-buttons slot="end" class="ios26-disabled">
+          <ion-button fill="default" size="large">Buttons Shadow</ion-button>
+          <ion-button fill="default" class="ios26-disabled" size="large">Default Theme</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>buttons > button[fill=outline]</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button fill="outline">Buttons Shadow</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[fill=default]</code></ion-label>
+        <ion-button slot="end" fill="default">Link</ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button[fill=default][color=primary]</code></ion-label>
+        <ion-button slot="end" fill="default" color="primary">Link</ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button[fill=solid]</code></ion-label>
+        <ion-button slot="end" fill="solid">Link</ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button[fill=outline]</code></ion-label>
+        <ion-button slot="end" fill="outline">Link</ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button[fill=clear]</code></ion-label>
+        <ion-button slot="end" fill="clear">Link</ion-button>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <section class="section-example">
+    <ion-button size="small" fill="default">small</ion-button>
+    <ion-button size="default" fill="default">default</ion-button>
+    <ion-button size="large" fill="default">large</ion-button><br />
+    <ion-button size="small" fill="solid" color="primary">small</ion-button>
+    <ion-button size="default" fill="solid" color="primary">default</ion-button>
+    <ion-button size="large" fill="solid" color="primary">large</ion-button>
+  </section>
+</ion-content>

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

@@ -0,0 +1,3 @@
+ion-item *[slot='end'] {
+  margin-right: 6px;
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonPage } from './button.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('ButtonPage', () => {
+  let component: ButtonPage;
+  let fixture: ComponentFixture<ButtonPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    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,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,
+  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,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonButtons,
+    IonButton,
+    IonNote,
+    IonListHeader,
+  ],
+})
+export class ButtonPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,171 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>card</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>card</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-card>
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Here's a small text description for the card content. Nothing more, nothing less. </ion-card-content>
+    </ion-card>
+    <ion-card>
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Here's a small text description for the card content. Nothing more, nothing less. </ion-card-content>
+    </ion-card>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Here's a small text description for the card content. Nothing more, nothing less. </ion-card-content>
+
+      <ion-button fill="clear">Action 1</ion-button>
+      <ion-button fill="clear">Action 2</ion-button>
+    </ion-card>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </ion-thumbnail>
+            <ion-label>Item</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </ion-thumbnail>
+            <ion-label>Item</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </ion-thumbnail>
+            <ion-label>Item</ion-label>
+          </ion-item>
+
+          <ion-item lines="none">
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </ion-thumbnail>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+    <ion-card color="primary">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="secondary">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="tertiary">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="success">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="warning">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="danger">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="light">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="medium">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="dark">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+  </section>
+</ion-content>