Update angular examples to v20

README.md

@@ -1,66 +1,72 @@
-<p>
-  <a href="https://picocss.com" target="_blank">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
-      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
-    </picture>
-  </a>
-</p>
-
-# Pico.css examples
-
-Minimalist templates to discover Pico in action:
-
-<details open>
-  <summary><strong>Pico v2 examples</strong></summary>
-
-- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html)**  
-A pure HTML example, without dependencies.
-
-- **[Class-less preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html-classless)**  
-A class-less example, without dependencies.
-
-- **[Customized design system](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-sass-customized-design-system)**  
-An example to customize Pico CSS with SASS.
-
-- **[React class-less login](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-classless-login)**  
-A minimal, class-less login page in React, with a custom primary color.
-
-- **[React color schemes and modal](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-color-schemes-and-modal)**  
-Switch color schemes and open modals with React.
-
-- **[Conditional Styling](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-conditional-styling)**  
-A minimal example with the conditional version.
-</details>
-
----
-
-<details>
-  <summary><strong>Pico v1 examples</strong></summary>
-
-- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**  
-  A starter example with most of the Pico components and styles.
-
-- **[Right-to-left (RTL) preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl)**  
-  A starter example in Arabic with most of the Pico components and styles.
-
-- **[Classless](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)**  
-  A pure semantic HTML markup, without `.classes`.
-
-- **[Basic template](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-basic-template)**  
-  A basic custom template for Pico using only CSS custom properties (variables).
-
-- **[Company](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-company)**  
-  A classic company or blog layout with a sidebar.
-
-- **[Google Amp](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-google-amp)**  
-  A simple layout for Google Amp, with inlined CSS.
-
-- **[Sign in](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-sign-in)**  
-  A minimalist layout for Login pages.
-
-- **[Pico + Bootstrap grid system](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid)**  
-  Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico.
-
-</details>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
+
+# Pico.css examples
+
+Minimalist templates to discover Pico in action:
+
+<details open>
+  <summary><strong>Pico v2 examples</strong></summary>
+
+- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html)**  
+  A pure HTML example, without dependencies.
+
+- **[Class-less preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html-classless)**  
+  A class-less example, without dependencies.
+
+- **[Customized design system](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-sass-customized-design-system)**  
+  An example to customize Pico CSS with SASS.
+
+- **[Angular class-less login](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-angular-classless-login)**  
+  A minimal, class-less login page in React, with a custom primary color.
+
+- **[Angular color schemes and modal](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-angular-color-schemes-and-modal)**  
+  Switch color schemes and open modals with Angular.
+
+- **[React class-less login](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-classless-login)**  
+  A minimal, class-less login page in React, with a custom primary color.
+
+- **[React color schemes and modal](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-color-schemes-and-modal)**  
+  Switch color schemes and open modals with React.
+
+- **[Conditional Styling](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-conditional-styling)**  
+A minimal example with the conditional version.
+</details>
+
+---
+
+<details>
+  <summary><strong>Pico v1 examples</strong></summary>
+
+- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**  
+  A starter example with most of the Pico components and styles.
+
+- **[Right-to-left (RTL) preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl)**  
+  A starter example in Arabic with most of the Pico components and styles.
+
+- **[Classless](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)**  
+  A pure semantic HTML markup, without `.classes`.
+
+- **[Basic template](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-basic-template)**  
+  A basic custom template for Pico using only CSS custom properties (variables).
+
+- **[Company](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-company)**  
+  A classic company or blog layout with a sidebar.
+
+- **[Google Amp](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-google-amp)**  
+  A simple layout for Google Amp, with inlined CSS.
+
+- **[Sign in](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-sign-in)**  
+  A minimalist layout for Login pages.
+
+- **[Pico + Bootstrap grid system](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid)**  
+  Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico.
+
+</details>

v2-angular-classless-login/angular.json

@@ -7,10 +7,10 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
+          "changeDetection": "OnPush",
           "inlineTemplate": true,
           "inlineStyle": true,
-          "style": "scss",
-          "skipTests": true
+          "style": "scss"
         },
         "@schematics/angular:class": {
           "skipTests": true
@@ -39,23 +39,16 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/v2-angular-classless-login",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": [],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -83,7 +76,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "::production"
@@ -96,5 +89,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }