npm - @jojovms/angular-ninja-keys - Versions diffs - 0.0.1 - Mend

@jojovms/angular-ninja-keys 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +39 -0
package/dist/index.d.ts +2 -0
package/dist/index.mjs +218 -0
package/dist/index.umd.js +1 -0
package/dist/ninja-keys.component.d.ts +17 -0
package/package.json +55 -0

package/README.md ADDED Viewed

@@ -0,0 +1,39 @@
+# @jojovms/angular-ninja-keys 🥷
+Angular wrapper for `@jojovms/ninja-keys-core`.
+## Installation
+```bash
+npm install @jojovms/angular-ninja-keys
+```
+## Usage
+```typescript
+import { NinjaKeysComponent } from '@jojovms/angular-ninja-keys';
+@Component({
+  standalone: true,
+  imports: [NinjaKeysComponent],
+  template: `
+    <button (click)="ninja.toggle()">Open Command Palette</button>
+    <ninja-keys
+      #ninja
+      [actions]="myActions"
+      theme="dark"
+      hotkey="k"
+    ></ninja-keys>
+  `
+})
+export class AppComponent {
+  myActions = [
+    { id: '1', title: 'Save', icon: '💾', handler: () => this.save() }
+  ];
+  save() {
+    console.log('Saved!');
+  }
+}
+```

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './ninja-keys.component';
2	+ export type { NinjaAction } from '@jojovms/ninja-keys-core';

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,218 @@
+var f = Object.defineProperty;
+var m = (i, e, t) => e in i ? f(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var d = (i, e, t) => m(i, typeof e != "symbol" ? e + "" : e, t);
+import { Input as u, Component as v } from "@angular/core";
+var x = Object.defineProperty, g = (i, e, t) => e in i ? x(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, r = (i, e, t) => g(i, typeof e != "symbol" ? e + "" : e, t);
+class b {
+  constructor(e) {
+    r(this, "options"), r(this, "isOpen", !1), r(this, "overlay", null), r(this, "input", null), r(this, "resultsList", null), r(this, "selectedIndex", 0), r(this, "filteredActions", []), r(this, "cleanupFns", []), this.options = {
+      placeholder: "Type a command or search...",
+      theme: "light",
+      hotkey: "k",
+      ...e
+    }, this.filteredActions = this.options.actions;
+  }
+  init() {
+    this.createOverlay();
+    const e = (t) => {
+      (t.ctrlKey || t.metaKey) && t.key === (this.options.hotkey || "k") && (t.preventDefault(), this.toggle()), t.key === "Escape" && this.isOpen && this.close(), this.isOpen && (t.key === "ArrowDown" ? (t.preventDefault(), this.moveSelection(1)) : t.key === "ArrowUp" ? (t.preventDefault(), this.moveSelection(-1)) : t.key === "Enter" && (t.preventDefault(), this.executeSelected()));
+    };
+    window.addEventListener("keydown", e), this.cleanupFns.push(() => window.removeEventListener("keydown", e));
+  }
+  cleanup() {
+    this.cleanupFns.forEach((e) => e()), this.overlay && this.overlay.remove();
+  }
+  open() {
+    this.isOpen || !this.overlay || (this.isOpen = !0, this.overlay.style.display = "flex", this.overlay.style.opacity = "0", requestAnimationFrame(() => {
+      this.overlay && (this.overlay.style.opacity = "1");
+    }), this.input && (this.input.value = "", this.input.focus(), this.filterActions("")));
+  }
+  close() {
+    !this.isOpen || !this.overlay || (this.overlay.style.opacity = "0", setTimeout(() => {
+      this.overlay && (this.overlay.style.display = "none"), this.isOpen = !1;
+    }, 200));
+  }
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  createOverlay() {
+    if (this.overlay) return;
+    this.overlay = document.createElement("div"), Object.assign(this.overlay.style, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      background: "rgba(0,0,0,0.5)",
+      zIndex: "9999",
+      display: "none",
+      justifyContent: "center",
+      alignItems: "flex-start",
+      paddingTop: "10vh",
+      transition: "opacity 0.2s ease",
+      fontFamily: "sans-serif",
+      backdropFilter: "blur(2px)"
+    }), this.overlay.addEventListener("click", (l) => {
+      l.target === this.overlay && this.close();
+    });
+    const e = document.createElement("div"), t = this.options.theme === "dark" ? "#1f2937" : "#ffffff", s = this.options.theme === "dark" ? "#f3f4f6" : "#111827", o = this.options.theme === "dark" ? "#374151" : "#e5e7eb";
+    Object.assign(e.style, {
+      width: "600px",
+      maxWidth: "90%",
+      maxHeight: "80vh",
+      background: t,
+      color: s,
+      borderRadius: "8px",
+      boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)",
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      border: `1px solid ${o}`
+    });
+    const n = document.createElement("div");
+    n.style.borderBottom = `1px solid ${o}`, n.style.padding = "16px", this.input = document.createElement("input"), Object.assign(this.input.style, {
+      width: "100%",
+      background: "transparent",
+      border: "none",
+      outline: "none",
+      fontSize: "18px",
+      color: s
+    }), this.input.placeholder = this.options.placeholder || "Type to search...", this.input.addEventListener("input", (l) => {
+      this.filterActions(l.target.value);
+    }), n.appendChild(this.input), e.appendChild(n), this.resultsList = document.createElement("div"), Object.assign(this.resultsList.style, {
+      overflowY: "auto",
+      padding: "8px 0",
+      maxHeight: "50vh"
+    }), e.appendChild(this.resultsList), this.overlay.appendChild(e), document.body.appendChild(this.overlay);
+  }
+  filterActions(e) {
+    const t = e.toLowerCase().trim();
+    t ? this.filteredActions = this.options.actions.filter((s) => {
+      var o, n;
+      return s.title.toLowerCase().includes(t) || ((o = s.keywords) == null ? void 0 : o.toLowerCase().includes(t)) || ((n = s.section) == null ? void 0 : n.toLowerCase().includes(t));
+    }) : this.filteredActions = this.options.actions, this.selectedIndex = 0, this.renderList();
+  }
+  moveSelection(e) {
+    this.selectedIndex += e, this.selectedIndex < 0 && (this.selectedIndex = this.filteredActions.length - 1), this.selectedIndex >= this.filteredActions.length && (this.selectedIndex = 0), this.renderList(), this.ensureVisible();
+  }
+  ensureVisible() {
+    if (!this.resultsList) return;
+    const e = this.resultsList.children[this.selectedIndex];
+    e && e.scrollIntoView({ block: "nearest" });
+  }
+  executeSelected() {
+    const e = this.filteredActions[this.selectedIndex];
+    e && e.handler && (e.handler(), this.close());
+  }
+  renderList() {
+    if (!this.resultsList) return;
+    this.resultsList.innerHTML = "";
+    const e = this.options.theme === "dark" ? "#374151" : "#f3f4f6", t = this.options.theme === "dark" ? "#9ca3af" : "#6b7280";
+    if (this.filteredActions.forEach((s, o) => {
+      const n = document.createElement("div"), l = o === this.selectedIndex;
+      Object.assign(n.style, {
+        padding: "12px 16px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        cursor: "pointer",
+        background: l ? e : "transparent",
+        borderLeft: l ? "4px solid #6366f1" : "4px solid transparent"
+      });
+      const a = document.createElement("div");
+      if (a.style.display = "flex", a.style.alignItems = "center", a.style.gap = "12px", s.icon) {
+        const h = document.createElement("span");
+        h.innerHTML = s.icon, a.appendChild(h);
+      }
+      const y = document.createElement("span");
+      if (y.textContent = s.title, a.appendChild(y), n.appendChild(a), s.hotkey) {
+        const h = document.createElement("div");
+        h.textContent = s.hotkey, Object.assign(h.style, {
+          fontSize: "12px",
+          padding: "2px 6px",
+          borderRadius: "4px",
+          background: this.options.theme === "dark" ? "#4b5563" : "#e5e7eb",
+          color: t
+        }), n.appendChild(h);
+      }
+      n.addEventListener("click", () => {
+        s.handler && (s.handler(), this.close());
+      }), n.addEventListener("mouseenter", () => {
+        this.selectedIndex = o, this.renderList();
+      }), this.resultsList.appendChild(n);
+    }), this.filteredActions.length === 0) {
+      const s = document.createElement("div");
+      s.textContent = "No results found.", Object.assign(s.style, {
+        padding: "20px",
+        textAlign: "center",
+        color: t
+      }), this.resultsList.appendChild(s);
+    }
+  }
+}
+var k = Object.defineProperty, L = Object.getOwnPropertyDescriptor, p = (i, e, t, s) => {
+  for (var o = s > 1 ? void 0 : s ? L(e, t) : e, n = i.length - 1, l; n >= 0; n--)
+    (l = i[n]) && (o = (s ? l(e, t, o) : l(o)) || o);
+  return s && o && k(e, t, o), o;
+};
+let c = class {
+  constructor() {
+    d(this, "actions", []);
+    d(this, "placeholder", "Type a command...");
+    d(this, "theme", "light");
+    d(this, "hotkey", "k");
+    d(this, "instance", null);
+  }
+  ngOnInit() {
+    this.initNinja();
+  }
+  ngOnChanges(i) {
+    (i.actions || i.theme || i.placeholder || i.hotkey) && this.initNinja();
+  }
+  initNinja() {
+    this.instance && this.instance.cleanup(), this.instance = new b({
+      actions: this.actions,
+      placeholder: this.placeholder,
+      theme: this.theme,
+      hotkey: this.hotkey
+    }), this.instance.init();
+  }
+  // Public API for template reference
+  open() {
+    var i;
+    (i = this.instance) == null || i.open();
+  }
+  close() {
+    var i;
+    (i = this.instance) == null || i.close();
+  }
+  toggle() {
+    var i;
+    (i = this.instance) == null || i.toggle();
+  }
+  ngOnDestroy() {
+    this.instance && this.instance.cleanup();
+  }
+};
+p([
+  u()
+], c.prototype, "actions", 2);
+p([
+  u()
+], c.prototype, "placeholder", 2);
+p([
+  u()
+], c.prototype, "theme", 2);
+p([
+  u()
+], c.prototype, "hotkey", 2);
+c = p([
+  v({
+    selector: "ninja-keys",
+    standalone: !0,
+    template: ""
+  })
+], c);
+export {
+  c as NinjaKeysComponent
+};

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/ninja-keys.component.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { NinjaAction } from '@jojovms/ninja-keys-core';
+export declare class NinjaKeysComponent implements OnInit, OnDestroy, OnChanges {
+    actions: NinjaAction[];
+    placeholder: string;
+    theme: 'light' | 'dark';
+    hotkey: string;
+    private instance;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private initNinja;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    ngOnDestroy(): void;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,55 @@
+{
+    "name": "@jojovms/angular-ninja-keys",
+    "version": "0.0.1",
+    "description": "Commandō: Angular wrapper for @jojovms/ninja-keys-core. Your commands, unleashed.",
+    "keywords": [
+        "angular",
+        "commando",
+        "command-palette",
+        "ninja-keys",
+        "keyboard-shortcuts",
+        "directive",
+        "service",
+        "jojovms"
+    ],
+    "author": "Shijo Shaji (https://shijoshaji.in)",
+    "homepage": "https://shijoshaji.in",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/shijoshaji/ninja-keys.git",
+        "directory": "angular"
+    },
+    "bugs": {
+        "url": "https://github.com/shijoshaji/ninja-keys/issues"
+    },
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite build --watch"
+    },
+    "peerDependencies": {
+        "@angular/core": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "rxjs": "^7.0.0"
+    },
+    "dependencies": {
+        "@jojovms/ninja-keys-core": "*"
+    },
+    "devDependencies": {
+        "@angular/core": "^17.0.0",
+        "@angular/common": "^17.0.0",
+        "rxjs": "^7.8.0",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.0.0",
+        "zone.js": "^0.14.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}