@manufosela/slide-notification 2.0.0

package/README.md

@@ -0,0 +1,159 @@
+# @manufosela/slide-notification
+
+Slide-in notification web component from the right edge. Built with [Lit](https://lit.dev/).
+
+## Installation
+
+```bash
+npm install @manufosela/slide-notification
+```
+
+## Usage
+
+```javascript
+import { showSlideNotification } from '@manufosela/slide-notification';
+
+// Simple notification
+showSlideNotification({
+  message: 'Hello, world!'
+});
+
+// With type and title
+showSlideNotification({
+  type: 'success',
+  title: 'Success!',
+  message: 'Your changes have been saved.'
+});
+```
+
+## Features
+
+- Slides in from the right edge
+- Four notification types (info, success, warning, error)
+- Auto-hide with configurable duration
+- HTML message support
+- Custom background colors
+- CSS custom properties for theming
+
+## Attributes
+
+| Attribute          | Type    | Default | Description                    |
+| ------------------ | ------- | ------- | ------------------------------ |
+| `title`            | String  | `''`    | Notification title             |
+| `message`          | String  | `''`    | Message (supports HTML)        |
+| `type`             | String  | `info`  | Type: info, success, warning, error |
+| `timetohide`       | Number  | `3000`  | Auto-hide delay in ms (0 = never) |
+| `background-color` | String  | `''`    | Custom background color        |
+| `persistent`       | Boolean | `false` | Stay visible until clicked     |
+
+## Methods
+
+| Method   | Description                              |
+| -------- | ---------------------------------------- |
+| `show()` | Show the notification                    |
+| `hide()` | Hide the notification                    |
+
+## Events
+
+| Event                        | Description                    |
+| ---------------------------- | ------------------------------ |
+| `slide-notification-shown`   | Fired when notification appears |
+| `slide-notification-hidden`  | Fired when notification hides   |
+
+## Notification Types
+
+```javascript
+// Info (default) - Blue
+showSlideNotification({ type: 'info', message: 'Info message' });
+
+// Success - Green/Blue
+showSlideNotification({ type: 'success', message: 'Success!' });
+
+// Warning - Yellow (dark text)
+showSlideNotification({ type: 'warning', message: 'Warning!' });
+
+// Error - Red
+showSlideNotification({ type: 'error', message: 'Error occurred' });
+```
+
+## Custom Duration
+
+```javascript
+// Quick notification (1 second)
+showSlideNotification({
+  message: 'Quick!',
+  timetohide: 1000
+});
+
+// Persistent (click to close)
+showSlideNotification({
+  message: 'Click me to close',
+  persistent: true
+});
+```
+
+## Declarative Usage
+
+For manual control, use the element in HTML:
+
+```html
+<slide-notification id="myNotification"
+  title="Hello"
+  message="Click buttons to control"
+  persistent>
+</slide-notification>
+
+<button onclick="myNotification.show()">Show</button>
+<button onclick="myNotification.hide()">Hide</button>
+```
+
+## Custom Colors
+
+```javascript
+showSlideNotification({
+  message: 'Purple notification',
+  backgroundColor: '#8b5cf6'
+});
+```
+
+## CSS Custom Properties
+
+| Property                          | Default                        | Description        |
+| --------------------------------- | ------------------------------ | ------------------ |
+| `--slide-notification-width`      | `300px`                        | Notification width |
+| `--slide-notification-bg`         | `#17a2b8`                      | Background color   |
+| `--slide-notification-color`      | `white`                        | Text color         |
+| `--slide-notification-radius`     | `8px`                          | Border radius      |
+| `--slide-notification-padding`    | `1.5rem`                       | Padding            |
+| `--slide-notification-shadow`     | `0 2px 8px rgba(0,0,0,0.2)`    | Box shadow         |
+| `--slide-notification-bottom`     | `20px`                         | Bottom position    |
+| `--slide-notification-z-index`    | `10000`                        | Z-index            |
+| `--slide-notification-min-height` | `80px`                         | Minimum height     |
+
+## slide-notification vs toast-notification
+
+This library includes two notification components. Choose based on your needs:
+
+| Feature | slide-notification | toast-notification |
+|---------|--------------------|-------------------|
+| **Animation** | Slides in from right edge | Appears in corner |
+| **Position** | Right side only | 6 positions (corners + centers) |
+| **Stacking** | One at a time | Multiple stack vertically |
+| **Progress bar** | No | Yes |
+| **Close button** | No (click anywhere) | Yes |
+| **Persistent mode** | `persistent` attribute | `duration="0"` |
+| **Best for** | Single important messages | Multiple sequential notifications |
+
+**Use `slide-notification` when:**
+- You want a prominent single notification
+- You prefer slide-in animation
+- You want click-anywhere-to-close behavior
+
+**Use `toast-notification` when:**
+- You need to show multiple notifications
+- You want position flexibility (6 options)
+- You need a progress bar indicator
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@manufosela/slide-notification",
+  "version": "2.0.0",
+  "description": "Slide-in notification web component from the right edge",
+  "main": "src/slide-notification.js",
+  "module": "src/slide-notification.js",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "start": "web-dev-server --node-resolve --open demo/ --watch",
+    "test": "web-test-runner",
+    "test:watch": "web-test-runner --watch",
+    "test:coverage": "web-test-runner --coverage"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "notification",
+    "slide",
+    "toast",
+    "alert"
+  ],
+  "author": "manufosela",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/manufosela/ui-components",
+    "directory": "packages/slide-notification"
+  },
+  "homepage": "https://github.com/manufosela/ui-components/tree/main/packages/slide-notification#readme",
+  "bugs": {
+    "url": "https://github.com/manufosela/ui-components/issues"
+  },
+  "dependencies": {
+    "lit": "^3.2.1"
+  },
+  "devDependencies": {
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.19.0"
+  }
+}

