@mcp-b/web-components 0.2.0

package/dist/toast-item-IS8IFUEg.js

@@ -0,0 +1,372 @@
+import { Localize } from "./utilities/localize.js";
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./progress-DzVk260j.js";
+import { css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/toast-item/toast-item.styles.ts
+var toast_item_styles_default = css`
+  :host {
+    --accent-line-width: 0.33em;
+
+    display: flex;
+    position: relative;
+    flex-wrap: nowrap;
+    width: 100%;
+    padding-inline-start: calc(1.5em + var(--accent-line-width));
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-canvas);
+    box-shadow: var(--sigvelo-elevation-raised);
+    color: var(--sigvelo-color-text);
+    line-height: 1.25;
+    cursor: default;
+    pointer-events: all;
+    user-select: none;
+  }
+
+  :host([color="neutral"]) {
+    --accent-color: var(--sigvelo-color-neutral-bg);
+  }
+
+  :host([color="primary"]) {
+    --accent-color: var(--sigvelo-color-primary-bg);
+  }
+
+  :host([color="success"]) {
+    --accent-color: var(--sigvelo-color-success-bg);
+  }
+
+  :host([color="destructive"]) {
+    --accent-color: var(--sigvelo-color-danger-bg);
+  }
+
+  /** Accent line */
+  :host::after {
+    position: absolute;
+    --inset: var(--accent-line-width);
+    top: var(--inset);
+    bottom: var(--inset);
+    left: var(--accent-line-width);
+    width: var(--accent-line-width);
+    border-radius: var(--sigvelo-radius-full);
+    background-color: var(--accent-color);
+    content: "";
+  }
+
+  &:has(#close-button) {
+    padding-inline-end: 0;
+  }
+
+  #icon {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    margin-inline-end: 1em;
+    color: var(--accent-color);
+
+    ::slotted(sigvelo-icon) {
+      font-size: 2em;
+      stroke-width: 1.25px;
+    }
+  }
+
+  #content {
+    flex: 1 1 auto;
+    padding-block: 1.5em;
+
+    &:last-child {
+      padding-inline-end: 1em;
+    }
+  }
+
+  #close-button {
+    display: flex;
+    appearance: none;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    padding-inline: 1.25em;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+
+    &:active {
+      translate: 0 var(--sigvelo-motion-distance-xs);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+
+    sigvelo-progress {
+      --diameter: 2.25em;
+      --track-size: 0.125em;
+      --indicator-color: var(--accent-color);
+      font-size: inherit;
+    }
+
+    sigvelo-icon {
+      font-size: 1.25em;
+    }
+  }
+`;
+//#endregion
+//#region src/components/toast-item/toast-item.ts
+/**
+* <sigvelo-toast-item>
+*
+* @summary Notifications displayed by the toast component.
+* @tag sigvelo-toast-item
+* @documentation https://design-system.sigvelo.com/docs/components/toast-item
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+* @dependency sigvelo-progress
+*
+* @slot - Content to show in the toast item.
+* @slot icon - Content to show as a visual. Usually an icon, image, avatar, etc.
+*
+* @event sigvelo-before-close - Emitted when the toast item is dismissed.
+* @event sigvelo-close - Emitted after the toast has been dismissed and the hide animation has completed.
+*
+* @csspart icon
+* @csspart content
+* @csspart close-button - The close button, a `<button>` element.
+* @csspart progress - The progress ring, a `<sigvelo-progress>` element.
+* @csspart progress__track - The progress ring's exported `track` part.
+* @csspart progress__indicator - The progress ring's exported `indicator` part.
+* @csspart progress__content - The progress ring's exported `content` part.
+* @csspart close-icon - The close icon, a `<sigvelo-icon>` element.
+* @csspart close-icon__svg - The close icons exported `svg` part.
+*
+* @cssproperty [--accent-line-width=0.33em] - The width of the notification's accent line.
+* @cssproperty --progress - A readonly value that goes from 100% to 0%, representing the progress remaining until the
+*  notification closes. Useful for creating custom content with visual indicators of the notification's progress.
+*
+* @example Default
+* You can create toast items on the fly using the toast element's `create()` method. Alternatively, you can create them declaratively by wrapping them in a `<template>` and calling `createFromTemplate()`.
+*
+* ```html
+* <sigvelo-toast-item color="primary" duration="0">
+*   <sigvelo-avatar slot="icon" label="Meowy McGee's avatar" image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*   <strong>Meowy McGee</strong><br>
+*   <small style="color: var(--sigvelo-color-text-muted);">has sent you a message</small>
+* </sigvelo-toast-item>
+* ```
+*
+* **Note:** For documentation purposes, this page omits the `<template>` tag, allowing the toast item to appear inline so you can see the result of each example.
+*
+* @example Variants
+* Set the `color` attribute to `default`, `primary`, `success`, or `destructive` to change the button's color.
+*
+* ```html
+* <sigvelo-toast-item color="neutral" duration="0">
+*   <sigvelo-icon slot="icon" name="settings"></sigvelo-icon>
+*   Your changes have been saved
+* </sigvelo-toast-item>
+*
+* <sigvelo-toast-item color="primary" duration="0">
+*   <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
+*   The cats have requested more food
+* </sigvelo-toast-item>
+*
+* <sigvelo-toast-item color="success" duration="0">
+*   <sigvelo-icon slot="icon" name="send"></sigvelo-icon>
+*   Your message has been sent
+* </sigvelo-toast-item>
+*
+* <sigvelo-toast-item color="destructive" duration="0">
+*   <sigvelo-icon slot="icon" name="alert-triangle"></sigvelo-icon>
+*   The litter box has been emptied
+* </sigvelo-toast-item>
+* ```
+*
+* @example Adding icons
+* Use the `icon` slot to add a visual to the toast item. Icons, images, and avatars work well here.
+*
+* ```html
+* <sigvelo-toast-item duration="0">
+*   <sigvelo-avatar slot="icon" label="Chill kitty" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*   <strong>Chill Kitty</strong><br>
+*   <small style="color: var(--sigvelo-color-text-muted);">has invited you to collaborate on a project</small>
+* </sigvelo-toast-item>
+* ```
+*
+* @example Changing the duration
+* By default, toast items dismiss themselves after five seconds. Set the `duration` property to the number of milliseconds the item should wait before dismissing, or `0` to wait for the user to dismiss it.
+*
+* ```html
+* <sigvelo-toast-item duration="10000">
+*   This notification will stay open for 10 seconds.
+* </sigvelo-toast-item>
+*
+* <sigvelo-toast-item duration="0">
+*   This notification will stay open until the user closes it
+* </sigvelo-toast-item>
+* ```
+*
+* @example Hiding the close button
+* Use the `without-close` attribute to hide the close button. This is only recommended when a duration is set or when you're using custom buttons to dismiss the notification.
+*
+* ```html
+* <sigvelo-toast-item without-close duration="0">
+*   This notification does not have a close button.
+* </sigvelo-toast-item>
+* ```
+*
+* **Warning:** Do not use this as a way to force the notification to stay open. You should provide a custom close button when you use this option. Remember that users can also press <sigvelo-hotkey keys="$escape"></sigvelo-hotkey> to close a notification.
+*/
+var SigveloToastItem = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.animationFrame = null;
+		this.isPaused = false;
+		this.localize = new Localize(this);
+		this.startTime = null;
+		this.timeLeft = 100;
+		this.color = "neutral";
+		this.duration = 5e3;
+		this.withoutClose = false;
+		this.tick = async () => {
+			if (!this.startTime || this.isPaused) return;
+			const elapsed = performance.now() - this.startTime;
+			const progress = Math.min(elapsed / this.duration, 1);
+			this.timeLeft = 100 * (1 - progress);
+			if (progress < 1) this.animationFrame = requestAnimationFrame(this.tick);
+			else {
+				await this.waitForStackTransition();
+				this.remove();
+			}
+		};
+		this.handlePointerEnter = (event) => {
+			if (event.pointerType === "mouse" || event.pointerType === "pen") {
+				this.isPaused = true;
+				this.timeLeft = 100;
+				this.stopTimer();
+			}
+		};
+		this.handlePointerLeave = () => {
+			this.isPaused = false;
+			this.startTimer();
+		};
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, toast_item_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("pointerenter", this.handlePointerEnter);
+		this.addEventListener("pointerleave", this.handlePointerLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.stopTimer();
+		this.removeEventListener("pointerenter", this.handlePointerEnter);
+		this.removeEventListener("pointerleave", this.handlePointerLeave);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("timeLeft")) this.style.setProperty("--progress", `${this.timeLeft.toFixed(2)}%`);
+	}
+	/**
+	* @internal Starts the auto-dismiss timer. If no duration is specified, this method has no effect.
+	*/
+	startTimer() {
+		if (this.duration > 0 && Number.isFinite(this.duration)) {
+			this.startTime = performance.now();
+			this.timeLeft = 100;
+			this.tick();
+		}
+	}
+	/**
+	* @internal Stops the auto-dismiss timer.
+	*/
+	stopTimer() {
+		if (this.animationFrame !== null) {
+			cancelAnimationFrame(this.animationFrame);
+			this.animationFrame = null;
+		}
+	}
+	/** Close it! */
+	async handleCloseClick(event) {
+		event.stopPropagation();
+		this.stopTimer();
+		await this.waitForStackTransition();
+		this.remove();
+	}
+	/** Waits for the toast stack's transition group to finish transitioning and then resolves. */
+	async waitForStackTransition() {
+		const stack = this.closest("sigvelo-toast")?.stack;
+		if (stack) await stack.transitionComplete();
+	}
+	render() {
+		return html`
+      ${this.whenSlotted("icon", html` <div id="icon" part="icon"><slot name="icon"></slot></div> `)}
+
+      <div id="content" part="content"><slot></slot></div>
+
+      ${!this.withoutClose ? html`<button
+            id="close-button"
+            part="close-button"
+            type="button"
+            aria-label=${this.localize.term("close")}
+            @click=${this.handleCloseClick}
+          >
+            ${this.duration > 0 && Number.isFinite(this.duration) ? html`
+                  <sigvelo-progress
+                    part="progress"
+                    exportparts="
+                    track:progress__track,
+                    indicator:progress__indicator,
+                    content:progress__content
+                  "
+                    variant="ring"
+                    value="${this.timeLeft}"
+                  >
+                    <sigvelo-icon
+                      part="close-icon"
+                      exportparts="svg:close-icon__svg"
+                      library="system"
+                      name="x"
+                    ></sigvelo-icon>
+                  </sigvelo-progress>
+                ` : html`
+                  <sigvelo-icon
+                    part="close-icon"
+                    exportparts="svg:close-icon__svg"
+                    library="system"
+                    name="x"
+                  ></sigvelo-icon>
+                `}
+          </button>` : ""}
+    `;
+	}
+};
+__decorate([state()], SigveloToastItem.prototype, "timeLeft", void 0);
+__decorate([property({ reflect: true })], SigveloToastItem.prototype, "color", void 0);
+__decorate([property({ type: Number })], SigveloToastItem.prototype, "duration", void 0);
+__decorate([property({
+	attribute: "without-close",
+	type: Boolean,
+	reflect: true
+})], SigveloToastItem.prototype, "withoutClose", void 0);
+customElements.define("sigvelo-toast-item", SigveloToastItem);
+//#endregion
+export { SigveloToastItem as t };