kk-web-components 1.0.0

package/README.md

@@ -0,0 +1,41 @@
+# KK Web Components
+
+A collection of reusable web components.
+
+## Installation
+
+```bash
+npm install kk-web-components
+```
+
+## Usage
+
+### Importing the Components
+
+```javascript
+import "kk-web-components";
+
+// Optionally configure UiIcon globally
+window.UiIcon = {
+  version: "1.0",
+  filePath: "/icons/iconset.svg",
+  defaultSize: 24,
+};
+```
+
+### Components
+
+#### `<ui-icon>`
+
+- **Attributes**:
+  - `name`: The name of the icon in the sprite sheet.
+  - `size`: The size of the icon (default: `24`).
+  - `rotation`: Rotate the icon in degrees (default: `0`).
+  - `viewbox`: Optional custom `viewBox` for the SVG.
+
+Example:
+
+```html
+<ui-icon name="home" size="32" rotation="45"></ui-icon>
+<ui-icon name="settings"></ui-icon>
+```

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "kk-web-components",
+  "version": "1.0.0",
+  "description": "A collection of reusable web components, including ui-icon and others.",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "type": "module",
+  "keywords": ["web-components", "ui-icon", "custom-elements", "svg"],
+  "author": "Krankikom GmbH",
+  "scripts": {
+    "test": "echo \"No tests specified\" && exit 0"
+  }
+}

package/src/index.js

@@ -0,0 +1,3 @@
+import UiIcon from "./ui-icon.js";
+
+export { UiIcon };

package/src/ui-icon.js

@@ -0,0 +1,111 @@
+// Define a shared stylesheet using Constructable Stylesheets
+const sharedStyles = new CSSStyleSheet();
+sharedStyles.replaceSync(`
+  :host {
+    flex-shrink: 0;
+
+    svg {
+      display: block;
+    }
+  }
+`);
+
+class UiIcon extends HTMLElement {
+  constructor() {
+    super();
+    // Attach Shadow DOM and apply shared styles
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.adoptedStyleSheets = [sharedStyles];
+  }
+
+  connectedCallback() {
+    const config = window.UiIcon;
+    const urlParametersObj = {};
+    let filepath = "/assets/iconset.svg";
+    let defaultSize = 24;
+
+    if (config) {
+      if (config.version) {
+        urlParametersObj["v"] = config.version;
+      }
+      if (config.filePath) {
+        filepath = config.filePath;
+      }
+      if (config.defaultSize) {
+        defaultSize = config.defaultSize;
+      }
+    }
+
+    // Get all attributes with defaults
+    const options = this.getOptions({
+      name: null,
+      size: defaultSize,
+      rotation: 0,
+      viewbox: null,
+    });
+
+    const { name, size, rotation, viewbox } = options;
+
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+
+    // Hide from screen readers
+    svg.setAttribute("aria-hidden", "true");
+
+    if (viewbox) {
+      svg.setAttribute("viewBox", viewbox);
+    } else {
+      // Set size attributes
+      svg.setAttribute("width", size);
+      svg.setAttribute("height", size);
+    }
+
+    // Apply rotation if provided
+    if (rotation) {
+      svg.style.transform = `rotate(${rotation}deg)`;
+    }
+
+    const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+    if (Object.keys(urlParametersObj).length > 0) {
+      const urlParameters = `?${Object.entries(urlParametersObj)
+        .map(([key, value]) => `${key}=${value}`)
+        .join("&")}`;
+      use.setAttribute("href", `${filepath}${urlParameters}#${name}`);
+    } else {
+      use.setAttribute("href", `${filepath}#${name}`);
+    }
+
+    svg.appendChild(use);
+
+    this.shadowRoot.innerHTML = ""; // Clear old content
+    this.shadowRoot.appendChild(svg);
+  }
+
+  // Utility to get attributes with defaults
+  getOptions(defaults) {
+    return Object.keys(defaults).reduce((acc, key) => {
+      const value = this.getAttribute(key);
+      acc[key] =
+        value !== null
+          ? typeof defaults[key] === "number"
+            ? parseFloat(value)
+            : value
+          : defaults[key];
+      return acc;
+    }, {});
+  }
+
+  // Observe relevant attributes
+  static get observedAttributes() {
+    return ["name", "size", "rotation", "viewbox"];
+  }
+
+  // Handle attribute changes
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this.connectedCallback();
+    }
+  }
+}
+
+// Register the custom element
+customElements.define("ui-icon", UiIcon);