@reliability-design/web 1.0.2

package/dist/components/rel-snackbar/rel-snackbar.ts

@@ -0,0 +1,212 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+export type SnackbarLines = "single" | "double";
+
+@customElement("rel-snackbar")
+export class RelSnackbar extends LitElement {
+  @property({ type: String }) message: string = "This is a snackbar message";
+
+  @property({ type: String }) action?: string;
+
+  @property({ type: Boolean }) longerAction: boolean = false;
+
+  @property({ type: Boolean }) iconClose: boolean = true;
+
+  @property({ type: String }) lines: SnackbarLines = "single";
+
+  @property({ type: Number }) duration: number = 4000;
+
+  @state() private visible: boolean = true;
+
+  private timeout: number | null = null;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .snackbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      min-width: 280px;
+      max-width: 500px;
+      margin: 0;
+      padding: 12px 16px;
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      background-color: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+      font-family: var(--rel-fontFamilies-primary);
+      box-shadow: var(--rel-shadows-shadow-300);
+      animation: slide-up 0.3s ease-out;
+    }
+
+    .snackbar.two-line {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .snackbar.hidden {
+      display: none;
+    }
+
+    .snackbar-message {
+      font-size: var(--rel-fontSizes-sm);
+      line-height: var(--rel-lineHeights-lineheight-200);
+      margin-right: 12px;
+      flex: 1;
+    }
+
+    .snackbar.two-line .snackbar-message {
+      margin-right: 0;
+      margin-bottom: 8px;
+      flex: none;
+    }
+
+    .snackbar-actions {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+      flex-shrink: 0;
+      align-self: center;
+    }
+
+    .snackbar.two-line .snackbar-actions {
+      align-self: flex-end;
+    }
+
+    .snackbar-action {
+      background: none;
+      border: none;
+      color: var(--rel-colors-green-secondary);
+      font-weight: var(--rel-fontWeights-semibold);
+      font-size: var(--rel-fontSizes-sm);
+      font-family: var(--rel-fontFamilies-primary);
+      cursor: pointer;
+      padding: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .snackbar-action:hover {
+      opacity: 0.8;
+    }
+
+    .snackbar-action:active {
+      opacity: 0.6;
+    }
+
+    .snackbar-close {
+      background: none;
+      border: none;
+      color: var(--rel-colors-white);
+      cursor: pointer;
+      font-size: 16px;
+      padding: 0;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.2s ease;
+    }
+
+    .snackbar-close:hover {
+      opacity: 0.8;
+    }
+
+    .snackbar-close:active {
+      opacity: 0.6;
+    }
+
+    @keyframes slide-up {
+      from {
+        transform: translateY(50px);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAutoDismiss();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.clearTimeout();
+  }
+
+  private setAutoDismiss() {
+    if (this.duration > 0) {
+      this.clearTimeout();
+      const delay = this.longerAction ? this.duration * 2 : this.duration;
+      this.timeout = window.setTimeout(() => this.dismiss(), delay);
+    }
+  }
+
+  private clearTimeout() {
+    if (this.timeout !== null) {
+      window.clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+  }
+
+  private onActionClick() {
+    this.dispatchEvent(
+      new CustomEvent("actionClick", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+    this.dismiss();
+  }
+
+  private dismiss() {
+    this.visible = false;
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    const snackbarClasses = [
+      "snackbar",
+      this.lines === "double" ? "two-line" : "",
+      !this.visible ? "hidden" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return html`
+      <div class="${snackbarClasses}">
+        <div class="snackbar-message">${this.message}</div>
+
+        <div class="snackbar-actions">
+          ${this.action
+            ? html`
+                <button class="snackbar-action" @click="${this.onActionClick}">
+                  ${this.action}
+                </button>
+              `
+            : ""}
+          ${this.iconClose
+            ? html`
+                <button class="snackbar-close" @click="${this.dismiss}">
+                  ✖
+                </button>
+              `
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+}