template, styling and component for v1.0.0

README.md

@@ -0,0 +1,100 @@
+# ngx-dotpattern
+
+`@omnedia/ngx-dotpattern` is an Angular library that provides a customizable dot pattern background effect for your Angular components. The component creates a pattern of dots across the background, with the color and styling easily configurable, making it an eye-catching visual element for your application.
+
+## Features
+
+- Dot pattern background with customizable color.
+- Lightweight and easy to integrate as a standalone component.
+- Suitable for adding decorative backgrounds to your Angular components.
+
+## Installation
+
+Install the library using npm:
+
+```bash
+npm install @omnedia/ngx-dotpattern
+```
+
+## Usage
+
+Import the `NgxDotpatternComponent` in your Angular module or component:
+
+```typescript
+import { NgxDotpatternComponent } from '@omnedia/ngx-dotpattern';
+
+@Component({
+  ...
+  imports: [
+    ...
+    NgxDotpatternComponent,
+  ],
+  ...
+})
+```
+
+Use the component in your template:
+
+```html
+<om-dotpattern
+  [patternColor]="'#ffcc00'"
+  styleClass="custom-pattern-class"
+>
+  <div>Your content here</div>
+</om-dotpattern>
+```
+
+## API
+
+```html
+<om-dotpattern
+  [patternColor]="patternColor"
+  styleClass="your-custom-class"
+>
+  <ng-content></ng-content>
+</om-dotpattern>
+```
+
+- patternColor (optional): The color of the dot pattern. Accepts any valid CSS color value (e.g., '#ffcc00', rgba(255, 204, 0, 0.8)).
+- styleClass (optional): A custom CSS class to apply to the component's wrapper element.
+
+## Example
+
+```html
+<om-dotpattern
+  [patternColor]="'#00ffcc'"
+  styleClass="dotpattern-background"
+>
+  <div class="content">This is a dot pattern background effect</div>
+</om-dotpattern>
+```
+
+This will create a dot pattern background with cyan-colored dots across the background of the component.
+
+## Styling
+
+To customize the appearance of the dot pattern or the container, use the styleClass input to apply your own CSS classes.
+
+```css
+.dotpattern-background {
+  background-color: #000;
+  height: 100vh;
+  position: relative;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  color: white;
+  text-align: center;
+  padding-top: 50px;
+}
+```
+
+## Contributing
+
+Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
+
+## License
+
+This project is licensed under the MIT License.

ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-dotpattern",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@omnedia/ngx-dotpattern",
+  "description": "A simple component library to create a container with a pattern background.",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "npm",
+    "background",
+    "dots",
+    "pattern"
+  ],
+  "repository": {
+    "url": "https://github.com/omnedia/ngx-dotpattern"
+  },
+  "author": "Markus Block ([email protected])",
+  "license": "MIT"
+}

src/lib/ngx-dotpattern.component.html

@@ -0,0 +1,6 @@
+<div class="om-dotpattern" [ngStyle]="style" [ngClass]="styleClass">
+    <div class="om-dotpattern-background">
+        <svg aria-hidden="true"><defs><pattern id=":r4i:" width="16" height="16" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" x="0" y="0"><circle id="pattern-circle" cx="1" cy="1" r="1"></circle></pattern></defs><rect width="100%" height="100%" stroke-width="0" fill="url(#:r4i:)"></rect></svg>
+    </div>
+    <ng-content></ng-content>
+</div>

src/lib/ngx-dotpattern.component.scss

@@ -0,0 +1,24 @@
+.om-dotpattern {
+    position: relative;
+    overflow: hidden;
+
+    --om-dotpattern-color: hsla(0, 0%, 64%, .8);
+
+    .om-dotpattern-background {
+        position: absolute;
+        pointer-events: none;
+        height: 100%;
+        width: 100%;
+
+        svg {
+            pointer-events: none;
+            inset: 0;
+            height: 100%;
+            width: 100%;
+            fill: var(--om-dotpattern-color);
+
+            -webkit-mask-image: radial-gradient(300px circle at center, #fff, transparent);
+            mask-image: radial-gradient(300px circle at center, #fff, transparent);
+        }
+    }
+}

src/lib/ngx-dotpattern.component.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'om-dotpattern',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: "./ngx-dotpattern.component.html",
+  styleUrl: "./ngx-dotpattern.component.scss",
+})
+export class NgxDotpatternComponent {
+  @Input("styleClass")
+  styleClass?: string;
+
+  @Input("patternColor")
+  set meteorRotation(color: string) {
+    this.style["--om-dotpattern-color"] = color;
+  }
+
+  style: any = {};
+}

src/lib/ngx-dotpattern.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NgxDotpatternService {
+
+  constructor() { }
+}

src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ngx-dotpattern
+ */
+
+export * from './lib/ngx-dotpattern.component';

tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}