From 2c0381964c301890bfefed0b24ca3a9d8a335fe7 Mon Sep 17 00:00:00 2001 From: sanchezvem Date: Thu, 12 Mar 2026 17:25:59 +0100 Subject: [PATCH] added ionic library in project --- angular.json | 74 +++++++- ionic.config.json | 6 + package-lock.json | 189 +++++++++++++++++++- package.json | 4 +- src/app/app.config.ts | 3 +- src/app/app.html | 382 +++++----------------------------------- src/app/app.ts | 14 +- src/theme/variables.css | 10 ++ 8 files changed, 339 insertions(+), 343 deletions(-) create mode 100644 ionic.config.json create mode 100644 src/theme/variables.css diff --git a/angular.json b/angular.json index 314b1a6..5de310c 100644 --- a/angular.json +++ b/angular.json @@ -50,7 +50,40 @@ } ], "styles": [ - "src/styles.css" + "src/styles.css", + { + "input": "node_modules/@ionic/angular/css/core.css" + }, + { + "input": "node_modules/@ionic/angular/css/normalize.css" + }, + { + "input": "node_modules/@ionic/angular/css/structure.css" + }, + { + "input": "node_modules/@ionic/angular/css/typography.css" + }, + { + "input": "node_modules/@ionic/angular/css/display.css" + }, + { + "input": "node_modules/@ionic/angular/css/padding.css" + }, + { + "input": "node_modules/@ionic/angular/css/float-elements.css" + }, + { + "input": "node_modules/@ionic/angular/css/text-alignment.css" + }, + { + "input": "node_modules/@ionic/angular/css/text-transformation.css" + }, + { + "input": "node_modules/@ionic/angular/css/flex-utils.css" + }, + { + "input": "src/theme/variables.css" + } ] }, "configurations": { @@ -91,8 +124,45 @@ }, "extract-i18n": { "builder": "@angular/build:extract-i18n" + }, + "ionic-cordova-serve": { + "builder": "@ionic/angular-toolkit:cordova-serve", + "options": { + "cordovaBuildTarget": "BeReadyFrontend:ionic-cordova-build", + "devServerTarget": "BeReadyFrontend:serve" + }, + "configurations": { + "production": { + "cordovaBuildTarget": "BeReadyFrontend:ionic-cordova-build:production", + "devServerTarget": "BeReadyFrontend:serve:production" + } + } + }, + "ionic-cordova-build": { + "builder": "@ionic/angular-toolkit:cordova-build", + "options": { + "browserTarget": "BeReadyFrontend:build" + }, + "configurations": { + "production": { + "browserTarget": "BeReadyFrontend:build:production" + } + } } } } + }, + "cli": { + "schematicCollections": [ + "@ionic/angular-toolkit" + ] + }, + "schematics": { + "@ionic/angular-toolkit:component": { + "styleext": "scss" + }, + "@ionic/angular-toolkit:page": { + "styleext": "scss" + } } -} +} \ No newline at end of file diff --git a/ionic.config.json b/ionic.config.json new file mode 100644 index 0000000..ee3cfe9 --- /dev/null +++ b/ionic.config.json @@ -0,0 +1,6 @@ +{ + "name": "ionic-app", + "app_id": "", + "type": "angular-standalone", + "integrations": {} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f8d3e33..b037f72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@angular/forms": "^20.3.0", "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", + "@ionic/angular": "^8.8.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" @@ -22,6 +23,7 @@ "@angular/build": "^20.3.9", "@angular/cli": "^20.3.9", "@angular/compiler-cli": "^20.3.0", + "@ionic/angular-toolkit": "latest", "typescript": "~5.9.2" } }, @@ -540,6 +542,7 @@ "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.17.tgz", "integrity": "sha512-iGS6NwzcyJzinbPMapsQtcN0ZJ62vr6hcul+FNa40CaK2ePC04S+C5n+DIphzwnwsFHDBIWuTQRfk/lNYdN1JA==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -581,6 +584,7 @@ "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.17.tgz", "integrity": "sha512-p0r0IOJhUcn8WHx4gkSlfwifkkYO5mSDtq4iM5OunZTlSaeSxLb1vTRg2VBgwdzpgAM+eZSMBTTVF/M3pdoELQ==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -625,6 +629,7 @@ "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -1706,6 +1711,51 @@ } } }, + "node_modules/@ionic/angular": { + "version": "8.8.1", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.8.1.tgz", + "integrity": "sha512-Jp7LbouSHAnR00Dsa8qE1CSOZNqAfBCO0XKXScJNz8NKVoZe5fPGy/CboehGtAQ1xgzh2eDa15zMmyetXjAkYA==", + "license": "MIT", + "dependencies": { + "@ionic/core": "8.8.1", + "ionicons": "^8.0.13", + "jsonc-parser": "^3.0.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": ">=16.0.0", + "@angular/forms": ">=16.0.0", + "@angular/router": ">=16.0.0", + "rxjs": ">=7.5.0", + "zone.js": ">=0.13.0" + } + }, + "node_modules/@ionic/angular-toolkit": { + "version": "12.3.0", + "resolved": "https://registry.npmjs.org/@ionic/angular-toolkit/-/angular-toolkit-12.3.0.tgz", + "integrity": "sha512-9cPTMmwggviB2W7wf4sv4vFeQnYq5HbO6V89UqQHopShokdhSvUFpaQ2w1/Mdf/ot8PghGjR3t5IdnXV7i1LvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/core": "^20.0.0", + "@angular-devkit/schematics": "^20.0.0", + "@schematics/angular": "^20.0.0" + } + }, + "node_modules/@ionic/core": { + "version": "8.8.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz", + "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==", + "license": "MIT", + "dependencies": { + "@stencil/core": "4.43.0", + "ionicons": "^8.0.13", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">= 16" + } + }, "node_modules/@isaacs/fs-minipass": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz", @@ -3354,6 +3404,133 @@ "node": "^20.17.0 || >=22.9.0" } }, + "node_modules/@stencil/core": { + "version": "4.43.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz", + "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.34.9", + "@rollup/rollup-darwin-x64": "4.34.9", + "@rollup/rollup-linux-arm64-gnu": "4.34.9", + "@rollup/rollup-linux-arm64-musl": "4.34.9", + "@rollup/rollup-linux-x64-gnu": "4.34.9", + "@rollup/rollup-linux-x64-musl": "4.34.9", + "@rollup/rollup-win32-arm64-msvc": "4.34.9", + "@rollup/rollup-win32-x64-msvc": "4.34.9" + } + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", + "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-x64": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", + "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", + "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", + "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", + "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", + "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", + "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", + "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@tufjs/canonical-json": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz", @@ -4885,6 +5062,15 @@ "node": "^18.17.0 || >=20.5.0" } }, + "node_modules/ionicons": { + "version": "8.0.13", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz", + "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.35.3" + } + }, "node_modules/ip-address": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz", @@ -5097,7 +5283,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz", "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==", - "dev": true, "license": "MIT" }, "node_modules/jsonparse": { @@ -5116,6 +5301,7 @@ "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "cli-truncate": "^4.0.0", "colorette": "^2.0.20", @@ -7123,6 +7309,7 @@ "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", diff --git a/package.json b/package.json index 89161fb..2bd075c 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@angular/forms": "^20.3.0", "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", + "@ionic/angular": "^8.8.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" @@ -35,6 +36,7 @@ "@angular/build": "^20.3.9", "@angular/cli": "^20.3.9", "@angular/compiler-cli": "^20.3.0", - "typescript": "~5.9.2" + "typescript": "~5.9.2", + "@ionic/angular-toolkit": "latest" } } \ No newline at end of file diff --git a/src/app/app.config.ts b/src/app/app.config.ts index d953f4c..868b4b8 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -2,11 +2,12 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChang import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; +import { provideIonicAngular } from '@ionic/angular/standalone'; export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), provideZoneChangeDetection({ eventCoalescing: true }), - provideRouter(routes) + provideRouter(routes), provideIonicAngular({}) ] }; diff --git a/src/app/app.html b/src/app/app.html index 7528372..6ab0847 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,342 +1,52 @@ - - - - - - - - + + + + Be Ready + + - - -
-
-
- -

Hello, {{ title() }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'}, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/app.ts b/src/app/app.ts index 2f80dac..1275694 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,12 +1,22 @@ import { Component, signal } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import {IonicModule} from "@ionic/angular"; +import { addIcons } from 'ionicons'; +import { heart } from 'ionicons/icons'; @Component({ selector: 'app-root', - imports: [RouterOutlet], + imports: [RouterOutlet, IonicModule], templateUrl: './app.html', styleUrl: './app.css' }) export class App { - protected readonly title = signal('BeReadyFrontend'); + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ heart }); + } } diff --git a/src/theme/variables.css b/src/theme/variables.css new file mode 100644 index 0000000..f837365 --- /dev/null +++ b/src/theme/variables.css @@ -0,0 +1,10 @@ +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more info, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +/* @import "@ionic/angular/css/palettes/dark.always.css"; */ +/* @import "@ionic/angular/css/palettes/dark.class.css"; */ +@import "@ionic/angular/css/palettes/dark.system.css";