From aadb6f0a243e23765c3d94780bc0f31f88e1f94c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 28 Jun 2024 16:03:19 +0200 Subject: [PATCH] MOBILE-4594 ionic: Update to Ionic 8 --- package-lock.json | 131 +++--------------- package.json | 4 +- ...re+7.8.6.patch => @ionic+core+8.2.5.patch} | 20 +-- src/core/services/tests/sites.test.ts | 2 +- src/core/singletons/html-classes.ts | 2 +- src/theme/theme.scss | 30 ++-- upgrade.txt | 7 + 7 files changed, 62 insertions(+), 134 deletions(-) rename patches/{@ionic+core+7.8.6.patch => @ionic+core+8.2.5.patch} (95%) diff --git a/package-lock.json b/package-lock.json index 282ddf4a3..8c296ef5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,7 +38,7 @@ "@awesome-cordova-plugins/sqlite": "^6.7.0", "@awesome-cordova-plugins/status-bar": "^6.7.0", "@awesome-cordova-plugins/web-intent": "^6.7.0", - "@ionic/angular": "^7.8.6", + "@ionic/angular": "^8.2.5", "@ionic/cordova-builders": "^11.0.0", "@moodlehq/cordova-plugin-advanced-http": "3.3.1-moodle.1", "@moodlehq/cordova-plugin-camera": "7.0.0-moodle.1", @@ -107,7 +107,7 @@ "@angular/cli": "^17.3.6", "@angular/compiler-cli": "^17.3.7", "@angular/language-service": "^17.3.7", - "@ionic/angular-toolkit": "^10.1.1", + "@ionic/angular-toolkit": "^11.0.1", "@ionic/cli": "^7.2.0", "@jsdevtools/coverage-istanbul-loader": "^3.0.5", "@types/faker": "^5.5.9", @@ -3646,123 +3646,32 @@ "dev": true }, "node_modules/@ionic/angular": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-7.8.6.tgz", - "integrity": "sha512-3Qe53hXpyjtx6fFcxt/NTAlauIawsGmCZJPauV5sAnSKVuX8C82C1zMAZTeJt6m2dnd71wythc98BXUXsx/UxQ==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.2.5.tgz", + "integrity": "sha512-vvL5TIN8YbrkW5IZ4TYw2zVa4/+boITe19nElPz1Bu7O15lEEzLe+9RqcIMDERwzgqzsBXLh1CUJk+1TXkMhJg==", "dependencies": { - "@ionic/core": "7.8.6", + "@ionic/core": "8.2.5", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/core": ">=14.0.0", - "@angular/forms": ">=14.0.0", - "@angular/router": ">=14.0.0", + "@angular/core": ">=16.0.0", + "@angular/forms": ">=16.0.0", + "@angular/router": ">=16.0.0", "rxjs": ">=7.5.0", - "zone.js": ">=0.11.0" + "zone.js": ">=0.13.0" } }, "node_modules/@ionic/angular-toolkit": { - "version": "10.1.1", - "resolved": "https://registry.npmjs.org/@ionic/angular-toolkit/-/angular-toolkit-10.1.1.tgz", - "integrity": "sha512-idLaBUY14M7JQmvxAGeDZvk7WcamWEHo1OHGRuLRAn+7uWrKeGxfWbnbZJhvRCLQndr8j7q3WV3Z+0APkPuKaQ==", + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/@ionic/angular-toolkit/-/angular-toolkit-11.0.1.tgz", + "integrity": "sha512-dxx2RDbxDYM2nWRPIirKMJySHtqJ1u02T25PGbNb99W2Wlcmu1cza3+2/PQ8ga18yMz/dQqaGyEmPDf3ZSVO0w==", "dev": true, "dependencies": { - "@angular-devkit/core": "^16.0.0", - "@angular-devkit/schematics": "^16.0.0", - "@schematics/angular": "^16.0.0" - } - }, - "node_modules/@ionic/angular-toolkit/node_modules/@angular-devkit/core": { - "version": "16.2.14", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-16.2.14.tgz", - "integrity": "sha512-Ui14/d2+p7lnmXlK/AX2ieQEGInBV75lonNtPQgwrYgskF8ufCuN0DyVZQUy9fJDkC+xQxbJyYrby/BS0R0e7w==", - "dev": true, - "dependencies": { - "ajv": "8.12.0", - "ajv-formats": "2.1.1", - "jsonc-parser": "3.2.0", - "picomatch": "2.3.1", - "rxjs": "7.8.1", - "source-map": "0.7.4" - }, - "engines": { - "node": "^16.14.0 || >=18.10.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - }, - "peerDependencies": { - "chokidar": "^3.5.2" - }, - "peerDependenciesMeta": { - "chokidar": { - "optional": true - } - } - }, - "node_modules/@ionic/angular-toolkit/node_modules/@angular-devkit/schematics": { - "version": "16.2.14", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-16.2.14.tgz", - "integrity": "sha512-B6LQKInCT8w5zx5Pbroext5eFFRTCJdTwHN8GhcVS8IeKCnkeqVTQLjB4lBUg7LEm8Y7UHXwzrVxmk+f+MBXhw==", - "dev": true, - "dependencies": { - "@angular-devkit/core": "16.2.14", - "jsonc-parser": "3.2.0", - "magic-string": "0.30.1", - "ora": "5.4.1", - "rxjs": "7.8.1" - }, - "engines": { - "node": "^16.14.0 || >=18.10.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - } - }, - "node_modules/@ionic/angular-toolkit/node_modules/@schematics/angular": { - "version": "16.2.14", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-16.2.14.tgz", - "integrity": "sha512-YqIv727l9Qze8/OL6H9mBHc2jVXzAGRNBYnxYWqWhLbfvuVbbldo6NNIIjgv6lrl2LJSdPAAMNOD5m/f6210ug==", - "dev": true, - "dependencies": { - "@angular-devkit/core": "16.2.14", - "@angular-devkit/schematics": "16.2.14", - "jsonc-parser": "3.2.0" - }, - "engines": { - "node": "^16.14.0 || >=18.10.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - } - }, - "node_modules/@ionic/angular-toolkit/node_modules/jsonc-parser": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", - "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==", - "dev": true - }, - "node_modules/@ionic/angular-toolkit/node_modules/magic-string": { - "version": "0.30.1", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz", - "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==", - "dev": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@ionic/angular-toolkit/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" + "@angular-devkit/core": "^17.0.0", + "@angular-devkit/schematics": "^17.0.0", + "@schematics/angular": "^17.0.0" } }, "node_modules/@ionic/angular/node_modules/jsonc-parser": { @@ -4291,11 +4200,11 @@ } }, "node_modules/@ionic/core": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.6.tgz", - "integrity": "sha512-HAYZdEmeJgOdo2kDlZkcCGHb+zs/vjU6iv4skbVBL7y+OnSv/oC2u83Yee8S3/aY0YAxkyBgu7hLTYH13Zc2Aw==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz", + "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==", "dependencies": { - "@stencil/core": "^4.12.2", + "@stencil/core": "^4.19.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } diff --git a/package.json b/package.json index 6d7090a34..b3d280a85 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "@awesome-cordova-plugins/sqlite": "^6.7.0", "@awesome-cordova-plugins/status-bar": "^6.7.0", "@awesome-cordova-plugins/web-intent": "^6.7.0", - "@ionic/angular": "^7.8.6", + "@ionic/angular": "^8.2.5", "@ionic/cordova-builders": "^11.0.0", "@moodlehq/cordova-plugin-advanced-http": "3.3.1-moodle.1", "@moodlehq/cordova-plugin-camera": "7.0.0-moodle.1", @@ -141,7 +141,7 @@ "@angular/cli": "^17.3.6", "@angular/compiler-cli": "^17.3.7", "@angular/language-service": "^17.3.7", - "@ionic/angular-toolkit": "^10.1.1", + "@ionic/angular-toolkit": "^11.0.1", "@ionic/cli": "^7.2.0", "@jsdevtools/coverage-istanbul-loader": "^3.0.5", "@types/faker": "^5.5.9", diff --git a/patches/@ionic+core+7.8.6.patch b/patches/@ionic+core+8.2.5.patch similarity index 95% rename from patches/@ionic+core+7.8.6.patch rename to patches/@ionic+core+8.2.5.patch index b88976d43..26270e1c8 100644 --- a/patches/@ionic+core+7.8.6.patch +++ b/patches/@ionic+core+8.2.5.patch @@ -1,5 +1,5 @@ diff --git a/node_modules/@ionic/core/components/popover.js b/node_modules/@ionic/core/components/popover.js -index 21fb3e3..52ea4a6 100644 +index 19b79c4..67289f4 100644 --- a/node_modules/@ionic/core/components/popover.js +++ b/node_modules/@ionic/core/components/popover.js @@ -763,8 +763,10 @@ const iosEnterAnimation = (baseEl, opts) => { @@ -29,10 +29,10 @@ index 21fb3e3..52ea4a6 100644 const contentEl = root.querySelector('.popover-content'); const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target); diff --git a/node_modules/@ionic/core/dist/cjs/ion-popover.cjs.entry.js b/node_modules/@ionic/core/dist/cjs/ion-popover.cjs.entry.js -index 68a908b..050e544 100644 +index 2dcf484..54aeac9 100644 --- a/node_modules/@ionic/core/dist/cjs/ion-popover.cjs.entry.js +++ b/node_modules/@ionic/core/dist/cjs/ion-popover.cjs.entry.js -@@ -768,8 +768,10 @@ const iosEnterAnimation = (baseEl, opts) => { +@@ -769,8 +769,10 @@ const iosEnterAnimation = (baseEl, opts) => { const { event: ev, size, trigger, reference, side, align } = opts; const doc = baseEl.ownerDocument; const isRTL = doc.dir === 'rtl'; @@ -45,7 +45,7 @@ index 68a908b..050e544 100644 const root = helpers.getElementRoot(baseEl); const contentEl = root.querySelector('.popover-content'); const arrowEl = root.querySelector('.popover-arrow'); -@@ -889,8 +891,10 @@ const mdEnterAnimation = (baseEl, opts) => { +@@ -890,8 +892,10 @@ const mdEnterAnimation = (baseEl, opts) => { const { event: ev, size, trigger, reference, side, align } = opts; const doc = baseEl.ownerDocument; const isRTL = doc.dir === 'rtl'; @@ -93,10 +93,10 @@ index 603923a..ff10a25 100644 const contentEl = root.querySelector('.popover-content'); const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target); diff --git a/node_modules/@ionic/core/dist/esm/ion-popover.entry.js b/node_modules/@ionic/core/dist/esm/ion-popover.entry.js -index 839e91c..abcd28f 100644 +index 8ca76cf..c5b990a 100644 --- a/node_modules/@ionic/core/dist/esm/ion-popover.entry.js +++ b/node_modules/@ionic/core/dist/esm/ion-popover.entry.js -@@ -764,8 +764,10 @@ const iosEnterAnimation = (baseEl, opts) => { +@@ -765,8 +765,10 @@ const iosEnterAnimation = (baseEl, opts) => { const { event: ev, size, trigger, reference, side, align } = opts; const doc = baseEl.ownerDocument; const isRTL = doc.dir === 'rtl'; @@ -109,7 +109,7 @@ index 839e91c..abcd28f 100644 const root = getElementRoot(baseEl); const contentEl = root.querySelector('.popover-content'); const arrowEl = root.querySelector('.popover-arrow'); -@@ -885,8 +887,10 @@ const mdEnterAnimation = (baseEl, opts) => { +@@ -886,8 +888,10 @@ const mdEnterAnimation = (baseEl, opts) => { const { event: ev, size, trigger, reference, side, align } = opts; const doc = baseEl.ownerDocument; const isRTL = doc.dir === 'rtl'; @@ -123,10 +123,10 @@ index 839e91c..abcd28f 100644 const contentEl = root.querySelector('.popover-content'); const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target); diff --git a/node_modules/@ionic/core/hydrate/index.js b/node_modules/@ionic/core/hydrate/index.js -index 7f898c7..a3a7669 100644 +index 5a50b98..884e2ce 100644 --- a/node_modules/@ionic/core/hydrate/index.js +++ b/node_modules/@ionic/core/hydrate/index.js -@@ -29254,8 +29254,10 @@ const iosEnterAnimation$1 = (baseEl, opts) => { +@@ -23702,8 +23702,10 @@ const iosEnterAnimation$1 = (baseEl, opts) => { const { event: ev, size, trigger, reference, side, align } = opts; const doc = baseEl.ownerDocument; const isRTL = doc.dir === 'rtl'; @@ -139,7 +139,7 @@ index 7f898c7..a3a7669 100644 const root = getElementRoot(baseEl); const contentEl = root.querySelector('.popover-content'); const arrowEl = root.querySelector('.popover-arrow'); -@@ -29375,8 +29377,10 @@ const mdEnterAnimation$1 = (baseEl, opts) => { +@@ -23823,8 +23825,10 @@ const mdEnterAnimation$1 = (baseEl, opts) => { const { event: ev, size, trigger, reference, side, align } = opts; const doc = baseEl.ownerDocument; const isRTL = doc.dir === 'rtl'; diff --git a/src/core/services/tests/sites.test.ts b/src/core/services/tests/sites.test.ts index 3147be247..1e91991af 100644 --- a/src/core/services/tests/sites.test.ts +++ b/src/core/services/tests/sites.test.ts @@ -51,7 +51,7 @@ describe('CoreSitesProvider', () => { CoreHTMLClasses.initialize(); CoreSites.initialize(); - expect(document.documentElement.classList.contains('ionic7')).toBe(true); + expect(document.documentElement.classList.contains('ionic8')).toBe(true); const site = mock(new CoreSite('42', siteUrl, 'token', { info: { sitename: 'Example Campus', diff --git a/src/core/singletons/html-classes.ts b/src/core/singletons/html-classes.ts index ca348cd7c..ccf0e199a 100644 --- a/src/core/singletons/html-classes.ts +++ b/src/core/singletons/html-classes.ts @@ -34,7 +34,7 @@ export class CoreHTMLClasses { * Initialize HTML classes. */ static initialize(): void { - CoreDomUtils.toggleModeClass('ionic7', true); + CoreDomUtils.toggleModeClass('ionic8', true); CoreDomUtils.toggleModeClass('development', CoreConstants.BUILD.isDevelopment); CoreHTMLClasses.addVersionClass(MOODLEAPP_VERSION_PREFIX, CoreConstants.CONFIG.versionname.replace('-dev', '')); diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 31a41afe7..317f977d9 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -67,14 +67,26 @@ html { @import "@ionic/angular/css/core.css"; /* Basic CSS for apps built with Ionic */ -@import "@ionic/angular/css/normalize.css"; -@import "@ionic/angular/css/structure.css"; -@import "@ionic/angular/css/typography.css"; -@import "@ionic/angular/css/display.css"; +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; /* Optional CSS utils that can be commented out */ -@import "@ionic/angular/css/padding.css"; -@import "@ionic/angular/css/float-elements.css"; -@import "@ionic/angular/css/text-alignment.css"; -@import "@ionic/angular/css/text-transformation.css"; -@import "@ionic/angular/css/flex-utils.css"; +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, 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'; */ diff --git a/upgrade.txt b/upgrade.txt index 4ab642a51..edb6425e0 100644 --- a/upgrade.txt +++ b/upgrade.txt @@ -2,8 +2,15 @@ This file describes API changes in the Moodle App that affect site plugins, info For more information about upgrading, read the official documentation: https://moodledev.io/general/app/upgrading/ +=== 4.5.0 === + + - Ionic has been upgraded to major version 8. See breaking changes and upgrade guide here: https://ionicframework.com/docs/updating/8-0 + - core-show-password has been deprecated in favor of ion-input-password-toggle + + === 4.4.0 === + - Ionic has been upgraded to major version 7. See breaking changes and upgrade guide here: https://ionicframework.com/docs/updating/7-0 and https://ionicframework.com/docs/updating/6-0 - Starting with this release, this file will only document breaking changes for APIs exposed to site plugins. Internal changes will no longer be documented. - CoreCache has been deprecated, use plain object as in-memory stores instead. - Renamed CoreLoginSitesComponent to CoreLoginSitesModalComponent to make it clear that it's a modal and to avoid confusing it with the new CoreSitesListComponent.