@rdlabo/ionic-theme-ios26 0.0.3 → 0.1.0

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>

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

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

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

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

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

@@ -1,11 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CheckboxPage } from './checkbox.page';
+import { testConfig } from '../../../../../util/test.config';
 
 describe('CheckboxPage', () => {
   let component: CheckboxPage;
   let fixture: ComponentFixture<CheckboxPage>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
     fixture = TestBed.createComponent(CheckboxPage);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -11,7 +11,6 @@ import {
   IonItemGroup,
   IonLabel,
   IonList,
-  IonNote,
   IonText,
   IonTitle,
   IonToolbar,
@@ -35,7 +34,6 @@ import {
     IonItemGroup,
     IonLabel,
     IonList,
-    IonNote,
     IonText,
     IonCheckbox,
   ],

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

@@ -0,0 +1,72 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>chip</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>chip</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-chip class="ios26-disabled">Default</ion-chip>
+    <ion-chip class="ios26-disabled" [disabled]="true">Disabled</ion-chip>
+    <ion-chip class="ios26-disabled" [outline]="true">Outline</ion-chip>
+    <ion-chip class="ios26-disabled">
+      <ion-avatar>
+        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+      </ion-avatar>
+      <ion-label>Avatar Chip</ion-label>
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-chip>
+    <ion-chip class="ios26-disabled">
+      <ion-icon name="pin" color="primary"></ion-icon>
+      <ion-label>Icon Chip</ion-label>
+      <ion-icon name="close"></ion-icon>
+    </ion-chip>
+  </section>
+
+  <section class="section-example">
+    <ion-chip>Default</ion-chip>
+    <ion-chip [disabled]="true">Disabled</ion-chip>
+    <ion-chip [outline]="true">Outline</ion-chip>
+    <ion-chip>
+      <ion-avatar>
+        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+      </ion-avatar>
+      <ion-label>Avatar Chip</ion-label>
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-chip>
+    <ion-chip>
+      <ion-icon name="pin" color="primary"></ion-icon>
+      <ion-label>Icon Chip</ion-label>
+      <ion-icon name="close"></ion-icon>
+    </ion-chip>
+  </section>
+
+  <section class="section-example">
+    <ion-chip>Default</ion-chip>
+    <ion-chip color="primary">Primary</ion-chip>
+    <ion-chip color="secondary">Secondary</ion-chip>
+    <ion-chip color="tertiary">Tertiary</ion-chip>
+    <ion-chip color="success">Success</ion-chip>
+    <ion-chip color="warning">Warning</ion-chip>
+    <ion-chip color="danger">Danger</ion-chip>
+    <ion-chip color="light">Light</ion-chip>
+    <ion-chip color="medium">Medium</ion-chip>
+    <ion-chip color="dark">Dark</ion-chip>
+  </section>
+</ion-content>

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

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

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

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

package/demo/src/app/index/pages/date-and-time-pickers/date-and-time-pickers.page.html

@@ -0,0 +1,48 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>date-and-time-pickers</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>date-and-time-pickers</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-datetime></ion-datetime>
+  </section>
+
+  <section class="section-example">
+    <ion-picker>
+      <ion-picker-column [value]="'javascript'">
+        <ion-picker-column-option [value]="''" [disabled]="true">--</ion-picker-column-option>
+        <ion-picker-column-option [value]="'javascript'">Javascript</ion-picker-column-option>
+        <ion-picker-column-option [value]="'typescript'">Typescript</ion-picker-column-option>
+        <ion-picker-column-option [value]="'rust'">Rust</ion-picker-column-option>
+        <ion-picker-column-option [value]="'c#'">C#</ion-picker-column-option>
+      </ion-picker-column>
+    </ion-picker>
+  </section>
+
+  <section class="section-example">
+    <ion-datetime-button [datetime]="'datetime'"></ion-datetime-button>
+    <ion-modal [keepContentsMounted]="true">
+      <ng-template>
+        <ion-datetime id="datetime"></ion-datetime>
+      </ng-template>
+    </ion-modal>
+  </section>
+</ion-content>

package/demo/src/app/index/pages/date-and-time-pickers/date-and-time-pickers.page.spec.ts

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

package/demo/src/app/index/pages/date-and-time-pickers/date-and-time-pickers.page.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonDatetime,
+  IonDatetimeButton,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonPicker,
+  IonPickerColumn,
+  IonPickerColumnOption,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-date-and-time-pickers',
+  templateUrl: './date-and-time-pickers.page.html',
+  styleUrls: ['./date-and-time-pickers.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonDatetime,
+    IonPicker,
+    IonPickerColumn,
+    IonPickerColumnOption,
+    IonModal,
+    IonDatetimeButton,
+  ],
+})
+export class DateAndTimePickersPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,106 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>floating-action-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>floating-action-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-fab slot="fixed" vertical="top" horizontal="start">
+    <ion-fab-button size="small">
+      <ion-icon name="chevron-forward-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="end">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab slot="fixed" vertical="top" horizontal="end" [edge]="true">
+    <ion-fab-button>
+      <ion-icon name="chevron-down-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="bottom">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab slot="fixed" horizontal="center" vertical="center">
+    <ion-fab-button>
+      <ion-icon name="add"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="top">
+      <ion-fab-button>
+        <ion-icon name="chevron-up"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="end">
+      <ion-fab-button>
+        <ion-icon name="chevron-forward"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="chevron-forward"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="bottom">
+      <ion-fab-button>
+        <ion-icon name="chevron-down"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="start">
+      <ion-fab-button>
+        <ion-icon name="chevron-back"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="chevron-back"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab slot="fixed" vertical="bottom" horizontal="end">
+    <ion-fab-button>
+      <ion-icon name="chevron-up-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="top">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</ion-content>