snice 1.14.3 → 2.1.0

package/components/alert/snice-alert.ts

@@ -0,0 +1,141 @@
+import { element, property, watch, query, on, dispatch, part } from 'snice';
+import css from './snice-alert.css?inline';
+import type { AlertVariant, AlertSize, SniceAlertElement } from './snice-alert.types';
+
+@element('snice-alert')
+export class SniceAlert extends HTMLElement implements SniceAlertElement {
+  @property({ reflect: true })
+  variant: AlertVariant = 'info';
+
+  @property({ reflect: true })
+  size: AlertSize = 'medium';
+
+  @property({ reflect: true })
+  title = '';
+
+  @property({ type: Boolean, reflect: true })
+  dismissible = false;
+
+  @property({ reflect: true })
+  icon = '';
+
+  @query('.alert')
+  alertElement?: HTMLElement;
+
+  private isHidden = false;
+
+  html() {
+    return /*html*/`
+      <div class="alert ${this.isHidden ? 'alert--hidden' : ''}" role="alert" aria-live="polite">
+        <div part="icon-section"></div>
+        <div class="alert-content">
+          <div part="title-section"></div>
+          <div part="description-section"></div>
+        </div>
+        <div part="dismiss-section"></div>
+      </div>
+    `;
+  }
+
+  @part('icon-section')
+  renderIconSection() {
+    const hasIcon = this.icon || this.shouldShowDefaultIcon();
+    return hasIcon ? /*html*/`
+      <div class="alert-icon ${!this.icon ? 'alert-icon--default' : ''}">
+        ${this.icon || ''}
+      </div>
+    ` : '';
+  }
+
+  @watch('title')
+  @part('title-section')
+  renderTitleSection() {
+    return this.title ? /*html*/`
+      <div class="alert-title">${this.title}</div>
+    ` : '';
+  }
+
+  @part('description-section')
+  renderDescriptionSection() {
+    return /*html*/`
+      <div class="alert-description">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  @watch('dismissible')
+  @part('dismiss-section')
+  renderDismissSection() {
+    return this.dismissible ? /*html*/`
+      <button class="alert-dismiss" type="button" aria-label="Dismiss alert">
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/>
+        </svg>
+      </button>
+    ` : '';
+  }
+
+  css() {
+    return css;
+  }
+
+  private shouldShowDefaultIcon(): boolean {
+    // Show default icons for variants unless explicitly disabled
+    return this.icon !== 'none';
+  }
+
+
+  @on('click', '.alert-dismiss')
+  @dispatch('alert-dismiss')
+  handleDismiss() {
+    this.hide();
+    return {
+      variant: this.variant,
+      title: this.title
+    };
+  }
+
+  @on('animationend', '.alert')
+  handleAnimationEnd(event: AnimationEvent) {
+    if (event.animationName === 'slideOut') {
+      this.isHidden = true;
+      if (this.alertElement) {
+        this.alertElement.classList.add('alert--hidden');
+        this.alertElement.classList.remove('alert--hiding');
+      }
+      this.dispatchAlertHidden();
+    }
+  }
+
+  @dispatch('alert-hidden')
+  private dispatchAlertHidden() {
+    return {
+      variant: this.variant,
+      title: this.title
+    };
+  }
+
+  @dispatch('alert-shown')
+  private dispatchAlertShown() {
+    return {
+      variant: this.variant,
+      title: this.title
+    };
+  }
+
+  show() {
+    this.isHidden = false;
+    if (this.alertElement) {
+      this.alertElement.classList.remove('alert--hidden', 'alert--hiding');
+    }
+    this.dispatchAlertShown();
+  }
+
+  hide() {
+    if (this.alertElement && !this.isHidden) {
+      this.alertElement.classList.add('alert--hiding');
+    }
+  }
+
+}

package/components/alert/snice-alert.types.ts

@@ -0,0 +1,12 @@
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export type AlertSize = 'small' | 'medium' | 'large';
+
+export interface SniceAlertElement extends HTMLElement {
+  variant: AlertVariant;
+  size: AlertSize;
+  title: string;
+  dismissible: boolean;
+  icon: string;
+  show(): void;
+  hide(): void;
+}