ngx-ratio-image 0.0.2 → 0.0.7

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.eslintrc.json

@@ -0,0 +1,38 @@
+{
+	"root": true,
+	"ignorePatterns": ["projects/**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"extends": [
+				"eslint:recommended",
+				"plugin:@typescript-eslint/recommended",
+				"plugin:@angular-eslint/recommended",
+				"plugin:@angular-eslint/template/process-inline-templates"
+			],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "",
+						"style": "kebab-case"
+					}
+				]
+			}
+		},
+		{
+			"files": ["*.html"],
+			"extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
+			"rules": {}
+		}
+	]
+}

package/.github/workflows/node.js.yml

@@ -0,0 +1,40 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+    workflow_dispatch:
+    push:
+        branches: [ "main" ]
+    pull_request:
+        branches: [ "main" ]
+
+env:
+    CI: true
+    DISPLAY: ':10.0'
+    CHROME_BIN: '/usr/bin/chromium'
+
+
+jobs:
+    build:
+
+        runs-on: ubuntu-latest
+        timeout-minutes: 5
+        strategy:
+            matrix:
+                node-version: [ 16.x, 18.x ]
+                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+        steps:
+            -   uses: actions/checkout@v3
+            -   name: Use Node.js ${{ matrix.node-version }}
+                uses: actions/setup-node@v3
+                with:
+                    node-version: ${{ matrix.node-version }}
+                    cache: 'npm'
+            -   name: Setup Chrome
+                uses: browser-actions/setup-chrome@v1.2.0
+            -   run: npm ci
+            -   run: npm run build --if-present
+            -   run: npm run test:ci

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,42 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+    release:
+        types: [ created ]
+
+env:
+    CI: true
+    DISPLAY: ':10.0'
+    CHROME_BIN: '/usr/bin/chromium'
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        timeout-minutes: 10
+        steps:
+            -   uses: actions/checkout@v3
+            -   uses: actions/setup-node@v3
+                with:
+                    node-version: 16
+            -   run: npm ci
+            -   run: npm run build
+            -   name: Setup Chrome
+                uses: browser-actions/setup-chrome@v1.2.0
+            -   run: npm run test:ci
+
+    publish-npm:
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
+            -   uses: actions/checkout@v3
+            -   uses: actions/setup-node@v3
+                with:
+                    node-version: 16
+                    registry-url: https://registry.npmjs.org/
+            -   run: npm ci
+            -   run: npm publish
+                env:
+                    NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.prettierignore

@@ -0,0 +1,3 @@
+.angular
+package.json
+dist

package/.run/lint.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="lint" type="js.build_tools.npm" singleton="false" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="lint" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

package/.run/test.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="test" type="js.build_tools.npm" singleton="false" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="test" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+	"recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "ng serve",
+			"type": "chrome",
+			"request": "launch",
+			"preLaunchTask": "npm: start",
+			"url": "http://localhost:4200/"
+		},
+		{
+			"name": "ng test",
+			"type": "chrome",
+			"request": "launch",
+			"preLaunchTask": "npm: test",
+			"url": "http://localhost:9876/debug.html"
+		}
+	]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+	// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "start",
+			"isBackground": true,
+			"problemMatcher": {
+				"owner": "typescript",
+				"pattern": "$tsc",
+				"background": {
+					"activeOnStart": true,
+					"beginsPattern": {
+						"regexp": "(.*?)"
+					},
+					"endsPattern": {
+						"regexp": "bundle generation complete"
+					}
+				}
+			}
+		},
+		{
+			"type": "npm",
+			"script": "test",
+			"isBackground": true,
+			"problemMatcher": {
+				"owner": "typescript",
+				"pattern": "$tsc",
+				"background": {
+					"activeOnStart": true,
+					"beginsPattern": {
+						"regexp": "(.*?)"
+					},
+					"endsPattern": {
+						"regexp": "bundle generation complete"
+					}
+				}
+			}
+		}
+	]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 gerd-siebert
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,105 +1,27 @@
-# ngx-ratio-image
+# RatioImage
 
