ng-glass 0.0.2

package/README.md

@@ -0,0 +1,48 @@
+# ng-glass
+
+`ng-glass` is a lightweight Angular library for creating beautiful glassmorphism effects in your applications. It provides a directive and a component to easily apply the glass effect to any element.
+
+## Installation
+
+```bash
+npm install ng-glass
+```
+
+## Usage
+
+### `ngGlass` Directive
+
+The `ngGlass` directive can be applied to any element to give it the glassmorphism effect. It provides several inputs to customize the effect:
+
+- `blur`: The amount of blur to apply to the background. (default: 10)
+- `opacity`: The opacity of the glass effect. (default: 0.15)
+- `borderRadius`: The border radius of the element. (default: 10)
+- `shadow`: The box shadow of the element. (default: '0 4px 30px rgba(0, 0, 0, 0.1)')
+- `gradient`: The background gradient of the element. (default: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))')
+
+**Example:**
+
+```html
+<div ngGlass [blur]="20" [borderRadius]="15"></div>
+```
+
+### `ng-glass-card` Component
+
+The `ng-glass-card` component is a ready-to-use card with the glassmorphism effect. It uses the `ngGlass` directive internally and provides a simple way to create consistent and beautiful UIs. It supports content projection for the header, body, and footer of the card.
+
+**Example:**
+
+```html
+<ng-glass-card [borderRadius]="20">
+  <div card-header>...</div>
+  <div card-body>...</div>
+  <div card-footer>...</div>
+</ng-glass-card>
+```
+
+## Benefits
+
+- Easy to use
+- Highly customizable
+- Lightweight
+- Modern and beautiful design

package/ng-package.json

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

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ng-glass",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/glass-card/glass-card.css

@@ -0,0 +1,13 @@
+.card-header {
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card-body {
+  padding: 20px 0;
+}
+
+.card-footer {
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}

package/src/lib/glass-card/glass-card.html

@@ -0,0 +1,11 @@
+<div ngGlass [blur]="blur()" [opacity]="opacity()" [borderRadius]="borderRadius()" [shadow]="shadow()" [gradient]="gradient()">
+  <div class="card-header">
+    <ng-content select="[card-header]"></ng-content>
+  </div>
+  <div class="card-body">
+    <ng-content select="[card-body]"></ng-content>
+  </div>
+  <div class="card-footer">
+    <ng-content select="[card-footer]"></ng-content>
+  </div>
+</div>

package/src/lib/glass-card/glass-card.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GlassCard } from './glass-card';
+
+describe('GlassCard', () => {
+  let component: GlassCard;
+  let fixture: ComponentFixture<GlassCard>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GlassCard],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GlassCard);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/glass-card/glass-card.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { GlassDirective } from '../glass.directive';
+
+@Component({
+  selector: 'ng-glass-card',
+  templateUrl: './glass-card.html',
+  styleUrls: ['./glass-card.css'],
+  standalone: true,
+  imports: [GlassDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GlassCardComponent {
+  blur = input<number>(10);
+  opacity = input<number>(0.15);
+  borderRadius = input.required<number>();
+  shadow = input<string>('0 4px 30px rgba(0, 0, 0, 0.1)');
+  gradient = input<string>('linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))');
+}

package/src/lib/glass.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, ElementRef, Renderer2, input, effect } from '@angular/core';
+
+@Directive({
+  selector: '[ngGlass]',
+  standalone: true
+})
+export class GlassDirective {
+  private el: HTMLElement;
+
+  blur = input(10);
+  opacity = input(0.15);
+  borderRadius = input(10);
+  shadow = input('0 4px 30px rgba(0, 0, 0, 0.1)');
+  gradient = input('linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))');
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+    this.el = this.elementRef.nativeElement;
+    
+    effect(() => {
+      this.renderer.setStyle(this.el, 'backdrop-filter', `blur(${this.blur()}px)`);
+      this.renderer.setStyle(this.el, '-webkit-backdrop-filter', `blur(${this.blur()}px)`);
+      this.renderer.setStyle(this.el, 'background', this.gradient());
+      this.renderer.setStyle(this.el, 'border-radius', `${this.borderRadius()}px`);
+      this.renderer.setStyle(this.el, 'box-shadow', this.shadow());
+      this.renderer.setStyle(this.el, 'border', '1px solid rgba(255, 255, 255, 0.18)');
+    });
+  }
+}

package/src/lib/ng-glass.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgGlass } from './ng-glass';
+
+describe('NgGlass', () => {
+  let component: NgGlass;
+  let fixture: ComponentFixture<NgGlass>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NgGlass],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NgGlass);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/ng-glass.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-ng-glass',
+  imports: [],
+  template: ` <p>ng-glass works!</p> `,
+  styles: ``,
+})
+export class NgGlass {}

package/src/public-api.ts

@@ -0,0 +1,3 @@
+
+export * from './lib/glass.directive';
+export * from './lib/glass-card/glass-card';

package/tsconfig.lib.json

@@ -0,0 +1,13 @@
+/* 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,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/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"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* 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": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}