@jojovms/angular-tilt-card 0.0.1

package/README.md

@@ -0,0 +1,18 @@
+# @jojovms/angular-tilt-card
+
+Angular directive for the Tilt Card library.
+
+## Installation
+```bash
+npm install @jojovms/angular-tilt-card
+```
+
+## Setup
+Import `TiltModule` in your `app.module.ts`.
+
+## Usage
+```html
+<div [tilt]="{ max: 20, glare: true }">
+  <h1>Hover Me</h1>
+</div>
+```

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './tilt.directive';
+export * from './tilt.module';
+export type { TiltOptions } from '@jojovms/tilt-card-core';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@angular/core");var f=Object.defineProperty,E=(i,e,n)=>e in i?f(i,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):i[e]=n,r=(i,e,n)=>E(i,typeof e!="symbol"?e+"":e,n);class b{constructor(e,n={}){r(this,"element"),r(this,"options"),r(this,"glareElement",null),r(this,"bounds",null),r(this,"onMouseEnter",()=>{var t;this.bounds=this.element.getBoundingClientRect(),this.element.style.transition="none",(t=this.glareElement)!=null&&t.firstChild&&(this.glareElement.firstChild.style.transition="opacity 100ms")}),r(this,"onMouseMove",t=>{var s;if(!this.bounds)return;const l=t.clientX-this.bounds.left,o=t.clientY-this.bounds.top,h=l/this.bounds.width,m=o/this.bounds.height,p=this.options.max||15,u=(.5-m)*p*2,v=(h-.5)*p*2;if(this.element.style.transform=`
+      perspective(${this.options.perspective}px)
+      rotateX(${u}deg)
+      rotateY(${v}deg)
+      scale3d(${this.options.scale}, ${this.options.scale}, ${this.options.scale})
+    `,this.options.glare&&(s=this.glareElement)!=null&&s.firstChild){const c=this.glareElement.firstChild,g=Math.atan2(t.clientX-(this.bounds.left+this.bounds.width/2),-(t.clientY-(this.bounds.top+this.bounds.height/2)))*(180/Math.PI),y=Math.sqrt(Math.pow(h-.5,2)+Math.pow(m-.5,2))*2;c.style.transform=`translate(-50%, -50%) rotate(${g}deg)`,c.style.opacity=(y*(this.options.glareMaxOpacity||.5)).toString()}}),r(this,"onMouseLeave",()=>{var t;if(this.element.style.transition="transform 300ms ease-out",this.element.style.transform=`perspective(${this.options.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`,this.options.glare&&(t=this.glareElement)!=null&&t.firstChild){const s=this.glareElement.firstChild;s.style.opacity="0",s.style.transition="opacity 300ms"}}),this.element=typeof e=="string"?document.querySelector(e):e,this.options={max:15,perspective:1e3,scale:1.05,glare:!1,glareMaxOpacity:.5,...n},this.element&&this.init()}init(){this.element.style.transformStyle="preserve-3d",this.element.style.transform=`perspective(${this.options.perspective}px)`,this.options.glare&&this.addGlare(),this.element.addEventListener("mouseenter",this.onMouseEnter),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseleave",this.onMouseLeave)}addGlare(){this.glareElement=document.createElement("div"),this.glareElement.style.position="absolute",this.glareElement.style.top="0",this.glareElement.style.left="0",this.glareElement.style.width="100%",this.glareElement.style.height="100%",this.glareElement.style.overflow="hidden",this.glareElement.style.pointerEvents="none",this.glareElement.style.borderRadius=getComputedStyle(this.element).borderRadius;const e=document.createElement("div");e.style.position="absolute",e.style.top="50%",e.style.left="50%",e.style.pointerEvents="none",e.style.backgroundImage="linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",e.style.width="200%",e.style.height="200%",e.style.transform="translate(-50%, -50%) rotate(0deg)",e.style.opacity="0",e.style.transition="opacity 300ms",this.glareElement.appendChild(e),this.element.appendChild(this.glareElement)}destroy(){this.element.removeEventListener("mouseenter",this.onMouseEnter),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseleave",this.onMouseLeave),this.glareElement&&this.glareElement.remove()}}var M=Object.defineProperty,T=Object.getOwnPropertyDescriptor,d=(i,e,n,t)=>{for(var s=t>1?void 0:t?T(e,n):e,l=i.length-1,o;l>=0;l--)(o=i[l])&&(s=(t?o(e,n,s):o(s))||s);return t&&s&&M(e,n,s),s};exports.TiltDirective=class{constructor(e){this.el=e,this.options={},this.tiltInstance=null}ngOnInit(){this.initTilt()}ngOnChanges(e){this.tiltInstance&&(this.tiltInstance.destroy(),this.initTilt())}initTilt(){this.tiltInstance=new b(this.el.nativeElement,this.options)}ngOnDestroy(){this.tiltInstance&&this.tiltInstance.destroy()}};d([a.Input("tilt")],exports.TiltDirective.prototype,"options",2);exports.TiltDirective=d([a.Directive({selector:"[tilt]"})],exports.TiltDirective);var O=Object.getOwnPropertyDescriptor,w=(i,e,n,t)=>{for(var s=t>1?void 0:t?O(e,n):e,l=i.length-1,o;l>=0;l--)(o=i[l])&&(s=o(s)||s);return s};exports.TiltModule=class{};exports.TiltModule=w([a.NgModule({declarations:[exports.TiltDirective],exports:[exports.TiltDirective]})],exports.TiltModule);

package/dist/index.mjs

@@ -0,0 +1,94 @@
+import { Input as E, Directive as b, NgModule as M } from "@angular/core";
+var w = Object.defineProperty, C = (i, e, n) => e in i ? w(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n, r = (i, e, n) => C(i, typeof e != "symbol" ? e + "" : e, n);
+class O {
+  constructor(e, n = {}) {
+    r(this, "element"), r(this, "options"), r(this, "glareElement", null), r(this, "bounds", null), r(this, "onMouseEnter", () => {
+      var t;
+      this.bounds = this.element.getBoundingClientRect(), this.element.style.transition = "none", (t = this.glareElement) != null && t.firstChild && (this.glareElement.firstChild.style.transition = "opacity 100ms");
+    }), r(this, "onMouseMove", (t) => {
+      var s;
+      if (!this.bounds) return;
+      const l = t.clientX - this.bounds.left, o = t.clientY - this.bounds.top, h = l / this.bounds.width, m = o / this.bounds.height, p = this.options.max || 15, g = (0.5 - m) * p * 2, v = (h - 0.5) * p * 2;
+      if (this.element.style.transform = `
+      perspective(${this.options.perspective}px)
+      rotateX(${g}deg)
+      rotateY(${v}deg)
+      scale3d(${this.options.scale}, ${this.options.scale}, ${this.options.scale})
+    `, this.options.glare && (s = this.glareElement) != null && s.firstChild) {
+        const d = this.glareElement.firstChild, y = Math.atan2(t.clientX - (this.bounds.left + this.bounds.width / 2), -(t.clientY - (this.bounds.top + this.bounds.height / 2))) * (180 / Math.PI), f = Math.sqrt(Math.pow(h - 0.5, 2) + Math.pow(m - 0.5, 2)) * 2;
+        d.style.transform = `translate(-50%, -50%) rotate(${y}deg)`, d.style.opacity = (f * (this.options.glareMaxOpacity || 0.5)).toString();
+      }
+    }), r(this, "onMouseLeave", () => {
+      var t;
+      if (this.element.style.transition = "transform 300ms ease-out", this.element.style.transform = `perspective(${this.options.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`, this.options.glare && (t = this.glareElement) != null && t.firstChild) {
+        const s = this.glareElement.firstChild;
+        s.style.opacity = "0", s.style.transition = "opacity 300ms";
+      }
+    }), this.element = typeof e == "string" ? document.querySelector(e) : e, this.options = {
+      max: 15,
+      perspective: 1e3,
+      scale: 1.05,
+      glare: !1,
+      glareMaxOpacity: 0.5,
+      ...n
+    }, this.element && this.init();
+  }
+  init() {
+    this.element.style.transformStyle = "preserve-3d", this.element.style.transform = `perspective(${this.options.perspective}px)`, this.options.glare && this.addGlare(), this.element.addEventListener("mouseenter", this.onMouseEnter), this.element.addEventListener("mousemove", this.onMouseMove), this.element.addEventListener("mouseleave", this.onMouseLeave);
+  }
+  addGlare() {
+    this.glareElement = document.createElement("div"), this.glareElement.style.position = "absolute", this.glareElement.style.top = "0", this.glareElement.style.left = "0", this.glareElement.style.width = "100%", this.glareElement.style.height = "100%", this.glareElement.style.overflow = "hidden", this.glareElement.style.pointerEvents = "none", this.glareElement.style.borderRadius = getComputedStyle(this.element).borderRadius;
+    const e = document.createElement("div");
+    e.style.position = "absolute", e.style.top = "50%", e.style.left = "50%", e.style.pointerEvents = "none", e.style.backgroundImage = "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)", e.style.width = "200%", e.style.height = "200%", e.style.transform = "translate(-50%, -50%) rotate(0deg)", e.style.opacity = "0", e.style.transition = "opacity 300ms", this.glareElement.appendChild(e), this.element.appendChild(this.glareElement);
+  }
+  destroy() {
+    this.element.removeEventListener("mouseenter", this.onMouseEnter), this.element.removeEventListener("mousemove", this.onMouseMove), this.element.removeEventListener("mouseleave", this.onMouseLeave), this.glareElement && this.glareElement.remove();
+  }
+}
+var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, u = (i, e, n, t) => {
+  for (var s = t > 1 ? void 0 : t ? I(e, n) : e, l = i.length - 1, o; l >= 0; l--)
+    (o = i[l]) && (s = (t ? o(e, n, s) : o(s)) || s);
+  return t && s && $(e, n, s), s;
+};
+let a = class {
+  constructor(i) {
+    this.el = i, this.options = {}, this.tiltInstance = null;
+  }
+  ngOnInit() {
+    this.initTilt();
+  }
+  ngOnChanges(i) {
+    this.tiltInstance && (this.tiltInstance.destroy(), this.initTilt());
+  }
+  initTilt() {
+    this.tiltInstance = new O(this.el.nativeElement, this.options);
+  }
+  ngOnDestroy() {
+    this.tiltInstance && this.tiltInstance.destroy();
+  }
+};
+u([
+  E("tilt")
+], a.prototype, "options", 2);
+a = u([
+  b({
+    selector: "[tilt]"
+  })
+], a);
+var _ = Object.getOwnPropertyDescriptor, x = (i, e, n, t) => {
+  for (var s = t > 1 ? void 0 : t ? _(e, n) : e, l = i.length - 1, o; l >= 0; l--)
+    (o = i[l]) && (s = o(s) || s);
+  return s;
+};
+let c = class {
+};
+c = x([
+  M({
+    declarations: [a],
+    exports: [a]
+  })
+], c);
+export {
+  a as TiltDirective,
+  c as TiltModule
+};

package/dist/index.umd.js

@@ -0,0 +1,6 @@
+(function(s,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("@angular/core")):typeof define=="function"&&define.amd?define(["exports","@angular/core"],a):(s=typeof globalThis<"u"?globalThis:s||self,a(s.AngularTiltCard={},s.ng.core))})(this,function(s,a){"use strict";var g=Object.defineProperty,v=(n,e,l)=>e in n?g(n,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[e]=l,h=(n,e,l)=>v(n,typeof e!="symbol"?e+"":e,l);class y{constructor(e,l={}){h(this,"element"),h(this,"options"),h(this,"glareElement",null),h(this,"bounds",null),h(this,"onMouseEnter",()=>{var t;this.bounds=this.element.getBoundingClientRect(),this.element.style.transition="none",(t=this.glareElement)!=null&&t.firstChild&&(this.glareElement.firstChild.style.transition="opacity 100ms")}),h(this,"onMouseMove",t=>{var i;if(!this.bounds)return;const o=t.clientX-this.bounds.left,r=t.clientY-this.bounds.top,m=o/this.bounds.width,u=r/this.bounds.height,c=this.options.max||15,T=(.5-u)*c*2,C=(m-.5)*c*2;if(this.element.style.transform=`
+      perspective(${this.options.perspective}px)
+      rotateX(${T}deg)
+      rotateY(${C}deg)
+      scale3d(${this.options.scale}, ${this.options.scale}, ${this.options.scale})
+    `,this.options.glare&&(i=this.glareElement)!=null&&i.firstChild){const p=this.glareElement.firstChild,O=Math.atan2(t.clientX-(this.bounds.left+this.bounds.width/2),-(t.clientY-(this.bounds.top+this.bounds.height/2)))*(180/Math.PI),w=Math.sqrt(Math.pow(m-.5,2)+Math.pow(u-.5,2))*2;p.style.transform=`translate(-50%, -50%) rotate(${O}deg)`,p.style.opacity=(w*(this.options.glareMaxOpacity||.5)).toString()}}),h(this,"onMouseLeave",()=>{var t;if(this.element.style.transition="transform 300ms ease-out",this.element.style.transform=`perspective(${this.options.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`,this.options.glare&&(t=this.glareElement)!=null&&t.firstChild){const i=this.glareElement.firstChild;i.style.opacity="0",i.style.transition="opacity 300ms"}}),this.element=typeof e=="string"?document.querySelector(e):e,this.options={max:15,perspective:1e3,scale:1.05,glare:!1,glareMaxOpacity:.5,...l},this.element&&this.init()}init(){this.element.style.transformStyle="preserve-3d",this.element.style.transform=`perspective(${this.options.perspective}px)`,this.options.glare&&this.addGlare(),this.element.addEventListener("mouseenter",this.onMouseEnter),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseleave",this.onMouseLeave)}addGlare(){this.glareElement=document.createElement("div"),this.glareElement.style.position="absolute",this.glareElement.style.top="0",this.glareElement.style.left="0",this.glareElement.style.width="100%",this.glareElement.style.height="100%",this.glareElement.style.overflow="hidden",this.glareElement.style.pointerEvents="none",this.glareElement.style.borderRadius=getComputedStyle(this.element).borderRadius;const e=document.createElement("div");e.style.position="absolute",e.style.top="50%",e.style.left="50%",e.style.pointerEvents="none",e.style.backgroundImage="linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",e.style.width="200%",e.style.height="200%",e.style.transform="translate(-50%, -50%) rotate(0deg)",e.style.opacity="0",e.style.transition="opacity 300ms",this.glareElement.appendChild(e),this.element.appendChild(this.glareElement)}destroy(){this.element.removeEventListener("mouseenter",this.onMouseEnter),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseleave",this.onMouseLeave),this.glareElement&&this.glareElement.remove()}}var f=Object.defineProperty,E=Object.getOwnPropertyDescriptor,d=(n,e,l,t)=>{for(var i=t>1?void 0:t?E(e,l):e,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=(t?r(e,l,i):r(i))||i);return t&&i&&f(e,l,i),i};s.TiltDirective=class{constructor(e){this.el=e,this.options={},this.tiltInstance=null}ngOnInit(){this.initTilt()}ngOnChanges(e){this.tiltInstance&&(this.tiltInstance.destroy(),this.initTilt())}initTilt(){this.tiltInstance=new y(this.el.nativeElement,this.options)}ngOnDestroy(){this.tiltInstance&&this.tiltInstance.destroy()}},d([a.Input("tilt")],s.TiltDirective.prototype,"options",2),s.TiltDirective=d([a.Directive({selector:"[tilt]"})],s.TiltDirective);var b=Object.getOwnPropertyDescriptor,M=(n,e,l,t)=>{for(var i=t>1?void 0:t?b(e,l):e,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=r(i)||i);return i};s.TiltModule=class{},s.TiltModule=M([a.NgModule({declarations:[s.TiltDirective],exports:[s.TiltDirective]})],s.TiltModule),Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/tilt.directive.d.ts

@@ -0,0 +1,13 @@
+import { ElementRef, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { TiltOptions } from '@jojovms/tilt-card-core';
+
+export declare class TiltDirective implements OnInit, OnDestroy, OnChanges {
+    private el;
+    options: TiltOptions;
+    private tiltInstance;
+    constructor(el: ElementRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private initTilt;
+    ngOnDestroy(): void;
+}

package/dist/tilt.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TiltModule {
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@jojovms/angular-tilt-card",
+    "version": "0.0.1",
+    "description": "Tiltō: A premium 3D tilt interaction effect for your cards (Angular wrapper).",
+    "keywords": [
+        "tilto",
+        "tilt-card",
+        "angular",
+        "3d",
+        "hover",
+        "ui",
+        "framework",
+        "jojovms"
+    ],
+    "author": "Shijo Shaji (https://shijoshaji.in)",
+    "homepage": "https://shijoshaji.in",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/shijoshaji/tilt-card.git",
+        "directory": "angular"
+    },
+    "bugs": {
+        "url": "https://github.com/shijoshaji/tilt-card/issues"
+    },
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "peerDependencies": {
+        "@angular/core": "^17.0.0",
+        "@angular/common": "^17.0.0",
+        "rxjs": "^7.8.0"
+    },
+    "dependencies": {
+        "@jojovms/tilt-card-core": "*"
+    },
+    "scripts": {
+        "build": "vite build"
+    },
+    "files": [
+        "dist"
+    ],
+    "devDependencies": {
+        "vite": "^5.0.10",
+        "vite-plugin-dts": "^3.6.4",
+        "@angular/core": "^17.0.0",
+        "@angular/common": "^17.0.0",
+        "rxjs": "^7.8.0",
+        "zone.js": "^0.14.0",
+        "typescript": "^5.3.3"
+    }
+}