-# ngx-ratio-image - an Angular lib to show an image with variable ratio in container with a fixed ratio.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
 
-- [Features](#features)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Examples](#examples)
-- [Available Parameters](#available-parameters)
-- [Demo](#demo)
-- [Contribute](#contribute)
-- [License](#license)
+## Development server
 
-## Features
+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.
 
-- can display any images in a predefined container
-- black bars are avoided with a blurring effect
-- non stable-phase with versions smaller 1.0.0, please test and feedback
-- tested with Angular 16.1, not working with Angular 15
+## Code scaffolding
 
-## Installation
+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`.
 
-**Angular 16.1 with ngx-ratio-image**
+## Build
 
-```
-npm ngx-ratio-image --save
-# Or with yarn
-yarn add ngx-ratio-image
-```
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-# Usage
+## Running unit tests
 
-### Import the module and add it to your imports section in your main AppModule:
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-```
-// File: app.module.ts
-// all your other imports...
-import { RatioImageModule } from 'ngx-ratio-image';
+## Running end-to-end tests
 
-@NgModule({
-declarations: [
-  AppComponent
-],
-imports: [
-  RatioImageModule
-],
-providers: [],
-bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
+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.
 
-```
-// File: app.component.html
-// all your HTML...
+## Further help
 
-<ngx-ratio-image
-	[src]="'https://dummyimage.com/800x600'"
-	[width]="1600"
-	[height]="900"
-></ngx-ratio-image>
-```
-
-## Examples
-
-The source code contains several examples in the folder [`projects/ratio-image-app`](projects/demo-app/src/app) in this repository to show how the output works with different images.
-
-## Available Parameters
-
-| Attribute | Type    | Default | Required | Description                           |
-|-----------|---------|---------|----------|---------------------------------------|
-| src       | string  | ''      | yes      | Allow qrdata to be an empty string    |
-| width     | number  | 0       | yes      | width of the container in pixels      |
-| height    | number  | 0       | yes      | height of the container in pixels     |
-| debug     | boolean | false   | no       | Activate a red border on console text |
-
-
-# Demo
-
-The source for the angular app is available in [`projects/ratio-image-app`](projects/ratio-image-app). Run the command
-
-```
-ng serve ratio-image-app --open
-```
-
-and open the url `http://localhost:4201/` in your browser
-
-## AOT - Ahead Of Time Compilation
-
-AOT Support is not tested, please feed back the result or make a feature request
-
-## SSR - Server Side Rendering
-
-SSR Support is not tested, please feed back the result or make a feature request
-
-## Contribute
-
-- Please open your PR against the main branch.
-- Make sure your editor uses **prettier** to minimize commited code changes.
-
-## License
-
-MIT License
-
-Copyright (c) 2023 - present [Gerd Siebert(gerd.siebert@gmail.com)](mailto:gerd.siebert@gmail.com)
+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/angular.json

@@ -0,0 +1,144 @@
+{
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"cli": {
+		"packageManager": "npm",
+		"schematicCollections": ["@angular-eslint/schematics"]
+	},
+	"newProjectRoot": "projects",
+	"projects": {
+		"ratioImageApp": {
+			"projectType": "application",
+			"schematics": {
+				"@schematics/angular:component": {
+					"style": "scss"
+				}
+			},
+			"root": "projects/ratio-image-app",
+			"sourceRoot": "projects/ratio-image-app/src",
+			"prefix": "app",
+			"architect": {
+				"build": {
+					"builder": "@angular-devkit/build-angular:browser",
+					"options": {
+						"outputPath": "dist/ratio-image-app",
+						"index": "projects/ratio-image-app/src/index.html",
+						"main": "projects/ratio-image-app/src/main.ts",
+						"polyfills": ["zone.js"],
+						"tsConfig": "projects/ratio-image-app/tsconfig.app.json",
+						"inlineStyleLanguage": "scss",
+						"assets": ["projects/ratio-image-app/src/favicon.ico", "projects/ratio-image-app/src/assets"],
+						"styles": [
+							"@angular/material/prebuilt-themes/pink-bluegrey.css",
+							"projects/ratio-image-app/src/styles.scss"
+						],
+						"scripts": []
+					},
+					"configurations": {
+						"production": {
+							"budgets": [
+								{
+									"type": "initial",
+									"maximumWarning": "500kb",
+									"maximumError": "1mb"
+								},
+								{
+									"type": "anyComponentStyle",
+									"maximumWarning": "2kb",
+									"maximumError": "4kb"
+								}
+							],
+							"outputHashing": "all"
+						},
+						"development": {
+							"buildOptimizer": false,
+							"optimization": false,
+							"vendorChunk": true,
+							"extractLicenses": false,
+							"sourceMap": true,
+							"namedChunks": true
+						}
+					},
+					"defaultConfiguration": "production"
+				},
+				"serve": {
+					"builder": "@angular-devkit/build-angular:dev-server",
+					"configurations": {
+						"production": {
+							"browserTarget": "ratioImageApp:build:production"
+						},
+						"development": {
+							"browserTarget": "ratioImageApp:build:development"
+						}
+					},
+					"options": {
+						"port": 4201
+					},
+					"defaultConfiguration": "development"
+				},
+				"extract-i18n": {
+					"builder": "@angular-devkit/build-angular:extract-i18n",
+					"options": {
+						"browserTarget": "ratioImageApp:build"
+					}
+				},
+				"test": {
+					"builder": "@angular-devkit/build-angular:karma",
+					"options": {
+						"polyfills": ["zone.js", "zone.js/testing"],
+						"tsConfig": "projects/ratio-image-app/tsconfig.spec.json",
+						"inlineStyleLanguage": "scss",
+						"assets": ["projects/ratio-image-app/src/favicon.ico", "projects/ratio-image-app/src/assets"],
+						"styles": [
+							"@angular/material/prebuilt-themes/pink-bluegrey.css",
+							"projects/ratio-image-app/src/styles.scss"
+						],
+						"scripts": []
+					}
+				},
+				"lint": {
+					"builder": "@angular-eslint/builder:lint",
+					"options": {
+						"lintFilePatterns": ["projects/ratio-image-app/**/*.ts", "projects/ratio-image-app/**/*.html"]
+					}
+				}
+			}
+		},
+		"ratioImage": {
+			"projectType": "library",
+			"root": "projects/ngx-ratio-image",
+			"sourceRoot": "projects/ngx-ratio-image/src",
+			"prefix": "lib",
+			"architect": {
+				"build": {
+					"builder": "@angular-devkit/build-angular:ng-packagr",
+					"options": {
+						"project": "projects/ngx-ratio-image/ng-package.json"
+					},
+					"configurations": {
+						"production": {
+							"tsConfig": "projects/ngx-ratio-image/tsconfig.lib.prod.json"
+						},
+						"development": {
+							"tsConfig": "projects/ngx-ratio-image/tsconfig.lib.json"
+						}
+					},
+					"defaultConfiguration": "production"
+				},
+				"test": {
+					"builder": "@angular-devkit/build-angular:karma",
+					"options": {
+						"tsConfig": "projects/ngx-ratio-image/tsconfig.spec.json",
+						"polyfills": ["zone.js", "zone.js/testing"]
+					}
+				},
+				"lint": {
+					"builder": "@angular-eslint/builder:lint",
+					"options": {
+						"lintFilePatterns": ["projects/ngx-ratio-image/**/*.ts", "projects/ngx-ratio-image/**/*.html"]
+					}
+				}
+			}
+		}
+	}
+}

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+	"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+	"dest": "../../dist",
+	"lib": {
+		"entryFile": "src/public_api.ts"
+	},
+	"allowedNonPeerDependencies": ["@angular/common"]
+}

package/package.json

@@ -1,38 +1,88 @@
 {
   "name": "ngx-ratio-image",
-  "version": "0.0.2",
+  "version": "0.0.7",
   "author": {
     "name": "Gerd Siebert"
   },
-  "description": "Asn Angular lib to show an image with variable ratio in container with a fixed ratio.",
+  "contributors": [],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gerd-siebert/ngx-ratio-image"
+  },
+  "keywords": [
+    "Image",
+    "Scaling",
+    "Ratio",
+    "Angular 16"
+  ],
   "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": "^16.1.0",
-    "@angular/core": "^16.1.0"
+  "main": "dist/ratio-image/esm2022/ratio-image.mjs",
+  "scripts": {
+    "ng": "ng",
+    "prettier": "prettier --write \"**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
+    "start": "ng serve",
+    "build": "npm run build:lib && npm run build:lib",
+    "build:lib": "ng build --project ratioImage --configuration production ",
+    "build:app": "ng build --project ratioImageApp --configuration production ",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "test:ci": "ng test --code-coverage --no-watch --browsers=ChromeHeadless --source-map=false",
+    "lint": "ng lint",
+    "packagr": "ng-packagr -p ng-package.json",
+    "publish": "rm -rf node_modules && npm install && npm run build && cd dist/ratio-image && npm publish && cd ../../"
   },
+  "private": false,
   "dependencies": {
-    "tslib": "^2.3.0"
+    "@angular/animations": "^16.1.2",
+    "@angular/cdk": "^16.1.1",
+    "@angular/common": "^16.1.2",
+    "@angular/compiler": "^16.1.2",
+    "@angular/core": "^16.1.2",
+    "@angular/forms": "^16.1.2",
+    "@angular/material": "^16.1.1",
+    "@angular/platform-browser": "^16.1.2",
+    "@angular/platform-browser-dynamic": "^16.1.2",
+    "@angular/router": "^16.1.2",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.13.0"
   },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gerd-siebert/ngx-ratio-image.git"
-  },
-  "bugs": {
-    "url": "https://github.com/gerd-siebert/ngx-ratio-image/issues"
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.1.0",
+    "@angular-eslint/builder": "16.0.3",
+    "@angular-eslint/eslint-plugin": "16.0.3",
+    "@angular-eslint/eslint-plugin-template": "16.0.3",
+    "@angular-eslint/schematics": "16.0.3",
+    "@angular-eslint/template-parser": "16.0.3",
+    "@angular/cli": "~16.1.0",
+    "@angular/compiler-cli": "^16.1.2",
+    "@schuchard/prettier": "5.1.0",
+    "@types/jasmine": "~4.3.0",
+    "@typescript-eslint/eslint-plugin": "5.59.7",
+    "@typescript-eslint/parser": "5.59.7",
+    "eslint": "^8.40.0",
+    "husky": "latest",
+    "jasmine-core": "~4.6.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "lint-staged": "latest",
+    "ng-packagr": "^16.1.0",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.1",
+    "tslint-config-prettier": "latest",
+    "typescript": "~5.1.3"
   },
-  "homepage": "https://github.com/gerd-siebert/ngx-ratio-image#readme",
-  "module": "fesm2022/ngx-ratio-image.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/ngx-ratio-image.mjs",
-      "esm": "./esm2022/ngx-ratio-image.mjs",
-      "default": "./fesm2022/ngx-ratio-image.mjs"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
     }
+  },
+  "lint-staged": {
+    "*.{js,json,css,scss,less,md,ts,html,component.html}": [
+      "prettier --write"
+    ]
   }
-}
+}

package/prettier.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+	printWidth: 120,
+	tabWidth: 4,
+	useTabs: true,
+	semi: true,
+	singleQuote: true,
+	trailingComma: 'none',
+	bracketSpacing: true,
+	jsxBracketSameLine: false,
+	arrowParens: 'avoid',
+	rangeStart: 0,
+	rangeEnd: Infinity,
+	requirePragma: false,
+	insertPragma: false,
+	proseWrap: 'preserve'
+};