@rdlabo/ionic-theme-ios26 0.0.3 → 0.1.0

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

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

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

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

@@ -0,0 +1,39 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>radio</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>radio</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-radio-group [value]="'truncated'">
+      <ion-item>
+        <ion-radio [value]="'truncated'">Truncated with ellipsis by default</ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-radio [value]="'wrapped-part'" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-radio [value]="'wrapped-div'">
+          <div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
+        </ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</ion-content>

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

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

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

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

@@ -0,0 +1,58 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>range</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>range</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-range label-placement="start" label="Label at the Start"></ion-range>
+      </ion-item>
+      <ion-item>
+        <ion-range color="success" label-placement="start" label="Color Success"></ion-range>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>This component is overwrite.</ion-note>
+  </ion-list>
+
+  <section class="section-example">
+    <ion-range label-placement="start" label="Label at the Start"></ion-range>
+
+    <br />
+
+    <ion-range label-placement="end" label="Label at the End"></ion-range>
+
+    <br />
+
+    <ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
+
+    <br />
+
+    <ion-range label-placement="stacked" label="Stacked Label"></ion-range>
+
+    <br />
+
+    <ion-range>
+      <div slot="label">Label with <ion-text color="primary">custom HTML</ion-text></div>
+    </ion-range>
+  </section>
+</ion-content>

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

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

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

package/demo/src/app/index/pages/reorder/reorder.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>reorder</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>reorder</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-reorder-group [disabled]="false">
+      <ion-item>
+        <ion-label> Item 1 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> Item 2 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> Item 3 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> Item 4 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> Item 5 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
+</ion-content>

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

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

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

package/demo/src/app/index/pages/searchbar/searchbar.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>searchbar</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>searchbar</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-toolbar><ion-searchbar></ion-searchbar></ion-toolbar>
+
+  <section class="section-example">
+    <ion-searchbar></ion-searchbar>
+    <ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
+    <ion-searchbar [disabled]="true" placeholder="Disabled"></ion-searchbar>
+    <ion-searchbar [value]="'Value'"></ion-searchbar>
+    <ion-searchbar [animated]="true" placeholder="Animated"></ion-searchbar>
+  </section>
+</ion-content>

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

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

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

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

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

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

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

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

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