Merge pull request #70 from tomfong/dev/v4

Version 4.0.0

README.md

@@ -20,13 +20,13 @@
 
 ## About
 
-Simple QR is a FOSS app to scan, create and store QR codes with a simple UI and experience. No backend service connected. No data collected. No ads.
+Simple QR is an open-source app to scan, create and store QR codes with a simple UI and experience. No backend service connected. No data collected. No ads.
 
 It's now available on the following platforms.
 
-| App Store | Google Play | GitHub | IzzyOnDroid |
+| Google Play | GitHub | IzzyOnDroid |
 |:-:|:-:|:-:|:-:|
-| [<img src="https://raw.githubusercontent.com/tomfong/simple-qr/main/.github/images/appstore-badge.png" height="50">](https://apps.apple.com/us/app/simple-qr-by-tom-fong/id1621121553) | [<img src="https://raw.githubusercontent.com/tomfong/simple-qr/main/.github/images/google-play-badge.png" height="50">](https://play.google.com/store/apps/details?id=com.tomfong.simpleqr) | [<img src="https://raw.githubusercontent.com/tomfong/simple-qr/main/.github/images/github-badge.png" height="50">](https://github.com/tomfong/simple-qr/releases/latest) | [<img src="https://raw.githubusercontent.com/tomfong/simple-qr/main/.github/images/IzzyOnDroid-badge.png" height="50">](https://apt.izzysoft.de/fdroid/index/apk/com.tomfong.simpleqr) |
+| [<img src="https://raw.githubusercontent.com/tomfong/simple-qr/main/.github/images/google-play-badge.png" height="50">](https://play.google.com/store/apps/details?id=com.tomfong.simpleqr) | [<img src="https://raw.githubusercontent.com/tomfong/simple-qr/main/.github/images/github-badge.png" height="50">](https://github.com/tomfong/simple-qr/releases/latest) | [<img src="https://raw.githubusercontent.com/tomfong/simple-qr/main/.github/images/IzzyOnDroid-badge.png" height="50">](https://apt.izzysoft.de/fdroid/index/apk/com.tomfong.simpleqr) |
 
 ## Features
 
@@ -121,20 +121,20 @@ Thank you the following contributors who have made the app better!
 ## Framework
 
 ```sh
-    Ionic CLI                       : 6.20.4
+    Ionic CLI                       : 7.1.1
-    Ionic Framework                 : @ionic/angular 6.3.9
+    Ionic Framework                 : @ionic/angular 7.1.1
-    @angular-devkit/build-angular   : 14.2.10
+    @angular-devkit/build-angular   : 16.1.3
-    @angular-devkit/schematics      : 14.2.10
+    @angular-devkit/schematics      : 16.1.3
-    @angular/cli                    : 14.2.10
+    @angular/cli                    : 16.1.3
-    @ionic/angular-toolkit          : 6.1.0
+    @ionic/angular-toolkit          : 9.0.0
 
-    Capacitor CLI                   : 4.5.0
+    Capacitor CLI                   : 5.1.0
-    @capacitor/android              : 4.5.0
+    @capacitor/android              :  5.1.0
-    @capacitor/core                 : 4.5.0
+    @capacitor/core                 : 5.1.0
-    @capacitor/ios                  : 4.5.0
+    @capacitor/ios                  : 5.1.0
 
-    NodeJS                          : v16.15.1
+    NodeJS                          : v18.16.1
-    npm                             : 9.1.1
+    npm                             : 9.5.1
 ```
 
 ## Privacy Policy

android/.idea/misc.xml

@@ -11,7 +11,7 @@
       </map>
     </option>
   </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="temurin-11" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">

android/app/build.gradle

@@ -1,13 +1,14 @@
 apply plugin: 'com.android.application'
 
 android {
+    namespace "com.tomfong.simpleqr"
     compileSdkVersion rootProject.ext.compileSdkVersion
     defaultConfig {
         applicationId "com.tomfong.simpleqr"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3030000
+        versionCode 4000000
-        versionName "3.3.0"
+        versionName "4.0.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

android/app/capacitor.build.gradle

@@ -2,8 +2,8 @@
 
 android {
   compileOptions {
-      sourceCompatibility JavaVersion.VERSION_11
+      sourceCompatibility JavaVersion.VERSION_17
-      targetCompatibility JavaVersion.VERSION_11
+      targetCompatibility JavaVersion.VERSION_17
   }
 }
 

android/app/release/output-metadata.json

@@ -0,0 +1,20 @@
+{
+  "version": 3,
+  "artifactType": {
+    "type": "APK",
+    "kind": "Directory"
+  },
+  "applicationId": "com.tomfong.simpleqr",
+  "variantName": "release",
+  "elements": [
+    {
+      "type": "SINGLE",
+      "filters": [],
+      "attributes": [],
+      "versionCode": 4000000,
+      "versionName": "4.0.0",
+      "outputFile": "app-release.apk"
+    }
+  ],
+  "elementType": "File"
+}

android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.tomfong.simpleqr">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" >
 
     <application
       android:hardwareAccelerated="true"
@@ -41,6 +41,11 @@
     <!-- Permissions -->
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.READ_CONTACTS" />
+    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
+    <uses-feature
+      android:name="android.hardware.camera"
+      android:required="true" />
 </manifest>

android/app/src/main/assets/capacitor.plugins.json

@@ -5,7 +5,7 @@
 	},
 	{
 		"pkg": "@capacitor-community/contacts",
-		"classpath": "ch.byrds.capacitor.contacts.Contacts"
+		"classpath": "getcapacitor.community.contacts.ContactsPlugin"
 	},
 	{
 		"pkg": "@capacitor-community/screen-brightness",

android/build.gradle

@@ -1,14 +1,14 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-    
+
     repositories {
         google()
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.2.1'
+        classpath 'com.android.tools.build:gradle:8.0.2'
-        classpath 'com.google.gms:google-services:4.3.13'
+        classpath 'com.google.gms:google-services:4.3.15'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/gradle.properties

@@ -20,5 +20,4 @@ org.gradle.jvmargs=-Xmx1536m
 # Android operating system, and which are packaged with your app's APK
 # https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
-# Automatically convert third-party libraries to use AndroidX
+
-android.enableJetifier=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/variables.gradle

@@ -1,16 +1,16 @@
 ext {
     minSdkVersion = 22
-    compileSdkVersion = 32
+    compileSdkVersion = 33
-    targetSdkVersion = 32
+    targetSdkVersion = 33
-    androidxActivityVersion = '1.4.0'
+    androidxActivityVersion = '1.7.0'
-    androidxAppCompatVersion = '1.4.2'
+    androidxAppCompatVersion = '1.6.1'
     androidxCoordinatorLayoutVersion = '1.2.0'
-    androidxCoreVersion = '1.8.0'
+    androidxCoreVersion = '1.10.0'
-    androidxFragmentVersion = '1.4.1'
+    androidxFragmentVersion = '1.5.6'
     junitVersion = '4.13.2'
-    androidxJunitVersion = '1.1.3'
+    androidxJunitVersion = '1.1.5'
-    androidxEspressoCoreVersion = '3.4.0'
+    androidxEspressoCoreVersion = '3.5.1'
     cordovaAndroidVersion = '10.1.1'
-    coreSplashScreenVersion = '1.0.0-rc01'
+    coreSplashScreenVersion = '1.0.0'
-    androidxWebkitVersion = '1.4.0'
+    androidxWebkitVersion = '1.6.1'
 }

fastlane/metadata/android/en-US/changelogs/4000000.txt

@@ -0,0 +1,4 @@
+* Upgrade framework, improve performance and fix known bugs
+* Support Brave Search
+* Support open URL automatically
+* Allow user to further edit QR code content

ios/.gitignore

@@ -1,9 +1,9 @@
 App/build
 App/Pods
-App/Podfile.lock
 App/App/public
 DerivedData
 xcuserdata
 
 # Cordova plugins for Capacitor
 capacitor-cordova-ios-plugins
+

ios/App/App.xcodeproj/project.pbxproj

@@ -399,7 +399,7 @@
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 3.3.0;
+				MARKETING_VERSION = 4.0.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = com.tomfong.simpleqr;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -422,7 +422,7 @@
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 3.3.0;
+				MARKETING_VERSION = 4.0.0;
 				PRODUCT_BUNDLE_IDENTIFIER = com.tomfong.simpleqr;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "Simple QR";

ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,116 +1,14 @@
 {
-  "images" : [
+    "images" : [
-    {
+      {
-      "size" : "20x20",
+        "filename" : "AppIcon-512@2x.png",
-      "idiom" : "iphone",
+        "idiom" : "universal",
-      "filename" : "AppIcon-20x20@2x.png",
+        "platform" : "ios",
-      "scale" : "2x"
+        "size" : "1024x1024"
-    },
+      }
-    {
+    ],
-      "size" : "20x20",
+    "info" : {
-      "idiom" : "iphone",
+      "author" : "xcode",
-      "filename" : "AppIcon-20x20@3x.png",
+      "version" : 1
-      "scale" : "3x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "iphone",
-      "filename" : "AppIcon-29x29@2x-1.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "iphone",
-      "filename" : "AppIcon-29x29@3x.png",
-      "scale" : "3x"
-    },
-    {
-      "size" : "40x40",
-      "idiom" : "iphone",
-      "filename" : "AppIcon-40x40@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "40x40",
-      "idiom" : "iphone",
-      "filename" : "AppIcon-40x40@3x.png",
-      "scale" : "3x"
-    },
-    {
-      "size" : "60x60",
-      "idiom" : "iphone",
-      "filename" : "AppIcon-60x60@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "60x60",
-      "idiom" : "iphone",
-      "filename" : "AppIcon-60x60@3x.png",
-      "scale" : "3x"
-    },
-    {
-      "size" : "20x20",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-20x20@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "20x20",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-20x20@2x-1.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-29x29@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-29x29@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "40x40",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-40x40@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "40x40",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-40x40@2x-1.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "76x76",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-76x76@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "76x76",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-76x76@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "83.5x83.5",
-      "idiom" : "ipad",
-      "filename" : "AppIcon-83.5x83.5@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "1024x1024",
-      "idiom" : "ios-marketing",
-      "filename" : "AppIcon-512@2x.png",
-      "scale" : "1x"
     }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
 }

ios/App/Podfile.lock

@@ -0,0 +1,112 @@
+PODS:
+  - Capacitor (5.1.0):
+    - CapacitorCordova
+  - CapacitorApp (5.0.5):
+    - Capacitor
+  - CapacitorCamera (5.0.5):
+    - Capacitor
+  - CapacitorClipboard (5.0.5):
+    - Capacitor
+  - CapacitorCommunityBarcodeScanner (4.0.1):
+    - Capacitor
+  - CapacitorCommunityContacts (5.0.3):
+    - Capacitor
+  - CapacitorCommunityScreenBrightness (5.0.0):
+    - Capacitor
+  - CapacitorCordova (5.1.0)
+  - CapacitorDevice (5.0.5):
+    - Capacitor
+  - CapacitorFilesystem (5.0.5):
+    - Capacitor
+  - CapacitorHaptics (5.0.5):
+    - Capacitor
+  - CapacitorKeyboard (5.0.5):
+    - Capacitor
+  - CapacitorPreferences (5.0.5):
+    - Capacitor
+  - CapacitorSplashScreen (5.0.5):
+    - Capacitor
+  - CapacitorStatusBar (5.0.5):
+    - Capacitor
+  - CapacitorToast (5.0.5):
+    - Capacitor
+  - CordovaPlugins (5.1.0):
+    - CapacitorCordova
+
+DEPENDENCIES:
+  - "Capacitor (from `../../node_modules/@capacitor/ios`)"
+  - "CapacitorApp (from `../../node_modules/@capacitor/app`)"
+  - "CapacitorCamera (from `../../node_modules/@capacitor/camera`)"
+  - "CapacitorClipboard (from `../../node_modules/@capacitor/clipboard`)"
+  - "CapacitorCommunityBarcodeScanner (from `../../node_modules/@capacitor-community/barcode-scanner`)"
+  - "CapacitorCommunityContacts (from `../../node_modules/@capacitor-community/contacts`)"
+  - "CapacitorCommunityScreenBrightness (from `../../node_modules/@capacitor-community/screen-brightness`)"
+  - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
+  - "CapacitorDevice (from `../../node_modules/@capacitor/device`)"
+  - "CapacitorFilesystem (from `../../node_modules/@capacitor/filesystem`)"
+  - "CapacitorHaptics (from `../../node_modules/@capacitor/haptics`)"
+  - "CapacitorKeyboard (from `../../node_modules/@capacitor/keyboard`)"
+  - "CapacitorPreferences (from `../../node_modules/@capacitor/preferences`)"
+  - "CapacitorSplashScreen (from `../../node_modules/@capacitor/splash-screen`)"
+  - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
+  - "CapacitorToast (from `../../node_modules/@capacitor/toast`)"
+  - CordovaPlugins (from `../capacitor-cordova-ios-plugins`)
+
+EXTERNAL SOURCES:
+  Capacitor:
+    :path: "../../node_modules/@capacitor/ios"
+  CapacitorApp:
+    :path: "../../node_modules/@capacitor/app"
+  CapacitorCamera:
+    :path: "../../node_modules/@capacitor/camera"
+  CapacitorClipboard:
+    :path: "../../node_modules/@capacitor/clipboard"
+  CapacitorCommunityBarcodeScanner:
+    :path: "../../node_modules/@capacitor-community/barcode-scanner"
+  CapacitorCommunityContacts:
+    :path: "../../node_modules/@capacitor-community/contacts"
+  CapacitorCommunityScreenBrightness:
+    :path: "../../node_modules/@capacitor-community/screen-brightness"
+  CapacitorCordova:
+    :path: "../../node_modules/@capacitor/ios"
+  CapacitorDevice:
+    :path: "../../node_modules/@capacitor/device"
+  CapacitorFilesystem:
+    :path: "../../node_modules/@capacitor/filesystem"
+  CapacitorHaptics:
+    :path: "../../node_modules/@capacitor/haptics"
+  CapacitorKeyboard:
+    :path: "../../node_modules/@capacitor/keyboard"
+  CapacitorPreferences:
+    :path: "../../node_modules/@capacitor/preferences"
+  CapacitorSplashScreen:
+    :path: "../../node_modules/@capacitor/splash-screen"
+  CapacitorStatusBar:
+    :path: "../../node_modules/@capacitor/status-bar"
+  CapacitorToast:
+    :path: "../../node_modules/@capacitor/toast"
+  CordovaPlugins:
+    :path: "../capacitor-cordova-ios-plugins"
+
+SPEC CHECKSUMS:
+  Capacitor: 8dc4a61c44f6644fe4e0b61ad01ff175f9b538e5
+  CapacitorApp: 9d91a5a400e4ad8cafe66a02cc9d8073c864d7bb
+  CapacitorCamera: 834aade2952a06bd1e46c078d1068a980f37f8c9
+  CapacitorClipboard: 17f9418206e9de5673fac29c815f11c8d618e81c
+  CapacitorCommunityBarcodeScanner: 7feb206489c8555a8ca0c74c57ddf49ead774eb8
+  CapacitorCommunityContacts: fda3a2e951a1300869ccb6ca0763adf9b2b5b4ff
+  CapacitorCommunityScreenBrightness: b2d9c6fffee6b684994cd69f727f2090e2f05c6d
+  CapacitorCordova: 5984fa700842461518ecd320905c7f19ecdd590b
+  CapacitorDevice: 4c78eeaa553c7a46bc07372c6eb03a5665459885
+  CapacitorFilesystem: 335bccfc8ebe381c4e9a7328ef1c4dae9035a6fe
+  CapacitorHaptics: 4b1a7e1bac1794d1515842d304f9fce46ef5084c
+  CapacitorKeyboard: ba4d618d80bf8caef4b9d8a971d714b9ca795e28
+  CapacitorPreferences: c4764b0b3beae28c625c87b1a80504d9b24947ec
+  CapacitorSplashScreen: e563abf6d590bfe0269515ccc9d8bc03c41f32e9
+  CapacitorStatusBar: 540867ac3c63875b65bebd888f695de50a13a9a2
+  CapacitorToast: 77841e9091bea87db10e55b48747d958d76b1fe0
+  CordovaPlugins: a11b7387c217883b6b041d6a12eabed7f79ff64a
+
+PODFILE CHECKSUM: dc80e3587547d0d302dad43090af30e2a96d6c5a
+
+COCOAPODS: 1.11.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-qr",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "author": "Tom Fong",
   "scripts": {
     "ng": "ng",
@@ -16,55 +16,55 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.3",
+    "@angular/animations": "^16.1.3",
-    "@angular/cdk": "^14.2.2",
+    "@angular/cdk": "^16.1.3",
-    "@angular/common": "^14.2.3",
+    "@angular/common": "^16.1.3",
-    "@angular/core": "^14.2.3",
+    "@angular/core": "^16.1.3",
-    "@angular/forms": "^14.2.12",
+    "@angular/forms": "^16.1.3",
-    "@angular/localize": "^14.2.12",
+    "@angular/localize": "^16.1.3",
-    "@angular/material": "^14.2.2",
+    "@angular/material": "^16.1.3",
-    "@angular/material-moment-adapter": "^14.2.7",
+    "@angular/material-moment-adapter": "^16.1.3",
-    "@angular/platform-browser": "^14.2.3",
+    "@angular/platform-browser": "^16.1.3",
-    "@angular/platform-browser-dynamic": "^14.2.12",
+    "@angular/platform-browser-dynamic": "^16.1.3",
-    "@angular/router": "^14.2.12",
+    "@angular/router": "^16.1.3",
-    "@awesome-cordova-plugins/aes-256": "^6.2.0",
+    "@awesome-cordova-plugins/aes-256": "^6.3.0",
     "@awesome-cordova-plugins/chooser": "^6.2.0",
-    "@awesome-cordova-plugins/core": "^6.2.0",
+    "@awesome-cordova-plugins/core": "^6.3.0",
-    "@awesome-cordova-plugins/screen-orientation": "^6.2.0",
+    "@awesome-cordova-plugins/screen-orientation": "^6.3.0",
-    "@awesome-cordova-plugins/sms": "^6.2.0",
+    "@awesome-cordova-plugins/sms": "^6.3.0",
-    "@awesome-cordova-plugins/social-sharing": "^6.2.0",
+    "@awesome-cordova-plugins/social-sharing": "^6.3.0",
-    "@awesome-cordova-plugins/theme-detection": "^6.2.0",
+    "@awesome-cordova-plugins/theme-detection": "^6.3.0",
-    "@capacitor-community/barcode-scanner": "^3.0.1",
+    "@capacitor-community/barcode-scanner": "^4.0.1",
-    "@capacitor-community/contacts": "^2.0.0-0",
+    "@capacitor-community/contacts": "^5.0.3",
-    "@capacitor-community/screen-brightness": "^4.0.0",
+    "@capacitor-community/screen-brightness": "^5.0.0",
-    "@capacitor/android": "^4.5.0",
+    "@capacitor/android": "^5.1.0",
-    "@capacitor/app": "^4.1.1",
+    "@capacitor/app": "^5.0.5",
-    "@capacitor/camera": "^4.1.4",
+    "@capacitor/camera": "^5.0.5",
-    "@capacitor/clipboard": "^4.1.0",
+    "@capacitor/clipboard": "^5.0.5",
-    "@capacitor/core": "^4.5.0",
+    "@capacitor/core": "^5.1.0",
-    "@capacitor/device": "^4.1.0",
+    "@capacitor/device": "^5.0.5",
-    "@capacitor/filesystem": "^4.1.4",
+    "@capacitor/filesystem": "^5.0.5",
-    "@capacitor/haptics": "^4.1.0",
+    "@capacitor/haptics": "^5.0.5",
-    "@capacitor/ios": "^4.5.0",
+    "@capacitor/ios": "^5.1.0",
-    "@capacitor/keyboard": "^4.1.0",
+    "@capacitor/keyboard": "^5.0.5",
-    "@capacitor/preferences": "^4.0.2",
+    "@capacitor/preferences": "^5.0.5",
-    "@capacitor/splash-screen": "^4.1.2",
+    "@capacitor/splash-screen": "^5.0.5",
-    "@capacitor/status-bar": "^4.1.0",
+    "@capacitor/status-bar": "^5.0.5",
-    "@capacitor/toast": "^4.1.0",
+    "@capacitor/toast": "^5.0.5",
-    "@ionic/angular": "^6.3.9",
+    "@ionic/angular": "^7.1.1",
-    "@ionic/storage": "^3.0.6",
+    "@ionic/storage": "^4.0.0",
-    "@ionic/storage-angular": "^3.0.6",
+    "@ionic/storage-angular": "^4.0.0",
-    "@ng-bootstrap/ng-bootstrap": "^13.1.1",
+    "@ng-bootstrap/ng-bootstrap": "^15.0.1",
-    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/core": "^15.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
-    "@techiediaries/ngx-qrcode": "^9.1.0",
+    "angularx-qrcode": "^16.0.0",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.0",
     "cordova-plugin-aes256-encryption": "^2.0.1",
     "cordova-plugin-chooser": "^1.3.2",
-    "cordova-plugin-screen-orientation": "^3.0.2",
+    "cordova-plugin-screen-orientation": "^3.0.3",
     "cordova-plugin-theme-detection": "^1.3.0",
     "cordova-plugin-x-socialsharing": "^6.0.4",
-    "cordova-sms-plugin": "^1.0.2",
+    "cordova-sms-plugin": "^1.0.3",
     "date-fns": "2.29.3",
     "es6-promise-plugin": "^4.2.2",
     "human-signals": "^2.1.0",
@@ -72,34 +72,34 @@
     "material-design-icons": "^3.0.1",
     "osenv": "^0.1.5",
     "properties-parser": "^0.3.1",
-    "rxjs": "^6.6.7",
+    "rxjs": "^7.8.1",
     "strip-final-newline": "^2.0.0",
-    "tslib": "^2.4.1",
+    "tslib": "^2.6.0",
     "uuid": "^8.3.2",
-    "zone.js": "^0.11.8"
+    "zone.js": "^0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.10",
+    "@angular-devkit/build-angular": "^16.1.3",
-    "@angular/cli": "^14.2.10",
+    "@angular/cli": "^16.1.3",
-    "@angular/compiler": "^14.2.3",
+    "@angular/compiler": "^16.1.3",
-    "@angular/compiler-cli": "^14.2.3",
+    "@angular/compiler-cli": "^16.1.3",
-    "@angular/language-service": "^14.2.12",
+    "@angular/language-service": "^16.1.3",
-    "@capacitor/cli": "^4.5.0",
+    "@capacitor/cli": "^5.1.0",
-    "@ionic/angular-toolkit": "^6.1.0",
+    "@ionic/angular-toolkit": "^9.0.0",
-    "@ionic/cli": "6.20.1",
+    "@ionic/cli": "^7.1.1",
-    "@types/jasmine": "^3.10.6",
+    "@types/jasmine": "^3.10.11",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^12.20.55",
     "@types/uuid": "^8.3.4",
     "jasmine-core": "~3.8.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "^6.4.1",
+    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.1.1",
+    "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "~2.0.3",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "^4.0.2",
     "karma-jasmine-html-reporter": "^1.7.0",
     "ts-node": "~8.3.0",
-    "typescript": "~4.8.3"
+    "typescript": "^5.1.6"
   }
 }

src/app/app-routing.module.ts

@@ -48,6 +48,10 @@ const routes: Routes = [
     path: 'setting-auto-brightness',
     loadChildren: () => import('./pages/setting-auto-brightness/setting-auto-brightness.module').then(m => m.SettingAutoBrightnessPageModule)
   },
+  {
+    path: 'setting-auto-open-url',
+    loadChildren: () => import('./pages/setting-auto-open-url/setting-auto-open-url.module').then(m => m.SettingAutoOpenUrlPageModule)
+  },
   {
     path: 'setting-start-page',
     loadChildren: () => import('./pages/setting-start-page/setting-start-page.module').then(m => m.SettingStartPagePageModule)

src/app/app.module.ts

@@ -37,7 +37,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     ],
     imports: [
         BrowserModule,
-        IonicModule.forRoot(),
+        IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),
         AppRoutingModule,
         HttpClientModule,
         FormsModule,

src/app/modals/qr-code/qr-code.module.ts

@@ -8,11 +8,7 @@ import { QrCodePage } from './qr-code.page';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { HttpClient } from '@angular/common/http';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { QRCodeModule } from 'angularx-qrcode';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -23,7 +19,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     CommonModule,
     FormsModule,
     IonicModule,
-    NgxQRCodeModule,
+    QRCodeModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,

src/app/modals/qr-code/qr-code.page.html

@@ -11,10 +11,10 @@
   <div class="d-flex align-items-center justify-content-top flex-column" style="height: 100%;">
     <ion-row>
       <ion-col class="ion-text-center ion-padding" style="max-width: 100% !important;">
-        <ngx-qrcode [elementType]="qrElementType" [value]="qrCodeContent" [width]="defaultWidth"
+        <qrcode [elementType]="qrElementType" [qrdata]="qrCodeContent" [width]="defaultWidth"
           [errorCorrectionLevel]="errorCorrectionLevel" [colorDark]="qrColorDark" [colorLight]="qrColorLight"
           [margin]="env.qrCodeMargin" #qrcode [hidden]="isSharing">
-        </ngx-qrcode>
+        </qrcode>
         <div class="d-flex flex-column align-items-center" *ngIf="isSharing">
           <ion-spinner class="my-3"></ion-spinner>
         </div>

src/app/modals/qr-code/qr-code.page.ts

@@ -6,11 +6,11 @@ import { Haptics, ImpactStyle } from '@capacitor/haptics';
 import { Toast } from '@capacitor/toast';
 import { LoadingController, ModalController, Platform } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
-import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels, QrcodeComponent } from '@techiediaries/ngx-qrcode';
 import { EnvService } from 'src/app/services/env.service';
 import { ScreenBrightness } from '@capacitor-community/screen-brightness';
 import { rgbToHex } from 'src/app/utils/helpers';
 import { Preferences } from '@capacitor/preferences';
+import { QRCodeComponent, QRCodeElementType } from 'angularx-qrcode';
 
 @Component({
   selector: 'app-qr-code',
@@ -21,11 +21,11 @@ export class QrCodePage {
 
   modal: HTMLIonModalElement;
 
-  @ViewChild('qrcode') qrcodeElement: QrcodeComponent;
+  @ViewChild('qrcode') qrcodeElement: QRCodeComponent;
 
   @Input() qrCodeContent: string;
-  qrElementType: NgxQrcodeElementTypes = NgxQrcodeElementTypes.CANVAS;
+  qrElementType: QRCodeElementType = "canvas";
-  errorCorrectionLevel: NgxQrcodeErrorCorrectionLevels;
+  errorCorrectionLevel: 'low' | 'medium' | 'quartile' | 'high' | 'L' | 'M' | 'Q' | 'H';
   scale: number = 0.8;
   readonly MAX_WIDTH = 350;
   defaultWidth: number = window.innerHeight * 0.32 > this.MAX_WIDTH ? this.MAX_WIDTH : window.innerHeight * 0.32;
@@ -64,7 +64,6 @@ export class QrCodePage {
               if (this.qrcodeElement.width > this.MAX_WIDTH) {
                 this.qrcodeElement.width = this.MAX_WIDTH;
               }
-              this.qrcodeElement.createQRCode();
             }, 500)
           }
         }
@@ -99,7 +98,6 @@ export class QrCodePage {
               if (this.qrcodeElement.width > this.MAX_WIDTH) {
                 this.qrcodeElement.width = this.MAX_WIDTH;
               }
-              this.qrcodeElement.createQRCode();
             }
           })
           this.modal.onDidDismiss().then(
@@ -132,19 +130,19 @@ export class QrCodePage {
   setErrorCorrectionLevel() {
     switch (this.env.errorCorrectionLevel) {
       case 'L':
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.LOW;
+        this.errorCorrectionLevel = 'low';
         break;
       case 'M':
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.MEDIUM;
+        this.errorCorrectionLevel = 'medium';
         break;
       case 'Q':
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.QUARTILE;
+        this.errorCorrectionLevel = 'quartile';
         break;
       case 'H':
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
+        this.errorCorrectionLevel = 'high';
         break;
       default:
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.MEDIUM;
+        this.errorCorrectionLevel = 'medium';
     }
   }
 
@@ -170,7 +168,6 @@ export class QrCodePage {
     this.isSharing = true;
     const currentWidth = this.qrcodeElement.width;
     this.qrcodeElement.width = 1000;
-    this.qrcodeElement.createQRCode();
     setTimeout(async () => {
       const canvases = document.querySelectorAll("canvas") as NodeListOf<HTMLCanvasElement>;
       const canvas = canvases[canvases.length - 1];
@@ -183,7 +180,6 @@ export class QrCodePage {
       await this.socialSharing.share(this.translate.instant('MSG.SHARE_QR'), this.translate.instant('SIMPLE_QR'), this.qrImageDataUrl, null).then(
         _ => {
           this.qrcodeElement.width = currentWidth;
-          this.qrcodeElement.createQRCode();
           delete this.qrImageDataUrl;
           this.isSharing = false;
           loading2.dismiss();
@@ -194,7 +190,6 @@ export class QrCodePage {
             this.presentToast("Error when call SocialSharing.share: " + JSON.stringify(err), "long", "top");
           }
           this.qrcodeElement.width = currentWidth;
-          this.qrcodeElement.createQRCode();
           delete this.qrImageDataUrl;
           this.isSharing = false;
           loading2.dismiss();
@@ -242,7 +237,7 @@ export class QrCodePage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/pages/generate/generate.page.html

@@ -25,20 +25,22 @@
 
   <ion-row class="ion-padding-horizontal">
     <ion-col>
-      <mat-form-field [class]="ngMatThemeClass" color="accent" appearance="legacy">
+      <mat-form-field [class]="ngMatThemeClass" color="accent" appearance="outline" [floatLabel]="'always'">
         <mat-label>{{ 'CONTENT_TYPE' | translate}}</mat-label>
         <mat-select [(ngModel)]="contentType">
           <mat-select-trigger>
-            <div style="display: flex; align-items: center;">
+            <div class="d-flex">
-              <mat-icon style="margin-right: 16px; vertical-align: middle;">
+              <mat-icon class="me-3" [fontIcon]="getIcon(contentType)">
-                {{ getIcon(contentType) }}
               </mat-icon>
               <span>{{ getText(contentType) }}</span>
             </div>
           </mat-select-trigger>
           <mat-option [value]="type.value" *ngFor="let type of contentTypes">
-            <mat-icon>{{ getIcon(type.value) }}</mat-icon>
+            <div class="d-flex">
-            <span>{{ type.text }}</span>
+              <mat-icon class="me-3" [fontIcon]="getIcon(type.value)">
+              </mat-icon>
+              <span>{{ type.text }}</span>
+            </div>
           </mat-option>
         </mat-select>
       </mat-form-field>
@@ -69,7 +71,7 @@
             <mat-label>{{ 'EMAIL_RECIPIENT' | translate}}</mat-label>
             <input matInput [(ngModel)]="toEmails[i]" type="email" maxlength="254" #emailToInput>
             <mat-hint align="end">{{ emailToInput.value?.length || 0 }}/254</mat-hint>
-            <mat-icon matSuffix color="accent">alternate_email</mat-icon>
+            <mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
             <mat-hint>{{'MSG.EMAIL_MAX_LENGTH' | translate}}</mat-hint>
           </mat-form-field>
         </ion-col>
@@ -98,7 +100,7 @@
             <mat-label>{{ 'CC' | translate}}</mat-label>
             <input matInput [(ngModel)]="ccEmails[i]" type="email" maxlength="254" #emailCcInput>
             <mat-hint align="end">{{ emailCcInput.value?.length || 0 }}/254</mat-hint>
-            <mat-icon matSuffix color="accent">alternate_email</mat-icon>
+            <mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
             <mat-hint>{{'MSG.EMAIL_MAX_LENGTH' | translate}}</mat-hint>
           </mat-form-field>
         </ion-col>
@@ -127,7 +129,7 @@
             <mat-label>{{ 'BCC' | translate}}</mat-label>
             <input matInput [(ngModel)]="bccEmails[i]" type="email" maxlength="254" #emailBccInput>
             <mat-hint align="end">{{ emailBccInput.value?.length || 0 }}/254</mat-hint>
-            <mat-icon matSuffix color="accent">alternate_email</mat-icon>
+            <mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
             <mat-hint>{{'MSG.EMAIL_MAX_LENGTH' | translate}}</mat-hint>
           </mat-form-field>
         </ion-col>
@@ -182,7 +184,7 @@
           <mat-label>{{ 'EMAIL_RECIPIENT' | translate}}</mat-label>
           <input matInput [(ngModel)]="toEmails[0]" type="email" maxlength="254" #emailToInput>
           <mat-hint align="end">{{ emailToInput.value?.length || 0 }}/254</mat-hint>
-          <mat-icon matSuffix color="accent">alternate_email</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
           <mat-hint>{{'MSG.EMAIL_MAX_LENGTH' | translate}}</mat-hint>
         </mat-form-field>
       </ion-col>
@@ -219,7 +221,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'PHONE_NUMBER' | translate}}</mat-label>
           <input matInput [(ngModel)]="phoneNumber" type="tel" #phoneNumberInput>
-          <mat-icon matSuffix color="accent">call</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -231,7 +233,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'PHONE_NUMBER' | translate}}</mat-label>
           <input matInput [(ngModel)]="phoneNumber" type="tel" #phoneNumberInput>
-          <mat-icon matSuffix color="accent">call</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -254,7 +256,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'URL' | translate}}</mat-label>
           <input matInput [(ngModel)]="url" type="url" #urlInput maxlength="1817">
-          <mat-icon matSuffix color="accent">link</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="link"></mat-icon>
           <mat-hint align="end">{{ (urlInput.value?.length) || 0 }}/1817</mat-hint>
           <mat-hint>{{'MSG.CREATE_QRCODE_MAX_LENGTH' | translate}}</mat-hint>
         </mat-form-field>
@@ -278,7 +280,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'FIRST_NAME' | translate}}</mat-label>
           <input matInput [(ngModel)]="firstName" #firstNameInput />
-          <mat-icon matSuffix color="accent">badge</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="badge"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -287,7 +289,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'LAST_NAME' | translate}}</mat-label>
           <input matInput [(ngModel)]="lastName" #lastNameInput />
-          <mat-icon matSuffix color="accent">badge</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="badge"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -306,7 +308,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'MOBILE_PHONE_NUMBER' | translate}}</mat-label>
           <input matInput [(ngModel)]="mobilePhoneNumber" #mobilePhoneInput type="tel" />
