From b017ed86d74f071a072e0e1f9596f25825d4a63d Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 18 Dec 2024 19:07:04 -0500 Subject: [PATCH 1/3] docs(theming): update angular to standalone --- .../angular/example_component_ts.md | 34 +++++++++++++++++++ .../angular/example_component_ts.md | 34 +++++++++++++++++++ .../angular/example_component_ts.md | 34 +++++++++++++++++++ .../angular/example_component_ts.md | 34 +++++++++++++++++++ .../angular/example_component_ts.md | 34 +++++++++++++++++++ .../angular/example_component_ts.md | 34 +++++++++++++++++++ .../angular/example_component_ts.md | 34 +++++++++++++++++++ .../angular/example_component_ts.md | 34 +++++++++++++++++++ 8 files changed, 272 insertions(+) diff --git a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md index d2ef8d59a23..95e329afeba 100644 --- a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md +++ b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; @@ -7,6 +24,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent implements OnInit { constructor() { diff --git a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md index ccf31cc2cd3..a79edc064c7 100644 --- a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md +++ b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; @@ -7,6 +24,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent implements OnInit { themeToggle = false; diff --git a/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md index 25b522af5b2..fd89be9959a 100644 --- a/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; @@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md index 25b522af5b2..fd89be9959a 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; @@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md index ed20c4b5d11..67dc00d4f25 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; @@ -7,6 +24,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent implements OnInit { paletteToggle = false; diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md index ebcbdbcb476..c63b168c5f9 100644 --- a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; @@ -7,6 +24,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent implements OnInit { darkPaletteToggle = false; diff --git a/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md index 25b522af5b2..fd89be9959a 100644 --- a/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; @@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md index 25b522af5b2..fd89be9959a 100644 --- a/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; @@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent { constructor() { From a441e05ab462a926f4c57f719a1994f94458592d Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 20 Dec 2024 15:21:13 -0500 Subject: [PATCH 2/3] docs(theming): update angular to standalone --- .../theming/automatic-dark-mode/angular/example_component_ts.md | 1 + .../v7/theming/manual-dark-mode/angular/example_component_ts.md | 1 + .../v8/theming/class-dark-mode/angular/example_component_ts.md | 1 + .../class-high-contrast-mode/angular/example_component_ts.md | 1 + 4 files changed, 4 insertions(+) diff --git a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md index 95e329afeba..98835fee790 100644 --- a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md +++ b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md @@ -24,6 +24,7 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [ IonBackButton, IonButton, diff --git a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md index a79edc064c7..5b2aae9269a 100644 --- a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md +++ b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md @@ -24,6 +24,7 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [ IonBackButton, IonButton, diff --git a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md index 67dc00d4f25..472e3609ac9 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md @@ -24,6 +24,7 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [ IonBackButton, IonButton, diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md index c63b168c5f9..d17bedbae66 100644 --- a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md @@ -24,6 +24,7 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [ IonBackButton, IonButton, From 957ca51f87c7f0d8ea1ec90af27636b8e47aece7 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 27 Dec 2024 14:25:35 -0500 Subject: [PATCH 3/3] docs(theming): update angular to standalone --- .../angular/example_component_ts.md | 10 ++++++---- .../angular/example_component_ts.md | 10 ++++++---- .../angular/example_component_ts.md | 18 ++++++++++-------- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md index 5b2aae9269a..b0b74b8e2f1 100644 --- a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md +++ b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { IonBackButton, IonButton, @@ -26,6 +27,7 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [ + FormsModule, IonBackButton, IonButton, IonButtons, @@ -68,18 +70,18 @@ export class ExampleComponent implements OnInit { } // Check/uncheck the toggle and update the theme based on isDark - initializeDarkTheme(isDark) { + initializeDarkTheme(isDark: boolean) { this.themeToggle = isDark; this.toggleDarkTheme(isDark); } // Listen for the toggle check/uncheck to toggle the dark theme - toggleChange(ev) { - this.toggleDarkTheme(ev.detail.checked); + toggleChange(event: CustomEvent) { + this.toggleDarkTheme(event.detail.checked); } // Add or remove the "dark" class on the document body - toggleDarkTheme(shouldAdd) { + toggleDarkTheme(shouldAdd: boolean) { document.body.classList.toggle('dark', shouldAdd); } } diff --git a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md index 472e3609ac9..82f5028fa39 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { IonBackButton, IonButton, @@ -26,6 +27,7 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [ + FormsModule, IonBackButton, IonButton, IonButtons, @@ -68,18 +70,18 @@ export class ExampleComponent implements OnInit { } // Check/uncheck the toggle and update the palette based on isDark - initializeDarkPalette(isDark) { + initializeDarkPalette(isDark: boolean) { this.paletteToggle = isDark; this.toggleDarkPalette(isDark); } // Listen for the toggle check/uncheck to toggle the dark palette - toggleChange(ev) { - this.toggleDarkPalette(ev.detail.checked); + toggleChange(event: CustomEvent) { + this.toggleDarkPalette(event.detail.checked); } // Add or remove the "ion-palette-dark" class on the html element - toggleDarkPalette(shouldAdd) { + toggleDarkPalette(shouldAdd: boolean) { document.documentElement.classList.toggle('ion-palette-dark', shouldAdd); } } diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md index d17bedbae66..9e7539a2e9d 100644 --- a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { IonBackButton, IonButton, @@ -26,6 +27,7 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [ + FormsModule, IonBackButton, IonButton, IonButtons, @@ -74,34 +76,34 @@ export class ExampleComponent implements OnInit { } // Check/uncheck the toggle and update the palette based on isDark - initializeDarkPalette(isDark) { + initializeDarkPalette(isDark: boolean) { this.darkPaletteToggle = isDark; this.toggleDarkPalette(isDark); } // Check/uncheck the toggle and update the palette based on isHighContrast - initializeHighContrastPalette(isHighContrast) { + initializeHighContrastPalette(isHighContrast: boolean) { this.highContrastPaletteToggle = isHighContrast; this.toggleHighContrastPalette(isHighContrast); } // Listen for the toggle check/uncheck to toggle the dark palette - darkPaletteToggleChange(ev) { - this.toggleDarkPalette(ev.detail.checked); + darkPaletteToggleChange(event: CustomEvent) { + this.toggleDarkPalette(event.detail.checked); } // Listen for the toggle check/uncheck to toggle the high contrast palette - highContrastPaletteToggleChange(ev) { - this.toggleHighContrastPalette(ev.detail.checked); + highContrastPaletteToggleChange(event: CustomEvent) { + this.toggleHighContrastPalette(event.detail.checked); } // Add or remove the "ion-palette-dark" class on the html element - toggleDarkPalette(shouldAdd) { + toggleDarkPalette(shouldAdd: boolean) { document.documentElement.classList.toggle('ion-palette-dark', shouldAdd); } // Add or remove the "ion-palette-high-contrast" class on the html element - toggleHighContrastPalette(shouldAdd) { + toggleHighContrastPalette(shouldAdd: boolean) { document.documentElement.classList.toggle('ion-palette-high-contrast', shouldAdd); } }