package/src/slide-notification.js

@@ -0,0 +1,208 @@
+import { LitElement, html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { slideNotificationStyles } from './slide-notification.styles.js';
+
+const DEFAULT_COLORS = {
+  error: '#dc3545',
+  success: '#22c55e',
+  warning: '#ffc107',
+  info: '#17a2b8'
+};
+
+const ICONS = {
+  error: '❌',
+  success: '✅',
+  warning: '⚠️',
+  info: 'ℹ️'
+};
+
+/**
+ * A slide-in notification component from the right edge.
+ *
+ * @element slide-notification
+ * @fires slide-notification-shown - Fired when notification appears
+ * @fires slide-notification-hidden - Fired when notification is hidden
+ *
+ * @attr {String} title - Notification title
+ * @attr {String} message - Notification message (supports HTML)
+ * @attr {Number} timetohide - Time in ms before auto-hide (default: 3000, 0 = persistent)
+ * @attr {String} type - Type: 'info', 'success', 'warning', 'error'
+ * @attr {String} background-color - Custom background color
+ * @attr {Boolean} persistent - If true, notification stays until clicked (same as timetohide=0)
+ *
+ * @cssprop --slide-notification-width - Width (default: 300px)
+ * @cssprop --slide-notification-bg - Background color (default: #17a2b8)
+ * @cssprop --slide-notification-color - Text color (default: white)
+ * @cssprop --slide-notification-radius - Border radius (default: 8px)
+ * @cssprop --slide-notification-z-index - Z-index (default: 10000)
+ */
+export class SlideNotification extends LitElement {
+  static styles = slideNotificationStyles;
+
+  static properties = {
+    title: { type: String },
+    message: { type: String },
+    timetohide: { type: Number },
+    backgroundColor: { type: String, attribute: 'background-color' },
+    type: { type: String, reflect: true },
+    persistent: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.title = '';
+    this.message = '';
+    this.timetohide = 3000;
+    this.type = 'info';
+    this.backgroundColor = '';
+    this.persistent = false;
+    this._hideTimeout = null;
+    this._isVisible = false;
+    this._createdProgrammatically = false;
+    this._removeOnHide = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Click to close for persistent notifications
+    this.addEventListener('click', this._handleClick);
+
+    // Only auto-show if created programmatically (via helper function)
+    if (this._createdProgrammatically) {
+      this._showNotification();
+    }
+  }
+
+  _showNotification() {
+    if (this._isVisible) return;
+    this._isVisible = true;
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.classList.remove('hiding');
+        this.classList.add('visible');
+
+        this.dispatchEvent(new CustomEvent('slide-notification-shown', {
+          bubbles: true,
+          composed: true
+        }));
+      });
+
+      // Auto-hide after timeout (unless persistent)
+      const shouldAutoHide = !this.persistent && this.timetohide > 0;
+      if (shouldAutoHide) {
+        this._hideTimeout = setTimeout(() => {
+          this.hide();
+        }, this.timetohide);
+      }
+    });
+  }
+
+  _handleClick = () => {
+    if (this.persistent || this.timetohide === 0) {
+      this.hide();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._hideTimeout) {
+      clearTimeout(this._hideTimeout);
+      this._hideTimeout = null;
+    }
+    this.removeEventListener('click', this._handleClick);
+  }
+
+  hide() {
+    if (!this._isVisible) return;
+    this._isVisible = false;
+
+    if (this._hideTimeout) {
+      clearTimeout(this._hideTimeout);
+      this._hideTimeout = null;
+    }
+
+    this.classList.remove('visible');
+    this.classList.add('hiding');
+
+    this.dispatchEvent(new CustomEvent('slide-notification-hidden', {
+      bubbles: true,
+      composed: true
+    }));
+
+    // Remove from DOM if created programmatically
+    if (this._removeOnHide) {
+      setTimeout(() => this.remove(), 600);
+    }
+  }
+
+  show() {
+    this._showNotification();
+  }
+
+  _getBackgroundColor() {
+    if (this.backgroundColor) return this.backgroundColor;
+    return DEFAULT_COLORS[this.type] || DEFAULT_COLORS.info;
+  }
+
+  _getTextColor() {
+    return this.type === 'warning' ? '#212529' : 'white';
+  }
+
+  _getTextShadow() {
+    return this.type === 'warning'
+      ? '1px 1px 2px rgba(0, 0, 0, 0.3)'
+      : '1px 1px 2px rgba(0, 0, 0, 0.5)';
+  }
+
+  render() {
+    const icon = ICONS[this.type] || ICONS.info;
+    const bgColor = this._getBackgroundColor();
+    const textColor = this._getTextColor();
+    const textShadow = this._getTextShadow();
+
+    this.style.setProperty('--_bg', bgColor);
+    this.style.setProperty('--_color', textColor);
+    this.style.setProperty('--_text-shadow', textShadow);
+
+    return html`
+      ${this.title ? html`<div class="title">${this.title}</div>` : ''}
+      <div class="notification-content">
+        <span class="icon">${icon}</span>
+        <div class="message">${unsafeHTML(this.message)}</div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('slide-notification', SlideNotification);
+
+/**
+ * Helper function to show a slide notification
+ * @param {Object} options - Notification options
+ * @param {string} options.title - Notification title
+ * @param {string} options.message - Notification message (supports HTML)
+ * @param {number} options.timetohide - Time in ms before auto-hide (default: 3000, 0 = persistent)
+ * @param {string} options.type - Type: 'info' | 'success' | 'warning' | 'error'
+ * @param {string} options.backgroundColor - Custom background color
+ * @param {boolean} options.persistent - If true, stays until clicked
+ * @returns {SlideNotification} The created notification element
+ */
+export function showSlideNotification(options = {}) {
+  const notification = document.createElement('slide-notification');
+  notification.title = options.title || '';
+  notification.message = options.message || 'Notification';
+  notification.timetohide = options.timetohide ?? 3000;
+  notification.type = options.type || 'info';
+  notification.persistent = options.persistent || false;
+  if (options.backgroundColor) {
+    notification.backgroundColor = options.backgroundColor;
+  }
+
+  // Mark as programmatically created so it auto-shows and auto-removes
+  notification._createdProgrammatically = true;
+  notification._removeOnHide = true;
+  document.body.appendChild(notification);
+  return notification;
+}

package/src/slide-notification.styles.js

@@ -0,0 +1,67 @@
+import { css } from 'lit';
+
+export const slideNotificationStyles = css`
+  :host {
+    --_width: var(--slide-notification-width, 300px);
+    --_bg: var(--slide-notification-bg, #17a2b8);
+    --_color: var(--slide-notification-color, white);
+    --_text-shadow: var(--slide-notification-text-shadow, 1px 1px 2px rgba(0, 0, 0, 0.5));
+
+    position: fixed;
+    bottom: var(--slide-notification-bottom, 20px);
+    right: calc(-20px - var(--_width));
+    width: var(--_width);
+    min-height: var(--slide-notification-min-height, 80px);
+    background: var(--_bg);
+    color: var(--_color);
+    border-radius: var(--slide-notification-radius, 8px);
+    border-left: 4px solid rgba(255, 255, 255, 0.3);
+    padding: var(--slide-notification-padding, 1.5rem);
+    box-shadow: var(--slide-notification-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
+    font-size: 1rem;
+    font-weight: 500;
+    opacity: 0;
+    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+    transform: translateX(0);
+    z-index: var(--slide-notification-z-index, 10000);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  :host(.visible) {
+    opacity: 1;
+    transform: translateX(calc(-1 * var(--_width) - 40px));
+  }
+
+  :host(.hiding) {
+    transform: translateX(calc(var(--_width) + 40px));
+  }
+
+  :host([persistent]) {
+    cursor: pointer;
+  }
+
+  .title {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+    text-shadow: var(--_text-shadow);
+  }
+
+  .notification-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .message {
+    font-weight: 500;
+    text-shadow: var(--_text-shadow);
+  }
+
+  .icon {
+    font-size: 1.2em;
+    flex-shrink: 0;
+  }
+`;