Created template, component and styling for v1.0.0

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Omnedia
+
+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.

README.md

@@ -0,0 +1,113 @@
+# ngx-aurora
+
+`@omnedia/ngx-aurora` is an Angular library that creates a mesmerizing aurora background effect. This component provides an animated, gradient-based light effect with customizable inversion and two different animation styles. It's a perfect addition for enhancing the visual aesthetics of your Angular application.
+
+## Features
+
+- Animated aurora light effect with customizable inversion.
+- Supports two distinct animation styles.
+- Easy to integrate as a standalone component.
+
+## Installation
+
+Install the library using npm:
+
+```bash
+npm install @omnedia/ngx-aurora
+```
+
+## Usage
+
+Import the `NgxAuroraComponent` in your Angular module or component:
+
+```typescript
+import { NgxAuroraComponent } from '@omnedia/ngx-aurora';
+
+@Component({
+  ...
+  imports: [
+    ...
+    NgxAuroraComponent,
+  ],
+  ...
+})
+```
+
+Use the component in your template:
+
+```html
+<om-aurora [invert]="true" [versionTwo]="false" styleClass="custom-aurora">
+  <h1>Your Content Here</h1>
+</om-aurora>
+```
+
+## How It Works
+
+- Inversion and Animation Versions: The aurora effect can be inverted by using the invert input, and a different animation style can be applied using the versionTwo input.
+- Global and Custom Styling: The .om-aurora container can be styled globally or with a custom styleClass. The component automatically applies the aurora background effect to its container, while maintaining the flexibility to style the container as needed.
+
+## API
+
+```html
+<om-aurora
+  [invert]="invert"
+  [versionTwo]="versionTwo"
+  styleClass="your-custom-class"
+>
+  <ng-content></ng-content>
+</om-aurora>
+```
+
+- `invert` (optional): A boolean to toggle the inversion of the aurora effect. When true, the aurora colors are inverted. Defaults to false.
+- `versionTwo` (optional): A boolean to toggle the second version of the aurora animation. When true, a different set of gradients is applied. Defaults to false.
+- `styleClass` (optional): A custom CSS class to apply to the .om-aurora container for additional styling.
+
+## Example
+
+```html
+<om-aurora [invert]="false" [versionTwo]="true" styleClass="custom-aurora-style">
+  <div class="inner-content">
+    <h2>Welcome to the Aurora Experience</h2>
+  </div>
+</om-aurora>
+```
+
+This will create an aurora background with the second version of the animation and no inversion.
+
+## Styling
+`.om-aurora`
+
+- This is the main container for the aurora effect. You can apply global or custom styles using the styleClass input. The .om-aurora class manages the overall background, ensuring that the effect covers the entire container.
+
+### Example of Global and Custom Styling
+
+In this example, the aurora container is customized with additional padding and background color:
+
+```html
+<om-aurora styleClass="custom-aurora-background">
+    <div class="inner-content">
+        <h2>Aurora Background with Custom Styling</h2>
+    </div>
+</om-aurora>
+```
+
+```css
+.custom-aurora-background {
+  background-color: #1e1e1e;
+  padding: 2rem;
+  border-radius: 10px;
+}
+
+.inner-content {
+  text-align: center;
+  color: white;
+}
+```
+
+## 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-aurora",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@omnedia/ngx-aurora",
+  "description": "A simple component library to create a container with an aurora 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",
+    "animation",
+    "aurora",
+    "lights"
+  ],
+  "repository": {
+    "url": "https://github.com/omnedia/ngx-aurora"
+  },
+  "author": "Markus Block ([email protected])",
+  "license": "MIT"
+}

src/lib/ngx-aurora.component.html

@@ -0,0 +1,6 @@
+<div class="om-aurora" [ngStyle]="style" [ngClass]="styleClass">
+    <div class="om-aurora-background">
+        <div class="om-aurora-lights" [class.version-two]="versionTwo"></div>
+    </div>
+    <ng-content></ng-content>
+</div>

src/lib/ngx-aurora.component.scss

@@ -0,0 +1,90 @@
+.om-aurora {
+  --om-aurora-invert: invert(0);
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .om-aurora-background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    inset: 0;
+    pointer-events: none;
+
+    .om-aurora-lights {
+      pointer-events: none;
+      position: absolute;
+      background-image: var(--dark-gradient), var(--aurora);
+      will-change: transform;
+      opacity: 0.5;
+      inset: -10px;
+
+      filter: blur(10px) var(--om-aurora-invert);
+
+      -webkit-mask-image: radial-gradient(
+        ellipse at 100% 0,
+        #000 10%,
+        transparent 70%
+      );
+      mask-image: radial-gradient(ellipse at 100% 0, #000 10%, transparent 70%);
+
+      background-size: 300%, 200%;
+      background-position: 50% 50%, 50% 50%;
+
+      --white-gradient: repeating-linear-gradient(
+        100deg,
+        #fff 0%,
+        #fff 7%,
+        transparent 10%,
+        transparent 12%,
+        #fff 16%
+      );
+
+      --dark-gradient: repeating-linear-gradient(
+        100deg,
+        #000 0%,
+        #000 7%,
+        transparent 10%,
+        transparent 12%,
+        #000 16%
+      );
+
+      --aurora: repeating-linear-gradient(
+        100deg,
+        #3b82f6 10%,
+        #a5b4fc 15%,
+        #93c5fd 20%,
+        #ddd6fe 25%,
+        #60a5fa 30%
+      );
+
+      &::after {
+        content: "";
+        position: absolute;
+        background-image: var(--dark-gradient), var(--aurora);
+        background-size: 200%, 100%;
+        background-attachment: fixed;
+        mix-blend-mode: difference;
+        inset: 0;
+        animation: om-aurora 60s linear infinite;
+      }
+
+      &.version-two::after {
+        background-image: var(--white-gradient), var(--aurora);
+      }
+    }
+  }
+}
+
+@keyframes om-aurora {
+  0% {
+    content: "";
+    background-position: 50% 50%, 50% 50%;
+  }
+  100% {
+    content: "";
+    background-position: 350% 50%, 350% 50%;
+  }
+}

src/lib/ngx-aurora.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'om-aurora',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: "./ngx-aurora.component.html",
+  styleUrl: "./ngx-aurora.component.scss",
+})
+export class NgxAuroraComponent {
+  @Input("styleClass")
+  styleClass?: string;
+
+  @Input("invert")
+  set auroraInvert(invert: boolean) {
+    if (invert) {
+      this.style['--om-aurora-invert'] = 'invert(1)';
+      return;
+    }
+
+    this.style['--om-aurora-invert'] = 'invert(0)';
+  }
+
+  @Input("versionTwo")
+  versionTwo = false;
+
+  style: any = {}
+}

src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ngx-aurora
+ */
+
+export * from './lib/ngx-aurora.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"
+  ]
+}