@rdlabo/ionic-theme-ios26 0.1.1 → 0.1.3

package/demo/src/app/index/pages/action-sheet/action-sheet.page.html

@@ -1,33 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
-    <ion-title>action-sheet</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>action-sheet</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/action-sheet/action-sheet.page.spec.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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