-          <mat-icon matSuffix color="accent">call</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -315,7 +317,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'HOME_PHONE_NUMBER' | translate}}</mat-label>
           <input matInput [(ngModel)]="homePhoneNumber" #homePhoneInput type="tel" />
-          <mat-icon matSuffix color="accent">call</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -324,7 +326,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'WORK_PHONE_NUMBER' | translate}}</mat-label>
           <input matInput [(ngModel)]="workPhoneNumber" #workPhoneInput type="tel" />
-          <mat-icon matSuffix color="accent">call</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -333,7 +335,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'FAX_NUMBER' | translate}}</mat-label>
           <input matInput [(ngModel)]="faxNumber" #faxInput type="tel" />
-          <mat-icon matSuffix color="accent">print</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="print"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -342,7 +344,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'EMAIL_ADDRESS' | translate}}</mat-label>
           <input matInput [(ngModel)]="email" #emailInput type="email" />
-          <mat-icon matSuffix color="accent">alternate_email</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -361,7 +363,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'ORGANIZATION' | translate}}</mat-label>
           <input matInput [(ngModel)]="organization" #organizationInput type="text" />
-          <mat-icon matSuffix color="accent">business</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="business"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -370,7 +372,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'JOB_TITLE' | translate}}</mat-label>
           <input matInput [(ngModel)]="jobTitle" #jobTitleInput type="text" />
