chore: update to Angular 13

[bdryanovski]

Overview

• Update TypeScript to 4.4.4
• Update cds/angular to use Angular 13.0.0
• Update golden/clr-angular.d.ts
• Update @cds/core & @cds/angular ("^5.6.0") used into sub packages to latest version - to resolve some warnings when building.
• Migrate files to use Angular 13
• Fixing Dev app
• Fixing Clarity Schemtics to work Angular 13
• Fixing build:icons:zip
• Removing build:icons:zip from build steps - zip files no longer part of @clr/icons
• Updating development packages to resolve warnings (@typescript-eslint/eslint-plugin & @typescript-eslint/parser)
• Updating code to handle ClientRect deprecation
• Drop support of Internet Explorer polyfils

This PR includes work based on collaboration with @bbogdanov and @Jinnie

How to test it

# checkout this branch 

$ git clean -fdx;  # make sure that everything is clean (node_modules, dist, golden files)

$ npm install  

$ npm run build:ci

To test the dev app:

$ npm run start

To test website

$ npm run start:website

Testing packages

Setup testing tools

$ npm install --global verdaccio

$ verdaccio

Release packages locally

$ npm run publish:local

Check package information and dependencies

$ npm info @clr/angular --registry http://localhost:4873

Use the new package to create new application

$ npx @angular/cli@13 new demo-app

$ cd demo-app

$ npx @angular/cli@13 add @clr/angular@13.0.0-next --registry http://localhost:4873

$ npm run start

Performance

$ npm install;

added 4467 packages from 2332 contributors and audited 4015 packages in 105.532s

$ npm run build:ci

265.35s user 25.50s system 139% cpu 3:29.22 total

Known issues

When building, there is a warning that if I'm not wrong, it is already fixed, but it seems not backported. Need investigation.

Recommendation: math.div($clr-baseline-denominator, $browser-default-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
18 │ $clr-basefont-size: ($clr-baseline-denominator/$browser-default-size) * 100% !default;
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    projects/angular/src/utils/variables/_variables.global.scss 18:22  @import
    projects/angular/src/utils/variables/_variables.scss 2:9           @import
    projects/angular/src/utils/_mixins.scss 5:9                        @import
    projects/angular/src/utils/_components.clarity.scss 8:9            @import
    projects/angular/src/main.scss 13:9                                root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($clr-baseline-int, $clr-baseline-denominator)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
24 │   $clr-baseline-to-basefontsize-multiplier: $clr-baseline-int/$clr-baseline-denominator;
   │                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    projects/angular/src/utils/variables/_variables.global.scss 24:45  convertBaselineToBase20()
    projects/angular/src/utils/variables/_variables.global.scss 32:25  @import
    projects/angular/src/utils/variables/_variables.scss 2:9           @import
    projects/angular/src/utils/_mixins.scss 5:9                        @import
    projects/angular/src/utils/_components.clarity.scss 8:9            @import
    projects/angular/src/main.scss 13:9                                root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size, $clr-baseline-int)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
25 │   @return $size/$clr-baseline-int * $clr-baseline-to-basefontsize-multiplier * 1rem;
   │           ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    projects/angular/src/utils/variables/_variables.global.scss 25:11  convertBaselineToBase20()
    projects/angular/src/utils/variables/_variables.global.scss 32:25  @import
    projects/angular/src/utils/variables/_variables.scss 2:9           @import
    projects/angular/src/utils/_mixins.scss 5:9                        @import
    projects/angular/src/utils/_components.clarity.scss 8:9            @import
    projects/angular/src/main.scss 13:9                                root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($clr-grid-gutter-width, -2)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
8 │   margin-right: ($clr-grid-gutter-width / -2);
  │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    projects/angular/src/layout/grid/mixins/_grid.scss 8:18   clr-make-row()
    projects/angular/src/layout/grid/grid/_grid.scss 7:5      @content
    projects/angular/src/utils/_mixins.scss 16:5              exports()
    projects/angular/src/layout/grid/grid/_grid.scss 5:1      @import
    projects/angular/src/layout/grid/_grid.scss 10:9          @import
    projects/angular/src/utils/_components.clarity.scss 13:9  @import
    projects/angular/src/main.scss 13:9                       root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($clr-grid-gutter-width, -2)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
9 │   margin-left: ($clr-grid-gutter-width / -2);
  │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    projects/angular/src/layout/grid/mixins/_grid.scss 9:17   clr-make-row()
    projects/angular/src/layout/grid/grid/_grid.scss 7:5      @content
    projects/angular/src/utils/_mixins.scss 16:5              exports()
    projects/angular/src/layout/grid/grid/_grid.scss 5:1      @import
    projects/angular/src/layout/grid/_grid.scss 10:9          @import
    projects/angular/src/utils/_components.clarity.scss 13:9  @import
    projects/angular/src/main.scss 13:9                       root stylesheet

WARNING: 3 repetitive deprecation warnings omitted.

When creating new application with ng new and trying to compile the application this error could be found

Error: node_modules/@cds/core/internal/base/button.base.d.ts:8:5 - error TS2416: Property 'ariaDisabled' in type 'CdsBaseButton' is not assignable to the same property in base type 'LitElement'.
  Type 'string | null' is not assignable to type 'string'.
    Type 'null' is not assignable to type 'string'.

8     ariaDisabled: 'true' | 'false' | null;
      ~~~~~~~~~~~~

The workaround at the moment is editing button.base.d.ts and changing ariaDisabled to not include null as type.

Release

After this PR is merged this package/s could be publish under next tag to NPM as v13-angular.next or v13.next (tag name still underconsideration)

[netlify]

✔️ Deploy Preview for zzz-angular-clarity-design-old ready!

🔨 Explore the source changes: fb5d42d

🔍 Inspect the deploy log: https://app.netlify.com/sites/zzz-angular-clarity-design-old/deploys/61a4f1aa9671700007f74a78

😎 Browse the preview: https://deploy-preview-6455--zzz-angular-clarity-design-old.netlify.app

[bdryanovski]

This PR is blocked until we resolve the issue related to TS changes in types at lib.dom. This will be fixed into the @cds/core package and after that, we could publish a release candidate

[bbogdanov]

Womderful!

[Jinnie]

LGTM