ngx-ratio-image 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/package.json +87 -86
  2. package/projects/ngx-ratio-image/LICENSE +21 -0
  3. package/projects/ngx-ratio-image/README.md +14 -91
  4. package/projects/ngx-ratio-image/package.json +1 -1
  5. package/projects/ratio-image-app/src/app/app.component.html +13 -5
  6. package/projects/ratio-image-app/src/app/app.component.scss +19 -3
  7. package/projects/ratio-image-app/src/app/app.component.spec.ts +17 -10
  8. package/projects/ratio-image-app/src/app/app.component.ts +8 -0
  9. package/projects/ratio-image-app/src/app/app.module.ts +11 -5
  10. package/projects/ratio-image-app/src/app/header.component.html +10 -0
  11. package/projects/ratio-image-app/src/app/header.component.scss +25 -0
  12. package/projects/ratio-image-app/src/app/header.component.spec.ts +35 -0
  13. package/projects/ratio-image-app/src/app/header.component.ts +13 -0
  14. package/projects/ratio-image-app/src/styles.scss +2 -0
package/package.json CHANGED
@@ -1,88 +1,89 @@
1
1
  {
2
- "name": "ngx-ratio-image",
3
- "version": "0.0.7",
4
- "author": {
5
- "name": "Gerd Siebert"
6
- },
7
- "contributors": [],
8
- "repository": {
9
- "type": "git",
10
- "url": "https://github.com/gerd-siebert/ngx-ratio-image"
11
- },
12
- "keywords": [
13
- "Image",
14
- "Scaling",
15
- "Ratio",
16
- "Angular 16"
17
- ],
18
- "license": "MIT",
19
- "main": "dist/ratio-image/esm2022/ratio-image.mjs",
20
- "scripts": {
21
- "ng": "ng",
22
- "prettier": "prettier --write \"**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
23
- "start": "ng serve",
24
- "build": "npm run build:lib && npm run build:lib",
25
- "build:lib": "ng build --project ratioImage --configuration production ",
26
- "build:app": "ng build --project ratioImageApp --configuration production ",
27
- "watch": "ng build --watch --configuration development",
28
- "test": "ng test",
29
- "test:ci": "ng test --code-coverage --no-watch --browsers=ChromeHeadless --source-map=false",
30
- "lint": "ng lint",
31
- "packagr": "ng-packagr -p ng-package.json",
32
- "publish": "rm -rf node_modules && npm install && npm run build && cd dist/ratio-image && npm publish && cd ../../"
33
- },
34
- "private": false,
35
- "dependencies": {
36
- "@angular/animations": "^16.1.2",
37
- "@angular/cdk": "^16.1.1",
38
- "@angular/common": "^16.1.2",
39
- "@angular/compiler": "^16.1.2",
40
- "@angular/core": "^16.1.2",
41
- "@angular/forms": "^16.1.2",
42
- "@angular/material": "^16.1.1",
43
- "@angular/platform-browser": "^16.1.2",
44
- "@angular/platform-browser-dynamic": "^16.1.2",
45
- "@angular/router": "^16.1.2",
46
- "rxjs": "~7.8.0",
47
- "tslib": "^2.3.0",
48
- "zone.js": "~0.13.0"
49
- },
50
- "devDependencies": {
51
- "@angular-devkit/build-angular": "^16.1.0",
52
- "@angular-eslint/builder": "16.0.3",
53
- "@angular-eslint/eslint-plugin": "16.0.3",
54
- "@angular-eslint/eslint-plugin-template": "16.0.3",
55
- "@angular-eslint/schematics": "16.0.3",
56
- "@angular-eslint/template-parser": "16.0.3",
57
- "@angular/cli": "~16.1.0",
58
- "@angular/compiler-cli": "^16.1.2",
59
- "@schuchard/prettier": "5.1.0",
60
- "@types/jasmine": "~4.3.0",
61
- "@typescript-eslint/eslint-plugin": "5.59.7",
62
- "@typescript-eslint/parser": "5.59.7",
63
- "eslint": "^8.40.0",
64
- "husky": "latest",
65
- "jasmine-core": "~4.6.0",
66
- "karma": "~6.4.0",
67
- "karma-chrome-launcher": "~3.2.0",
68
- "karma-coverage": "~2.2.0",
69
- "karma-jasmine": "~5.1.0",
70
- "karma-jasmine-html-reporter": "~2.1.0",
71
- "lint-staged": "latest",
72
- "ng-packagr": "^16.1.0",
73
- "prettier": "^2.8.8",
74
- "rimraf": "^5.0.1",
75
- "tslint-config-prettier": "latest",
76
- "typescript": "~5.1.3"
77
- },
78
- "husky": {
79
- "hooks": {
80
- "pre-commit": "lint-staged"
81
- }
82
- },
83
- "lint-staged": {
84
- "*.{js,json,css,scss,less,md,ts,html,component.html}": [
85
- "prettier --write"
86
- ]
87
- }
2
+ "name": "ngx-ratio-image",
3
+ "version": "0.0.8",
4
+ "author": {
5
+ "name": "Gerd Siebert"
6
+ },
7
+ "contributors": [],
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/gerd-siebert/ngx-ratio-image"
11
+ },
12
+ "keywords": [
13
+ "Image",
14
+ "Scaling",
15
+ "Ratio",
16
+ "Angular 16"
17
+ ],
18
+ "license": "MIT",
19
+ "main": "dist/ratio-image/esm2022/ratio-image.mjs",
20
+ "scripts": {
21
+ "ng": "ng",
22
+ "prettier": "prettier --write \"**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
23
+ "start": "ng serve",
24
+ "prebuild": "rimraf .angular dist && cp ./README.md ./LICENSE projects/ngx-ratio-image",
25
+ "build": "echo 'Prepare-Builds' && npm run build:lib && npm run build:lib",
26
+ "build:lib": "ng build --project ratioImage --configuration production ",
27
+ "build:app": "ng build --project ratioImageApp --configuration production ",
28
+ "watch": "ng build --watch --configuration development",
29
+ "test": "ng test",
30
+ "test:ci": "ng test --code-coverage --no-watch --browsers=ChromeHeadless --source-map=false",
31
+ "lint": "ng lint",
32
+ "packagr": "ng-packagr -p ng-package.json",
33
+ "publish": "rm -rf node_modules && npm install && npm run build && cd dist/ratio-image && npm publish && cd ../../"
34
+ },
35
+ "private": false,
36
+ "dependencies": {
37
+ "@angular/animations": "^16.1.2",
38
+ "@angular/cdk": "^16.1.1",
39
+ "@angular/common": "^16.1.2",
40
+ "@angular/compiler": "^16.1.2",
41
+ "@angular/core": "^16.1.2",
42
+ "@angular/forms": "^16.1.2",
43
+ "@angular/material": "^16.1.1",
44
+ "@angular/platform-browser": "^16.1.2",
45
+ "@angular/platform-browser-dynamic": "^16.1.2",
46
+ "@angular/router": "^16.1.2",
47
+ "rxjs": "~7.8.0",
48
+ "tslib": "^2.3.0",
49
+ "zone.js": "~0.13.0"
50
+ },
51
+ "devDependencies": {
52
+ "@angular-devkit/build-angular": "^16.1.0",
53
+ "@angular-eslint/builder": "16.0.3",
54
+ "@angular-eslint/eslint-plugin": "16.0.3",
55
+ "@angular-eslint/eslint-plugin-template": "16.0.3",
56
+ "@angular-eslint/schematics": "16.0.3",
57
+ "@angular-eslint/template-parser": "16.0.3",
58
+ "@angular/cli": "~16.1.0",
59
+ "@angular/compiler-cli": "^16.1.2",
60
+ "@schuchard/prettier": "5.1.0",
61
+ "@types/jasmine": "~4.3.0",
62
+ "@typescript-eslint/eslint-plugin": "5.59.7",
63
+ "@typescript-eslint/parser": "5.59.7",
64
+ "eslint": "^8.40.0",
65
+ "husky": "latest",
66
+ "jasmine-core": "~4.6.0",
67
+ "karma": "~6.4.0",
68
+ "karma-chrome-launcher": "~3.2.0",
69
+ "karma-coverage": "~2.2.0",
70
+ "karma-jasmine": "~5.1.0",
71
+ "karma-jasmine-html-reporter": "~2.1.0",
72
+ "lint-staged": "latest",
73
+ "ng-packagr": "^16.1.0",
74
+ "prettier": "^2.8.8",
75
+ "rimraf": "^5.0.1",
76
+ "tslint-config-prettier": "latest",
77
+ "typescript": "~5.1.3"
78
+ },
79
+ "husky": {
80
+ "hooks": {
81
+ "pre-commit": "lint-staged"
82
+ }
83
+ },
84
+ "lint-staged": {
85
+ "*.{js,json,css,scss,less,md,ts,html,component.html}": [
86
+ "prettier --write"
87
+ ]
88
+ }
88
89
  }
