@rdlabo/ionic-theme-ios26 0.1.2 → 0.1.3

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

@@ -1,107 +0,0 @@
-<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-text
-            >This components is excluded this packages. You should use default ios design util release re-design version.
-            <a href="https://github.com/rdlabo-team/ionic-theme-ios26/blob/main/FEEDBACK2.md" target="_blank">Reason is here.</a></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.scss

@@ -1 +0,0 @@
-@use '../../../../../../src/components/ion-segment';

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

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

@@ -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,
-  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

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

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

@@ -1,50 +0,0 @@
-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/tabs/tabs.page.html

@@ -1,78 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
-    <ion-title>tabs</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>tabs</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-tab-bar class="ion-margin-bottom">
-    <ion-tab-button tab="home">
-      <ion-icon name="play-circle"></ion-icon>
-      Listen Now
-    </ion-tab-button>
-    <ion-tab-button tab="radio">
-      <ion-icon name="radio"></ion-icon>
-      Radio
-    </ion-tab-button>
-    <ion-tab-button tab="library">
-      <ion-icon name="library"></ion-icon>
-      Library
-    </ion-tab-button>
-  </ion-tab-bar>
-  <ion-tab-bar class="ion-margin-bottom">
-    <ion-tab-button tab="home">
-      <ion-icon name="play-circle"></ion-icon>
-      Listen Now
-    </ion-tab-button>
-    <ion-tab-button tab="radio">
-      <ion-icon name="radio"></ion-icon>
-      Radio
-    </ion-tab-button>
-    <ion-tab-button tab="library">
-      <ion-icon name="library"></ion-icon>
-      Library
-    </ion-tab-button>
-    <ion-tab-button tab="search">
-      <ion-icon name="search"></ion-icon>
-      Search
-    </ion-tab-button>
-  </ion-tab-bar>
-  <ion-tab-bar class="ion-margin-bottom">
-    <ion-tab-button tab="home">
-      <ion-icon name="play-circle"></ion-icon>
-      Listen Now
-    </ion-tab-button>
-    <ion-tab-button tab="radio">
-      <ion-icon name="radio"></ion-icon>
-      Radio
-    </ion-tab-button>
-    <ion-tab-button tab="library">
-      <ion-icon name="library"></ion-icon>
-      Library
-    </ion-tab-button>
-    <ion-tab-button tab="search">
-      <ion-icon name="search"></ion-icon>
-      Search
-    </ion-tab-button>
-    <ion-tab-button tab="search">
-      <ion-icon name="search"></ion-icon>
-      Last
-    </ion-tab-button>
-  </ion-tab-bar>
-</ion-content>

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

@@ -1,6 +0,0 @@
-:host {
-  ion-tab-bar {
-    margin-left: calc(16px + var(--ion-safe-area-left, 0px));
-    margin-right: calc(16px + var(--ion-safe-area-right, 0px));
-  }
-}

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

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

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

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

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

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

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

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

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