Fix scss and added changelog

CHANGELOG.md

@@ -0,0 +1,9 @@
+
+# 1.0.0
+
+- Removed polyfills since there are no longer needed in most modern browsers
+- Updated RxJs dependency to version 7.4
+- Updated Angular dependency to version 14
+- Removed deprecated TSLint and added ESLint
+- Removed deprecated Protractor tests
+- Replace deprecated scss `@import` with `@use`

README.md

@@ -69,12 +69,12 @@ For Angular 8,9,10
 The package includes a theme for angular material. In your own angular material theme:
 
 ```scss
-@import '~@angular/material/theming';
-@import '~angular-mgl-timeline/theme';
+@use '@angular/material' as mat;
+@use 'angular-mgl-timeline' as mgl;
 ...
 
-@include angular-material-theme($your-theme);
-@include mgl-timeline-theme($your-theme);
+@include mat.all-component-themes($your-theme);
+@include mgl.timeline-theme($your-theme);
 ```
 If the theme is included, the components will be styled according to `$your-theme` including support for primary and accent colors for the dot.
 
@@ -137,20 +137,5 @@ The `expanded` class will be added to the timeline-entry compnent when the entry
 | collapseAnimationTiming  | string  | '100ms ease' | Controls the animation speed of the dot of an entry. Set to `0ms` to disable the animation   |
 
 
-## Polyfills
-
-### Smoothscroll
-When an entry is toggled, it will scroll into view. Smooth behavior is currently not supported in Chrome. A polyfill is available in [iamdustan's smoothscroll](https://github.com/iamdustan/smoothscroll)
-
-### ClassList
-`ClassList.toggle` was used at some points, including the second parameter. If you need to support [browsers which do not support this](https://caniuse.com/#feat=classlist), be sure to use a polyfill, e.g. [this one](https://github.com/eligrey/classList.js/).
-
-### Web Animations API
-Animations are implemented with Angular animations which are based on the web animations API which has not landed in Safari and Edge yet. A polyfill is available in [Web Animations JS](https://github.com/web-animations/web-animations-js)
-
-## About
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.5.
-The NPM Version was packend with [ng-packagr](https://github.com/dherges/ng-packagr).
-
 ## License
 MIT License (c) Markus Glutting

package.json

@@ -10,6 +10,11 @@
     "lint": "ng lint",
     "package": "ng-packagr -p ng-package.json && cp src/timeline/timeline.theme.scss dist/theme.scss"
   },
+  "exports": {
+    ".": {
+      "sass": "./theme.scss"
+    }
+  },
   "peerDependencies": {
     "@angular/animations": "^14.0.0",
     "@angular/common": "^14.0.0",

src/demo/demo.scss

@@ -1,12 +1,12 @@
 /* You can add global styles to this file, and also import other style files */
-@import '../timeline/timeline.theme.scss';
-@import '@angular/material/theming';
+@use '../timeline/timeline.theme.scss' as mgl;
+@use '@angular/material' as mat;
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core;
 
 html, body {
     font-family: sans-serif;
@@ -15,17 +15,17 @@ html, body {
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
-$mgl-app-primary: mat-palette($mat-cyan);
-$mgl-app-accent:  mat-palette($mat-orange);
+$mgl-app-primary: mat.define-palette(mat.$cyan-palette);
+$mgl-app-accent:  mat.define-palette(mat.$orange-palette);
 
 // The warn palette is optional (defaults to red).
-$mgl-app-warn: mat-palette($mat-red);
+$mgl-app-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$mgl-app-theme: mat-light-theme($mgl-app-primary, $mgl-app-accent, $mgl-app-warn);
+$mgl-app-theme: mat.define-light-theme($mgl-app-primary, $mgl-app-accent, $mgl-app-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($mgl-app-theme);
-@include mgl-timeline-theme($mgl-app-theme);
+@include mat.all-component-themes($mgl-app-theme);
+@include mgl.timeline-theme($mgl-app-theme);

src/timeline/timeline-entry-dot/timeline-entry-dot.component.ts

@@ -16,7 +16,7 @@ export class MglTimelineEntryDotComponent implements AfterViewInit {
   private _expanded: boolean = false;
   private _alternate: boolean = false;
   private _mobile: boolean = false;
-  private initialStyle!: CSSStyleDeclaration;
+  private initialStyle: CSSStyleDeclaration;
   private _size: number = 50;
   private animation?: AnimationPlayer;
 

src/timeline/timeline.theme.scss

@@ -1,41 +1,39 @@
-@import '@angular/material/theming';
+@use '@angular/material' as mat;
 
-@mixin mgl-timeline-theme($theme) {
+@mixin timeline-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
-  $typographyConfig: mat-typography-config();
+  $typographyConfig: mat.get-typography-config($theme);
 
 
   mgl-timeline {
-    font-family: mat-font-family($typographyConfig);
+    font-family: mat.font-family((font-family: $typographyConfig));
 
-      & mgl-timeline-entry {
+    & mgl-timeline-entry {
 
-        & .mgl-timeline-entry-card {
-            @include mat-elevation(4);
-            background-color: map-get($background, card) !important;
-            color: map-get($foreground, base);
+      & .mgl-timeline-entry-card {
+        @include mat.elevation(4);
+        background-color: map-get($background, card) !important;
+        color: map-get($foreground, base);
 
-            & .mgl-timeline-entry-card-header {
-                background-color: map-get($background, app-bar) !important;
-            }
+        & .mgl-timeline-entry-card-header {
+          background-color: map-get($background, app-bar) !important;
         }
+      }
 
-        & mgl-timeline-entry-dot {
-        @include mat-elevation(2);
+      & mgl-timeline-entry-dot {
+        @include mat.elevation(2);
 
-            &.primary {
-                background-color: mat-color($primary);
-            }
+        &.primary {
+          background-color: mat.get-color-from-palette($primary);
+        }
 
-            &.accent {
-                background-color: mat-color($accent);
-            }
-    }
+        &.accent {
+          background-color: mat.get-color-from-palette($accent);
+        }
+      }
     }
   }
-
-
 }