package/projects/ngx-ratio-image/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2023 gerd-siebert
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/projects/ngx-ratio-image/README.md CHANGED
@@ -1,104 +1,27 @@
1
- # ngx-ratio-image
1
+ # RatioImage
2
2
 
3
- # ngx-ratio-image - an Angular lib to show an image with variable ratio in container with a fixed ratio.
3
+ This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
4
4
 
5
- - [Features](#features)
6
- - [Installation](#installation)
7
- - [Usage](#usage)
8
- - [Examples](#examples)
9
- - [Available Parameters](#available-parameters)
10
- - [Demo](#demo)
11
- - [Contribute](#contribute)
12
- - [License](#license)
5
+ ## Development server
13
6
 
14
- ## Features
7
+ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
15
8
 
16
- - can display any images in a predefined container
17
- - black bars are avoided with a blurring effect
18
- - non stable-phase with versions smaller 1.0.0, please test and feedback
19
- - tested with Angular 16.1, not working with Angular 15
9
+ ## Code scaffolding
20
10
 
21
- ## Installation
11
+ Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
22
12
 
23
- **Angular 16.1 with ngx-ratio-image**
13
+ ## Build
24
14
 
25
- ```
26
- npm ngx-ratio-image --save
27
- # Or with yarn
28
- yarn add ngx-ratio-image
29
- ```
15
+ Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
30
16
 
31
- # Usage
17
+ ## Running unit tests
32
18
 
33
- ### Import the module and add it to your imports section in your main AppModule:
19
+ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
34
20
 
35
- ```
36
- // File: app.module.ts
37
- // all your other imports...
38
- import { RatioImageModule } from 'ngx-ratio-image';
21
+ ## Running end-to-end tests
39
22
 
40
- @NgModule({
41
- declarations: [
42
- AppComponent
43
- ],
44
- imports: [
45
- RatioImageModule
46
- ],
47
- providers: [],
48
- bootstrap: [AppComponent]
49
- })
50
- export class AppModule { }
51
- ```
23
+ Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
52
24
 
53
- ```
54
- // File: app.component.html
55
- // all your HTML...
25
+ ## Further help
56
26
 
57
- <ngx-ratio-image
58
- [src]="'https://dummyimage.com/800x600'"
59
- [width]="1600"
60
- [height]="900"
61
- ></ngx-ratio-image>
62
- ```
63
-
64
- ## Examples
65
-
66
- The source code contains several examples in the folder [`projects/ratio-image-app`](projects/ratio-image-app/src/app) in this repository to show how the output works with different images.
67
-
68
- ## Available Parameters
69
-
70
- | Attribute | Type | Default | Required | Description |
71
- | --------- | ------- | ------- | -------- | ------------------------------------- |
72
- | src | string | '' | yes | Allow qrdata to be an empty string |
73
- | width | number | 0 | yes | width of the container in pixels |
74
- | height | number | 0 | yes | height of the container in pixels |
75
- | debug | boolean | false | no | Activate a red border on console text |
76
-
77
- # Demo
78
-
79
- The source for the angular app is available in [`projects/ratio-image-app`](projects/ratio-image-app). Run the command
80
-
81
- ```
82
- ng serve ratio-image-app --open
83
- ```
84
-
85
- and open the url `http://localhost:4201/` in your browser
86
-
87
- ## AOT - Ahead Of Time Compilation
88
-
89
- AOT Support is not tested, please feed back the result or make a feature request
90
-
91
- ## SSR - Server Side Rendering
92
-
93
- SSR Support is not tested, please feed back the result or make a feature request
94
-
95
- ## Contribute
96
-
97
- - Please open your PR against the main branch.
98
- - Make sure your editor uses **prettier** to minimize committed code changes.
99
-
100
- ## License
101
-
102
- MIT License
103
-
104
- Copyright (c) 2023 - present [Gerd Siebert(gerd.siebert@gmail.com)](mailto:gerd.siebert@gmail.com)
27
+ To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
package/projects/ngx-ratio-image/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngx-ratio-image",
3
- "version": "0.0.2",
3
+ "version": "0.0.8",
4
4
  "author": {
5
5
  "name": "Gerd Siebert"
6
6
  },
package/projects/ratio-image-app/src/app/app.component.html CHANGED
@@ -1,6 +1,14 @@
1
- <h1>ngx-ratio-image Test App</h1>
1
+ <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
2
2
 
3
- <button [routerLink]="'/'" routerLinkActive="active">Home</button>
4
- <button routerLink="/interactive" routerLinkActive="active">Interactive</button>
5
-
6
- <router-outlet></router-outlet>
3
+ <mat-sidenav-container>
4
+ <mat-sidenav #sidenav role="navigation" [opened]="(isHandset$ | async) === false" mode="side">
5
+ <a [routerLink]="'/'" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
6
+ <a routerLink="/interactive" routerLinkActive="active">Interactive</a>
7
+ </mat-sidenav>
8
+ <mat-sidenav-content>
9
+ <!--in here all the content must reside. We will add a navigation header as well-->
10
+ <main>
11
+ <router-outlet></router-outlet>
12
+ </main>
13
+ </mat-sidenav-content>
14
+ </mat-sidenav-container>
package/projects/ratio-image-app/src/app/app.component.scss CHANGED
@@ -1,9 +1,25 @@
1
- button {
1
+ a {
2
+ color: #c2185b;
3
+ display: block;
2
4
  font-size: large;
3
5
  padding: 5px;
4
6
  margin: 5px;
5
- /*&.active {
7
+ &.active {
6
8
  font-weight: bolder;
7
9
  background-color: darkgray;
8
- }*/
10
+ }
11
+ text-decoration: none;
12
+ }
13
+
14
+ mat-sidenav-container,
15
+ mat-sidenav-content,
16
+ mat-sidenav {
17
+ height: 100%;
18
+ width: 100%;
19
+ }
20
+ mat-sidenav {
21
+ width: 250px;
22
+ }
23
+ main {
24
+ padding: 10px;
9
25
  }
package/projects/ratio-image-app/src/app/app.component.spec.ts CHANGED
@@ -1,12 +1,26 @@
1
1
  import { TestBed } from '@angular/core/testing';
2
2
  import { RouterTestingModule } from '@angular/router/testing';
3
3
  import { AppComponent } from './app.component';
4
+ import { HeaderComponent } from './header.component';
5
+ import { MatSidenavModule } from '@angular/material/sidenav';
6
+ import { MatIconModule } from '@angular/material/icon';
7
+ import { MatToolbarModule } from '@angular/material/toolbar';
8
+ import { MatButtonModule } from '@angular/material/button';
9
+ import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
4
10
 
5
11
  describe('AppComponent', () => {
6
12
  beforeEach(() =>
7
13
  TestBed.configureTestingModule({
8
- imports: [RouterTestingModule],
9
- declarations: [AppComponent]
14
+ imports: [
15
+ BrowserAnimationsModule,
16
+ RouterTestingModule,
17
+ MatSidenavModule,
18
+ MatIconModule,
19
+ MatToolbarModule,
20
+ MatButtonModule
21
+ ],
22
+ declarations: [AppComponent, HeaderComponent],
23
+ providers: provideAnimations()
10
24
  })
11
25
  );
12
26
 
@@ -16,16 +30,9 @@ describe('AppComponent', () => {
16
30
  expect(app).toBeTruthy();
17
31
  });
18
32
 
19
- it(`should have as title 'ratioImageApp'`, () => {
33
+ xit(`should have as title 'ratioImageApp'`, () => {
20
34
  const fixture = TestBed.createComponent(AppComponent);
21
35
  const app = fixture.componentInstance;
22
36
  expect(app.title).toEqual('ratioImageApp');
23
37
  });
24
-
25
- it('should render title', () => {
26
- const fixture = TestBed.createComponent(AppComponent);
27
- fixture.detectChanges();
28
- const compiled = fixture.nativeElement as HTMLElement;
29
- expect(compiled.querySelector('h1')?.textContent).toContain('ngx-ratio-image Test App');
30
- });
31
38
  });
package/projects/ratio-image-app/src/app/app.component.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import { Component } from '@angular/core';
2
+ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
3
+ import { map, Observable, shareReplay } from 'rxjs';
2
4
 
3
5
  @Component({
4
6
  selector: 'app-root',
@@ -8,4 +10,10 @@ import { Component } from '@angular/core';
8
10
  export class AppComponent {
9
11
  title = 'ratioImageApp';
10
12
  h1 = 'ngx-ratio-image Test App';
13
+ isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
14
+ map(result => result.matches),
15
+ shareReplay()
16
+ );
17
+
18
+ constructor(private breakpointObserver: BreakpointObserver) {}
11
19
  }
package/projects/ratio-image-app/src/app/app.module.ts CHANGED
@@ -4,21 +4,27 @@ import { BrowserModule } from '@angular/platform-browser';
4
4
  import { AppRoutingModule } from './app-routing.module';
5
5
  import { AppComponent } from './app.component';
6
6
 
7
- import { RatioImageModule } from 'ngxRatioImage';
8
- // import { RatioImageModule } from '../../../ngx-ratio-image/src/lib/ratio-image.module';
9
7
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
10
8
  import { HomeModule } from './home/home.module';
11
9
  import { InteractiveModule } from './interactive/interactive.module';
10
+ import { MatSidenavModule } from '@angular/material/sidenav';
11
+ import { HeaderComponent } from './header.component';
12
+ import { MatIconModule } from '@angular/material/icon';
13
+ import { MatToolbarModule } from '@angular/material/toolbar';
14
+ import { MatButtonModule } from '@angular/material/button';
12
15
 
13
16
  @NgModule({
14
- declarations: [AppComponent],
17
+ declarations: [AppComponent, HeaderComponent],
15
18
  imports: [
16
19
  BrowserModule,
17
20
  AppRoutingModule,
18
- RatioImageModule,
19
21
  BrowserAnimationsModule,
20
22
  HomeModule,
21
- InteractiveModule
23
+ InteractiveModule,
24
+ MatSidenavModule,
25
+ MatIconModule,
26
+ MatToolbarModule,
27
+ MatButtonModule
22
28
  ],
23
29
  providers: [],
24
30
  exports: [HomeModule, InteractiveModule],
package/projects/ratio-image-app/src/app/header.component.html ADDED
@@ -0,0 +1,10 @@
1
+ <mat-toolbar color="primary">
2
+ <div fxHide.gt-xs>
3
+ <button mat-icon-button (click)="onToggleSidenav()">
4
+ <mat-icon>menu</mat-icon>
5
+ </button>
6
+ </div>
7
+ <div>
8
+ <h1>ngx-ratio-image Test App</h1>
9
+ </div>
10
+ </mat-toolbar>
package/projects/ratio-image-app/src/app/header.component.scss ADDED
@@ -0,0 +1,25 @@
1
+ a {
2
+ text-decoration: none;
3
+ color: white;
4
+ }
5
+ a:hover,
6
+ a:active {
7
+ color: lightgray;
8
+ }
9
+ h1 {
10
+ margin: 5px 16px 5px 5px; ;
11
+ font-size: 32px;
12
+ }
13
+ .navigation-items {
14
+ list-style-type: none;
15
+ padding: 0;
16
+ margin: 0;
17
+ }
18
+ mat-toolbar {
19
+ border-radius: 3px;
20
+ }
21
+ @media (max-width: 959px) {
22
+ mat-toolbar {
23
+ border-radius: 0;
24
+ }
25
+ }
package/projects/ratio-image-app/src/app/header.component.spec.ts ADDED
@@ -0,0 +1,35 @@
1
+ import { ComponentFixture, TestBed } from '@angular/core/testing';
2
+
3
+ import { HeaderComponent } from './header.component';
4
+ import { MatSidenavModule } from '@angular/material/sidenav';
5
+ import { MatIconModule } from '@angular/material/icon';
6
+ import { MatToolbarModule } from '@angular/material/toolbar';
7
+ import { MatButtonModule } from '@angular/material/button';
8
+ import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
9
+
10
+ describe('HeaderComponent', () => {
11
+ let component: HeaderComponent;
12
+ let fixture: ComponentFixture<HeaderComponent>;
13
+
14
+ beforeEach(() => {
15
+ TestBed.configureTestingModule({
16
+ declarations: [HeaderComponent],
17
+ imports: [BrowserAnimationsModule, MatSidenavModule, MatIconModule, MatToolbarModule, MatButtonModule],
18
+ providers: [provideAnimations()]
19
+ });
20
+
21
+ fixture = TestBed.createComponent(HeaderComponent);
22
+ component = fixture.componentInstance;
23
+ fixture.detectChanges();
24
+ });
25
+
26
+ it('should create', () => {
27
+ expect(component).toBeTruthy();
28
+ });
29
+ it('should render title', () => {
30
+ const fixture = TestBed.createComponent(HeaderComponent);
31
+ fixture.detectChanges();
32
+ const compiled = fixture.nativeElement as HTMLElement;
33
+ expect(compiled.querySelector('h1')?.textContent).toContain('ngx-ratio-image Test App');
34
+ });
35
+ });
package/projects/ratio-image-app/src/app/header.component.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { Component, EventEmitter, Output } from '@angular/core';
2
+
3
+ @Component({
4
+ selector: 'app-header',
5
+ templateUrl: './header.component.html',
6
+ styleUrls: ['./header.component.scss']
7
+ })
8
+ export class HeaderComponent {
9
+ @Output() public sidenavToggle = new EventEmitter();
10
+ public onToggleSidenav = () => {
11
+ this.sidenavToggle.emit();
12
+ };
13
+ }
package/projects/ratio-image-app/src/styles.scss CHANGED
@@ -3,8 +3,10 @@ body.dark-theme {
3
3
  color: white;
4
4
  }
5
5
 
6
+ html,
6
7
  html,
7
8
  body {
9
+ margin: 0;
8
10
  height: 100%;
9
11
  }
10
12
  body {