-          <mat-icon matSuffix color="accent">business</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="business"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -389,7 +391,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'STREET' | translate}}</mat-label>
           <input matInput [(ngModel)]="street" #streetInput type="text" />
-          <mat-icon matSuffix color="accent">home</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -398,7 +400,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'CITY' | translate}}</mat-label>
           <input matInput [(ngModel)]="city" #cityInput type="text" />
-          <mat-icon matSuffix color="accent">home</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -407,7 +409,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'STATE' | translate}}</mat-label>
           <input matInput [(ngModel)]="state" #stateInput type="text" />
-          <mat-icon matSuffix color="accent">home</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -416,7 +418,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'POSTAL_CODE' | translate}}</mat-label>
           <input matInput [(ngModel)]="postalCode" #postalCodeInput type="text" />
-          <mat-icon matSuffix color="accent">home</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -425,7 +427,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'COUNTRY' | translate}}</mat-label>
           <input matInput [(ngModel)]="country" #countryInput type="text" />
-          <mat-icon matSuffix color="accent">home</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -445,7 +447,7 @@
           <mat-label>{{ 'DATE_OF_BIRTH' | translate}}</mat-label>
           <input [ngModel]="birthday | date:'yyyy-MM-dd'" (ngModelChange)="birthday = $event" matInput type="date"
             [max]="today">
-          <mat-icon matSuffix color="accent">cake</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="cake"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -466,7 +468,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'WEBSITE' | translate}}</mat-label>
           <input matInput [(ngModel)]="personalUrl" type="url" #personalUrlInput>
-          <mat-icon matSuffix color="accent">link</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="link"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>
@@ -478,7 +480,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'WIFI_SSID' | translate}}</mat-label>
           <input matInput [(ngModel)]="ssid" #ssidInput maxlength="32">
-          <mat-icon matSuffix color="accent">wifi</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="wifi"></mat-icon>
           <mat-hint align="end">{{ (ssidInput.value?.length) || 0 }}/32</mat-hint>
           <mat-hint>{{'MSG.SSID_MAX_LENGTH' | translate}}</mat-hint>
         </mat-form-field>
@@ -489,7 +491,7 @@
         <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
           <mat-label>{{ 'PASSWORD' | translate}}</mat-label>
           <input matInput [(ngModel)]="wifiPassword" #wifiPasswordInput type="password">
-          <mat-icon matSuffix color="accent">lock</mat-icon>
+          <mat-icon matSuffix color="accent" fontIcon="lock"></mat-icon>
         </mat-form-field>
       </ion-col>
     </ion-row>

src/app/pages/generate/generate.page.ts

@@ -106,6 +106,10 @@ export class GeneratePage {
 
   async ionViewDidEnter() {
     await SplashScreen.hide()
+    if (this.env.editingContent) {
+      this.qrCodeContent = this.env.resultContent;
+      this.env.editingContent = false;
+    }
     this.freeTxtText = this.translate.instant("FREE_TEXT");
     this.urlText = this.translate.instant("URL");
     this.contactText = this.translate.instant("VCARD_CONTACT");
@@ -443,7 +447,7 @@ export class GeneratePage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/pages/history/history.page.ts

@@ -505,7 +505,7 @@ export class HistoryPage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/pages/import-image/import-image.module.ts

@@ -9,7 +9,6 @@ import { ImportImagePageRoutingModule } from './import-image-routing.module';
 import { ImportImagePage } from './import-image.page';
 import { HttpClient } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { MatButtonModule } from '@angular/material/button';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -29,7 +28,6 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
       }
     }),
     ImportImagePageRoutingModule,
-    MatButtonModule,
   ],
   declarations: [ImportImagePage]
 })

src/app/pages/import-image/import-image.page.ts

@@ -196,7 +196,7 @@ export class ImportImagePage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/pages/result/result.module.ts

@@ -7,7 +7,6 @@ import { IonicModule } from '@ionic/angular';
 import { ResultPageRoutingModule } from './result-routing.module';
 
 import { ResultPage } from './result.page';
