ngx-glassy-effect 0.0.22

package/README.md

@@ -0,0 +1,3 @@
+# NgxGlassyEffect
+
+Hello world

package/fesm2022/ngx-glassy-effect.mjs

@@ -0,0 +1,241 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DestroyRef, PLATFORM_ID, input, signal, effect, Directive } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+class GlassyEffect {
+    el = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    bezel = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bezel" }] : /* istanbul ignore next */ []));
+    scale = input(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+    blur = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blur" }] : /* istanbul ignore next */ []));
+    profile = input('squircle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "profile" }] : /* istanbul ignore next */ []));
+    width = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    filterId = `glassy-effect-${Math.random().toString(36).substring(2, 9)}`;
+    resizeObserver;
+    sharedCanvas = this.isBrowser ? document.createElement('canvas') : null;
+    borderLayer = null;
+    animationFrameId = null;
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        this.setupResizeObserver();
+        effect(() => {
+            const w = Math.floor(this.width());
+            const h = Math.floor(this.height());
+            const bezel = this.bezel();
+            const scale = this.scale();
+            const blur = this.blur();
+            const profile = this.profile();
+            if (w === 0 || h === 0)
+                return;
+            const dataUrl = this.generateDisplacementMap(w, h, bezel, profile);
+            this.syncSvgFilter(dataUrl, w, h, scale, blur);
+            const nativeEl = this.el.nativeElement;
+            nativeEl.style.backdropFilter = `url(#${this.filterId})`;
+            this.applyAppleGlassLighting();
+        });
+        this.destroyRef.onDestroy(() => {
+            if (this.resizeObserver)
+                this.resizeObserver.disconnect();
+            if (this.animationFrameId)
+                cancelAnimationFrame(this.animationFrameId);
+            const svgEl = document.getElementById(`svg-container-${this.filterId}`);
+            if (svgEl)
+                svgEl.remove();
+        });
+    }
+    applyAppleGlassLighting() {
+        const nativeEl = this.el.nativeElement;
+        // Ensure containment context for the absolute border layer
+        const computedStyle = window.getComputedStyle(nativeEl);
+        if (computedStyle.position === 'static') {
+            nativeEl.style.position = 'relative';
+        }
+        nativeEl.style.border = 'none';
+        nativeEl.style.boxShadow = `
+      0 4px 20px -2px rgba(0, 0, 0, 0.4),
+      0 1px 3px 0 rgba(0, 0, 0, 0.2)
+    `;
+        if (!this.borderLayer) {
+            this.borderLayer = document.createElement('div');
+            this.borderLayer.style.position = 'absolute';
+            this.borderLayer.style.inset = '0px';
+            this.borderLayer.style.pointerEvents = 'none';
+            this.borderLayer.style.zIndex = '1';
+            this.borderLayer.style.webkitMask = 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)';
+            this.borderLayer.style.webkitMaskComposite = 'xor';
+            this.borderLayer.style.maskComposite = 'exclude';
+            this.borderLayer.style.padding = '1px';
+            nativeEl.appendChild(this.borderLayer);
+        }
+        this.borderLayer.style.borderRadius = computedStyle.borderRadius || 'inherit';
+        this.borderLayer.style.opacity = '0.85';
+        this.borderLayer.style.background = `
+      linear-gradient(135deg,
+        rgba(255, 255, 255, 0.45) 0%,
+        rgba(255, 255, 255, 0.05) 45%,
+        rgba(0, 0, 0, 0) 60%
+      ),
+      linear-gradient(to bottom,
+        rgba(255, 255, 255, 0.1) 0%,
+        rgba(0, 0, 0, 0.35) 100%
+      )
+    `;
+    }
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.animationFrameId)
+                cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = requestAnimationFrame(() => {
+                const rect = this.el.nativeElement.getBoundingClientRect();
+                this.width.set(rect.width);
+                this.height.set(rect.height);
+            });
+        });
+        this.resizeObserver.observe(this.el.nativeElement);
+    }
+    generateDisplacementMap(w, h, bezel, profile) {
+        const canvas = this.sharedCanvas;
+        if (!canvas)
+            return '';
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return '';
+        const imgData = ctx.createImageData(w, h);
+        const data = imgData.data;
+        for (let y = 0; y < h; y++) {
+            for (let x = 0; x < w; x++) {
+                const distL = x;
+                const distR = w - x;
+                const distT = y;
+                const distB = h - y;
+                let minDist = Math.min(distL, distR, distT, distB);
+                let nx = 0;
+                let ny = 0;
+                if (minDist < bezel) {
+                    if (minDist === distL)
+                        nx = 1;
+                    else if (minDist === distR)
+                        nx = -1;
+                    else if (minDist === distT)
+                        ny = 1;
+                    else if (minDist === distB)
+                        ny = -1;
+                    if (x < bezel && y < bezel) {
+                        const dist = Math.sqrt(Math.pow(bezel - x, 2) + Math.pow(bezel - y, 2));
+                        minDist = bezel - dist;
+                        if (dist > 0) {
+                            nx = (bezel - x) / dist;
+                            ny = (bezel - y) / dist;
+                        }
+                    }
+                    else if (x > w - bezel && y < bezel) {
+                        const dist = Math.sqrt(Math.pow(x - (w - bezel), 2) + Math.pow(bezel - y, 2));
+                        minDist = bezel - dist;
+                        if (dist > 0) {
+                            nx = -(x - (w - bezel)) / dist;
+                            ny = (bezel - y) / dist;
+                        }
+                    }
+                    else if (x < bezel && y > h - bezel) {
+                        const dist = Math.sqrt(Math.pow(bezel - x, 2) + Math.pow(y - (h - bezel), 2));
+                        minDist = bezel - dist;
+                        if (dist > 0) {
+                            nx = (bezel - x) / dist;
+                            ny = -(y - (h - bezel)) / dist;
+                        }
+                    }
+                    else if (x > w - bezel && y > h - bezel) {
+                        const dist = Math.sqrt(Math.pow(x - (w - bezel), 2) + Math.pow(y - (h - bezel), 2));
+                        minDist = bezel - dist;
+                        if (dist > 0) {
+                            nx = -(x - (w - bezel)) / dist;
+                            ny = -(y - (h - bezel)) / dist;
+                        }
+                    }
+                }
+                let t = Math.max(0, Math.min(1, minDist / bezel));
+                if (minDist < 0)
+                    t = 0;
+                let slope = 0;
+                const om_t = 1 - t;
+                if (profile === 'circle') {
+                    const heightVal = Math.sqrt(1 - om_t * om_t);
+                    slope = heightVal > 0 ? om_t / heightVal : 0;
+                }
+                else {
+                    const heightVal = Math.pow(1 - Math.pow(om_t, 4), 0.25);
+                    slope = heightVal > 0 ? Math.pow(om_t, 3) / Math.pow(heightVal, 3) : 0;
+                }
+                const magnitudeClamp = Math.min(1, slope * 0.45);
+                const rVal = Math.floor(128 + nx * magnitudeClamp * 127);
+                const gVal = Math.floor(128 + ny * magnitudeClamp * 127);
+                const idx = (y * w + x) * 4;
+                data[idx] = rVal;
+                data[idx + 1] = gVal;
+                data[idx + 2] = 128;
+                data[idx + 3] = 255;
+            }
+        }
+        ctx.putImageData(imgData, 0, 0);
+        return canvas.toDataURL();
+    }
+    syncSvgFilter(dataUrl, w, h, scale, blur) {
+        let container = document.getElementById(`svg-container-${this.filterId}`);
+        if (!container) {
+            container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            container.id = `svg-container-${this.filterId}`;
+            container.setAttribute('style', 'position: absolute; width: 0; height: 0; pointer-events: none;');
+            document.body.appendChild(container);
+        }
+        container.innerHTML = `
+      <filter id="${this.filterId}"
+              x="-10%" y="-10%" width="120%" height="120%"
+              primitiveUnits="userSpaceOnUse"
+              color-interpolation-filters="sRGB">
+
+        <feImage href="${dataUrl}" x="0" y="0" width="${w}" height="${h}" preserveAspectRatio="none" result="glass_map" />
+        <feGaussianBlur in="SourceGraphic" stdDeviation="${blur}" result="blurred_substrate" />
+
+        <feDisplacementMap
+          in="blurred_substrate"
+          in2="glass_map"
+          scale="${scale}"
+          xChannelSelector="R"
+          yChannelSelector="G"
+        />
+      </filter>
+    `;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GlassyEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: GlassyEffect, isStandalone: true, selector: "[ngxGlassyEffect]", inputs: { bezel: { classPropertyName: "bezel", publicName: "bezel", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GlassyEffect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxGlassyEffect]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { bezel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bezel", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }] } });
+
+/*
+ * Public API Surface of ngx-glassy-effect
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GlassyEffect };
+//# sourceMappingURL=ngx-glassy-effect.mjs.map

package/fesm2022/ngx-glassy-effect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-glassy-effect.mjs","sources":["../../../projects/ngx-glassy-effect/src/lib/glassy-effect.ts","../../../projects/ngx-glassy-effect/src/public-api.ts","../../../projects/ngx-glassy-effect/src/ngx-glassy-effect.ts"],"sourcesContent":["import { DestroyRef, Directive, ElementRef, inject, input, signal, effect, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Directive({\n  selector: '[ngxGlassyEffect]',\n  standalone: true\n})\nexport class GlassyEffect {\n  private el = inject(ElementRef<HTMLElement>);\n  private destroyRef = inject(DestroyRef);\n  private platformId = inject(PLATFORM_ID);\n  private isBrowser = isPlatformBrowser(this.platformId);\n\n  bezel = input<number>(10);\n  scale = input<number>(50);\n  blur = input<number>(1);\n  profile = input<'circle' | 'squircle'>('squircle');\n\n  private width = signal<number>(0);\n  private height = signal<number>(0);\n\n  private filterId = `glassy-effect-${Math.random().toString(36).substring(2, 9)}`;\n  private resizeObserver!: ResizeObserver;\n\n  private sharedCanvas = this.isBrowser ? document.createElement('canvas') : null;\n  private borderLayer: HTMLDivElement | null = null;\n  private animationFrameId: number | null = null;\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    this.setupResizeObserver();\n\n    effect(() => {\n      const w = Math.floor(this.width());\n      const h = Math.floor(this.height());\n      const bezel = this.bezel();\n      const scale = this.scale();\n      const blur = this.blur();\n      const profile = this.profile();\n\n      if (w === 0 || h === 0) return;\n\n      const dataUrl = this.generateDisplacementMap(w, h, bezel, profile);\n      this.syncSvgFilter(dataUrl, w, h, scale, blur);\n\n      const nativeEl = this.el.nativeElement;\n      nativeEl.style.backdropFilter = `url(#${this.filterId})`;\n      this.applyAppleGlassLighting();\n    });\n\n    this.destroyRef.onDestroy(() => {\n      if (this.resizeObserver) this.resizeObserver.disconnect();\n      if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);\n\n      const svgEl = document.getElementById(`svg-container-${this.filterId}`);\n      if (svgEl) svgEl.remove();\n    });\n  }\n\n  private applyAppleGlassLighting(): void {\n    const nativeEl = this.el.nativeElement;\n\n    // Ensure containment context for the absolute border layer\n    const computedStyle = window.getComputedStyle(nativeEl);\n    if (computedStyle.position === 'static') {\n      nativeEl.style.position = 'relative';\n    }\n\n    nativeEl.style.border = 'none';\n    nativeEl.style.boxShadow = `\n      0 4px 20px -2px rgba(0, 0, 0, 0.4),\n      0 1px 3px 0 rgba(0, 0, 0, 0.2)\n    `;\n\n    if (!this.borderLayer) {\n      this.borderLayer = document.createElement('div');\n      this.borderLayer.style.position = 'absolute';\n      this.borderLayer.style.inset = '0px';\n      this.borderLayer.style.pointerEvents = 'none';\n      this.borderLayer.style.zIndex = '1';\n      this.borderLayer.style.webkitMask = 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)';\n      this.borderLayer.style.webkitMaskComposite = 'xor';\n      this.borderLayer.style.maskComposite = 'exclude';\n      this.borderLayer.style.padding = '1px';\n      nativeEl.appendChild(this.borderLayer);\n    }\n\n    this.borderLayer.style.borderRadius = computedStyle.borderRadius || 'inherit';\n    this.borderLayer.style.opacity = '0.85';\n    this.borderLayer.style.background = `\n      linear-gradient(135deg,\n        rgba(255, 255, 255, 0.45) 0%,\n        rgba(255, 255, 255, 0.05) 45%,\n        rgba(0, 0, 0, 0) 60%\n      ),\n      linear-gradient(to bottom,\n        rgba(255, 255, 255, 0.1) 0%,\n        rgba(0, 0, 0, 0.35) 100%\n      )\n    `;\n  }\n\n  private setupResizeObserver(): void {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);\n\n      this.animationFrameId = requestAnimationFrame(() => {\n        const rect = this.el.nativeElement.getBoundingClientRect();\n        this.width.set(rect.width);\n        this.height.set(rect.height);\n      });\n    });\n    this.resizeObserver.observe(this.el.nativeElement);\n  }\n\n  private generateDisplacementMap(\n    w: number,\n    h: number,\n    bezel: number,\n    profile: 'circle' | 'squircle'\n  ): string {\n    const canvas = this.sharedCanvas;\n    if (!canvas) return '';\n\n    canvas.width = w;\n    canvas.height = h;\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return '';\n\n    const imgData = ctx.createImageData(w, h);\n    const data = imgData.data;\n\n    for (let y = 0; y < h; y++) {\n      for (let x = 0; x < w; x++) {\n        const distL = x;\n        const distR = w - x;\n        const distT = y;\n        const distB = h - y;\n\n        let minDist = Math.min(distL, distR, distT, distB);\n        let nx = 0;\n        let ny = 0;\n\n        if (minDist < bezel) {\n          if (minDist === distL) nx = 1;\n          else if (minDist === distR) nx = -1;\n          else if (minDist === distT) ny = 1;\n          else if (minDist === distB) ny = -1;\n\n          if (x < bezel && y < bezel) {\n            const dist = Math.sqrt(Math.pow(bezel - x, 2) + Math.pow(bezel - y, 2));\n            minDist = bezel - dist;\n            if (dist > 0) {\n              nx = (bezel - x) / dist;\n              ny = (bezel - y) / dist;\n            }\n          } else if (x > w - bezel && y < bezel) {\n            const dist = Math.sqrt(Math.pow(x - (w - bezel), 2) + Math.pow(bezel - y, 2));\n            minDist = bezel - dist;\n            if (dist > 0) {\n              nx = -(x - (w - bezel)) / dist;\n              ny = (bezel - y) / dist;\n            }\n          } else if (x < bezel && y > h - bezel) {\n            const dist = Math.sqrt(Math.pow(bezel - x, 2) + Math.pow(y - (h - bezel), 2));\n            minDist = bezel - dist;\n            if (dist > 0) {\n              nx = (bezel - x) / dist;\n              ny = -(y - (h - bezel)) / dist;\n            }\n          } else if (x > w - bezel && y > h - bezel) {\n            const dist = Math.sqrt(Math.pow(x - (w - bezel), 2) + Math.pow(y - (h - bezel), 2));\n            minDist = bezel - dist;\n            if (dist > 0) {\n              nx = -(x - (w - bezel)) / dist;\n              ny = -(y - (h - bezel)) / dist;\n            }\n          }\n        }\n\n        let t = Math.max(0, Math.min(1, minDist / bezel));\n        if (minDist < 0) t = 0;\n\n        let slope = 0;\n        const om_t = 1 - t;\n\n        if (profile === 'circle') {\n          const heightVal = Math.sqrt(1 - om_t * om_t);\n          slope = heightVal > 0 ? om_t / heightVal : 0;\n        } else {\n          const heightVal = Math.pow(1 - Math.pow(om_t, 4), 0.25);\n          slope = heightVal > 0 ? Math.pow(om_t, 3) / Math.pow(heightVal, 3) : 0;\n        }\n\n        const magnitudeClamp = Math.min(1, slope * 0.45);\n\n        const rVal = Math.floor(128 + nx * magnitudeClamp * 127);\n        const gVal = Math.floor(128 + ny * magnitudeClamp * 127);\n\n        const idx = (y * w + x) * 4;\n        data[idx] = rVal;\n        data[idx + 1] = gVal;\n        data[idx + 2] = 128;\n        data[idx + 3] = 255;\n      }\n    }\n\n    ctx.putImageData(imgData, 0, 0);\n    return canvas.toDataURL();\n  }\n\n  private syncSvgFilter(dataUrl: string, w: number, h: number, scale: number, blur: number): void {\n    let container: Element | null = document.getElementById(`svg-container-${this.filterId}`);\n\n    if (!container) {\n      container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n      container.id = `svg-container-${this.filterId}`;\n      container.setAttribute('style', 'position: absolute; width: 0; height: 0; pointer-events: none;');\n      document.body.appendChild(container);\n    }\n\n    container.innerHTML = `\n      <filter id=\"${this.filterId}\"\n              x=\"-10%\" y=\"-10%\" width=\"120%\" height=\"120%\"\n              primitiveUnits=\"userSpaceOnUse\"\n              color-interpolation-filters=\"sRGB\">\n\n        <feImage href=\"${dataUrl}\" x=\"0\" y=\"0\" width=\"${w}\" height=\"${h}\" preserveAspectRatio=\"none\" result=\"glass_map\" />\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"${blur}\" result=\"blurred_substrate\" />\n\n        <feDisplacementMap\n          in=\"blurred_substrate\"\n          in2=\"glass_map\"\n          scale=\"${scale}\"\n          xChannelSelector=\"R\"\n          yChannelSelector=\"G\"\n        />\n      </filter>\n    `;\n  }\n}\n","/*\n * Public API Surface of ngx-glassy-effect\n */\n\nexport * from './lib/glassy-effect';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "ngx-glassy-effect",
+  "version": "0.0.22",
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0"
+  },
+  "author": {
+    "name": "anassmdi",
+    "url": "https://github.com/anassmdi"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "keywords": [
+    "angular",
+    "ngx",
+    "glassy",
+    "liquid-glass",
+    "ngx-glassy-effect",
+    "glass-effect",
+    "glassy-effect"
+  ],
+  "repository": {
+    "url": "https://github.com/anassmdi/ngx-glassy-effect",
+    "type": "git"
+  },
+  "bugs": {
+    "url": "https://github.com/anassmdi/ngx-glassy-effect/issues"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ngx-glassy-effect.mjs",
+  "typings": "types/ngx-glassy-effect.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ngx-glassy-effect.d.ts",
+      "default": "./fesm2022/ngx-glassy-effect.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/ngx-glassy-effect.d.ts

@@ -0,0 +1,28 @@
+import * as _angular_core from '@angular/core';
+
+declare class GlassyEffect {
+    private el;
+    private destroyRef;
+    private platformId;
+    private isBrowser;
+    bezel: _angular_core.InputSignal<number>;
+    scale: _angular_core.InputSignal<number>;
+    blur: _angular_core.InputSignal<number>;
+    profile: _angular_core.InputSignal<"circle" | "squircle">;
+    private width;
+    private height;
+    private filterId;
+    private resizeObserver;
+    private sharedCanvas;
+    private borderLayer;
+    private animationFrameId;
+    constructor();
+    private applyAppleGlassLighting;
+    private setupResizeObserver;
+    private generateDisplacementMap;
+    private syncSvgFilter;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GlassyEffect, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GlassyEffect, "[ngxGlassyEffect]", never, { "bezel": { "alias": "bezel"; "required": false; "isSignal": true; }; "scale": { "alias": "scale"; "required": false; "isSignal": true; }; "blur": { "alias": "blur"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { GlassyEffect };