-import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { HttpClient } from '@angular/common/http';

src/app/pages/result/result.page.html

@@ -18,8 +18,7 @@
     <ion-col>
       <ion-badge class="p-2" color="primary">
         <div class="d-flex align-items-center">
-          <mat-icon *ngIf="contentTypeIcon != ''" style="margin-right: 16px;">
+          <mat-icon class="me-3" *ngIf="contentTypeIcon != ''" [fontIcon]="contentTypeIcon">
-            {{ contentTypeIcon }}
           </mat-icon>
           <span>{{ contentTypeText }}</span>
         </div>
@@ -28,7 +27,7 @@
   </ion-row>
 
   <ng-container *ngIf="qrCodeContent && qrCodeContent.trim().length > 0" [ngTemplateOutlet]="contentBlock"
-    [ngTemplateOutletContext]="{ label: barcodeFormat + ('CONTENT' | translate), content: qrCodeContent, hint: env.resultContentFormat }">
+    [ngTemplateOutletContext]="{ label: barcodeFormat + ('CONTENT' | translate), content: qrCodeContent, hint: env.resultContentFormat, showEdit: true }">
   </ng-container>
 
   <ng-container *ngIf="base64Encoded && qrCodeContent && qrCodeContent.trim().length > 0"
@@ -195,6 +194,8 @@
           </ion-icon>
           <ion-icon *ngIf="env.searchEngine === 'ecosia'" slot="icon-only" src="assets/icon/ecosia.svg">
           </ion-icon>
+          <ion-icon *ngIf="env.searchEngine === 'brave'" slot="icon-only" src="assets/icon/brave-search.svg">
+          </ion-icon>
         </ion-button>
         <ion-button *ngIf="env.showCopyButton === 'on'" (click)="tapHaptic(); copyText()"
           [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="clear"
@@ -224,99 +225,102 @@
   <ng-container *ngIf="env.resultPageButtons === 'detailed'">
     <ion-row class="ion-padding-horizontal py-2">
       <div class="d-flex justify-content-between detailed-action-button-container">
-        <ion-button class="pr-1"
+        <ion-button class="pe-1"
           *ngIf="!resultSaved && this.env.scanRecordLogging == 'off' && this.qrCodeContent != null && this.qrCodeContent != '' "
           (click)="tapHaptic(); saveRecord()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
           shape="round" [@inAnimation]>
-          <ion-icon class="pr-2" src="assets/icon/history.svg"></ion-icon>
+          <ion-icon class="pe-2" src="assets/icon/history.svg"></ion-icon>
           <ion-label>{{ 'SAVE' | translate }}</ion-label>
         </ion-button>
-        <ion-button class="pr-1"
+        <ion-button class="pe-1"
           *ngIf="contentType === 'freeText' && env.showOpenFoodFactsButton === 'on' && isValidEan"
           (click)="tapHaptic(); searchOpenFoodFacts()" [color]="env.colorTheme === 'light'? 'dark' : 'light'"
           fill="outline" shape="round" [@inAnimation]>
-          <ion-icon class="pr-2" name="fast-food"></ion-icon>
+          <ion-icon class="pe-2" name="fast-food"></ion-icon>
           <ion-label>Facts</ion-label>
         </ion-button>
-        <ion-button class="pr-1" *ngIf="contentType === 'url' && env.showBrowseButton === 'on' && isHttp"
+        <ion-button class="pe-1" *ngIf="contentType === 'url' && env.showBrowseButton === 'on' && isHttp"
           (click)="tapHaptic(); browseWebsite()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
           shape="round" [@inAnimation]>
-          <ion-icon class="pr-2" name="globe"></ion-icon>
+          <ion-icon class="pe-2" name="globe"></ion-icon>
           <ion-label>{{ 'BROWSE' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1" *ngIf="contentType === 'url' && env.showOpenUrlButton === 'on' && !isHttp"
+        <ion-button class="pe-1" *ngIf="contentType === 'url' && env.showOpenUrlButton === 'on' && !isHttp"
           (click)="tapHaptic(); openLink()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
           shape="round" [@inAnimation]>
-          <ion-icon class="pr-2" name="open"></ion-icon>
+          <ion-icon class="pe-2" name="open"></ion-icon>
           <ion-label>{{ 'OPEN' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1"
+        <ion-button class="pe-1"
           *ngIf="(contentType === 'contact' || contentType === 'phone' || contentType === 'sms') && env.showAddContactButton === 'on'"
           (click)="tapHaptic(); addContact()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
           shape="round" [@inAnimation]>
-          <ion-icon class="pr-2" name="person-add-sharp"></ion-icon>
+          <ion-icon class="pe-2" name="person-add-sharp"></ion-icon>
           <ion-label>{{ 'ADD' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1" *ngIf="contentType === 'phone' && env.showCallButton === 'on'"
+        <ion-button class="pe-1" *ngIf="contentType === 'phone' && env.showCallButton === 'on'"
           (click)="tapHaptic(); callPhone()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
           shape="round" [@inAnimation]>
-          <ion-icon class="pr-2" name="call"></ion-icon>
+          <ion-icon class="pe-2" name="call"></ion-icon>
           <ion-label>{{ 'CALL' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1" *ngIf="contentType === 'sms' && smsContent && env.showSendMessageButton === 'on'"
+        <ion-button class="pe-1" *ngIf="contentType === 'sms' && smsContent && env.showSendMessageButton === 'on'"
           (click)="tapHaptic(); sendSms()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
           shape="round" [@inAnimation]>
-          <ion-icon class="pr-2" name="send"></ion-icon>
+          <ion-icon class="pe-2" name="send"></ion-icon>
           <ion-label>{{ 'SEND' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1"
+        <ion-button class="pe-1"
           *ngIf="(contentType === 'emailW3C' || contentType === 'emailDocomo') && env.showSendEmailButton === 'on'"
           (click)="tapHaptic(); sendEmail()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
           shape="round" [@inAnimation]>
-          <ion-icon class="pr-2" name="mail"></ion-icon>
+          <ion-icon class="pe-2" name="mail"></ion-icon>
           <ion-label>{{ 'SEND' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1" *ngIf="env.showSearchButton === 'on'" (click)="tapHaptic(); webSearch()"
+        <ion-button class="pe-1" *ngIf="env.showSearchButton === 'on'" (click)="tapHaptic(); webSearch()"
           [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline" shape="round" [@inAnimation]
           [disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
-          <ion-icon class="pr-2" *ngIf="env.searchEngine === 'google'" slot="icon-only" name="logo-google">
+          <ion-icon class="pe-2" *ngIf="env.searchEngine === 'google'" slot="icon-only" name="logo-google">
           </ion-icon>
-          <ion-icon class="pr-2" *ngIf="env.searchEngine === 'bing'" slot="icon-only"
+          <ion-icon class="pe-2" *ngIf="env.searchEngine === 'bing'" slot="icon-only"
             src="assets/icon/microsoft-bing.svg">
           </ion-icon>
-          <ion-icon class="pr-2" *ngIf="env.searchEngine === 'yahoo'" slot="icon-only" src="assets/icon/yahoo.svg">
+          <ion-icon class="pe-2" *ngIf="env.searchEngine === 'yahoo'" slot="icon-only" src="assets/icon/yahoo.svg">
           </ion-icon>
-          <ion-icon class="pr-2" *ngIf="env.searchEngine === 'duckduckgo'" slot="icon-only"
+          <ion-icon class="pe-2" *ngIf="env.searchEngine === 'duckduckgo'" slot="icon-only"
             src="assets/icon/duck-duck-go.svg">
           </ion-icon>
-          <ion-icon class="pr-2" *ngIf="env.searchEngine === 'yandex'" slot="icon-only" src="assets/icon/yandex.svg">
+          <ion-icon class="pe-2" *ngIf="env.searchEngine === 'yandex'" slot="icon-only" src="assets/icon/yandex.svg">
           </ion-icon>
-          <ion-icon class="pr-2" *ngIf="env.searchEngine === 'ecosia'" slot="icon-only" src="assets/icon/ecosia.svg">
+          <ion-icon class="pe-2" *ngIf="env.searchEngine === 'ecosia'" slot="icon-only" src="assets/icon/ecosia.svg">
+          </ion-icon>
+          <ion-icon class="pe-2" *ngIf="env.searchEngine === 'brave'" slot="icon-only"
+            src="assets/icon/brave-search.svg">
           </ion-icon>
           <ion-label>{{ 'SEARCH' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1" *ngIf="env.showCopyButton === 'on'" (click)="tapHaptic(); copyText()"
+        <ion-button class="pe-1" *ngIf="env.showCopyButton === 'on'" (click)="tapHaptic(); copyText()"
           [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline" shape="round" [@inAnimation]
           [disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
-          <ion-icon class="pr-2" slot="icon-only" name="copy"></ion-icon>
+          <ion-icon class="pe-2" slot="icon-only" name="copy"></ion-icon>
           <ion-label>{{ 'COPY' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1" *ngIf="env.showBase64Button === 'on'" (click)="tapHaptic(); base64()"
+        <ion-button class="pe-1" *ngIf="env.showBase64Button === 'on'" (click)="tapHaptic(); base64()"
           [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline" shape="round" [@inAnimation]
           [disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
-          <ion-icon class="pr-2" slot="icon-only" name="code-working"></ion-icon>
+          <ion-icon class="pe-2" slot="icon-only" name="code-working"></ion-icon>
           <ion-label>{{ 'BASE64' | translate}}</ion-label>
         </ion-button>
-        <ion-button class="pr-1" *ngIf="env.showEnlargeButton === 'on'" (click)="tapHaptic(); enlarge()"
+        <ion-button class="pe-1" *ngIf="env.showEnlargeButton === 'on'" (click)="tapHaptic(); enlarge()"
           [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline" shape="round" [@inAnimation]
           [disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
-          <ion-icon class="pr-2" slot="icon-only" name="qr-code-sharp"></ion-icon>
+          <ion-icon class="pe-2" slot="icon-only" name="qr-code-sharp"></ion-icon>
           <ion-label>{{ 'SHOW' | translate}}</ion-label>
         </ion-button>
         <ion-button *ngIf="env.showBookmarkButton === 'on'" (click)="tapHaptic(); handleBookmark()"
           [color]="!bookmarked? (env.colorTheme === 'light'? 'dark' : 'light') : 'warning'" fill="outline" shape="round"
           [@inAnimation] [disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
-          <ion-icon class="pr-2" slot="icon-only" name="bookmark"></ion-icon>
+          <ion-icon class="pe-2" slot="icon-only" name="bookmark"></ion-icon>
           <ion-label *ngIf="!bookmarked">{{ 'BOOKMARK' | translate}}</ion-label>
           <ion-label *ngIf="bookmarked">{{ 'BOOKMARKED' | translate}}</ion-label>
         </ion-button>
@@ -326,7 +330,7 @@
 
 </ion-footer>
 
-<ng-template #contentBlock let-label="label" let-content="content" let-hint="hint">
+<ng-template #contentBlock let-label="label" let-content="content" let-hint="hint" let-showEdit="showEdit">
   <ion-row class="ion-padding-horizontal" [@inAnimation]>
     <ion-col>
       <mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent" [floatLabel]="'always'"
@@ -336,6 +340,9 @@
           [cdkAutosizeMaxRows]="20" readonly>
         </textarea>
         <mat-hint *ngIf="hint && hint != ''" style="opacity: 0.5;">{{ hint }}</mat-hint>
+        <button mat-button color="primary" (click)="editContent()" *ngIf="showEdit" class="m-0 p-0 mt-3" style="background-color: transparent !important; color: var(--ion-color-primary) !important;">
+          {{ 'EDIT' | translate }}
+        </button>
       </mat-form-field>
     </ion-col>
   </ion-row>

src/app/pages/result/result.page.ts

@@ -1,11 +1,10 @@
 import { Component, QueryList, ViewChildren } from '@angular/core';
 import { Clipboard } from '@capacitor/clipboard';
-import { Contacts, ContactType, EmailAddress, NewContact, PhoneNumber } from '@capacitor-community/contacts'
+import { ContactInput, Contacts, EmailInput, EmailType, PhoneInput, PhoneType } from '@capacitor-community/contacts';
 import { SMS } from '@awesome-cordova-plugins/sms/ngx';
 import { Haptics, ImpactStyle } from '@capacitor/haptics';
 import { AlertController, LoadingController, ModalController, Platform } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
-import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';
 import { VCardContact } from 'src/app/models/v-card-contact';
 import { EnvService } from 'src/app/services/env.service';
 import { Toast } from '@capacitor/toast';
@@ -14,6 +13,7 @@ import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
 import { QrCodePage } from 'src/app/modals/qr-code/qr-code.page';
 import { fadeIn } from 'src/app/utils/animations';
 import { Router } from '@angular/router';
+import { QRCodeElementType } from 'angularx-qrcode';
 
 @Component({
   selector: 'app-result',
@@ -26,8 +26,8 @@ export class ResultPage {
   contentType: "freeText" | "url" | "contact" | "phone" | "sms" | "emailW3C" | "emailDocomo" | "wifi" = "freeText";
 
   qrCodeContent: string;
-  qrElementType: NgxQrcodeElementTypes = NgxQrcodeElementTypes.CANVAS;
+  qrElementType: QRCodeElementType = "canvas";
-  errorCorrectionLevel: NgxQrcodeErrorCorrectionLevels = NgxQrcodeErrorCorrectionLevels.LOW;
+  errorCorrectionLevel: 'low' | 'medium' | 'quartile' | 'high' | 'L' | 'M' | 'Q' | 'H' = 'low';
   qrMargin: number = 3;
 
   phoneNumber: string;
@@ -88,7 +88,16 @@ export class ResultPage {
   }
 
   async ionViewDidEnter(): Promise<void> {
-    if (this.showQrFirst) {
+    if (this.contentType == 'url' && this.env.autoOpenUrl == 'on' && this.env.recordSource == 'scan') {
+      setTimeout(() => {
+        this.presentToast(this.translate.instant("AUTO_OPEN_URL"), "short", "bottom");
+        if (this.isHttp) {
+          this.browseWebsite();
+        } else {
+          this.openLink();
+        }
+      }, 300);
+    } else if (this.showQrFirst) {
       this.showQrFirst = false;
       if (this.qrCodeContent && this.qrCodeContent.trim().length > 0) {
         await this.enlarge();
@@ -201,6 +210,11 @@ export class ResultPage {
     return "#ffffff";
   }
 
+  editContent() {
+    this.env.editingContent = true;
+    this.router.navigate(['tabs/generate'], { replaceUrl: true });
+  }
+
   searchOpenFoodFacts() {
     window.open(`https://world.openfoodfacts.org/product/${this.qrCodeContent}`, '_system', 'location=yes');
   }
@@ -224,104 +238,130 @@ export class ResultPage {
   }
 
   async addContact(): Promise<void> {
-    let newContact = null;
+    let contactInput: ContactInput = {};
     if (this.contentType === "contact") {
-      const phoneNumbers = [];
+      const phoneNumbers: PhoneInput[] = [];
       if (this.vCardContact?.defaultPhoneNumber != null) {
-        const phoneNumber = { number: this.vCardContact?.defaultPhoneNumber } as PhoneNumber;
+        const phoneNumber: PhoneInput = {
+          type: PhoneType.Mobile,
+          label: 'mobile',
+          number: this.vCardContact?.defaultPhoneNumber,
+          isPrimary: true,
+        };
         phoneNumbers.push(phoneNumber);
       }
       if (this.vCardContact?.homePhoneNumber != null) {
-        const phoneNumber = { number: this.vCardContact?.homePhoneNumber } as PhoneNumber;
+        const phoneNumber: PhoneInput = {
+          type: PhoneType.Home,
+          label: 'home',
+          number: this.vCardContact?.homePhoneNumber,
+        };
         phoneNumbers.push(phoneNumber);
       }
       if (this.vCardContact?.workPhoneNumber != null) {
-        const phoneNumber = { number: this.vCardContact?.homePhoneNumber } as PhoneNumber;
+        const phoneNumber: PhoneInput = {
+          type: PhoneType.Work,
+          label: 'work',
+          number: this.vCardContact?.workPhoneNumber,
+        };
         phoneNumbers.push(phoneNumber);
       }
       if (this.vCardContact?.mobilePhoneNumber != null) {
-        const phoneNumber = { number: this.vCardContact?.mobilePhoneNumber } as PhoneNumber;
+        const phoneNumber: PhoneInput = {
+          type: PhoneType.Mobile,
+          label: 'mobile',
+          number: this.vCardContact?.mobilePhoneNumber,
+        };
         phoneNumbers.push(phoneNumber);
       }
-      const emails = [];
+      const emails: EmailInput[] = [];
       if (this.vCardContact?.defaultEmail != null) {
-        const address = { address: this.vCardContact?.defaultEmail } as EmailAddress;
+        const emailInput: EmailInput = {
-        emails.push(address);
+          type: EmailType.Home,
+          label: 'home',
+          isPrimary: true,
+          address: this.vCardContact?.defaultEmail,
+        };
+        emails.push(emailInput);
       }
       if (this.vCardContact?.homeEmail != null) {
-        const address = { address: this.vCardContact?.homeEmail } as EmailAddress;
+        const emailInput: EmailInput = {
-        emails.push(address);
+          type: EmailType.Home,
+          label: 'home',
+          address: this.vCardContact?.homeEmail,
+        };
+        emails.push(emailInput);
       }
       if (this.vCardContact?.workEmail != null) {
-        const address = { address: this.vCardContact?.workEmail } as EmailAddress;
+        const emailInput: EmailInput = {
-        emails.push(address);
+          type: EmailType.Work,
+          label: 'work',
+          address: this.vCardContact?.workEmail,
+        };
+        emails.push(emailInput);
       }
-      newContact = {
+      contactInput.phones = phoneNumbers;
-        contactType: ContactType.Person,
+      contactInput.emails = emails;
-        givenName: this.vCardContact?.givenName ?? this.vCardContact?.fullName ?? '',
+      contactInput.name = {
-        familyName: this.vCardContact?.familyName,
+        given: this.vCardContact?.givenName ?? this.vCardContact?.fullName ?? '',
-        phoneNumbers: phoneNumbers,
+        family: this.vCardContact?.familyName,
-        emailAddresses: emails
+      };
-      } as NewContact;
     } else if (this.contentType === "sms" || this.contentType === "phone") {
-      const phoneNumbers = [];
+      const phones: PhoneInput[] = [
-      const phoneNumber = { number: this.phoneNumber } as PhoneNumber;
+        {
-      phoneNumbers.push(phoneNumber);
+          type: PhoneType.Mobile,
-      newContact = {
+          label: 'mobile',
-        contactType: ContactType.Person,
+          number: this.phoneNumber,
-        phoneNumbers: phoneNumbers
+          isPrimary: true,
-      } as NewContact;
+        }
+      ];
+      contactInput.phones = phones;
     }
-    if (newContact != null) {
+    if (this.platform.is('ios')) {
-      if (this.platform.is('ios')) {
+      // TODO: iOS contact handling
-        await Contacts.getPermissions().then(
+      // await Contacts.checkPermissions().then(
-          async permission => {
+      //   async permission => {
-            if (permission.granted) {
+      //     if (permission.contacts == 'granted') {
-              await this.saveContact(newContact);
+      //       await this.saveContact(newContact);
-            } else {
+      //     } else {
-              const alert = await this.alertController.create({
+      //       const alert = await this.alertController.create({
-                header: this.translate.instant("PERMISSION_REQUIRED"),
+      //         header: this.translate.instant("PERMISSION_REQUIRED"),
-                message: this.translate.instant("MSG.CONTACT_PERMISSION"),
+      //         message: this.translate.instant("MSG.CONTACT_PERMISSION"),
-                buttons: [
+      //         buttons: [
-                  {
+      //           {
-                    text: this.translate.instant("SETTING"),
+      //             text: this.translate.instant("SETTING"),
-                    handler: () => {
+      //             handler: () => {
-                      BarcodeScanner.openAppSettings();
+      //               BarcodeScanner.openAppSettings();
-                      return true;
+      //               return true;
-                    }
+      //             }
-                  },
+      //           },
-                  {
+      //           {
-                    text: this.translate.instant("CLOSE"),
+      //             text: this.translate.instant("CLOSE"),
-                    handler: () => {
+      //             handler: () => {
-                      return true;
+      //               return true;
-                    }
+      //             }
-                  }
+      //           }
-                ],
+      //         ],
-                cssClass: ['alert-bg']
+      //         cssClass: ['alert-bg']
-              });
+      //       });
-              await alert.present();
+      //       await alert.present();
-            }
+      //     }
-          }
+      //   }
-        );
+      // );
-      } else {  // Android doesn't need to get permission
+    } else {  // Android doesn't need to get permission
-        await this.saveContact(newContact);
+      await this.saveContact(contactInput);
-      }
     }
   }
 
-  private async saveContact(newContact: any) {
+  private async saveContact(contactInput: ContactInput) {
-    await Contacts.saveContact(newContact).then(
+    await Contacts.createContact({ contact: contactInput }).then(
       _ => {
-        if (this.isIOS) {
+        this.presentToast(this.translate.instant('MSG.SAVED_CONTACT'), "short", "bottom");
-          this.presentToast(this.translate.instant('MSG.SAVED_CONTACT'), "short", "bottom");
-        } else {
-          this.presentToast(this.translate.instant('MSG.SAVING_CONTACT'), "short", "bottom");
-        }
       }
     ).catch(
       err => {
         if (this.env.isDebugging) {
-          this.presentToast("Error when call Contacts.saveContact: " + JSON.stringify(err), "long", "top");
+          this.presentToast("Error when call Contacts.createContact: " + JSON.stringify(err), "long", "top");
         } else {
           this.presentToast(this.translate.instant('MSG.FAILED_SAVING_CONTACT'), "short", "bottom");
         }
@@ -415,6 +455,9 @@ export class ResultPage {
       case 'ecosia':
         searchUrl = this.env.ECOSIA_SEARCH_URL;
         break;
+      case 'brave':
+        searchUrl = this.env.BRAVE_SEARCH_URL;
+        break;
       default:
         searchUrl = this.env.GOOGLE_SEARCH_URL;
         break;
@@ -596,7 +639,7 @@ export class ResultPage {
     } else if (!failEncoded && failDecoded) {
       await this.presentToast(this.translate.instant('MSG.NOT_BASE64_DE'), "short", "center");
     }
-    setTimeout(() => this.formFields?.forEach(ff => ff.updateOutlineGap()), 100);
+    // setTimeout(() => this.formFields?.forEach(ff => ff.updateOutlineGap()), 100);
   }
 
   generateVCardContact(): void {
@@ -1002,7 +1045,7 @@ export class ResultPage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/pages/scan/scan.page.ts

@@ -205,7 +205,7 @@ export class ScanPage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/pages/setting-auto-brightness/setting-auto-brightness.page.ts

@@ -15,10 +15,6 @@ export class SettingAutoBrightnessPage {
     public env: EnvService,
   ) { }
 
-  async saveAutoMaxBrightness() {
-    await Preferences.set({ key: this.env.KEY_AUTO_MAX_BRIGHTNESS, value: this.env.autoMaxBrightness });
-  }
-
   async onAutoMaxBrightnessChange(ev: any) {
     this.env.autoMaxBrightness = ev ? 'on' : 'off';
     await Preferences.set({ key: this.env.KEY_AUTO_MAX_BRIGHTNESS, value: this.env.autoMaxBrightness });
@@ -27,7 +23,7 @@ export class SettingAutoBrightnessPage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/pages/setting-auto-open-url/setting-auto-open-url-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SettingAutoOpenUrlPage } from './setting-auto-open-url.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SettingAutoOpenUrlPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SettingAutoOpenUrlPageRoutingModule {}

src/app/pages/setting-auto-open-url/setting-auto-open-url.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { SettingAutoOpenUrlPageRoutingModule } from './setting-auto-open-url-routing.module';
+
+import { SettingAutoOpenUrlPage } from './setting-auto-open-url.page';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { HttpLoaderFactory } from 'src/app/utils/helpers';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
+    SettingAutoOpenUrlPageRoutingModule
+  ],
+  declarations: [SettingAutoOpenUrlPage]
+})
+export class SettingAutoOpenUrlPageModule {}

src/app/pages/setting-auto-open-url/setting-auto-open-url.page.html

@@ -0,0 +1,37 @@
+<ion-header>
+  <ion-toolbar [color]="env.colorTheme === 'black'? 'black' : 'dark'">
+    <ion-buttons slot="start">
+      <ion-back-button text="" defaultHref="tabs/setting">
+      </ion-back-button>
+    </ion-buttons>
+    <ion-title>{{ 'AUTO_OPEN_URL' | translate }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+  <ion-item class="ion-no-padding" lines="none">
+    <ion-label class="ion-padding-start">
+      <p class="ion-padding-top ion-padding-horizontal">
+        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="white-space: normal;">
+          <div [innerHTML]="'MSG.AUTO_OPEN_URL_EXPLAIN' | translate">
+          </div>
+        </ion-text>
+      </p>
+    </ion-label>
+  </ion-item>
+
+  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
+    <ion-label class="ion-padding-start">
+      <p class="ion-padding pre-line">
+        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
+          {{ (env.autoOpenUrl == 'on'? 'TURNED_ON' : 'TURNED_OFF') | translate }}
+        </ion-text>
+      </p>
+    </ion-label>
+    <ion-toggle class="ion-padding-end" slot="end" [ngModel]="env.autoOpenUrl == 'on'? true : false"
+      (ngModelChange)="onAutoOpenUrlChange($event)">
+    </ion-toggle>
+  </ion-item>
+
+</ion-content>

src/app/pages/setting-auto-open-url/setting-auto-open-url.page.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { Preferences } from '@capacitor/preferences';
+import { Toast } from '@capacitor/toast';
+import { EnvService } from 'src/app/services/env.service';
+
+@Component({
+  selector: 'app-setting-auto-open-url',
+  templateUrl: './setting-auto-open-url.page.html',
+  styleUrls: ['./setting-auto-open-url.page.scss'],
+})
+export class SettingAutoOpenUrlPage {
+
+  constructor(
+    public env: EnvService,
+  ) { }
+
+  async onAutoOpenUrlChange(ev: any) {
+    this.env.autoOpenUrl = ev ? 'on' : 'off';
+    await Preferences.set({ key: this.env.KEY_AUTO_OPEN_URL, value: this.env.autoOpenUrl });
+    await this.tapHaptic();
+  }
+
+  async tapHaptic() {
+    if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
+      await Haptics.impact({ style: ImpactStyle.Light })
+        .catch(async err => {
+          if (this.env.debugMode === 'on') {
+            await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })
+          }
+        })
+    }
+  }
+}

src/app/pages/setting-qr/setting-qr.module.ts

@@ -10,7 +10,7 @@ import { SettingQrPage } from './setting-qr.page';
 import { HttpClient } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
+import { QRCodeModule } from 'angularx-qrcode';
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -21,7 +21,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     CommonModule,
     FormsModule,
     IonicModule,
-    NgxQRCodeModule,
+    QRCodeModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,

src/app/pages/setting-qr/setting-qr.page.html

@@ -20,10 +20,10 @@
       <div class="d-flex align-items-center justify-content-top flex-column ion-padding-bottom" slot="content">
         <ion-row class="ion-padding-vertical">
           <ion-col class="ion-text-center" style="max-width: 100% !important;">
-            <ngx-qrcode [elementType]="qrElementType" [value]="qrCodeContent" [width]="defaultWidth"
+            <qrcode [elementType]="qrElementType" [qrdata]="qrCodeContent" [width]="defaultWidth"
               [errorCorrectionLevel]="errorCorrectionLevel" [colorDark]="qrColorDark" [colorLight]="qrColorLight"
               [margin]="env.qrCodeMargin" #qrcode>
-            </ngx-qrcode>
+            </qrcode>
           </ion-col>
         </ion-row>
         <ion-row>

src/app/pages/setting-qr/setting-qr.page.ts

@@ -4,7 +4,7 @@ import { Preferences } from '@capacitor/preferences';
 import { Toast } from '@capacitor/toast';
 import { AlertController, Platform } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
-import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';
+import { QRCodeElementType } from 'angularx-qrcode';
 import { EnvService } from 'src/app/services/env.service';
 import { rgbToHex } from 'src/app/utils/helpers';
 
@@ -16,8 +16,8 @@ import { rgbToHex } from 'src/app/utils/helpers';
 export class SettingQrPage {
 
   qrCodeContent: string = 'https://github.com/tomfong/simple-qr';
-  qrElementType: NgxQrcodeElementTypes = NgxQrcodeElementTypes.CANVAS;
+  qrElementType: QRCodeElementType = "canvas";
-  errorCorrectionLevel: NgxQrcodeErrorCorrectionLevels;
+  errorCorrectionLevel: 'low' | 'medium' | 'quartile' | 'high' | 'L' | 'M' | 'Q' | 'H';
   readonly MAX_WIDTH = 300;
   defaultWidth: number = window.innerWidth * 0.4 > this.MAX_WIDTH ? this.MAX_WIDTH : window.innerWidth * 0.4;
 
@@ -51,19 +51,19 @@ export class SettingQrPage {
   setErrorCorrectionLevel() {
     switch (this.env.errorCorrectionLevel) {
       case 'L':
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.LOW;
+        this.errorCorrectionLevel = 'low';
         break;
       case 'M':
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.MEDIUM;
+        this.errorCorrectionLevel = 'medium';
         break;
       case 'Q':
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.QUARTILE;
+        this.errorCorrectionLevel = 'quartile';
         break;
       case 'H':
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
+        this.errorCorrectionLevel = 'high';
         break;
       default:
-        this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.MEDIUM;
+        this.errorCorrectionLevel = 'medium';
     }
   }
 
@@ -126,7 +126,7 @@ export class SettingQrPage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/pages/setting-record/setting-record.page.html

@@ -56,7 +56,7 @@
   <ion-modal #tutorialModal trigger="open-tutorial-modal" [initialBreakpoint]="0.8" [breakpoints]="[0, 0.8]">
     <ng-template>
       <ion-content [color]="color">
-        <ion-list-header class="mt-4 ml-3" style="font-size: x-large;">{{ 'TUTORIAL' | translate }}</ion-list-header>
+        <ion-list-header class="mt-4 ms-3" style="font-size: x-large;">{{ 'TUTORIAL' | translate }}</ion-list-header>
         <ion-item class="content-item ion-no-padding" lines="none" [color]="color">
           <ion-icon class="ion-padding-horizontal" src="assets/icon/swipe-left.svg" [color]="'primary'"></ion-icon>
           <ion-label>

src/app/pages/setting-result-buttons/setting-result-buttons.page.html

@@ -75,6 +75,9 @@
     <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'ecosia'"
       src="assets/icon/ecosia.svg">
     </ion-icon>
+    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'brave'"
+      src="assets/icon/brave-search.svg">
+    </ion-icon>
     <ion-label>
       <p class="ion-padding pre-line">
         <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">

src/app/pages/setting-result/setting-result.page.html

@@ -44,6 +44,17 @@
       </p>
     </ion-label>
   </ion-item>
+  <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setAutoOpenUrl()">
+    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" name="open">
+    </ion-icon>
+    <ion-label>
+      <p class="ion-padding pre-line">
+        <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
+          {{ 'AUTO_OPEN_URL' | translate }}
+        </ion-text>
+      </p>
+    </ion-label>
+  </ion-item>
 
   <ion-list-header class="ion-margin-start ion-padding-horizontal mt-3">{{ 'TASK' | translate }}</ion-list-header>
   <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" (click)="setResultPageButtons()">
@@ -76,6 +87,9 @@
     <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'ecosia'"
       src="assets/icon/ecosia.svg">
     </ion-icon>
+    <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" *ngIf="env.searchEngine === 'brave'"
+      src="assets/icon/brave-search.svg">
+    </ion-icon>
     <ion-label>
       <p class="ion-padding pre-line">
         <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">

src/app/pages/setting-result/setting-result.page.ts

@@ -22,6 +22,10 @@ export class SettingResultPage {
     this.router.navigate(['setting-auto-brightness']);
   }
 
+  setAutoOpenUrl() {
+    this.router.navigate(['setting-auto-open-url']);
+  }
+
   setQrStyle() {
     this.router.navigate(['setting-qr']);
   }

src/app/pages/setting-search-engine/setting-search-engine.page.html

@@ -99,6 +99,19 @@
       <ion-radio class="ion-margin-end" slot="end" [value]="'ecosia'" [color]="'primary'">
       </ion-radio>
     </ion-item>
+    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
+      <ion-icon class="ion-margin-start ion-padding-horizontal" [color]="'primary'" src="assets/icon/brave-search.svg">
+      </ion-icon>
+      <ion-label>
+        <p class="ion-padding pre-line">
+          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
+            {{ 'BRAVE_SEARCH' | translate }}
+          </ion-text>
+        </p>
+      </ion-label>
+      <ion-radio class="ion-margin-end" slot="end" [value]="'brave'" [color]="'primary'">
+      </ion-radio>
+    </ion-item>
   </ion-radio-group>
 
 </ion-content>

src/app/pages/tabs/tabs.page.ts

@@ -137,7 +137,7 @@ export class TabsPage {
 
   async tapHaptic() {
     if (this.env.vibration === 'on' || this.env.vibration === 'on-haptic') {
-      await Haptics.impact({ style: ImpactStyle.Medium })
+      await Haptics.impact({ style: ImpactStyle.Light })
         .catch(async err => {
           if (this.env.debugMode === 'on') {
             await Toast.show({ text: 'Err when Haptics.impact: ' + JSON.stringify(err), position: "top", duration: "long" })

src/app/services/env.service.ts

@@ -23,7 +23,7 @@ export declare type ColorThemeType = 'light' | 'dark' | 'black';
 export declare type ErrorCorrectionLevelType = 'L' | 'M' | 'Q' | 'H';
 export declare type VibrationType = "on" | "off" | 'on-haptic' | 'on-scanned';
 export declare type OrientationType = 'portrait' | 'landscape';
-export declare type SearchEngineType = 'google' | 'bing' | 'yahoo' | 'duckduckgo' | 'yandex' | 'ecosia';
+export declare type SearchEngineType = 'google' | 'bing' | 'yahoo' | 'duckduckgo' | 'yandex' | 'ecosia' | 'brave';
 export declare type ResultPageButtonsType = 'detailed' | 'icon-only';
 
 @Injectable({
@@ -31,7 +31,7 @@ export declare type ResultPageButtonsType = 'detailed' | 'icon-only';
 })
 export class EnvService {
 
-  public appVersionNumber: string = '3.3.0';
+  public appVersionNumber: string = '4.0.0';
 
   public startPage: TabPageType = "/tabs/scan";
   public historyPageStartSegment: HistoryPageSegmentType = 'history';
@@ -44,7 +44,8 @@ export class EnvService {
   public scanRecordLogging: OnOffType = 'on';
   public recordsLimit: 30 | 50 | 100 | -1 = -1;
   public showNumberOfRecords: OnOffType = 'on';
-  public autoMaxBrightness: OnOffType = 'on';
+  public autoMaxBrightness: OnOffType = 'off';
+  public autoOpenUrl: OnOffType = 'on';
   public errorCorrectionLevel: ErrorCorrectionLevelType = 'M';
   public qrCodeLightR: number = 255;
   public qrCodeLightG: number = 255;
@@ -102,6 +103,7 @@ export class EnvService {
   public readonly KEY_QR_CODE_DARK_B = "qrCodeDarkB";
   public readonly KEY_QR_CODE_MARGIN = "qrCodeMargin";
   public readonly KEY_AUTO_MAX_BRIGHTNESS = "auto-max-brightness";
+  public readonly KEY_AUTO_OPEN_URL = "auto-open-url";
   public readonly KEY_SEARCH_ENGINE = "search-engine";
   public readonly KEY_RESULT_PAGE_BUTTONS = "result-page-buttons";
   public readonly KEY_SHOW_QR_AFTER_CAMERA_SCAN = "show-qr-after-camera-scan";
@@ -123,10 +125,10 @@ export class EnvService {
   public readonly KEY_SHOW_OPEN_FOOD_FACTS_BUTTON = "showOpenFoodFactsButton";
   public readonly KEY_AUTO_EXIT_MIN = "autoExitAppMin";
 
-  public readonly KEY_ANDROID_NOT_SHOW_UPDATE_NOTES = "not-show-update-notes-v30300";
+  public readonly KEY_ANDROID_NOT_SHOW_UPDATE_NOTES = "not-show-update-notes-v40000";
-  public readonly KEY_IOS_NOT_SHOW_UPDATE_NOTES = "not-show-update-notes-v30300";
+  public readonly KEY_IOS_NOT_SHOW_UPDATE_NOTES = "not-show-update-notes-v40000";
-  public readonly KEY_ANDROID_PREV_NOT_SHOW_UPDATE_NOTES = "not-show-update-notes-v30200";
+  public readonly KEY_ANDROID_PREV_NOT_SHOW_UPDATE_NOTES = "not-show-update-notes-v30300";
-  public readonly KEY_IOS_PREV_NOT_SHOW_UPDATE_NOTES = "not-show-update-notes-v30200";
+  public readonly KEY_IOS_PREV_NOT_SHOW_UPDATE_NOTES = "not-show-update-notes-v30300";
 
   public readonly APP_FOLDER_NAME: string = 'SimpleQR';
 
@@ -136,6 +138,7 @@ export class EnvService {
   public readonly DUCK_DUCK_GO_SEARCH_URL: string = "https://duckduckgo.com/?q=";
   public readonly YANDEX_SEARCH_URL: string = "https://yandex.com/search/?text=";
   public readonly ECOSIA_SEARCH_URL: string = "https://www.ecosia.org/search?method=index&q=";
+  public readonly BRAVE_SEARCH_URL: string = "https://search.brave.com/search?q=";
 
   public readonly GITHUB_REPO_URL: string = "https://github.com/tomfong/simple-qr";
   public readonly GOOGLE_PLAY_URL: string = "https://play.google.com/store/apps/details?id=com.tomfong.simpleqr";
@@ -144,6 +147,7 @@ export class EnvService {
   public readonly PRIVACY_POLICY: string = "https://www.privacypolicies.com/live/771b1123-99bb-4bfe-815e-1046c0437a0f";
 
   resultContent: string = '';
+  editingContent: boolean = false;
   resultContentFormat: string = '';
   scanRecords: ScanRecord[] = [];
   bookmarks: Bookmark[] = [];
@@ -500,7 +504,7 @@ export class EnvService {
           if (value != null) {
             this.autoMaxBrightness = value;
           } else {
-            this.autoMaxBrightness = 'on';
+            this.autoMaxBrightness = 'off';
           }
           await Preferences.set({
             key: this.KEY_AUTO_MAX_BRIGHTNESS,
@@ -995,7 +999,16 @@ export class EnvService {
         if (result.value != null) {
           this.autoMaxBrightness = result.value as OnOffType;
         } else {
-          this.autoMaxBrightness = 'on';
+          this.autoMaxBrightness = 'off';
+        }
+      }
+    );
+    await Preferences.get({ key: this.KEY_AUTO_OPEN_URL }).then(
+      async result => {
+        if (result.value != null) {
+          this.autoOpenUrl = result.value as OnOffType;
+        } else {
+          this.autoOpenUrl = 'on';
         }
       }
     );
@@ -1193,7 +1206,8 @@ export class EnvService {
     this.scanRecordLogging = 'on';
     this.recordsLimit = -1;
     this.showNumberOfRecords = 'on';
-    this.autoMaxBrightness = 'on';
+    this.autoMaxBrightness = 'off';
+    this.autoOpenUrl = 'on';
     this.errorCorrectionLevel = 'M';
     this.qrCodeLightR = 255;
     this.qrCodeLightG = 255;
@@ -1264,9 +1278,12 @@ export class EnvService {
     this.showNumberOfRecords = 'on';
     await Preferences.set({ key: this.KEY_SHOW_NUMBER_OF_RECORDS, value: this.showNumberOfRecords });
 
-    this.autoMaxBrightness = 'on';
+    this.autoMaxBrightness = 'off';
     await Preferences.set({ key: this.KEY_AUTO_MAX_BRIGHTNESS, value: this.autoMaxBrightness });
 
+    this.autoOpenUrl = 'on';
+    await Preferences.set({ key: this.KEY_AUTO_OPEN_URL, value: this.autoOpenUrl });
+
     this.errorCorrectionLevel = 'M';
     await Preferences.set({ key: this.KEY_ERROR_CORRECTION_LEVEL, value: this.errorCorrectionLevel });
 

src/app/utils/helpers.ts

@@ -1,3 +1,6 @@
+import { HttpClient } from "@angular/common/http";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
+
 function componentToHex(c: number) {
     var hex = c.toString(16);
     return hex.length == 1 ? "0" + hex : hex;
@@ -5,4 +8,8 @@ function componentToHex(c: number) {
 
 export function rgbToHex(r: number, g: number, b: number) {
     return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
+}
+
+export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
+    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}

src/assets/i18n/de.json

@@ -21,6 +21,7 @@
     "AUTO_KILL_BACKGROUND": "Auto Kill Hintergrund",
     "AUTO_LOGGING": "Automatische Protokollierung",
     "AUTO_MAX_BRIGHTNESS": "Auto Maximale Helligkeit",
+    "AUTO_OPEN_URL": "URL automatisch öffnen",
     "AUTO_QR_CODE_POPUP": "Automatisches QR Code Pop-up",
     "BACKGROUND_COLOR": "Hintergrundfarbe",
     "BACKING_UP": "Sichern",
@@ -34,6 +35,7 @@
     "BOOKMARKED": "Lesezeichen",
     "BOOKMARKED_TEXTS": "Texte mit Lesezeichen",
     "BOOKMARKS": "Lesezeichen",
+    "BRAVE_SEARCH": "Brave Search",
     "BROWSE": "Durchsuchen",
     "BROWSER": "Browser",
     "BROWSE_WEBSITE": "Website durchsuchen",
@@ -226,6 +228,7 @@
         "AUTO_KILL_BACKGROUND_EXPLAIN": "<p>Um Systemressourcen und Akku zu sparen, lege die Zeit fest, zu der die Anwendung automatisch beendet wird, wenn sie im Hintergrund läuft.</p><br><p>Wenn Du gewählt hast <b>Systemeinstellung folgens</b>, die Anwendung wird vollständig vom System kontrolliert und kann nicht von selbst beendet werden.</p><br><p>Bitte beachte, dass in manchen Situationen, könnte das System die Anwendung im Voraus stoppen.</p>",
         "AUTO_LOGGING_EXPLAIN": "Jeder QR-Code und Barcode-Inhalt wird protokolliert und automatisch gespeichert, nachdem Du ihn gescannt, erstellt oder erneut angezeigt hast. Du kannst sie auf der Seite Log einsehen.",
         "AUTO_MAX_BRIGHTNESS_EXPLAIN": "Die Bildschirmhelligkeit wird automatisch auf das Maximum eingestellt, wenn ein QR-Code angezeigt wird..",
+        "AUTO_OPEN_URL_EXPLAIN": "Wenn der QR-Code gescannt wird und der Inhalt eine URL ist, wird die URL automatisch geöffnet.",
         "AUTO_SHOW_QR_EXPLAIN": "Nach den folgenden Aktionen wird automatisch ein QR-Code auf der Ergebnisseite angezeigt.",
         "BACKUP_EXPLAIN": "Du kannst alle Datensätze und Lesezeichen lokal sichern. Nach der Sicherung erhältst du eine Reihe von Geheimnissen. Bewahre das Geheimnis sicher auf, sonst kannst du die Sicherung nicht wiederherstellen. Bitte beachte, dass Simple QR keine plattformübergreifende Sicherung und Wiederherstellung unterstützt.",
         "BACKUP_FAILED": "Sicherung fehlgeschlagen",

src/assets/i18n/en.json

@@ -21,6 +21,7 @@
     "AUTO_KILL_BACKGROUND": "Auto Kill Background",
     "AUTO_LOGGING": "Auto Logging",
     "AUTO_MAX_BRIGHTNESS": "Auto Max Brightness",
+    "AUTO_OPEN_URL": "Auto Open URL",
     "AUTO_QR_CODE_POPUP": "Auto QR Code Pop-up",
     "BACKGROUND_COLOR": "Background Color",
     "BACKING_UP": "Backing Up",
@@ -34,6 +35,7 @@
     "BOOKMARKED": "Bookmarked",
     "BOOKMARKED_TEXTS": "Bookmarked texts",
     "BOOKMARKS": "Bookmarks",
+    "BRAVE_SEARCH": "Brave Search",
     "BROWSE": "Browse",
     "BROWSER": "Browser",
     "BROWSE_WEBSITE": "Browse Website",
@@ -226,6 +228,7 @@
         "AUTO_KILL_BACKGROUND_EXPLAIN": "<p>To save system resources and battery, set the time to automatically kill the app when it is running in the background.</p><br><p>If you choose <b>Follow System Settings</b>, the app will be fully controlled by system and won't be killed by itself.</p><br><p>Please note that in some situations, the system might stop the app in advance.</p>",
         "AUTO_LOGGING_EXPLAIN": "Every QR code and barcode content are logged and stored automatically after you scan, create or view it again. You can view them on the Log page.",
         "AUTO_MAX_BRIGHTNESS_EXPLAIN": "The screen brightness is automatically adjusted to the maximum when displaying QR code.",
+        "AUTO_OPEN_URL_EXPLAIN": "When the QR code is scanned and the content is a URL, the URL will be opened automatically.",
         "AUTO_SHOW_QR_EXPLAIN": "Automatically pop up QR code on the Result page after the following actions.",
         "BACKUP_EXPLAIN": "You can back up all records and bookmarks locally. You will be given a set of secret after backing up. Keep the secret securely, otherwise you cannot restore the backup. Please note that Simple QR does not support cross-platform backup and restore.",
         "BACKUP_FAILED": "Failed to back up",

src/assets/i18n/fr.json

@@ -21,6 +21,7 @@
     "AUTO_KILL_BACKGROUND": "Arrière-plan de mise à mort automatique",
     "AUTO_LOGGING": "Journalisation automatique",
     "AUTO_MAX_BRIGHTNESS": "Luminosité max automatique",
+    "AUTO_OPEN_URL": "Ouvrir l'URL automatique",
     "AUTO_QR_CODE_POPUP": "Fenêtre pop-up de code QR automatique",
     "BACKGROUND_COLOR": "Couleur de l'arrière plan",
     "BACKING_UP": "Sauvegarde",
@@ -34,6 +35,7 @@
     "BOOKMARKED": "Mis en signet",
     "BOOKMARKED_TEXTS": "Textes marqués d'un signet",
     "BOOKMARKS": "Signets",
+    "BRAVE_SEARCH": "Brave Search",
     "BROWSE": "Parcourir",
     "BROWSER": "Navigateur",
     "BROWSE_WEBSITE": "Parcourir le site Web",
@@ -226,6 +228,7 @@
         "AUTO_KILL_BACKGROUND_EXPLAIN": "<p>Pour économiser les ressources système et la batterie, définissez l'heure pour arrêter automatiquement l'application lorsqu'elle s'exécute en arrière-plan.</p><br><p>Si vous choisissez <b>Suivre les paramètres du système</b>, l'application sera entièrement contrôlée par le système et ne sera pas tuée d'elle-même.</p><br><p>Veuillez noter que dans certaines situations, le système peut arrêter l'application à l'avance.</p>",
         "AUTO_LOGGING_EXPLAIN": "Chaque contenu de code QR et de code-barres est enregistré et stocké automatiquement après que vous l'avez numérisé, créé ou visualisé à nouveau. Vous pouvez les afficher sur la page Registre.",
         "AUTO_MAX_BRIGHTNESS_EXPLAIN": "La luminosité de l'écran est automatiquement ajustée au maximum lors de l'affichage du code QR.",
+        "AUTO_OPEN_URL_EXPLAIN": "Lorsque le code QR est scanné et que le contenu est une URL, l'URL s'ouvre automatiquement.",
         "AUTO_SHOW_QR_EXPLAIN": "Afficher automatiquement le code QR sur la page de résultat après les actions suivantes.",
         "BACKUP_EXPLAIN": "Vous pouvez sauvegarder tous les enregistrements et signets localement. Vous recevrez un ensemble de code secret après la sauvegarde. Conservez le secret en toute sécurité, sinon vous ne pourrez pas restaurer la sauvegarde. Veuillez noter que Simple QR ne prend pas en charge la sauvegarde et la restauration multiplateforme.",
         "BACKUP_FAILED": "Échec de la sauvegarde",

src/assets/i18n/it.json

@@ -21,6 +21,7 @@
     "AUTO_KILL_BACKGROUND": "Eliminazione background automatica",
     "AUTO_LOGGING": "Logging automatico",
     "AUTO_MAX_BRIGHTNESS": "Luminosità massima automatica",
+    "AUTO_OPEN_URL": "Apri URL automaticamente",
     "AUTO_QR_CODE_POPUP": "Codice QR Pop-up automatico",
     "BACKGROUND_COLOR": "Colore di sfondo",
     "BACKING_UP": "Eseguendo il backup",
@@ -34,6 +35,7 @@
     "BOOKMARKED": "Aggiunto ai preferiti",
     "BOOKMARKED_TEXTS": "Testi preferiti",
     "BOOKMARKS": "Segnalibri",
+    "BRAVE_SEARCH": "Brave Search",
     "BROWSE": "Naviga",
     "BROWSER": "Browser",
     "BROWSE_WEBSITE": "Sfoglia il sito web",
@@ -226,6 +228,7 @@
         "AUTO_KILL_BACKGROUND_EXPLAIN": "<p>Per salvare risorse e batteria, setta automaticamente la durata massima per killare l'app automaticamente quando viene eseguita in background.</p><br><p>Se selezioni <b>Segui le impostazioni di sistema</b>, l'app verrà controllata dal sistema e non sarà possibile killarla in autonomia.</p><br><p>Considera che in alcune situazioni, il sistema potrebbe interrompere l'app in anticipo..</p>",
         "AUTO_LOGGING_EXPLAIN": "Qualsiasi contenuto dei codici QR e a barre vengono loggate  e salvate automaticamente in seguito alla scannerizzazione, creazione o successiva visualizzazione. Puoi rivederla nella pagina di Log.",
         "AUTO_MAX_BRIGHTNESS_EXPLAIN": "La luminosità dello schermo è settata automaticamente al massimo quando si visualizza un codice QR.",
+        "AUTO_OPEN_URL_EXPLAIN": "Quando il codice QR viene scansionato e il contenuto è un URL, l'URL verrà aperto automaticamente.",
         "AUTO_SHOW_QR_EXPLAIN": "Visualizza automaticamente il codice QR nella pagina dei risultati dopo le seguenti azioni.",
         "BACKUP_EXPLAIN": "È possibile eseguire il backup di tutti i record e i segnalibri localmente. Ti verrà fornita una serie di chiavi segrete dopo il backup. Salvale in modo sicuro, altrimenti non sarà possibile ripristinare il backup. Si prega di notare che Simple QR non supporta il backup e il ripristino multipiattaforma.",
         "BACKUP_FAILED": "Tentativo di backup fallito",

src/assets/i18n/ru.json

@@ -21,6 +21,7 @@
     "AUTO_KILL_BACKGROUND": "Фоновая активность",
     "AUTO_LOGGING": "Автоматическое добавление в историю",
     "AUTO_MAX_BRIGHTNESS": "Максимальная яркость",
+    "AUTO_OPEN_URL": "Открывать URL автоматически",
     "AUTO_QR_CODE_POPUP": "Показывать QR-Код",
     "BACKGROUND_COLOR": "Цвет фона",
     "BACKING_UP": "Сохранение резервной копии",
@@ -34,6 +35,7 @@
     "BOOKMARKED": "Добавлено в закладки",
     "BOOKMARKED_TEXTS": "Сохраненные тексты",
     "BOOKMARKS": "Закладки",
+    "BRAVE_SEARCH": "Brave Search",
     "BROWSE": "Просмотреть",
     "BROWSER": "Браузер",
     "BROWSE_WEBSITE": "Посетить веб-сайт",
@@ -226,6 +228,7 @@
         "AUTO_KILL_BACKGROUND_EXPLAIN": "<p>Чтобы использовать меньше системных ресурсов и батареи, выставьте количество времени, спустя которое приложение будет автоматически остановлено, если оно работает в фоне.</p><br><p>Если вы выберете опцию <b>Как в системе</b>, фоновая активность приложения будет полностью контролироваться системой, приложение не будет приостанавливать свою работу самостоятельно.</p><br><p>Заметьте, что в некоторых ситуациях система может останавливать приложение заблаговременно.</p>",
         "AUTO_LOGGING_EXPLAIN": "Содержание каждого QR-Кода и Бар-Кода автоматически сохраняется после сканирования. Вы можете повторно обращаться к этим записям в разделе Истории.",
         "AUTO_MAX_BRIGHTNESS_EXPLAIN": "Автоматически увеличивать яркость экрана до максимального значения во время просмотра QR-Кода.",
+        "AUTO_OPEN_URL_EXPLAIN": "Когда QR-код сканируется, а содержимое представляет собой URL-адрес, URL-адрес будет открыт автоматически.",
         "AUTO_SHOW_QR_EXPLAIN": "Автоматически показывать QR-Код на странице результата после этих действий.",
         "BACKUP_EXPLAIN": "Вы можете создать локальную резервную копию всех записей истории и закладок. Вам будет выдан набор ключей после резервного копирования. Сохраняйте эти ключи, иначе вы не сможете восстановить созданную резервную копию. Заметьте, что Simple QR не поддерживает резервное копирование между разными платформами.",
         "BACKUP_FAILED": "Не удалось создать резервную копию",

src/assets/i18n/zh-CN.json

@@ -21,6 +21,7 @@
     "AUTO_KILL_BACKGROUND": "自动停止背景执行",
     "AUTO_LOGGING": "自动记录",
     "AUTO_MAX_BRIGHTNESS": "自动最大亮度",
+    "AUTO_OPEN_URL": "自动打开网址",
     "AUTO_QR_CODE_POPUP": "自动弹出 QR 码",
     "BACKGROUND_COLOR": "背景颜色",
     "BACKING_UP": "备份中",
@@ -34,6 +35,7 @@
     "BOOKMARKED": "已书签",
     "BOOKMARKED_TEXTS": "已收藏的书签",
     "BOOKMARKS": "书签",
+    "BRAVE_SEARCH": "Brave Search",
     "BROWSE": "浏览",
     "BROWSER": "浏览器",
     "BROWSE_WEBSITE": "浏览网站",
@@ -226,6 +228,7 @@
         "AUTO_KILL_BACKGROUND_EXPLAIN": "<p>为节省系统资源及减低耗电，当程序进入背景执行时，设定自动停止执行程序及所有背景活动的时间。</p><br><p>若选择<b>由系统控制</b>，程序本身将不会干预其运作及资源占用，全由系统控制。</p><br><p>请注意，在某些情况下系统可能会提前停止程序的背景运作。</p>",
         "AUTO_LOGGING_EXPLAIN": "在您扫描、建立或查看记录时，条码内容会自动被记录并储存在本地储存空间。您可在「记录」页面浏览所有记录。",
         "AUTO_MAX_BRIGHTNESS_EXPLAIN": "当显示 QR 码时，自动调校萤幕亮度到最大。",
+        "AUTO_OPEN_URL_EXPLAIN": "扫描QR码且内容为URL时，会自动打开该URL。",
         "AUTO_SHOW_QR_EXPLAIN": "在进行以下已选择的动作后，自动弹出 QR 码。",
         "BACKUP_EXPLAIN": "您可以为现有的扫描记录及书签进行本地备份。备份后，您会得到一组密码。请妥善保存密码，否则您无法还原此备份。请注意，简易QR并不支援跨平台备份与还原。",
         "BACKUP_FAILED": "备份失败",

src/assets/i18n/zh-HK.json

@@ -21,6 +21,7 @@
     "AUTO_KILL_BACKGROUND": "自動停止背景執行",
     "AUTO_LOGGING": "自動記錄",
     "AUTO_MAX_BRIGHTNESS": "自動最大亮度",
+    "AUTO_OPEN_URL": "自動打開網址",
     "AUTO_QR_CODE_POPUP": "自動彈出 QR 碼",
     "BACKGROUND_COLOR": "背景顏色",
     "BACKING_UP": "備份中",
@@ -34,6 +35,7 @@
     "BOOKMARKED": "已書籤",
     "BOOKMARKED_TEXTS": "已收藏的書籤會在這裡顯示",
     "BOOKMARKS": "書籤",
+    "BRAVE_SEARCH": "Brave Search",
     "BROWSE": "瀏覽",
     "BROWSER": "瀏覽器",
     "BROWSE_WEBSITE": "瀏覽網站",
@@ -226,6 +228,7 @@
         "AUTO_KILL_BACKGROUND_EXPLAIN": "<p>為節省系統資源及減低耗電，當程式進入背景執行時，設定自動停止執行程式及所有背景活動的時間。</p><br><p>若選擇<b>由系統控制</b>，程式本身將不會干預其運作及資源佔用，全由系統控制。</p><br><p>請注意，在某些情況下系統可能會提前停止程式的背景運作。</p>",
         "AUTO_LOGGING_EXPLAIN": "在您掃描、建立或查看記錄時，條碼內容會自動被記錄並儲存在本地儲存空間。您可在「記錄」頁面瀏覽所有記錄。",
         "AUTO_MAX_BRIGHTNESS_EXPLAIN": "當顯示 QR 碼時，自動調校螢幕亮度到最大。",
+        "AUTO_OPEN_URL_EXPLAIN": "掃描QR碼且內容為URL時，會自動打開該URL。",
         "AUTO_SHOW_QR_EXPLAIN": "在進行以下已選擇的動作後，自動彈出 QR 碼。",
         "BACKUP_EXPLAIN": "您可以為現有的掃描記錄及書籤進行本地備份。備份後，您會得到一組密碼。請妥善保存密碼，否則您無法還原此備份。請注意，簡易QR並不支援跨平台備份與還原。",
         "BACKUP_FAILED": "備份失敗",

src/assets/icon/brave-search.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px">
+    <path
+        d="M46,11l-2.96-3.96c-1.22-1.22-3.08-1.52-4.62-0.75L37,7l-5-5H18l-5,5l-1.42-0.71c-1.54-0.77-3.4-0.47-4.62,0.75L4,11l2,3	l-2,4l5.77,17.47c0.79,2.28,2.38,4.19,4.47,5.38L25,47l10.76-6.15c2.09-1.19,3.68-3.1,4.47-5.38L46,18l-2-4L46,11z M25,40l-6-6	c0,0,5-3,6-3s6,3,6,3L25,40z M38.68,18.76L34,25l0.57,0.85c0.41,0.61,0.61,1.32,0.61,2.02c0,0.78-0.24,1.55-0.73,2.19	c-0.52,0.7-1.29,1.26-2.04,1.59C31.9,31.88,31.4,32,31,32c-0.9,0-2.617-1.621-5-3.331v-1.102l4.515-2.709	c0.369-0.221,0.555-0.654,0.462-1.074l-1.459-6.566c0.174-0.406,0.444-0.744,0.845-0.964L36,14l-3-1h-2l-0.014,0.014	c-0.1,0.002-0.202,0.004-0.303,0.038l-3,1c-0.486,0.162-0.771,0.666-0.66,1.166l1.844,8.296L25,25.834l-3.868-2.321l1.844-8.296	c0.111-0.5-0.174-1.003-0.66-1.166l-3-1c-0.101-0.034-0.202-0.036-0.303-0.038L19,13h-2l-3,1l5.638,2.253	c0.401,0.22,0.671,0.558,0.845,0.964l-1.459,6.566c-0.093,0.42,0.092,0.853,0.461,1.074L24,27.566v1.126	C21.553,30.436,19.884,32,19,32c-0.4,0-0.9-0.12-1.41-0.35c-0.75-0.33-1.52-0.89-2.04-1.59c-0.93-1.23-0.98-2.92-0.12-4.21L16,25	l-4.68-6.24c-0.79-1.05-0.8-2.48-0.04-3.55L15,9l2.73,0.55c0.38,0.08,0.77,0.11,1.16,0.11c1.08,0,2.16-0.29,3.1-0.85	c0.93-0.56,1.97-0.84,3.01-0.84s2.08,0.28,3.01,0.84c1.28,0.76,2.8,1.03,4.26,0.74L35,9l3.72,6.21	C39.48,16.28,39.47,17.71,38.68,18.76z" />
+</svg>

src/assets/icon/duck-duck-go.svg

@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "Duckduckgo Icon by Icons8 on Iconscout" "https://iconscout.com/icons/duckduckgo">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
     <path d="M25 2C12.309 2 2 12.309 2 25s10.309 23 23 23 23-10.309 23-23S37.691 2 25 2zm-9.313 7.313c1.399 0 2.918.382 4.72 1.28 1.8.9 3.105 1.805 3.905 2.907 1.301.3 2.387.8 3.188 1.5 1 .898 1.793 2.293 2.594 4.094.699 1.8 1.093 3.508 1.093 4.906 0 .398-.085.805-.187 1.406.3-.101 1-.293 2-.593 1-.301 1.887-.614 2.688-.813.8-.2 1.406-.313 1.906-.313s1 .118 1.5.22c.5.1.812.382.812.78 0 .602-1.414 1.399-4.312 2.5-2.899 1.102-4.696 1.625-5.594 1.625-.2 0-.594-.023-1.094-.125-.5-.101-.918-.093-1.218-.093h-1.094c-.102 0-.188.093-.188.093 0 .102-.093.211-.093.313 0 .7.476 1.29 1.375 1.688.898.398 1.824.625 2.625.625.8 0 1.882-.114 3.28-.313 1.4-.2 2.614-.313 3.313-.313.5 0 .782.227.782.625 0 .602-.883 1.188-2.782 1.688-1.8.5-3.195.813-4.093.813-1.7 0-3.825-.7-6.625-2-.102.398-.094.882-.094 1.28 0 1.602.418 3.4 1.218 5.5h.188c.398-.1.688.102.688.5 2.101-1.6 3.613-2.406 4.312-2.406.5 0 .813 1.426.813 4.126 0 1.5-.22 2.187-.72 2.187-.698 0-1.882-.387-3.78-1.188.3.602.8 1.399 1.5 2.5.343.493.64.891.875 1.25A21.148 21.148 0 0125 46c-2.59 0-5.055-.488-7.344-1.344-.273-1.277-.613-2.988-1.156-5.468-1.602-7-2.688-12.274-3.188-15.876-.101-.699-.218-1.417-.218-2.218 0-2.301.613-4.106 1.812-5.407 1.2-1.3 2.98-2.074 5.281-2.374-.699-.2-1.488-.313-2.687-.313-.8 0-2.086.113-3.688.313 0-.2.083-.399.282-.5l.594-.313c.199 0 .511-.094.812-.094.3 0 .492-.094.594-.094.601-.101 1.32-.414 2.218-.812-1.3-.398-2.5-.594-3.5-.594-.199 0-.5-.008-1 .094-.398.102-.699.094-1 .094H12.5l1-1.406c.102 0 .5-.086 1-.188.5-.102.988-.188 1.188-.188zm12.126 8.093c-.899 0-1.426.395-1.625 1.094.199-.398.824-.594 1.625-.594.398 0 .898.106 1.5.407-.2-.5-.801-.907-1.5-.907zm-10.5.5c-.372.043-.7.18-1 .407-.5.3-.72.687-.72 1.187 0 .2-.007.398.095.5 0-.5.21-.887.812-1.188.602-.398 1.094-.5 1.594-.5.199 0 .508.086.906.188-.3-.398-.71-.594-1.313-.594-.125 0-.25-.015-.375 0zm11.28 2.782c-.3 0-.605.105-.905.406-.301.3-.375.605-.375.906 0 .3.074.605.375.906.3.301.605.407.906.407.398 0 .707-.106.906-.407.3-.3.406-.605.406-.906 0-.398-.105-.707-.406-.906-.3-.301-.605-.407-.906-.407zm.5.625c.2 0 .407.082.407.28 0 .2-.105.407-.406.407-.2 0-.282-.105-.282-.406 0-.2.083-.282.282-.282zm-10.593.093c-.398 0-.7.2-1 .5-.3.301-.5.7-.5 1 0 .399.2.7.5 1 .3.301.602.5 1 .5s.7-.199 1-.5c.3-.3.5-.699.5-1 0-.398-.2-.699-.5-1-.3-.3-.7-.5-1-.5zm.688.594c.3 0 .406.105.406.406 0 .2-.106.407-.407.407-.3 0-.375-.106-.375-.407 0-.3.075-.406.375-.406z"/>
 </svg>

src/global.scss

@@ -133,4 +133,9 @@ ion-tab-button:not(.tab-selected)::part(native):hover {
 
 .pre-line {
     white-space: pre-line !important;
+}
+
+.mat-icon {
+  height: 28px !important;
+  width: 28px !important;
 }

src/test.ts

@@ -7,13 +7,6 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
@@ -21,7 +14,3 @@ getTestBed().initTestEnvironment(
     teardown: { destroyAfterEach: false }
 }
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

src/theme/variables.scss

@@ -1,6 +1,17 @@
 @use "@angular/material" as mat;
 @import "@angular/material/theming";
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
+@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());
+@include mat.legacy-core();
 @include mat.core();
+
 $app-primary: mat.define-palette(mat.$cyan-palette, 600);
 $app-warn: mat.define-palette(mat.$red-palette);
 $app-light-theme: mat.define-light-theme(
@@ -27,7 +38,7 @@ $app-black-theme: mat.define-dark-theme(
       primary: $app-primary,
       accent: $app-primary,
       warn: $app-warn,
-    ),
+    )
   )
 );
 
@@ -41,6 +52,9 @@ $app-black-theme: mat.define-dark-theme(
 
 .ng-mat-black {
   @include mat.all-component-themes($app-black-theme);
+  .mdc-menu-surface {
+    background-color: #0f0f0f !important;
+  }
 }
 
 :root {
@@ -715,4 +729,4 @@ body {
 }
 
 /* Importing Bootstrap SCSS file. */
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";

tsconfig.json

@@ -10,9 +10,13 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "ES2022",
     "module": "es2020",
-    "lib": ["es2018", "dom"]
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,